Vue 3 Upgrade (#258)

* package updates, router, vuex, vuelidate partial updates

* remove filters from FPC widget

* update validator import path

* update catchall pattern for new vue-router version

* update vuelidate syntac on MSP eligibility page

* update eligibility pages

* update syntax to use v$ for vuelidate

* move from vue/compat to vue-3

* vue-3 updates for personal info page, validator update, remove portal-vue for consent modal

* remove portal from sample image tipbox

* fix router syntax for new version

* fix fortawesome setup for vue 3:

* update spouse page for vue 3

* cleanup comments, redundant vars

* update vuelidate syntax for child info page

* vuelidate updates for supp ben info page

* update documents page for vue-3

* update contact info page

* update router path syntax

* update remaining pages

* remove old dependency, update dev deps

* remove conditional requirement

* fix date validator issues (clear dateData, use withParams consitently)

* use common-lib-vue date formatter for comparing date values

* remove added text and fix incorrect validation syntax in child

* add mutation observer for modal

* remove ie check, vue-3 doesnt support

* remove redundant id

* fix incorrect validation syntax

* update package-lock file

* update unit test syntax for vue-3

* update date-fns import syntax

* update node dependencies

* remove npm link setup

* add back missing test script

* fix merged unit test syntax

* run ci tests when test file changes

* trigger checks re-run in CI

* fix accidently merged  reference for vuelidate

* remove errant debugger, bump common-lib version

* package-lockfile update

* update lockfile

* fix lockfile

* fix double next() call in router

* fix base url

* Update dependencies

* Add missing tag and fix validator bug

* Update e2e tests

* Fix broken e2e tests

* run npm audit fix

* Fix broken unit test

* update cypress tests to use dynamic data, update cypress version

* add partial validation test to e2e suite

* update package lock after merge

* update caniuse database in package lock

* add bc postal code validator tests to validators.spec.js

* add yesValidator and nonBCValidator tests to validators.spec.js

* add nonCanadaValidator tests to validators.spec.js

* add dateDataRequiredValidator and dateDataValidator tests to validators.spec.js

* add validators.spec.js unit tests

* add partially complete form helper tests

* update form-helpers copy power of attorney documents function tests

* form-helpers.spec.js copyPowerOfAttorneyDocuments test

* add format currency number unit tests fpc-helpers.spec.js

* add getCoverageTier() unit tests

* add date tests for fpc-helpers.spec.js getCoverageTier() function

* add getCoverageTier income tests

* add some getDistributionBarItems() tests

* add getDistributionBarItems() color tests

* add formatServerData() unit tests

* add url.spec.js tests

* add scroll.js tests

* add logService tests

* add code coverage to npm test

* add page state service tests

* spa env service unit tests

* remove unneeded .only from test suite

* update list of files excluded from jest test coverage

* add page content mixin test

* add incomplete page stepper mixin tests

* add supp-ben-data tests, add checks to codebase to prevent broken code when passed non-strings

* SuppBenData getter/setter tests

* supp ben data getter tests

* add child/childcare deduction tests to supp ben data

* add ahDisabilityCreditDeduction() suppbendata tests, fix formatting

* add more supp-ben-data unit tests

* add more supp-ben-data tests

* remove unneeded code

* add eqRoutes tests to routes.spec.js

* remove only from unit tests

* export validators for unit testing

* update form-helpers test, add Child component tests

* add birthDateYouthValidator() Child.vue tests

* add birthDateStudentValidator() unit tests

* add beforeBirthdateValidator() unit tests for Child.spec.js

* add dateOrderValidator() unit tests for Child.spec.js

* add departureDateValidator() unit tests for Child.spec.js

* add parseISO to unit test to prevent console warnings about date-fns not accepting strings

* add returnDateValidator() unit tests to Child component

* add dischargeDateValidator() unit tests to Child component

* add permanentMoveValidator() unit tests to Child.spec.js

* add completePostalCodeValidator() unit tests to Child.spec.js

* add addressLineContentValidator() unit tests to Child.spec.js

* add cityStateProvinceContentValidator() unit tests to Child.spec.js

* add uniquePHNValidator() unit tests to Child.spec.js

* fix child test dates, improve placeholder attachment structure

* export route collection so it can be used in unit tests

* set requireConfigFile to false to clear console warnings in VS code

* add render test to Child.spec.js

* add created() unit tests

* add saveData() unit tests for Child.spec.js

* npm audit fix for axios, common lib, and postcss vulnerabilities

* update axios version to fix vulnerability

* remove unneeded imports so tests don't fail in github

* fix child last name validation format for vue 3

* unit tests for Child.vue component

* regenerate package-lock, update vue compiler version

* regenerate package lock again in node 14

* migrate cypress tests over to cypress folder

* update unit tests to work with vite and vitest

* remove old cypress files that have been migrated to the cypress folder

* vue to vite migration files

* update cypress test to no longer use a wait function

* update cypress tests for clarity and stability

* update eslint parser

* update references from button to buttonComponent

* add cypress checks to make sure fileuploader works correctly before proceeding

* update common library component references

* update package.json to use vite, vite-related tools, new common library and bcgov bootstrap theme

* update README

* add cypress validation test for msp eligibility + required data-cy values

* add cypress fpc eligibility validations plus associated cypress ids

* add supp ben eligibilty page validation tests and associated cypress ids

* add validation tests for applicant first, middle, and last name

* update e2e tests to work more easily with dev/test environments

* remove unused packages/files, add headless e2e script

* regenerate package lock

* add unit test comments for codeql

* update pull request template

* rename .eslintrc.js to be a .cjs file

* eslint: add back plugin:vue/essential, add parserOptions, remove unused overrides

* add api-service mock to unit tests

* update Cypress to latest version so it runs in Edge

* add extra test data in case it's needed someday

* add line for cypress/downloads, which is sometimes generated by headless Cypress runs

* update node version in build + workflow, add workflow tests

* update node version in build action for workflow, add check to image-build action

* regenerate package lock

* version bump so this branch is caught up with main

---------

Co-authored-by: Jonathan Langlois <[email protected]>
Co-authored-by: Bryce Mcmath <[email protected]>
Co-authored-by: Bryce McMath <[email protected]>
Co-authored-by: Stephanie Harrison <[email protected]>
Co-authored-by: Skyler <[email protected]>
Co-authored-by: skylermcnamee-hibc <[email protected]>

.github/pull_request_template.md

@@ -1,8 +1,14 @@
 ### Please check if the PR fulfills these requirements:
 
 - [ ] After these changes, the app was run and still works as expected
-- [ ] Unit tests for these changes were added (if applicable)
+- [ ] Tests for these changes were added (if applicable)
+- [ ] `npm audit` was checked, applicable vulnerabilities were updated
+- [ ] `npm run build` passes
+- [ ] `npm run lint` has no unexpected errors
+- [ ] `npm run format` was run on changed files
 - [ ] All existing unit tests were run and still pass
+- [ ] End-to-end tests were run and still pass in Chrome, Firefox, and Edge without unexpected console errors (`npm run test:e2e`)
+
 
 ### Please specify the type of change this PR introduces (Bug fix, feature addition, content update, chore, etc.):
 

.github/workflows/jha-web.yaml

@@ -27,11 +27,13 @@ jobs:
       - uses: actions/checkout@main
       - uses: actions/setup-node@main
         with:
-          node-version: "12"
+          node-version: "22"
       - name: Install dependencies
         run: npm ci
       - name: Unit tests
-        run: npm run test
+        run: npm run test:unit
+      - name: E2E tests
+        run: npm run test:e2e:headless
       - name: LINTing
         run: npm run lint
       # - name: OpenAPI Schema
@@ -44,7 +46,7 @@ jobs:
     needs: [test]
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [22.x]
     steps:
       - uses: actions/checkout@v1
       - uses: actions/setup-node@v1

jha/.eslintrc.cjs

@@ -0,0 +1,15 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+    es2022: true,
+  },
+  extends: ["plugin:vue/essential", "eslint:recommended"],
+  parserOptions: {
+    ecmaVersion: 13,
+  },
+  rules: {
+    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+  },
+};

