e2e: register tests

cypress/e2e/login.feature

@@ -10,11 +10,10 @@ Feature: Login
         Given I navigate to the "Home" page
         Then I open the menu drawer
         When I click to login button
-        Then I should see the text "Invalid email address."
         Then I should see the text "Password is required."
 
     Scenario: User enters wrong email format and tries to submit
         Given I navigate to the "Home" page
         Then I open the menu drawer
         When I click to login button
-#        Then I should see the text "Wrong email address."
+        Then I should see the text "Invalid email address."

cypress/e2e/register.feature

@@ -1,13 +1,11 @@
 Feature: Register
     Scenario: User enters valid details to create a new account
-#        Given the user has the register form modal open
-#        And the user enters all details
-#        When the user clicks on the register button
-#        Then application creates a new user account
-#        And the login modal opens on top of the register for the user to login
+        Given the user is on the register page
+        When the user enters all form required details
+        Then user submits the register form
+        Then I should see the text "Get started and login to your account"
 
     Scenario: User enters incorrect details or missing mandatory fields
-#        Given the user has the register form modal open
-#        And the user enters some fields
-#        When the user clicks on the register button
-#        Then the form displays the required errors
+        Given the user is on the register page
+        Then user submits the register form
+        Then the form displays the required errors

cypress/support/step_definitions/common.ts

@@ -1,17 +1,17 @@
 import { Then, When, Given, Before } from "@badeball/cypress-cucumber-preprocessor";
 import { clickOnText, findByText } from "./rtlDescriptors";
-import { homePageDescriptor } from "../../e2e/pageDescriptors";
 
 const pages = {
-  Home: homePageDescriptor,
+  Home: "/",
+  Register: "/register",
 };
 
 Before(() => {
   cy.ignoreThirdPartyRequests();
 });
 
 Given("I navigate to the {string} page", (pageName: string) => {
-  cy.visit(pages[pageName].url);
+  cy.visit(pages[pageName]);
 });
 
 When("I go to url {string}", (url: string) => {

cypress/support/step_definitions/login.ts

@@ -1,10 +1,9 @@
 import { When } from "@badeball/cypress-cucumber-preprocessor";
 import { clickOnText } from "./rtlDescriptors";
-import { homePageDescriptor } from "../../e2e/pageDescriptors";
 
 When("I enter user email and password", () => {
-  homePageDescriptor.emailLoginInput().type("[email protected]");
-  homePageDescriptor.passwordLoginInput().type("Password@123");
+  cy.get("input[name='email']").type("[email protected]");
+  cy.get("input[name='password']").type("Password@123");
 });
 
 When("I click to login button", () => {

cypress/support/step_definitions/navigation.ts

@@ -1,6 +1,9 @@
-import { Then } from "@badeball/cypress-cucumber-preprocessor";
-import { homePageDescriptor } from "../../e2e/pageDescriptors";
+import { Given, Then } from "@badeball/cypress-cucumber-preprocessor";
+
+Given("the user is on the register page", () => {
+  cy.visit("/register");
+});
 
 Then("I open the menu drawer", () => {
-  homePageDescriptor.menuBtn().click();
+  cy.get("[data-cy='menu-toggle']").click();
 });

cypress/support/step_definitions/register.ts

@@ -0,0 +1,20 @@
+import { When, Then } from "@badeball/cypress-cucumber-preprocessor";
+import { clickOnText, findByText } from "./rtlDescriptors";
+
+When("the user enters all form required details", () => {
+  cy.get("[data-cy='input-register-email']").type("[email protected]");
+  cy.get("[data-cy='input-register-password']").type("Password@123");
+  cy.get("[data-cy='input-passwordConfirm']").type("Password@123");
+  cy.get("[data-cy='input-firstName']").type("Richard");
+});
+
+Then("user submits the register form", () => {
+  clickOnText("Register");
+});
+
+Then("the form displays the required errors", () => {
+  findByText("Enter a valid email.");
+  findByText("Enter a password.");
+  findByText("Enter a confirm password.");
+  findByText("Enter a first name.");
+});

src/components/DatePicker/DatePicker.tsx

@@ -24,6 +24,7 @@ export const DatePicker: FC<DatePickerProps> = ({ name, label, error, disabledIn
           {...register(name)}
           label={label}
           value={date ? format(date, "dd MMM yyyy") : ""}
+          data-cy={`date-${name}`}
           error={error}
           disabled={disabledInput}
         />

src/components/Form/FormInput.tsx

@@ -6,9 +6,10 @@ interface FormInputProps extends Pick<InputProps, "size" | "label" | "placeholde
   name: string;
   registerOptions?: RegisterOptions<FieldValues, string>;
   fieldError?: FieldError;
+  dataCy?: string;
 }
 
-export const FormInput = ({ name, registerOptions, fieldError, ...props }: FormInputProps) => {
+export const FormInput = ({ name, registerOptions, fieldError, dataCy, ...props }: FormInputProps) => {
   const {
     register,
     formState: { errors },
@@ -18,7 +19,13 @@ export const FormInput = ({ name, registerOptions, fieldError, ...props }: FormI
 
   return (
     <div className="w-full">
-      <Input {...register(name, registerOptions)} size="lg" error={!!error} {...props} />
+      <Input
+        {...register(name, registerOptions)}
+        size="lg"
+        error={!!error}
+        data-cy={dataCy || `input-${name}`}
+        {...props}
+      />
       {error && <ErrorText text={error} />}
     </div>
   );

src/components/Header/Header.tsx

@@ -87,7 +87,7 @@ export function Header() {
             <Link to="/">
               <img src="/images/planet-earth.svg" width={58} height={54} alt="Planet Earth" className="" />
             </Link>
-            <div className="flex flex-col ">
+            <div className="flex flex-col">
               <Typography variant="h3" color="blue-gray" className="font-medium">
                 Hello {user.firstName || "explorer"}!
               </Typography>

src/components/Register/RegisterForm.tsx

@@ -84,11 +84,23 @@ export function RegisterForm() {
   return (
     <FormProvider {...form}>
       <form onSubmit={handleSubmit(onSubmit)} className="space-y-6 py-4">
-        <FormInput name="email" type="email" label="Email address" placeholder="[email protected]" />
+        <FormInput
+          name="email"
+          type="email"
+          label="Email address"
+          placeholder="[email protected]"
+          dataCy="input-register-email"
+        />
 
         <div>
           <div className="flex flex-col space-y-2 md:flex-row md:space-x-4 md:space-y-0">
-            <FormInput name="password" type="password" label="Password" placeholder="*******" />
+            <FormInput
+              name="password"
+              type="password"
+              label="Password"
+              placeholder="*******"
+              dataCy="input-register-password"
+            />
             <FormInput name="passwordConfirm" type="password" label="Password confirmation" placeholder="*******" />
           </div>
 
@@ -143,7 +155,7 @@ export function RegisterForm() {
         )}
 
         <Button type="submit" fullWidth disabled={isLoadingRegister} loading={isLoadingRegister}>
-          Create
+          Register
         </Button>
       </form>
     </FormProvider>

src/pages/Profile/index.tsx

@@ -116,6 +116,7 @@ export function Component() {
             }
             error={!!errors.country}
             disabled={!isEditing}
+            data-cy='select-country'
           >
             {orderedCountries().map(({ name, flags }: { name: string; flags: { svg: string } }) => (
               <Option key={name} value={name} className="flex items-center gap-2">