adds basic accessibility test

rewiringamerica · Oct 1, 2023 · b46253d · b46253d
1 parent d5a0e91
commit b46253d
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 5 deletions.
diff --git a/cypress/e2e/state-calculator.cy.ts b/cypress/e2e/state-calculator.cy.ts
@@ -1,19 +1,34 @@
-/// <reference types="Cypress" />
+/// <reference types="cypress" />
+/// <reference types="cypress-axe" />
 
 describe('template spec', () => {
-  it('passes', () => {
+  beforeEach( function () {
     cy.visit('http://localhost:1234/rhode-island.html');
+
+    // Inject the axe-core library
+    cy.injectAxe();
+  });
+
+  it('Has no detectable a11y violations on load', () => {
+    cy.checkA11y();
+  });
+
+  it('renders the calculator', () => {
     cy.get('rewiring-america-state-calculator').should('exist');
 
     cy.get('rewiring-america-state-calculator')
       .shadow()
       .contains('Your household info');
+  });
 
+  it('fetches results if you submit after entering a RI zip code', () => {
     cy.get('rewiring-america-state-calculator')
       .shadow()
       .find('input#zip')
       .type('02859{enter}');
 
+    cy.checkA11y();
+
     cy.get('rewiring-america-state-calculator')
       .shadow()
       .contains('Incentives available to you in Rhode Island');

diff --git a/cypress/support/e2e.ts b/cypress/support/e2e.ts
@@ -16,5 +16,8 @@
 // Import commands.js using ES2015 syntax:
 import './commands';
 
+// Import the accessibility checker:
+import 'cypress-axe';
+
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
diff --git a/package.json b/package.json
@@ -29,10 +29,12 @@
     ]
   },
   "devDependencies": {
+    "axe-core": "^4.8.2",
     "@swc/helpers": "^0.4.14",
     "@typescript-eslint/eslint-plugin": "^6.1.0",
     "@typescript-eslint/parser": "^6.1.0",
     "cypress": "^12.6.0",
+    "cypress-axe": "^1.5.0",
     "eslint": "^8.45.0",
     "parcel": "v2.8.3",
     "postcss": "^8.4.21",

diff --git a/yarn.lock b/yarn.lock
@@ -1161,6 +1161,11 @@ aws4@^1.8.0:
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.12.0.tgz#ce1c9d143389679e253b314241ea9aa5cec980d3"
   integrity sha512-NmWvPnx0F1SfrQbYwOi7OeaNGokp9XhzNioJ/CSBs8Qa4vxug81mhJEAVZwxXuBmYB5KDRfMq/F3RR0BIU7sWg==
 
+axe-core@^4.8.2:
+  version "4.8.2"
+  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.8.2.tgz#2f6f3cde40935825cf4465e3c1c9e77b240ff6ae"
+  integrity sha512-/dlp0fxyM3R8YW7MFzaHWXrf4zzbr0vaYb23VBFCl83R7nWNPg/yaQw2Dc8jzCMmDVLhSdzH8MjrsuIUuvX+6g==
+
 balanced-match@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
@@ -1262,9 +1267,9 @@ callsites@^3.0.0:
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
 caniuse-lite@^1.0.30001449:
-  version "1.0.30001456"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001456.tgz#734ec1dbfa4f3abe6e435b78ecf40d68e8c32ce4"
-  integrity sha512-XFHJY5dUgmpMV25UqaD4kVq2LsiaU5rS8fb0f17pCoXQiQslzmFgnfOxfvo1bTpTqf7dwG/N/05CnLCnOEKmzA==
+  version "1.0.30001541"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001541.tgz"
+  integrity sha512-bLOsqxDgTqUBkzxbNlSBt8annkDpQB9NdzdTbO2ooJ+eC/IQcvDspDc058g84ejCelF7vHUx57KIOjEecOHXaw==
 
 caseless@~0.12.0:
   version "0.12.0"
@@ -1464,6 +1469,11 @@ csso@^4.2.0:
   dependencies:
     css-tree "^1.1.2"
 
+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@^12.6.0:
   version "12.6.0"
   resolved "https://registry.yarnpkg.com/cypress/-/cypress-12.6.0.tgz#d71a82639756173c0682b3d467eb9f0523460e91"