test: integrate cypress

src/components/buttons/sso-login-button.tsx

@@ -5,10 +5,11 @@ import { faOpenid } from '@fortawesome/free-brands-svg-icons';
 export default function SSOLogin({
   provider,
   providerDisplayName,
+  ...props
 }: {
   provider: string;
   providerDisplayName: string;
-}) {
+} & React.HTMLAttributes<HTMLButtonElement>) {
   return (
     <form
       className='flex flex-col items-center w-full'
@@ -22,6 +23,7 @@ export default function SSOLogin({
         type='submit'
         variant='secondary'
         icon={faOpenid}
+        {...props}
       >
         Login with {providerDisplayName}
       </IconButton>

src/components/forms/login-form.tsx

@@ -48,13 +48,18 @@ function LoginFormElement({
   });
 
   return (
-    <form className='flex flex-col gap-5 w-full' onSubmit={onSubmit}>
+    <form
+      className='flex flex-col gap-5 w-full'
+      onSubmit={onSubmit}
+      data-cy='login-form'
+    >
       <LabeledInput
         type='text'
         label='E-Mail or Username'
         placeholder='What you are known as'
         error={formState.errors.email?.message}
         {...register('email')}
+        data-cy='email-input'
       />
       <LabeledInput
         type='password'
@@ -62,9 +67,10 @@ function LoginFormElement({
         placeholder="Let's hope you remember it"
         error={formState.errors.password?.message}
         {...register('password')}
+        data-cy='password-input'
       />
       <div className='grid grid-rows-2 gap-2'>
-        <Button type='submit' variant='primary'>
+        <Button type='submit' variant='primary' data-cy='login-button'>
           Login
         </Button>
         <Button
@@ -74,6 +80,7 @@ function LoginFormElement({
             formRef?.current?.reset();
             setIsSignUp((v) => !v);
           }}
+          data-cy='register-switch'
         >
           Sign Up
         </Button>
@@ -129,6 +136,7 @@ function RegisterFormElement({
       ref={formRef}
       className='flex flex-col gap-5 w-full'
       onSubmit={onSubmit}
+      data-cy='register-form'
     >
       <LabeledInput
         type='text'
@@ -137,6 +145,7 @@ function RegisterFormElement({
         autocomplete='given-name'
         error={formState.errors.firstName?.message}
         {...register('firstName')}
+        data-cy='first-name-input'
       />
       <LabeledInput
         type='text'
@@ -145,6 +154,7 @@ function RegisterFormElement({
         autocomplete='family-name'
         error={formState.errors.lastName?.message}
         {...register('lastName')}
+        data-cy='last-name-input'
       />
       <LabeledInput
         type='email'
@@ -153,6 +163,7 @@ function RegisterFormElement({
         autocomplete='email'
         error={formState.errors.email?.message}
         {...register('email')}
+        data-cy='email-input'
       />
       <LabeledInput
         type='text'
@@ -161,6 +172,7 @@ function RegisterFormElement({
         autocomplete='username'
         error={formState.errors.username?.message}
         {...register('username')}
+        data-cy='username-input'
       />
       <LabeledInput
         type='password'
@@ -169,6 +181,7 @@ function RegisterFormElement({
         autocomplete='new-password'
         error={formState.errors.password?.message}
         {...register('password')}
+        data-cy='password-input'
       />
       <LabeledInput
         type='password'
@@ -177,9 +190,10 @@ function RegisterFormElement({
         autocomplete='new-password'
         error={formState.errors.confirmPassword?.message}
         {...register('confirmPassword')}
+        data-cy='confirm-password-input'
       />
       <div className='grid grid-rows-2 gap-2'>
-        <Button type='submit' variant='primary'>
+        <Button type='submit' variant='primary' data-cy='register-button'>
           Sign Up
         </Button>
         <Button

src/components/misc/theme-picker.cy.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { ThemePicker } from '@/components/misc/theme-picker';
+import { ThemeProvider } from '@/components/wrappers/theme-provider';
+
+describe('<ThemePicker />', () => {
+  it('renders', () => {
+    cy.mount(<ThemePicker />);
+  });
+
+  it('toggle open and close', () => {
+    cy.mount(<ThemePicker />);
+    cy.getBySel('theme-picker').click();
+    cy.getBySel('theme-picker-content').should('exist');
+    cy.get('html').click();
+    cy.getBySel('theme-picker-content').should('not.exist');
+  });
+
+  it('enable dark mode', () => {
+    cy.mount(
+      <ThemeProvider>
+        <ThemePicker />
+      </ThemeProvider>,
+    );
+
+    cy.getBySel('theme-picker').click();
+    cy.getBySel('dark-theme').click();
+    cy.get('html').should('have.attr', 'data-theme', 'dark');
+  });
+
+  it('enable light mode', () => {
+    cy.mount(
+      <ThemeProvider>
+        <ThemePicker />
+      </ThemeProvider>,
+    );
+
+    cy.getBySel('theme-picker').click();
+    cy.getBySel('light-theme').click();
+    cy.get('html').should('have.attr', 'data-theme', 'light');
+  });
+});

src/components/misc/theme-picker.tsx

@@ -18,20 +18,26 @@ export function ThemePicker() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant='outline_primary' size='icon'>
+        <Button variant='outline_primary' size='icon' data-cy='theme-picker'>
           <Sun className='h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0' />
           <Moon className='absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100' />
           <span className='sr-only'>Toggle theme</span>
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align='end'>
-        <DropdownMenuItem onClick={() => setTheme('light')}>
+      <DropdownMenuContent align='end' data-cy='theme-picker-content'>
+        <DropdownMenuItem
+          onClick={() => setTheme('light')}
+          data-cy='light-theme'
+        >
           Light
         </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme('dark')}>
+        <DropdownMenuItem onClick={() => setTheme('dark')} data-cy='dark-theme'>
           Dark
         </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme('system')}>
+        <DropdownMenuItem
+          onClick={() => setTheme('system')}
+          data-cy='system-theme'
+        >
           System
         </DropdownMenuItem>
       </DropdownMenuContent>