Add cypress testing

cypress.config.js

@@ -0,0 +1,9 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});

cypress/e2e/landingPage.cy.js

@@ -0,0 +1,118 @@
+/// <reference types='Cypress' />
+// TODO: Make links dynamic
+beforeEach(() => {
+  cy.visit("http://localhost:8080/");
+});
+
+describe("Section 1: Landing page", () => {
+  // TS101
+  it("should display the logo top left, should redirect user to home page when logo is clicked", () => {
+    // display logo top left
+    cy.get('[data-cy="logo"]')
+      .should("have.css", "top", "0px")
+      .should("have.css", "left", "0px");
+
+    // clicking logo should redirect user to home page
+    cy.visit("http://localhost:8080/test/instructions");
+    cy.get('[data-cy="logo"]').click();
+
+    cy.url().should("equal", "http://localhost:8080/");
+  });
+  // TS101
+  it("should have a language dropdown with the options English, Hindi and Marathi: Verify language change", () => {
+    cy.get(`[data-cy="lang-dropdown"]`).should("have.value", "");
+
+    // open the select
+    cy.get(`[data-cy="lang-dropdown"]`).click();
+
+    // select English, verify change of language
+    cy.get(`[data-cy="en"]`).click();
+    cy.get('[data-cy="title"]').contains("Start Admisssion Test");
+
+    // select Hindin verify change of language
+    cy.get(`[data-cy="hi"]`).click();
+    cy.get('[data-cy="title"]').contains("परीक्षा शुरू करें");
+
+    // select Marathi, change language
+
+    cy.get(`[data-cy="ma"]`).click();
+    cy.get('[data-cy="title"]').contains("प्रवेश परीक्षा सुरू करा");
+  });
+
+  // TS103
+  it("should type in user's first and last names, submit form and verify move to test instructions", () => {
+    cy.fixture("users").then((users) => {
+      const user = users[0];
+
+      cy.get(`[data-cy="firstName-input"]`).type(user.firstName);
+      cy.get(`[data-cy="lastName-input"]`).type(user.lastName);
+      cy.get(`[data-cy="mobileNumber-input"]`).type(user.mobileNumber);
+      cy.get(`[data-cy="submitButton"]`)
+        .click()
+        .url()
+        .should("include", "test/instructions");
+    });
+  });
+
+  // TS103_02
+  it("should type in user's first and last names AND MIDDLE NAME, submit form and verify move to test instructions", () => {
+    cy.fixture("users").then((users) => {
+      const user = users[0];
+
+      cy.get(`[data-cy="firstName-input"]`).type(user.firstName);
+      // Middle NAME
+      cy.get(`[data-cy="middleName-input"]`).type(user.middleName);
+
+      cy.get(`[data-cy="lastName-input"]`).type(user.lastName);
+      cy.get(`[data-cy="mobileNumber-input"]`).type(user.mobileNumber);
+      cy.get(`[data-cy="submitButton"]`)
+        .click()
+        .wait(1000)
+        .url()
+        .should("include", "test/instructions");
+    });
+  });
+
+  // TS105
+  it("should submit button with invalid data, verify notification to user, URL should not change", () => {
+    // get the url before submit button is clicked
+    cy.url().then((urlBeforeSubmit) => {
+      cy.get(`[data-cy=submitButton]`).click();
+
+      // snackbar
+      cy.get('[data-cy="error-bar"]');
+
+      // get the url after submit button is clicked
+      cy.url().then((urlAfterSubmit) => {
+        // assert the URL before and after are the same
+        expect(urlBeforeSubmit).to.equal(urlAfterSubmit);
+      });
+    });
+  });
+
+  // TS105 Submit with invalid phone number
+  it("should submit button with invalid data, verify notification to user, URL should not change", () => {
+    cy.fixture("users").then((users) => {
+      const user = users[0];
+
+      // get the url before submit button is clicked
+      cy.url().then((urlBeforeSubmit) => {
+        // enter valid inputs for, first middle and last names: Invalid # Number
+        cy.get(`[data-cy="firstName-input"]`).type(user.firstName);
+        cy.get(`[data-cy="middleName-input"]`).type(user.middleName);
+        cy.get(`[data-cy="lastName-input"]`).type(user.lastName);
+
+        cy.get(`[data-cy=submitButton]`).click();
+
+        // snackbar
+        cy.get('[data-cy="error-bar"]');
+
+        // get the url after submit button is clicked
+        cy.url().then((urlAfterSubmit) => {
+          // assert the URL before and after are the same
+          expect(urlBeforeSubmit).to.equal(urlAfterSubmit);
+        });
+      });
+    });
+  });
+});

