Dev

.eslintrc.json

@@ -1,7 +1,8 @@
 {
   "env": {
     "browser": true,
-    "es2021": true
+    "es2021": true,
+    "cypress/globals": true
   },
   "extends": ["plugin:react/recommended", "airbnb", "prettier"],
   "parserOptions": {
@@ -11,7 +12,7 @@
     "ecmaVersion": "latest",
     "sourceType": "module"
   },
-  "plugins": ["react", "prettier"],
+  "plugins": ["react", "prettier", "cypress"],
   "rules": {
     "prettier/prettier": "warn",
     "no-unused-vars": "warn",

.github/workflows/node.js.yml

@@ -0,0 +1,51 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
+# From https://github.com/dhxnveer/bhanwari-devi/blob/main/.github/workflows/tests.yml
+
+name: Node.js CI
+
+on:
+  push:
+    branches: [ "*" ]
+  pull_request:
+    types: [ opened, reopened ]
+
+jobs:
+  build:
+    name: test
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [14.x, 15.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+    - uses: actions/checkout@v3
+    - name: Builds and tests ${{ matrix.node-version }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ matrix.node-version }}
+    - name: Set npm legacy-peer-deps
+      run: npm config set legacy-peer-deps true
+    - run: npm install
+    - name: Set Environment Variables
+      run: |
+        echo "VITE_API_URL=https://dev-join.navgurukul.org/api/" >> .env.development
+        echo "VITE_API_URL=https://join.navgurukul.org/api/" >> .env.production
+    - run: npm ci
+    - run: npm run build --if-present
+      env:
+       CI: false
+    - name: Run npm run dev
+      run: |
+       npm run dev &
+       sleep 2
+    - name: Run Cypress tests
+      run: npx cypress run --config-file cypress.config.js
+    - name: Archive test artifacts
+      uses: actions/upload-artifact@v2
+      if: always() # always upload videos, even if the test fails
+      with:
+        name: cypress-videos
+        path: cypress/videos    

cypress.config.js

@@ -0,0 +1,7 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  e2e: {
+    setupNodeEvents() {},
+  },
+});

cypress/cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

cypress/cypress/support/e2e.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import "./commands";
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

cypress/e2e/chromeRecorder.cy.js

