tests: add cypress-axe test for homepage (#4362)

.github/workflows/ci.yml

@@ -58,7 +58,7 @@ jobs:
       - name: Typecheck all packages
         run: yarn typecheck
 
-  test_on_primary_node_version:
+  unit_test_on_primary_node_version:
     name: Unit tests
     runs-on: ubuntu-latest
     steps:
@@ -310,13 +310,54 @@ jobs:
 
       # eslint-plugin-internal is internal only - so don't care about compat on other versions
 
+  website_tests:
+    name: Website tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 2
+
+      - name: echo github.ref
+        run: echo ${{ github.ref }}
+
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
+      - uses: actions/cache@v2
+        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Install dependencies
+        run: yarn --ignore-engines --frozen-lockfile
+
+      - name: Cypress run
+        uses: cypress-io/github-action@v2
+        with:
+          project: ./packages/website
+          start: yarn start
+
+      - uses: actions/upload-artifact@v2
+        if: always()
+        with:
+          name: screenshots
+          path: |
+            packages/website/cypress/screenshots/
+            packages/website/cypress/videos/
+
+
   publish_canary_version:
     name: Publish the latest code as a canary version
     runs-on: ubuntu-latest
     needs:
       [
         typecheck,
-        test_on_primary_node_version,
+        unit_test_on_primary_node_version,
         unit_tests_on_other_node_versions,
         linting_and_style,
         integration_tests,

.gitignore

@@ -9,6 +9,8 @@ yarn-error.log*
 packages/website/.docusaurus
 packages/website/.cache-loader
 packages/website/build
+packages/website/cypress/screenshots
+packages/website/cypress/videos
 packages/website/static/sandbox
 
 # Runtime data

packages/website/cypress.json

@@ -0,0 +1,4 @@
+{
+  "baseUrl": "http://localhost:3000",
+  "fixturesFolder": false
+}

packages/website/cypress/integration/index.spec.js

@@ -0,0 +1,15 @@
+import { checkAccessibility } from '../utils';
+
+describe('Index', () => {
+  it('has no accessibility issues detected by aXe', () => {
+    cy.visit('/');
+    cy.injectAxe();
+
+    // 1. Check accessibility in default, light mode
+    checkAccessibility();
+
+    // 2. Check accessibility in dark mode
+    cy.contains('🌞').click();
+    checkAccessibility();
+  });
+});

packages/website/cypress/plugins/index.js

@@ -0,0 +1,17 @@
+/// <reference types="cypress" />
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+module.exports = on => {
+  on('task', {
+    log(message) {
+      console.log(message);
+      return null;
+    },
+    table(message) {
+      console.table(message);
+      return null;
+    },
+  });
+};

packages/website/cypress/support/commands.js

@@ -0,0 +1 @@
+import 'cypress-axe';

packages/website/cypress/support/index.js

@@ -0,0 +1 @@
+import './commands';

packages/website/cypress/utils.js

@@ -0,0 +1,28 @@
+function terminalLog(violations) {
+  cy.task(
+    'log',
+    `${violations.length} accessibility violation${
+      violations.length === 1 ? '' : 's'
+    } detected`,
+  );
+  for (const violation of violations) {
+    cy.task('log', JSON.stringify(violation, null, 4));
+  }
+
+  cy.task(
+    'table',
+    violations.map(({ description, id, impact, nodes }) => ({
+      description,
+      id,
+      impact,
+      nodes: nodes.length,
+    })),
+  );
+}
+
+export function checkAccessibility() {
+  // Wait for any pending paints and ticks to clear
+  cy.wait(500);
+
+  cy.checkA11y(undefined, undefined, terminalLog);
+}

packages/website/docusaurus.config.js

@@ -84,7 +84,7 @@ const config = {
         title: 'TypeScript ESLint',
         // hideOnScroll: true,
         logo: {
-          alt: 'TypeScript ESLint',
+          alt: 'TypeScript ESLint logo',
           height: '32px',
           src: 'img/logo.svg',
           width: '32px',

packages/website/package.json

@@ -9,7 +9,9 @@
     "lint": "eslint . --ext .js,.ts --ignore-path ../../.eslintignore",
     "serve": "docusaurus serve",
     "start": "docusaurus start",
-    "swizzle": "docusaurus swizzle"
+    "swizzle": "docusaurus swizzle",
+    "test": "cypress run",
+    "test:open": "cypress open"
   },
   "dependencies": {
     "@babel/runtime": "7.17.2",
@@ -39,6 +41,8 @@
     "@types/react-helmet": "^6.1.4",
     "@types/react-router-dom": "^5.3.2",
     "copy-webpack-plugin": "^9.1.0",
+    "cypress": "8.3.0",
+    "cypress-axe": "^0.13.0",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-react": "^7.27.1",
     "eslint-plugin-react-hooks": "^4.3.0",

packages/website/src/css/custom.css

@@ -8,7 +8,7 @@
 @import './prism.css';
 
 /* You can override the default Infima variables here. */
-:root {
+html:root {
   --ifm-color-primary: #3578e5;
   --ifm-color-primary-dark: #1b62d4;
   --ifm-color-primary-darker: #1751af;
@@ -17,11 +17,14 @@
   --ifm-color-primary-lighter: #80aaef;
   --ifm-color-primary-lightest: #a5c3f3;
   --ifm-code-font-size: 95%;
-
   --ifm-color-info: var(--ifm-color-primary-dark);
+  --ifm-link-color: var(--ifm-color-primary-dark);
+  --ifm-link-color: var(--ifm-color-primary-dark);
 
   --code-line-decoration: rgba(53, 120, 229, 0.1);
   --code-editor-bg: #ffffff;
+
+  --docsearch-muted-color: #666;
 }
 
 html[data-theme='dark'] {
@@ -37,6 +40,8 @@ html[data-theme='dark'] {
   --ifm-code-background: rgb(40, 42, 54);
   --ifm-code-color: rgb(248, 248, 242);
   --ifm-color-info: var(--ifm-color-primary-light);
+  --ifm-link-color: var(--ifm-color-primary-light);
+  --ifm-link-color: var(--ifm-color-primary-light);
   --ifm-menu-color-active: var(--ifm-color-primary-light);
   --ifm-navbar-link-hover-color: var(--ifm-color-primary-light);
 
@@ -55,6 +60,8 @@ html[data-theme='dark'] {
   --ifm-color-secondary-darkest: rgb(164, 166, 168);
 
   scrollbar-color: #454a4d #202324;
+
+  --docsearch-muted-color: #aaa;
 }
 
 .docusaurus-highlight-code-line {

packages/website/src/pages/index.tsx

@@ -86,20 +86,18 @@ const features: FeatureItem[] = [
           </p>
         </div>
         <div className="col col--offset-2 col--8">
-          <p>
-            <code>typescript-eslint</code>:
-            <ul>
-              <li>allows ESLint to parse TypeScript syntax</li>
-              <li>
-                creates a set of tools for ESLint rules to be able to use
-                TypeScript's type information
-              </li>
-              <li>
-                provides a large list of lint rules that are specific to
-                TypeScript and/or use that type information
-              </li>
-            </ul>
-          </p>
+          <code>typescript-eslint</code>:
+          <ul>
+            <li>allows ESLint to parse TypeScript syntax</li>
+            <li>
+              creates a set of tools for ESLint rules to be able to use
+              TypeScript's type information
+            </li>
+            <li>
+              provides a large list of lint rules that are specific to
+              TypeScript and/or use that type information
+            </li>
+          </ul>
         </div>
       </div>
     ),