jha/.gitignore

@@ -4,6 +4,7 @@ node_modules
 
 /tests/e2e/videos/
 /tests/e2e/screenshots/
+/cypress/downloads
 
 
 # local env files

jha/README.md

@@ -32,9 +32,17 @@ npm run test:e2e
 ```
 npm run lint
 ```
+This project uses ESLint for linting.
+
+```sh
+npm run format
+```
+
+This project uses Prettier for code formatting.
 
 ### Dev Settings
 Adjust the values in `src/settings.js` to more easily walk through the application during development
 
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+### Other important notes
+
+This library requires a minimum of node 18 for compatibility with Vite and other dependencies, and a minimum of node 22 for compatibility with the pdf-js package used by the common library dependency.

jha/cypress.config.js

@@ -0,0 +1,13 @@
+import { defineConfig } from "cypress";
+import vitePreprocessor from 'cypress-vite'
+
+export default defineConfig({
+  e2e: {
+    baseUrl: 'http://172.25.129.209:5173/ahdc/',
+    experimentalRunAllSpecs: true,
+    testIsolation: false, //to prevent Cypress errors
+    setupNodeEvents(on) {
+      on('file:preprocessor', vitePreprocessor())
+    },
+  },
+});

jha/tests/e2e/specs/FPC.js → jha/cypress/e2e/FPC.cy.js