cypress/e2e/otherDetails.cy.js

@@ -0,0 +1,162 @@
+/// <reference types='Cypress' />
+
+import "cypress-file-upload";
+
+beforeEach(() => {
+
+  cy.visit("http://localhost:8080/test/studentdetails");
+
+  cy.fixture("users.json").then((users) => {
+    const user = users[0];
+
+    cy.get('[data-cy="firstName-input"]').type(user.firstName);
+    cy.get('[data-cy="middleName-input"]').type(user.middleName);
+    cy.get('[data-cy="lastName-input"]').type(user.lastName);
+    cy.get('[data-cy="waInput"]').type(user.mobileNumber);
+    cy.get('[data-cy="altInput"]').type(user.alternateNumber);
+
+    cy.get("#mui-1").type(user.dob);
+    cy.get('[data-cy="email-input"]').type(user.email);
+    cy.get('[data-cy="genderDropdown"]').click();
+    cy.get('[data-value="female"]').click();
+  });
+
+  const fileName = '1mb.png';
+  cy.fixture(fileName).then((fileContent) => {
+    cy.get('[data-cy="imageInput"]').attachFile({
+      fileContent,
+      fileName,
+      mimeType: 'image/png',
+    });
+  });
+  cy.get('form > .MuiPaper-root > [tabindex="0"]').click();
+
+
+  // Inputs
+  cy.get('[data-cy="city"]').as("cityInput");
+  cy.get('[data-cy="pin-Input"]').as("pinCodeDropdown");
+  cy.get('[data-cy="district-input"]').as("districtDropdown");
+  cy.get('[data-cy="state-input"]').as("stateSelectDropdown");
+  cy.get('[data-cy="currentStatus"]').as("currentStatusDropdown");
+  cy.get('[data-cy="maxQualification"]').as("maximumQualificationLabel");
+  cy.get('[data-cy="schoolMedium"]').as("schoolMediumDropdown");
+  cy.get('[data-cy="religion-input"]').as("religionDropdown");
+});
+describe("TS307_01_State_District_Dropdown", () => {
+  it("District Dropdown should be populated based on state selected ", () => {
+    cy.get("@stateSelectDropdown").click();
+    cy.get('[data-value="BR"]').click();
+    cy.get('@districtDropdown').click();
+    cy.get('[data-value="Arrah"]').click();
+    cy.get('@districtDropdown').click();
+    cy.get('[data-value="Sheikhpura"]').click();
+    cy.get('@districtDropdown').click();
+    cy.get('[data-value="Maharajgani"]').click();
+    cy.get('@districtDropdown').click();
+    cy.get('[data-value="Thakurganj"]').click();
+  });
+});
+
+describe("TS307_02_State_District_Dropdown",() => {
+  it("select a blank state and the page should prompt the user with an error message", () => {
+    cy.get("@cityInput").type("SLC");
+    cy.get("@pinCodeDropdown").type("440212");
+    cy.get("@currentStatusDropdown").click();
+    cy.get('[data-value="job"]').click();
+    cy.get("@maximumQualificationLabel").click();
+    cy.get('[data-value="class10th"]').click();
+    cy.get('#mui-3').type("50")
+    cy.get("@schoolMediumDropdown").click();
+    cy.get('[data-value="en"]').click();
+    cy.get('#mui-component-select-caste').click();
+    cy.get('[data-value="scSt"]').click()
+    cy.get('#mui-component-select-religion').click();
+    cy.get('[data-value="others"]').click();
+    cy.get('.MuiMobileStepper-root > .MuiButton-contained').click();
+    cy.get('.MuiGrid-container > :nth-child(1) > .MuiTypography-root').should('be.visible').and('contain.text', 'Select your State')
+  });
+});
+
+describe("TS308_01_City_PIN",() => {
+  it.skip("Should validate if website recognizes/invalid city and pin inputs", () => {
+    cy.get('@pinCodeDropdown')
+      .find('input') 
+      .type('121212');
+    cy.get('#pin_code-helper-text').should('be.visible').and('contain.text', 'Ex. 4402xx');
+    cy.get("@cityInput")
+    .click()
+    .type("Salt Lake City");
+    cy.get('#city-helper-text').should('be.visible').and('contain.text', 'Ex. Bangalore')
+
+
+    cy.reload();
+    cy.wait(5000);
+    cy.fixture("users.json").then((users) => {
+      const user = users[0];
+
+      cy.get('[data-cy="firstName-input"]').type(user.firstName);
+      cy.get('[data-cy="middleName-input"]').type(user.middleName);
+      cy.get('[data-cy="lastName-input"]').type(user.lastName);
+      cy.get('[data-cy="waInput"]').type(user.mobileNumber);
+      cy.get('[data-cy="altInput"]').type(user.alternateNumber);
+
+      cy.get("#mui-1").type(user.dob);
+      cy.get('[data-cy="email-input"]').type(user.email);
+      cy.get('[data-cy="genderDropdown"]').click();
+      cy.get('[data-value="female"]').click();
+    });
+
+    const fileName = "test-image.jpg";
+    cy.fixture(fileName).then((fileContent) => {
+      cy.get('[data-cy="imageInput"]').attachFile({
+        fileContent,
+        fileName,
+        mimeType: "image/jpeg",
+      });
+      cy.get('form > .MuiPaper-root > [tabindex="0"]').click()
+
+    });
+    cy.get("@cityInput").type("Salt Lake City");
+    cy.get("@pinCodeDropdown").type("Gustavo");
+    cy.get('#pin_code-helper-text').should('be.visible').and('contain.text', 'Enter a valid Pin Code');
+    cy.get('@pinCodeDropdown')
+      .find('input') 
+      .clear()
+      .type('1212125');
+      cy.get('#pin_code-helper-text').should('be.visible').and('contain.text', 'Enter a valid Pin Code');
+
+    cy.get("@cityInput")
+      .clear()
+      .type("Gustavo");
+    cy.get("@pinCodeDropdown")
+      .clear()
+      .type("123456");
+    cy.get("@stateSelectDropdown").click();
+    cy.get('#pin_code-helper-text').should('be.visible').and('contain.text', 'Ex. 4402xx');
+    cy.get('#city-helper-text').should('be.visible').and('contain.text', 'Error')
+  });
+});
+
+describe("TS309_01_Status_Qualification",() => {
+  it.only("Verify current status and maximum qualification dropdowns",() => {
+    cy.get("@stateSelectDropdown").click();
+    cy.get('[data-value="BR"]').click();
+    cy.get('@districtDropdown').click();
+    cy.get('[data-value="Arrah"]').click();
+    cy.get("@currentStatusDropdown").click();
+    cy.get('[data-value="study"]').click();
+    cy.get("@maximumQualificationLabel").click();
+    cy.get('[data-value="graduate"]').click();
+    cy.get('#mui-4').type("76.40");
+    cy.get('#mui-3').type("76.40");
+    cy.get("@cityInput").type("SLC");
+    cy.get("@pinCodeDropdown").type("440212");
+    cy.get("@schoolMediumDropdown").click();
+    cy.get('[data-value="en"]').click();
+    cy.get('#mui-component-select-caste').click();
+    cy.get('[data-value="scSt"]').click()
+    cy.get('#mui-component-select-religion').click();
+    cy.get('[data-value="others"]').click();
+    cy.get('.MuiMobileStepper-root > .MuiButton-contained').click()
+  });
+});