test(e2e): add signup flow tests and cypress configuration

Author: AmrSamy59

app/components/auth/register/OtpForm.vue

@@ -28,7 +28,11 @@ const [_otp, otpAttrs] = defineField('otp');
 </script>
 
 <template>
-  <form class="flex h-full flex-col justify-between" @submit.prevent="onSubmit">
+  <form
+    class="flex h-full flex-col justify-between"
+    data-cy="signup-otp-form"
+    @submit.prevent="onSubmit"
+  >
     <UiDialogHeader class="py-6">
       <UiDialogTitle class="text-4xl font-bold">{{ $t('register.otp.title') }}</UiDialogTitle>
       <UiDialogDescription>
@@ -44,12 +48,14 @@ const [_otp, otpAttrs] = defineField('otp');
         :placeholder="$t('register.otp.label')"
         inputmode="numeric"
         type="text"
+        data-cy="signup-otp"
         pattern="[0-9]*"
         name="otp"
         v-bind="otpAttrs"
       />
       <Button
         type="button"
+        data-cy="signup-resend-otp-button"
         variant="link"
         size="link"
         class="w-fit"
@@ -64,6 +70,7 @@ const [_otp, otpAttrs] = defineField('otp');
         :disabled="Object.entries(errors).length > 0 || isSubmitting"
         size="xl"
         class="w-full"
+        data-cy="signup-next-button"
         >{{ $t('ui.next') }}</Button
       >
     </UiDialogFooter>

app/components/auth/register/PasswordForm.vue

@@ -28,7 +28,11 @@ const [_password, passwordAttrs] = defineField('password');
 </script>
 
 <template>
-  <form class="flex h-full flex-col justify-between" @submit.prevent="onSubmit">
+  <form
+    class="flex h-full flex-col justify-between"
+    data-cy="signup-password-form"
+    @submit.prevent="onSubmit"
+  >
     <UiDialogHeader class="py-6">
       <UiDialogTitle class="text-4xl font-bold">{{ $t('register.password.title') }}</UiDialogTitle>
       <UiDialogDescription>
@@ -39,6 +43,7 @@ const [_password, passwordAttrs] = defineField('password');
       <FieldInput
         :placeholder="$t('register.password.label')"
         type="password"
+        data-cy="signup-password"
         name="password"
         v-bind="passwordAttrs"
       />
@@ -52,6 +57,7 @@ const [_password, passwordAttrs] = defineField('password');
         :disabled="Object.entries(errors).length > 0 || isSubmitting"
         size="xl"
         class="w-full"
+        data-cy="signup-next-button"
         >{{ $t('ui.next') }}</Button
       >
     </UiDialogFooter>

app/components/auth/register/RegisterationInfoForm.vue

@@ -91,15 +91,31 @@ watch(
 </script>
 
 <template>
-  <form class="flex h-full flex-col justify-between" @submit.prevent="onSubmit">
+  <form
+    class="flex h-full flex-col justify-between"
+    data-cy="signup-info-form"
+    @submit.prevent="onSubmit"
+  >
     <UiDialogHeader class="py-6">
       <UiDialogTitle class="text-4xl font-bold">{{
         $t('register.register-info.title')
       }}</UiDialogTitle>
     </UiDialogHeader>
     <div class="flex flex-col gap-4">
-      <FieldInput placeholder="Name" type="text" name="name" v-bind="nameAttrs" />
-      <FieldInput placeholder="Email" type="text" name="email" v-bind="emailAttrs" />
+      <FieldInput
+        placeholder="Name"
+        type="text"
+        data-cy="signup-name"
+        name="name"
+        v-bind="nameAttrs"
+      />
+      <FieldInput
+        placeholder="Email"
+        type="text"
+        data-cy="signup-email"
+        name="email"
+        v-bind="emailAttrs"
+      />
       <div>
         <h2 class="font-semibold">{{ $t('register.register-info.date-of-birth.title') }}</h2>
         <p class="text-muted-foreground mb-4 text-sm">
@@ -112,26 +128,30 @@ watch(
             :options="dateSelect.months.value"
             placeholder="Month"
             name="birth-month"
+            data-cy="signup-dob-month"
           />
           <Select
             v-model="dateSelect.selectedDay.value"
             class="flex-1/4"
             :options="dateSelect.days.value"
             placeholder="Day"
             name="birth-day"
+            data-cy="signup-dob-day"
           />
           <Select
             v-model="dateSelect.selectedYear.value"
             class="flex-1/4"
             :options="dateSelect.years.value"
             placeholder="Year"
             name="birth-year"
+            data-cy="signup-dob-year"
           />
         </div>
         <p
           v-if="errors.birthDate"
           data-test-id="birth-date-error"
           class="text-destructive ps-1 text-xs"
+          data-cy="signup-dob-error"
         >
           {{ errors.birthDate }}
         </p>
@@ -143,6 +163,7 @@ watch(
         :disabled="Object.entries(errors).length > 0 || isSubmitting"
         size="xl"
         class="w-full"
+        data-cy="signup-next-button"
         >{{ $t('ui.next') }}</Button
       >
     </UiDialogFooter>

app/pages/index.vue

@@ -38,9 +38,14 @@ definePageMeta({
               <span class="uppercase">{{ $t('root.auth.separator') }}</span>
               <div class="w-full border-b-1" />
             </div>
-            <Button id="signup" variant="default" class="w-75" @click="registerStore.openDialog">{{
-              $t('root.auth.signup')
-            }}</Button>
+            <Button
+              id="signup"
+              data-cy="signup-start-button"
+              variant="default"
+              class="w-75"
+              @click="registerStore.openDialog"
+              >{{ $t('root.auth.signup') }}</Button
+            >
             <p class="text-muted-foreground mt-4 max-w-75 text-xs">
               {{ $t('root.auth.signup-info') }}
             </p>

cypress.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:3000',
+  },
+});