@@ -1,5 +1,6 @@
 import { generateRequestObject } from '../fixtures/fpcStandaloneRequest';
-import { removeUniqueFields } from '../helpers';
+import { removeUniqueFields } from '../support/helpers';
+import envData from '../fixtures/env-data.js'
 
 describe('FPC only application', () => {
   const options = { includeFPC: true }
@@ -12,15 +13,26 @@ describe('FPC only application', () => {
   });
 
   it('Accepts valid information for the spouse page', () => {
-    cy.fillSpousePage(options)
+    if (envData.skipSpouse) {
+      cy.skipSpousePage();
+    } else {
+      cy.fillSpousePage(options);
+    }    
   });
 
   it('Accepts valid information for the child page', () => {
-    cy.fillChildPage(options)
+    if (envData.skipChild) {
+      cy.skipChildPage();
+    } else {
+      cy.fillChildPage(options)      
+    } 
   })
 
   it('Accepts valid information for the FPC info page', () => {
     cy.fillFPCInfoPage()
+    cy.location().should((loc) => {
+      expect(loc.pathname).to.eq("/ahdc/contact-info");
+    });
   })
 
   it('Accepts valid information for the contact info page', () => {
@@ -35,14 +47,17 @@ describe('FPC only application', () => {
   it('Submits with the expected payload', () => {
     cy.fillConsent(options);
     cy.submitApplication();
-    cy.wait('@submitApplication')
+    if (envData.enableIntercepts) {
+      //in the local environment, we want to check that the intercepted API response matches what it should
+      cy.wait('@submitApplication')
       .then(interception => {
         expect(removeUniqueFields(interception.request.body)).to.deep.equal(removeUniqueFields(generateRequestObject()))
       });
+    }
   });
 
   it('Redirects user to confirmation page when successful', () => {
-    cy.url().should('include', 'submission');
+    cy.url({ timeout: 20000 }).should('include', 'submission');
     cy.contains('Confirmation of submission')
   });
 });

jha/tests/e2e/specs/MSP.js → jha/cypress/e2e/MSP.cy.js

@@ -1,11 +1,12 @@
 import { generateRequestObject } from '../fixtures/mspStandaloneRequest.js';
-import { removeUniqueFields } from '../helpers';
+import { removeUniqueFields } from '../support/helpers';
+import envData from '../fixtures/env-data.js'
 
 describe('MSP only application', () => {
   const options = {includeMSP: true}
   it('Fills eligibility questionnaire', () => {
     cy.fillEligibilityQuestionnaire(options)
-  })
+  });
 
   it('Accepts valid information for the personal-info page', () => {
     cy.fillPersonalInfoPage(options)
@@ -17,29 +18,31 @@ describe('MSP only application', () => {
 
   it('Accepts valid information for the child page', () => {
     cy.fillChildPage(options)
-  })
+  });
 
   it('Accepts valid information for the contact info page', () => {
     cy.fillResidentialAddress()
-  })
+  });
 
   it('Displays the phone number with contact information', () => {
     cy.contains('(555) 555-5555')
     cy.continue();
-  })
+  });
 
   it('submits form with expected payload', () => {
     cy.fillConsent(options)
     cy.submitApplication()
-    cy.wait('@submitApplication')
+    if (envData.enableIntercepts) {
+      //in the local environment, we want to check that the intercepted API response matches what it should
+      cy.wait('@submitApplication')
       .then(interception => {
         expect(removeUniqueFields(interception.request.body)).to.deep.equal(removeUniqueFields(generateRequestObject()))
       })
+    }    
   });
 
   it('Redirects user to confirmation page when successful', () => {
-    cy.url().should('include', 'submission');
+    cy.url({ timeout: 20000 }).should('include', 'submission');
     cy.contains('Confirmation of submission')
   });
-
 });

