tests: add a11y tests

bniedermeyer · Sep 25, 2022 · 2afc0a3 · 2afc0a3 · vercel · Sep 25, 2022
1 parent c94188e
commit 2afc0a3
Show file tree

Hide file tree

Showing 10 changed files with 114 additions and 8 deletions.
diff --git a/apps/brenden-dev-e2e/cypress.config.ts b/apps/brenden-dev-e2e/cypress.config.ts
@@ -2,5 +2,21 @@ import { defineConfig } from 'cypress';
 import { nxE2EPreset } from '@nrwl/cypress/plugins/cypress-preset';
 
 export default defineConfig({
-  e2e: nxE2EPreset(__dirname),
+  e2e: {
+    ...nxE2EPreset(__dirname),
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    setupNodeEvents(on, _config) {
+      on('task', {
+        log(message) {
+          console.log(message);
+          return null;
+        },
+        table(message) {
+          console.table(message);
+
+          return null;
+        },
+      });
+    },
+  },
 });
diff --git a/apps/brenden-dev-e2e/src/e2e/app.cy.ts b/apps/brenden-dev-e2e/src/e2e/app.cy.ts
@@ -1,9 +1,41 @@
+// Define at the top of the spec file or just import it
+function terminalLog(violations) {
+  cy.task(
+    'log',
+    `${violations.length} accessibility violation${
+      violations.length === 1 ? '' : 's'
+    } ${violations.length === 1 ? 'was' : 'were'} detected`
+  );
+  // pluck specific keys to keep the table readable
+  const violationData = violations.map(
+    ({ id, impact, description, nodes }) => ({
+      id,
+      impact,
+      description,
+      nodes: nodes.length,
+    })
+  );
+
+  cy.task('table', violationData);
+}
+
 describe('brenden-dev', () => {
-  beforeEach(() => cy.visit('/'));
+  beforeEach(() => {
+    cy.visit('/');
+    cy.injectAxe();
+  });
 
   it('should show the full header on scroll', () => {
     cy.get('header a').should('not.be.visible');
     cy.scrollTo(0, 400);
     cy.get('header a').should('be.visible');
   });
+
+  it('has no detectably a11y violations on load', () => {
+    // eslint-disable-next-line cypress/no-unnecessary-waiting -- need to wait for css transitions for dark mode to finish. Can't figure out how to get this to work otherwise.
+    cy.wait(700).then(() => {
+      cy.get('h1');
+      cy.checkA11y(null, null, terminalLog);
+    });
+  });
 });
diff --git a/apps/brenden-dev-e2e/src/support/app.po.ts b/apps/brenden-dev-e2e/src/support/app.po.ts
diff --git a/apps/brenden-dev-e2e/src/support/commands.ts b/apps/brenden-dev-e2e/src/support/commands.ts
@@ -20,6 +20,7 @@ declare namespace Cypress {
 Cypress.Commands.add('login', (email, password) => {
   console.log('Custom command example: Login', email, password);
 });
+
 //
 // -- This is a child command --
 // Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })

diff --git a/apps/brenden-dev-e2e/src/support/e2e.ts b/apps/brenden-dev-e2e/src/support/e2e.ts
@@ -15,3 +15,4 @@
 
 // Import commands.js using ES2015 syntax:
 import './commands';
+import 'cypress-axe';
diff --git a/apps/brenden-dev-e2e/tsconfig.json b/apps/brenden-dev-e2e/tsconfig.json
@@ -4,7 +4,7 @@
     "sourceMap": false,
     "outDir": "../../dist/out-tsc",
     "allowJs": true,
-    "types": ["cypress", "node"]
+    "types": ["cypress", "cypress-axe", "node"]
   },
   "include": ["src/**/*.ts", "src/**/*.js", "cypress.config.ts"]
 }
diff --git a/apps/brenden-dev/pages/_document.tsx b/apps/brenden-dev/pages/_document.tsx
@@ -0,0 +1,13 @@
+import { Html, Head, Main, NextScript } from 'next/document';
+
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}
diff --git a/apps/brenden-dev/sections/info/info.tsx b/apps/brenden-dev/sections/info/info.tsx
@@ -11,19 +11,39 @@ export function Info(props: InfoProps) {
       id="info"
     >
       <Card title="Resume" url="https://brenden.fyi">
-        <Image src="/resume.svg" alt="Resume" height={150} width={300} />
+        <Image
+          src="/resume.svg"
+          alt="Illustrated Resume"
+          height={150}
+          width={300}
+        />
       </Card>
       <Card title="Blog" url="https://brenden.codes">
-        <Image src="/blog.svg" alt="Blog" height={150} width={300} />
+        <Image
+          src="/blog.svg"
+          alt="Illustrated document"
+          height={150}
+          width={300}
+        />
       </Card>
       <Card
         title="Talks"
         url="https://www.youtube.com/playlist?list=PLqn52Dxq8AiW5PU9PPWXPk-YJYS9vsrJ-"
       >
-        <Image src="/talks.svg" alt="Talks" height={150} width={300} />
+        <Image
+          src="/talks.svg"
+          alt="Illustrated Talks"
+          height={150}
+          width={300}
+        />
       </Card>
       <Card title="Projects" url="https://github.com/bniedermeyer">
-        <Image src="/projects.svg" alt="Projects" height={150} width={300} />
+        <Image
+          src="/projects.svg"
+          alt="Illustrated construction site"
+          height={150}
+          width={300}
+        />
       </Card>
     </section>
   );

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -37,9 +37,11 @@
     "@typescript-eslint/eslint-plugin": "^5.29.0",
     "@typescript-eslint/parser": "^5.29.0",
     "autoprefixer": "10.4.8",
+    "axe-core": "^4.4.3",
     "babel-jest": "27.5.1",
     "babel-loader": "8.1.0",
     "cypress": "^10.2.0",
+    "cypress-axe": "^1.0.0",
     "eslint": "~8.15.0",
     "eslint-config-next": "12.2.3",
     "eslint-config-prettier": "8.1.0",