Merge pull request #942 from bcgov/SBCQ58

Sbcq58

.github/workflows/tyu-reusable-appointment-frontend-cypress.yaml

@@ -74,13 +74,14 @@ jobs:
           EOF
 
       - name: Cypress Run
-        uses: cypress-io/github-action@v2
+        uses: cypress-io/github-action@v4.1.0
         env:
           CYPRESS_PROJECT_ID: ${{ secrets.cypress-project-id }}
           CYPRESS_RECORD_KEY: ${{ secrets.cypress-record-key }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           VUE_APP_PATH: /
         with:
+          config-file: cypress.config.ts
           record: true
           start: npm run serve -- --port 8081
           wait-on: http://localhost:8081

appointment-frontend/cypress.config.ts

@@ -0,0 +1,32 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  chromeWebSecurity: true,
+  env: {
+    'cypress-plugin-snapshots': {
+      imageConfig: {
+        threshold: 0,
+        thresholdType: 'percent',
+      },
+      screenshotConfig: {
+        blackout: [],
+        capture: 'fullPage',
+        clip: null,
+        disableTimersAndAnimations: true,
+        log: false,
+        scale: false,
+        timeout: 30000,
+      },
+    },
+  },
+  video: false,
+  e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    setupNodeEvents(on, config) {
+      return require('./cypress/plugins/index.ts').default(on, config)
+    },
+    baseUrl: 'http://localhost:8081',
+    excludeSpecPattern: ['**/__snapshots__/*', '**/__image_snapshots__/*'],
+  },
+})

appointment-frontend/cypress/integration/image_snapshot/account_settings_update.ts → appointment-frontend/cypress/e2e/image_snapshot/account_settings_update.cy.ts

@@ -26,7 +26,7 @@ import {
   SELECTOR_HEADER_IMAGE_BCGOV
 } from '../../support/selectors'
 
