test: initial cypress-axe setup for e2e and CT (#22925)

* initial cypress-axe setup for e2e and CT

* extract axe setup, use isComponentTesting

* ensure CT sets isComponentTesting to percy command

* test flake fix from lachlan

* only run the a11y check in interactive mode

* add a little headline to the a11y log

* updates based on feedback

Author: marktnoonan

packages/app/cypress/component/support/index.ts

@@ -24,6 +24,7 @@ import { createPinia } from '../../../src/store'
 import { setActivePinia } from 'pinia'
 import type { Pinia } from 'pinia'
 import 'cypress-real-events/support'
+
 import { installCustomPercyCommand } from '@packages/ui-components/cypress/support/customPercyCommand'
 
 let pinia: Pinia

packages/frontend-shared/cypress/e2e/support/e2eSupport.ts

@@ -15,7 +15,6 @@ import type { SinonStub } from 'sinon'
 import type sinon from 'sinon'
 import type pDefer from 'p-defer'
 import 'cypress-plugin-tab'
-import 'cypress-axe'
 import type { Response } from 'cross-fetch'
 
 configure({ testIdAttribute: 'data-cy' })

packages/frontend-shared/cypress/support/component.ts

@@ -76,5 +76,12 @@ Cypress.on('uncaught:exception', (err) => !err.message.includes('ResizeObserver
 
 registerMountFn()
 addVueCommand()
-installCustomPercyCommand()
+installCustomPercyCommand({
+  elementOverrides: {
+    'svg.animate-spin': ($el) => {
+      $el.attr('style', 'animation: none !important')
+    },
+  },
+})
+
 addNetworkCommands()

packages/ui-components/cypress/support/customPercyCommand.ts

@@ -2,6 +2,7 @@
 
 import '@percy/cypress'
 import type { SnapshotOptions } from '@percy/core'
+import 'cypress-axe'
 
 export interface CustomSnapshotOptions extends SnapshotOptions{
   /**
@@ -54,6 +55,54 @@ declare global {
   }
 }
 
+function setupAxeAndCheckA11y () {
+  if (Cypress.testingType === 'component') {
+    Cypress.Commands.add('injectAxe', () => {
+      // this is a work around for the issue with require.resolve in CT
+      // described here: https://github.com/component-driven/cypress-axe/issues/134
+      cy.window({ log: false }).then((window) => {
+        const axe = require('axe-core/axe.js')
+        const script = window.document.createElement('script')
+
+        script.innerHTML = axe.source
+        window.document.head.appendChild(script)
+      })
+    })
+  }
+
+  cy.injectAxe()
+
+  if (Cypress.testingType === 'component') {
+    // since components are isolated fragments, right off the bat
+    // there are some things we should avoid checking
+    cy.configureAxe({
+      rules: [
+        {
+          id: 'html-has-lang',
+          enabled: false,
+        },
+        {
+          id: 'landmark-one-main',
+          enabled: false,
+        },
+        {
+          id: 'page-has-heading-one',
+          enabled: false,
+        },
+        {
+          id: 'region',
+          enabled: false,
+        },
+      ],
+    })
+  }
+
+  Cypress.log({ displayName: '♿️ Accessibility Check ♿️' })
+
+  // passing undefined here so that we can set the final boolean to ignore failures for now
+  cy.checkA11y(undefined, undefined, undefined, true)
+}
+
 class ElementOverrideManager {
   private mutationStack: Array<MutationRecord> | undefined = undefined
 
@@ -189,7 +238,7 @@ const applySnapshotMutations = ({
   })
 }
 
-export const installCustomPercyCommand = ({ before, elementOverrides }: {before?: () => void, elementOverrides?: CustomSnapshotOptions['elementOverrides'] } = {}) => {
+export const installCustomPercyCommand = ({ before, elementOverrides }: {before?: () => void, elementOverrides?: CustomSnapshotOptions['elementOverrides'], isComponentTesting?: boolean } = {}) => {
   /**
    * A custom Percy command that allows for additional mutations prior to snapshot generation. Mutations will be
    * reset after snapshot generation so that the AUT is not polluted after the command executes.
@@ -239,6 +288,11 @@ export const installCustomPercyCommand = ({ before, elementOverrides }: {before?
     // that is representative of the snapshot that would be taken by Percy and can be
     // used for validation during development.
     if (Cypress.config().isInteractive) {
+      // since Percy snapshots represent visually unique states in the application
+      // doing an accessibility check here should cover all situations that need to a11y checks
+
+      setupAxeAndCheckA11y()
+
       return applySnapshotMutations({
         ...snapshotMutationOptions,
         log: 'percy: skipping snapshot in interactive mode',