Ad 150 basic details

.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    

AD-150-basic-details

@@ -0,0 +1,108 @@
+  origin/AD-108-city-and-pin-code-boxes-have-no-validation
+  origin/AD-131-Added-Dantewala-District
+  origin/AD-143-create-test-pass-filter
+  origin/AD-150
+  origin/AD-4-school-update-issue
+  origin/Add-Cypress-Testing
+  origin/Added-Close-Icon
+  origin/Boys_Admission_Closed
+  origin/Changes-in-campus-and-school
+  origin/Filter-By-School
+  origin/Fix-AD-122
+  origin/Fix-AD103
+  origin/Fix-DOB
+  origin/HEAD -> origin/main
+  origin/Invalid-entries-should-show-error-messages-in-real-time
+  origin/Lets-Go-Ahead-Button
+  origin/MUI-X-Install
+  origin/Mandatory-options
+  origin/Profile-Photo-Upload-Admin
+  origin/Questions-Answers-Attempt
+  origin/Small-Changes-In-Html
+  origin/Stages-Bug
+  origin/TestThatWork
+  origin/TestThatWork2
+  origin/Test_FemaleJohn
+  origin/Udaipur_Campus
+  origin/added-campuses
+  origin/added-campuses-stages
+  origin/added-jashpur-campus
+  origin/added-sentry
+  origin/addedDonors
+  origin/arrow-issue
+  origin/basic-data-refresh-issue
+  origin/beforeDeadCodeRemoval
+  origin/campus-api
+  origin/campus-list
+  origin/changed-dob
+  origin/commit-for-deploy
+  origin/date-dev
+  origin/date-filter-issue
+  origin/dd-mm-yyyy
+  origin/demo-check
+  origin/dev
+  origin/dev-copy
+  origin/dev-revert
+  origin/dob-changed
+  origin/dob-format
+  origin/dob-format-change
+  origin/donor-issue
+  origin/donor-issue-for-new-school
+  origin/e2
+  origin/enable-test-lahia
+  origin/feature-GA
+  origin/feature-googleAnalytics
+  origin/fix-AD-150---video-demo
+  origin/fix/AD-8-Stages-for-new-school
+  origin/fix/arrow
+  origin/fix/close-profile-prompt
+  origin/fix/date-filter
+  origin/fix/deleted-env-file
+  origin/fix/profile-picture
+  origin/fix/profile-update
+  origin/fix/school-filter
+  origin/fix/school-update
+  origin/fix/student-details-dob
+  origin/gh-pages
+  origin/hot-fix-AD-131-Dantewada
+  origin/kartikRevamp
+  origin/main
+  origin/new-main
+  origin/new-school-dashboard
+  origin/new-user
+  origin/new_registration
+  origin/new_user_register
+  origin/oldDeployBackup
+  origin/oldDevBackup
+  origin/overview
+  origin/overview-tab
+  origin/overview-task
+  origin/partner-group-list
+  origin/placementsSection
+  origin/remove-check-result
+  origin/resolved-refresing-basic-data-page
+  origin/retest-validation
+  origin/revert-449-school-dropdown-2
+  origin/revert-463-Filter-By-School
+  origin/revert-483-Fix-AD103
+  origin/revert-495-dev
+  origin/revert-496-dev
+  origin/revert-505-dev
+  origin/revert-506-dev
+  origin/school-dropdown
+  origin/school-dropdown-2
+  origin/school-menu-bugs
+  origin/school-stages
+  origin/schoolmenu
+  origin/show-overview
+  origin/showMarks
+  origin/space-in-login-form-issue
+  origin/stages-school-students
+  origin/studentsDetailes
+  origin/surveyFormSelector
+  origin/to-date
+  origin/update-new-changes
+  origin/updated-dev
+  origin/updated-dev2
+  origin/vercel-config
+  origin/vite-config

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,145 @@
+//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}`;
+};
+
+Cypress.on("uncaught:exception", () => false);
+
+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("div > div > div > div:nth-of-type(2) button").click();
+    cy.get("#mui-component-select-Language").click();
+    cy.get('li[data-value="en"]').click();
+    // cy.contains("English").click({ force: true });  English option is covered by
+    //another element, comment code only work for hindi and marathi because
+    //those are not covered by other code. Tried other ways too.
+    //while use force true, the drop down menu will not go away, cannot process to next step.
+    //So be specific like: li[data-value="en"] so it works, en can replace with hi,mr.
+    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();
+  });
+});