jha/tests/e2e/specs/SB.js → jha/cypress/e2e/SB.cy.js

@@ -1,11 +1,12 @@
 import { generateRequestObject } from '../fixtures/sbStandaloneRequest.js';
-import { removeUniqueFields } from '../helpers';
+import { removeUniqueFields } from '../support/helpers';
+import envData from '../fixtures/env-data.js'
 
 describe('SB only application', () => {
   const options = {includeSB: true}
   it('Fills eligibility questionnaire', () => {
     cy.fillEligibilityQuestionnaire(options)
-  })
+  });
 
   it('Accepts valid information for the personal-info page', () => {
     cy.fillPersonalInfoPage(options)
@@ -21,6 +22,9 @@ describe('SB only application', () => {
 
   it('Accepts valid information for the documents page', () => {
     cy.fillDocumentsPage()
+    cy.location().should((loc) => {
+      expect(loc.pathname).to.eq("/ahdc/contact-info");
+    });
   });
 
   it('Accepts valid information for the contact info page', () => {
@@ -30,19 +34,22 @@ describe('SB only application', () => {
   it('Displays the phone number with contact information', () => {
     cy.contains('(555) 555-5555')
     cy.continue();
-  })
+  });
 
   it('submits form with expected payload', () => {
     cy.fillConsent(options)
     cy.submitApplication()
-    cy.wait('@submitApplication')
+    if (envData.enableIntercepts) {
+      //in the local environment, we want to check that the intercepted API response matches what it should
+      cy.wait('@submitApplication')
       .then(interception => {
         expect(removeUniqueFields(interception.request.body)).to.deep.equal(removeUniqueFields(generateRequestObject()))
       })
+    }    
   });
 
   it('Redirects user to confirmation page when successful', () => {
-    cy.url().should('include', 'submission');
+    cy.url({ timeout: 20000 }).should('include', 'submission');
     cy.contains('Confirmation of submission')
   });
 });

jha/tests/e2e/specs/fullApplication.js → jha/cypress/e2e/fullApplication.cy.js

@@ -1,11 +1,12 @@
 import { generateRequestObject } from '../fixtures/fullApplication.js';
-import { removeUniqueFields } from '../helpers';
+import { removeUniqueFields } from '../support/helpers';
+import envData from '../fixtures/env-data.js'
 
 describe('Full application for MSP FPC and SB', () => {
   const options = {includeMSP: true, includeFPC: false, includeSB: true}
   it('Fills eligibility questionnaire', () => {
     cy.fillEligibilityQuestionnaire(options)
-  })
+  });
 
   it('Accepts valid information for the personal-info page', () => {
     cy.fillPersonalInfoPage(options)
@@ -29,24 +30,27 @@ describe('Full application for MSP FPC and SB', () => {
 
   it('Accepts valid information for the contact info page', () => {
     cy.fillResidentialAddress()
-  })
+  });
 
   it('Displays the phone number with contact information', () => {
     cy.contains('(555) 555-5555')
     cy.continue();
-  })
+  });
 
   it('submits form with expected payload', () => {
     cy.fillConsent(options)
     cy.submitApplication()
-    cy.wait('@submitApplication')
+    //in the local environment, we want to check that the intercepted API response matches what it should
+    if (envData.enableIntercepts) {
+      cy.wait('@submitApplication')
       .then(interception => {
         expect(removeUniqueFields(interception.request.body)).to.deep.equal(removeUniqueFields(generateRequestObject()))
       })
+    }    
   });
 
   it('Redirects user to confirmation page when successful', () => {
-    cy.url().should('include', 'submission');
+    cy.url({ timeout: 20000 }).should('include', 'submission');
     cy.contains('Confirmation of submission')
   });
 });