-import { API_PREFIX } from '../../support'
+import { API_PREFIX } from '../../support/e2e'
 
 describe('Account Settings', () => {
   beforeEach(() => {
@@ -61,6 +61,7 @@ describe('Account Settings', () => {
       Cypress.env('BCEID_PASSWORD')
     )
 
+
     cy.visit('/')
 
     cy.get(SELECTOR_APPOINTMENT_CANCEL_USER_NAV)
@@ -76,7 +77,7 @@ describe('Account Settings', () => {
 
     // TODO: Find alternative to the cy.wait below.
     // The above should result in the below line not being required, but the nav bar results in the test failing.
-    cy.wait(2000)
+    cy.wait(10000)
   })
 
   it('page loaded', () => {

appointment-frontend/cypress/integration/image_snapshot/appointment_cancel.ts → appointment-frontend/cypress/e2e/image_snapshot/appointment_cancel.cy.ts

@@ -25,7 +25,7 @@ import {
   SELECTOR_HEADER_IMAGE_BCGOV
 } from '../../support/selectors'
 
-import { API_PREFIX } from '../../support'
+import { API_PREFIX } from '../../support/e2e'
 
 describe('Cancel Appointment', () => {
   beforeEach(() => {

appointment-frontend/cypress/integration/image_snapshot/appointment_change.ts → appointment-frontend/cypress/e2e/image_snapshot/appointment_change.cy.ts

@@ -27,7 +27,7 @@ import {
   SELECTOR_STEP_5_DIALOG_APPOINTMENT
 } from '../../support/selectors'
 
-import { API_PREFIX } from '../../support'
+import { API_PREFIX } from '../../support/e2e'
 
 describe('Change Appointment', () => {
   beforeEach(() => {

appointment-frontend/cypress/integration/image_snapshot/step1.spec.ts → appointment-frontend/cypress/e2e/image_snapshot/step1.cy.ts

@@ -24,7 +24,7 @@ import {
   SELECTOR_STEP_1_IMAGE_MAP
 } from '../../support/selectors'
 
-import { API_PREFIX } from '../../support'
+import { API_PREFIX } from '../../support/e2e'
 
 describe('step 1', () => {
   beforeEach(() => {

appointment-frontend/cypress/integration/image_snapshot/step2.spec.ts → appointment-frontend/cypress/e2e/image_snapshot/step2.cy.ts

@@ -23,7 +23,7 @@ import {
   SELECTOR_STEP_2_COMBOBOX_SERVICE
 } from '../../support/selectors'
 
-import { API_PREFIX } from '../../support'
+import { API_PREFIX } from '../../support/e2e'
 
 describe('step 2', () => {
   beforeEach(() => {

appointment-frontend/cypress/integration/image_snapshot/step3.spec.ts → appointment-frontend/cypress/e2e/image_snapshot/step3.cy.ts

@@ -26,7 +26,7 @@ import {
   SELECTOR_STEP_3_DATE_PICKER
 } from '../../support/selectors'
 
-import { API_PREFIX } from '../../support'
+import { API_PREFIX } from '../../support/e2e'
 
 describe('step 3', () => {
   beforeEach(() => {

appointment-frontend/cypress/integration/image_snapshot/step4.spec.ts → appointment-frontend/cypress/e2e/image_snapshot/step4.cy.ts

@@ -27,7 +27,7 @@ import {
   SELECTOR_STEP_4_IMAGE_BCSC
 } from '../../support/selectors'
 
-import { API_PREFIX } from '../../support'
+import { API_PREFIX } from '../../support/e2e'
 
 describe('step 4', () => {
   beforeEach(() => {

appointment-frontend/cypress/integration/image_snapshot/step5.spec.ts → appointment-frontend/cypress/e2e/image_snapshot/step5.cy.ts

@@ -29,7 +29,7 @@ import {
   SELECTOR_STEP_5_IMAGE_MAP
 } from '../../support/selectors'
 
-import { API_PREFIX } from '../../support'
+import { API_PREFIX } from '../../support/e2e'
 
 describe('step 5', () => {
   beforeEach(() => {

appointment-frontend/cypress/plugins/bceidLogin.ts

@@ -14,15 +14,15 @@
 // License for the specific language governing permissions and limitations under
 // the License.
 
-import puppeteer from 'puppeteer'
+import puppeteer,{ Browser, Page }  from 'puppeteer'
 
 class BceidLogin {
   private static readonly SELECTOR_BCEID_BUTTON_SUBMIT = 'input[name=btnSubmit]'
   private static readonly SELECTOR_BCEID_INPUT_PASSWORD = '#password'
   private static readonly SELECTOR_BCEID_INPUT_USER_ID = '#user'
 
-  browser: puppeteer.Browser | null
-  page: puppeteer.Page | null
+  browser: Browser | null = null
+  page: Page | null = null
 
   async init () {
     this.browser = await puppeteer.launch({
@@ -34,21 +34,27 @@ class BceidLogin {
   }
 
   private async open (url: string) {
-    if (this.browser === null) {
+
+    if (!this.browser ) {
       // TODO: this doesn't work. Change index.ts to remove the init call, and
       // then sort out why setDefaultNavigationTimeout on undefined is failing.
       // Once that's done move init code into this clause.
       this.init()
     }
 
+    if (!this.page) {
+      throw new Error('Page is not initialized');
+    }
     this.page.setDefaultNavigationTimeout(0)
 
     return this.page.goto(url)
   }
 
   async login (url: string, username: string, password: string) {
     await this.open(url)
-
+    if (!this.page) {
+      throw new Error('Page is not initialized - login');
+    }
     try {
       await this.page.waitForSelector(BceidLogin.SELECTOR_BCEID_INPUT_USER_ID,
         { timeout: 10000, visible: true })
@@ -66,6 +72,9 @@ class BceidLogin {
   }
 
   async getSessionItems () {
+    if (!this.page) {
+      throw new Error('Page is not initialized - session items.');
+    }
     return this.page.evaluate(() => {
       let items = {}
       Object.keys(sessionStorage).forEach(key => {
@@ -77,7 +86,9 @@ class BceidLogin {
   }
 
   async close () {
-    await this.browser.close()
+    if (this.browser) {
+      await this.browser.close();
+    }
   }
 }
 

appointment-frontend/cypress/plugins/index.ts

@@ -21,9 +21,9 @@ export default (on: any, config: any) => {
   addMatchImageSnapshotPlugin(on, config)
 
   on('task', {
-    bceidLogin ({ url, username, password }) {
+    bceidLogin({ url, username, password }) {
       return (async () => {
-        let bceidLogin: BceidLogin
+        let bceidLogin: BceidLogin | null = null;
         while (true) {
           try {
             bceidLogin = new BceidLogin()
@@ -35,12 +35,15 @@ export default (on: any, config: any) => {
 
             return sessionItems
           } catch (exception) {
+            console.error('Login attempt failed:', exception);
             if (bceidLogin) {
               try {
-                bceidLogin.close()
-              } catch (exception) {
+                await bceidLogin.close();
+              } catch (closeError) {
+                console.error('Failed to close the browser:', closeError);
               }
             }
+            throw exception;
           }
         }
       })()

appointment-frontend/cypress/support/commands.ts

@@ -76,8 +76,7 @@ declare global {
 // https://github.com/bcgov/bcrs-testing
 //
 Cypress.Commands.add('bceidLogin', (url, username, password) => {
-  cy.task('bceidLogin', { url: url, username: username, password: password },
-    { timeout: 120000 }).then(sessionItems => {
+  cy.task<Record<string, string>>('bceidLogin', { url, username, password }, { timeout: 60000 }).then(sessionItems => {
     Object.keys(sessionItems).forEach(key => {
       sessionStorage.setItem(key, sessionItems[key])
     })