Merge pull request #124 from ShellyDCMS/a11y

Add a11y
ShellyDCMS · Oct 30, 2024 · d49af65 · d49af65
2 parents 42b957a + 1906ca2
commit d49af65
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -1,5 +1,8 @@
 <!DOCTYPE html>
 <html>
+  <head>
+    <title>Automated Website Validator</title>
+  </head>
   <body>
     <h1 data-hook="header" class="dummy1 dummy2">My First Heading</h1>
     <p data-hook="paragraph">My first paragraph.</p>

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@shellygo/cypress-test-utils",
   "description": "Cypress Test Automation Utilities",
-  "version": "3.1.2",
+  "version": "3.1.3",
   "author": "Shelly Goldblit",
   "private": false,
   "license": "MIT",
@@ -42,7 +42,9 @@
     "@types/chai-subset": "^1.3.5",
     "@types/react": "^18.3.10",
     "@types/react-html-parser": "^2.0.6",
+    "axe-core": "^4.10.1",
     "chai-subset": "^1.6.0",
+    "cypress-axe": "^1.5.0",
     "cypress-pipe": "^2.0.0",
     "cypress-real-events": "^1.13.0",
     "cypress-wait-if-happens": "^1.3.3",

diff --git a/src/assertable.ts b/src/assertable.ts
@@ -1,3 +1,6 @@
+import type axe from "axe-core";
+import "cypress-axe";
+import type { Options } from "cypress-axe";
 import "cypress-pipe";
 
 /** Assertable wraps Cypress.Chainable so that your tests are as decoupled as possible from Cypress.
@@ -316,6 +319,43 @@ export class Assertable<T> {
    */
   public shouldNotBeChecked = () => this.chainable.should("not.be.checked");
 
+  /**
+   *
+   * Assert that there are no A11y violations.
+   * This will run axe against the document at the point in which it is called.
+   * This means you can call this after interacting with your page and uncover accessibility issues introduced as a result of rendering in response to user actions
+   * @param options Set of options passed into rules or checks, temporarily modifying them. This contrasts with axe.configure, which is more permanent.
+   * @param violationCallback Allows you to define a callback that receives the violations for custom side-effects, such as adding custom output to the terminal.
+   * @param skipFailures Disables assertions based on violations and only logs violations to the console output.
+   * This enabled you to see violations while allowing your tests to pass. This should be used as a temporary measure while you address accessibility violations
+   * @example
+   * ```ts
+   * then(get.elementByTestId("selector")).shouldBeAccessible()
+   * ```
+   *  @example
+   * ```ts
+   * then(get.elementByTestId("selector")).shouldBeAccessible({
+   *  includedImpacts: ["critical", "minor"],
+   *  rules: {
+   *    "landmark-one-main": { enabled: false }
+   *  }
+   * })
+   * ```
+   */
+  public shouldBeAccessible = (
+    options: Options = {
+      includedImpacts: ["moderate", "serious", "critical", "minor"]
+    },
+    violationCallback?: ((violations: axe.Result[]) => void) | undefined,
+    skipFailures?: boolean
+  ) => {
+    this.chainable.checkA11y(
+      undefined,
+      options,
+      violationCallback,
+      skipFailures
+    );
+  };
   /**
    * Assert that the text of the first element of the selection is equal to the given text, using .text().
    * @example

diff --git a/src/cypress-helper.cy.ts b/src/cypress-helper.cy.ts
@@ -275,6 +275,16 @@ describe("cypress helper tests", () => {
     });
   });
 
+  it("should test a11y", () => {
+    get.elementByTestId("header");
+    then(get.elementByTestId("button")).shouldBeAccessible({
+      includedImpacts: ["critical", "minor"],
+      rules: {
+        "landmark-one-main": { enabled: false }
+      }
+    });
+  });
+
   it("should take snapshot and compare to previous", () => {
     get.imageSnapshot("homepage", { failureThreshold: 1 });
     get.imageSnapshot("radio-group", {
@@ -453,13 +463,13 @@ describe("cypress helper tests", () => {
 
   it("should get the given style from the element", () => {
     then(get.elementComputedStyleProperty("image", "height")).shouldEqual(
-      "142px"
+      "18px"
     );
   });
 
   it("should get the given style from element with index", () => {
     then(
       get.elementComputedStyleProperty("image", "height", { index: 0 })
-    ).shouldEqual("142px");
+    ).shouldEqual("18px");
   });
 });
diff --git a/src/cypress-helper.ts b/src/cypress-helper.ts
@@ -56,6 +56,11 @@ export class CypressHelperOptions {
    * when set to true, waits until elements are loaded before returning them
    */
   waitForElementsToLoad?: boolean = true;
+
+  /**
+   * when set to true, injects Axe (A11y test tool) before all tests
+   */
+  injectA11yChecker?: boolean = true;
 }
 /**
  * @class CypressHelper was designed to help you develop cypress tests faster.
@@ -127,6 +132,7 @@ export class CypressHelper {
   beforeAndAfter = () => {
     before(() => {
       chai.use(chaiSubset);
+      if (this.options.injectA11yChecker) cy.injectAxe();
     });
     beforeEach(() => {
       cy.on("uncaught:exception", (err, runnable) => {
@@ -383,6 +389,7 @@ export class CypressHelper {
      */
     visit: (url: string) => {
       cy.visit(url);
+      cy.injectAxe();
     },
     /**
      * Wait for a number of milliseconds.

diff --git a/src/renderer/index.ts b/src/renderer/index.ts
@@ -185,7 +185,7 @@ export class RenderFactory {
           (ndcDynamicCreated)="componentCreated($event)"
         ></ndc-dynamic>`,
       standalone: true,
-      imports: [DynamicModule]
+      imports: [DynamicModule, ...(config.imports as any)]
     })
     class NgComponentOutlet {
       component = type;

diff --git a/yarn.lock b/yarn.lock
@@ -589,6 +589,11 @@ aws4@^1.8.0:
   resolved "https://registry.npmjs.org/aws4/-/aws4-1.13.0.tgz"
   integrity sha512-3AungXC4I8kKsS9PuS4JH2nc+0bVY/mjgrephHTIi8fpEeGsTHBUJeosp0Wc1myYMElmD0B3Oc4XL/HVJ4PV2g==
 
+axe-core@^4.10.1:
+  version "4.10.1"
+  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.10.1.tgz#7d2589b0183f05b0f23e55c2f4cdf97b5bdc66d9"
+  integrity sha512-qPC9o+kD8Tir0lzNGLeghbOrWMr3ZJpaRlCIb6Uobt/7N4FiEDvqUMnxzCHRHmg8vOg14kr5gVNyScRmbMaJ9g==
+
 babel-code-frame@^6.26.0:
   version "6.26.0"
   resolved "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz"
@@ -1678,6 +1683,11 @@ csstype@^3.0.2:
   resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz"
   integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
 
+cypress-axe@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/cypress-axe/-/cypress-axe-1.5.0.tgz#95082734583da77b51ce9b7784e14a442016c7a1"
+  integrity sha512-Hy/owCjfj+25KMsecvDgo4fC/781ccL+e8p+UUYoadGVM2ogZF9XIKbiM6KI8Y3cEaSreymdD6ZzccbI2bY0lQ==
+
 cypress-pipe@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/cypress-pipe/-/cypress-pipe-2.0.0.tgz"