@@ -0,0 +1,142 @@
+//Used chrome extenstion Cypress Chrome Recorder
+import "cypress-file-upload";
+
+const firstNames = [
+  "John",
+  "Jane",
+  "David",
+  "Emily",
+  "Michael",
+  "Olivia",
+  "Daniel",
+  "Sophia",
+  "Matthew",
+  "Ava",
+];
+const lastNames = [
+  "Wick",
+  "Johnson",
+  "Brown",
+  "Davis",
+  "Wilson",
+  "Anderson",
+  "Taylor",
+  "Clark",
+  "Walker",
+  "Moore",
+];
+
+const getRandomValueFromArray = (array) => {
+  const randomIndex = Math.floor(Math.random() * array.length);
+  return array[randomIndex];
+};
+
+const getRandomFirstName = () => getRandomValueFromArray(firstNames);
+
+const getRandomLastName = () => getRandomValueFromArray(lastNames);
+
+const getRandomPhoneNumber = () => {
+  const randomNumber = Math.floor(Math.random() * 900000000) + 100000000;
+  return `9${randomNumber.toString()}`;
+};
+
+const getRandomGmailAddress = () => {
+  const randomString = Math.random().toString(36).substring(7);
+  return `random${randomString}@gmail.com`;
+};
+
+const getRandomBirthday = () => {
+  const currentYear = new Date().getFullYear();
+  const minYear = currentYear - 28;
+  const maxYear = currentYear - 17;
+  const year = Math.floor(Math.random() * (maxYear - minYear + 1)) + minYear;
+  const month = Math.floor(Math.random() * 12) + 1;
+  const day = Math.floor(Math.random() * 28) + 1;
+  return `${day.toString().padStart(2, "0")}/${month
+    .toString()
+    .padStart(2, "0")}/${year}`;
+};
+
+describe("JohnWickTest", () => {
+  it("tests JohnWickTest", () => {
+    cy.viewport(1268, 937);
+    cy.visit("http://localhost:8080/");
+    const randomPhoneNumber = getRandomPhoneNumber();
+    const randomGmailAddress = getRandomGmailAddress();
+    const randomBirthday = getRandomBirthday();
+    const randomFirstName = getRandomFirstName();
+    const randomLastName = getRandomLastName();
+    cy.get("div:nth-of-type(3) > div:nth-of-type(1) input").click();
+    cy.get("div:nth-of-type(3) > div:nth-of-type(1) input").type(
+      randomFirstName
+    );
+    cy.get("div:nth-of-type(4) > div:nth-of-type(1) input").click();
+    cy.get("div:nth-of-type(4) > div:nth-of-type(1) input").type(
+      randomLastName
+    );
+    cy.get("div:nth-of-type(2) > div.MuiBox-root").click();
+    cy.get("#app > div > div:nth-of-type(2)").click();
+    cy.get("div:nth-of-type(4) > div:nth-of-type(2) input").click();
+    cy.get("div:nth-of-type(4) > div:nth-of-type(2) input").type(
+      randomPhoneNumber
+    );
+    cy.get(`[data-cy=submitButton]`).click();
+    cy.get("#mui-component-select-Language").click();
+    cy.get('[data-cy="ma"]').click();
+    cy.get("#mui-component-select-Language").click();
+    cy.get(`[data-cy="hi"]`).click();
+    cy.get("#mui-component-select-Language").click();
+    cy.get(`[data-cy="en"]`).click();
+    cy.get("#mui-component-select-Language").should("contain", "English");
+    cy.get("div:nth-of-type(12) > button").click();
+    cy.get("div:nth-of-type(11) > button").click();
+    cy.get("div:nth-of-type(11) > button").click();
+    cy.get("div:nth-of-type(2) > div div.MuiContainer-root").click();
+    cy.get("div:nth-child(4) > div input").click();
+    cy.get("div:nth-child(4) > div input").type(randomBirthday);
+    cy.get("div:nth-child(7) > div input").click();
+    cy.get("div:nth-child(7) > div input").type(randomGmailAddress);
+    cy.get("#gender").click();
+    cy.contains("Female").click(); // can replace with transgender but not male
+    cy.get("#gender").should("contain", "Female"); //male is full
+    // profile picture
+    const fileName = "1mb.png";
+    cy.fixture(fileName).then((fileContent) => {
+      cy.get('[data-cy="imageInput"]').attachFile({
+        fileContent,
+        fileName,
+        mimeType: "image/jpeg",
+      });
+    });
+    cy.get("button:nth-child(3)").click();
+    cy.get("#mui-component-select-state").click();
+    cy.get("li:nth-of-type(5)").click();
+    cy.get("#mui-component-select-district").click();
+    cy.get("#menu-district > div.MuiBackdrop-root").click();
+    cy.get("#mui-component-select-district").click();
+    cy.get("li:nth-of-type(3)").click();
+    cy.get("#city").click();
+    cy.get("#city").type("Wash.D.C");
+    cy.get("#pin_code").click();
+    cy.get("#pin_code").type("456001");
+    cy.get("#mui-component-select-current_status").click();
+    cy.get("li:nth-of-type(4)").click();
+    cy.get("#mui-component-select-qualification").click();
+    cy.get("li:nth-of-type(5)").click();
+    cy.get("div:nth-child(7) > div > div").click();
+    cy.get("div:nth-child(7) > div > div").type("99.99");
+    cy.get("div:nth-child(8) > div > div").click();
+    cy.get("div:nth-child(8) > div > div").type("99.99");
+    cy.get("#mui-component-select-school_medium").click();
+    cy.get("li:nth-of-type(3)").click();
+    cy.get("#mui-component-select-caste").click();
+    cy.get("li:nth-of-type(4)").click();
+    cy.get("#mui-component-select-religion").click();
+    cy.get("li:nth-of-type(8)").click();
+    cy.get("#mui-component-select-religion").click();
+    cy.get("li:nth-of-type(7)").click();
+    cy.get(
+      "#app > div > div:nth-of-type(2) button.MuiButton-contained"
+    ).click();
+  });
+});

cypress/e2e/landingPage.cy.js

@@ -0,0 +1,115 @@
+/// <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="lang-dropdown"]`).click();
+    cy.get(`[data-cy="hi"]`).click();
+    cy.get('[data-cy="title"]').contains("परीक्षा शुरू करें");
+
+    // select Marathi, change language
+    cy.get(`[data-cy="lang-dropdown"]`).click();
+    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();
+      cy.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();
+      cy.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);
+        });
+      });
+    });
+  });
+});