Adding Cypress for e2e testing (#85)

* using the higher-level react-testing-library, and regenerating snapshot - renders real DOM elements
* Basic e2e testing with Cypress, following the guide here: https://www.gatsbyjs.com/docs/how-to/testing/end-to-end-testing/ ; needed to install cypress-local to avoid jest-cypress collision
* Adding accessibility testing support and basic a11y tests
* adding failure logging
* Adding nightly test run
* Fix misc stuff from lighthouse (#81)
* Removing local-cypress, relying instead on a combination
of type reference and eslint-plugin-cypress;
adding cypress to jest ignore paths to avoid conflict -
`npm test` is now jest-only, use `npm run test:e2e` to run cypress tests
* updating comment to clarify timezone

.github/workflows/e2e.yml

@@ -0,0 +1,13 @@
+name: example-cron
+on:
+  schedule:
+    # runs tests every day at 12am ET (4am UTC)
+    - cron: '0 4 * * *'
+jobs:
+  nightly:
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Cypress nightly tests 🌃
+        uses: cypress-io/github-action@v2

client/.eslintrc.js

@@ -6,6 +6,7 @@ module.exports = {
   },
   'extends': [
     'plugin:react/recommended',
+    'plugin:cypress/recommended',
     'google',
   ],
   'parser': '@typescript-eslint/parser',

client/.gitignore

@@ -2,3 +2,5 @@ node_modules/
 .cache/
 public
 .eslintcache
+cypress/screenshots/
+cypress/videos/

client/cypress.json

@@ -0,0 +1,4 @@
+{
+  "baseUrl": "http://localhost:8000/",
+  "integrationFolder": "cypress/e2e"
+}

client/cypress/e2e/accessibility.test.js

@@ -0,0 +1,34 @@
+// / <reference types="Cypress" />
+
+// Define at the top of the spec file or just import it
+
+// eslint-disable-next-line require-jsdoc
+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('Accessibility tests', () => {
+  beforeEach(() => {
+    cy.visit('/').get('main').injectAxe();
+  });
+  it('Has no detectable accessibility violations on load', () => {
+    cy.checkA11y(null, null, terminalLog);
+  });
+});

client/cypress/e2e/sample.spec.js

@@ -0,0 +1,11 @@
+// / <reference types="Cypress" />
+
+describe('Translation Test', () => {
+  it('Checks that locales have correct content', () => {
+    cy.visit('http://localhost:8000');
+    cy.url().should('include', '/en/');
+    cy.get('header').contains('Justice40');
+    cy.visit('http://localhost:8000/es');
+    cy.get('header').contains('Justicia40');
+  });
+});

client/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

client/cypress/plugins/index.js

@@ -0,0 +1,34 @@
+// / <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+// eslint-disable-next-line no-unused-vars
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+  on('task', {
+    log(message) {
+      console.log(message);
+
+      return null;
+    },
+    table(message) {
+      console.table(message);
+
+      return null;
+    },
+  });
+};

client/cypress/support/commands.js

@@ -0,0 +1,27 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'},
+// (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'},
+// (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

client/cypress/support/index.js

@@ -0,0 +1,18 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+import './commands';
+import 'cypress-axe';
+import '@testing-library/cypress/add-commands';

client/jest.config.js

@@ -9,11 +9,14 @@ module.exports = {
     // eslint-disable-next-line max-len
     '.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': `<rootDir>/__mocks__/file-mock.js`,
   },
-  testPathIgnorePatterns: [`node_modules`, `\\.cache`, `<rootDir>.*/public`],
+  testPathIgnorePatterns: [`node_modules`, `\\.cache`,
+    `<rootDir>/public`,
+    `<rootDir>/cypress`],
   transformIgnorePatterns: [`node_modules/(?!(gatsby)/)`],
   globals: {
     __PATH_PREFIX__: ``,
   },
   testURL: `http://localhost`,
   setupFiles: [`<rootDir>/loadershim.js`],
+  setupFilesAfterEnv: ['<rootDir>/setup-test-env.js'],
 };

client/package.json

@@ -13,7 +13,11 @@
     "build": "gatsby build --prefix-paths",
     "serve": "gatsby serve",
     "clean": "gatsby clean",
+    "cy:open": "cypress open",
+    "cy:run": "cypress run",
     "test": "jest",
+    "test:e2e": "start-server-and-test develop http://localhost:8000 cy:open",
+    "test:e2e:ci": "start-server-and-test develop http://localhost:8000 cy:run",
     "test:update": "npm test -- -u",
     "deploy": "gatsby build --prefix-paths && gh-pages -d public",
     "lint": "eslint './src/**/*.{ts,tsx}' --ignore-pattern node_modules/ --ignore-pattern public --ignore-pattern *scss.d.ts",
@@ -23,6 +27,9 @@
   },
   "devDependencies": {
     "@formatjs/cli": "^4.2.15",
+    "@testing-library/cypress": "^7.0.6",
+    "@testing-library/jest-dom": "^5.12.0",
+    "@testing-library/react": "^11.2.7",
     "@types/react-helmet": "^6.1.1",
     "@types/jest": "^26.0.23",
     "@types/node": "^15.3.1",
@@ -31,10 +38,14 @@
     "@types/react-test-renderer": "^17.0.1",
     "@typescript-eslint/eslint-plugin": "^4.25.0",
     "@typescript-eslint/parser": "^4.25.0",
+    "axe-core": "^4.2.1",
     "babel-jest": "^27.0.1",
     "babel-preset-gatsby": "^1.6.0",
+    "cypress": "^7.4.0",
+    "cypress-axe": "^0.12.2",
     "eslint": "^7.27.0",
     "eslint-config-google": "^0.14.0",
+    "eslint-plugin-cypress": "^2.11.3",
     "eslint-plugin-react": "^7.23.2",
     "gatsby": "^3.4.1",
     "gatsby-cli": "^3.5.0",
@@ -49,6 +60,7 @@
     "react-test-renderer": "^17.0.2",
     "sass": "^1.33.0",
     "sass-loader": "^11.1.1",
+    "start-server-and-test": "^1.12.3",
     "ts-jest": "^27.0.0"
   },
   "dependencies": {

client/setup-test-env.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

client/src/components/J40Footer.spec.tsx

@@ -1,13 +1,15 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import {render} from '@testing-library/react';
 import J40Footer from './J40Footer';
 import {LocalizedComponent} from '../test/testHelpers';
 
 describe('J40Footer', () => {
   it('renders correctly', () => {
-    const tree = renderer
+    const {asFragment} = render(
-        .create(<LocalizedComponent><J40Footer /></LocalizedComponent>)
+        <LocalizedComponent>
-        .toJSON();
+          <J40Footer />
-    expect(tree).toMatchSnapshot();
+        </LocalizedComponent>,
+    );
+    expect(asFragment()).toMatchSnapshot();
   });
 });

client/src/components/__snapshots__/J40Footer.spec.tsx.snap

@@ -1,42 +1,42 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`J40Footer renders correctly 1`] = `
-Array [
+<DocumentFragment>
   <footer
-    className="usa-footer usa-footer--big"
+    class="usa-footer usa-footer--big"
   >
     <div
-      className="usa-footer__primary-section"
+      class="usa-footer__primary-section"
     />
     <div
-      className="usa-footer__secondary-section"
+      class="usa-footer__secondary-section"
     >
       <div
-        className="grid-container"
+        class="grid-container"
       >
         <nav
           aria-label="Footer navigation"
-          className="usa-footer__nav nobreak"
+          class="usa-footer__nav nobreak"
         >
           <div
-            className="grid-row grid-gap-4"
+            class="grid-row grid-gap-4"
           >
             <div
-              className="mobile-lg:grid-col-6 desktop:grid-col-3"
+              class="mobile-lg:grid-col-6 desktop:grid-col-3"
             >
               <section
-                className="usa-footer__primary-content usa-footer__primary-content--collapsible"
+                class="usa-footer__primary-content usa-footer__primary-content--collapsible"
               >
                 <h4
-                  className="usa-footer__primary-link"
+                  class="usa-footer__primary-link"
                 >
                   Agency Partners
                 </h4>
                 <ul
-                  className="usa-list usa-list--unstyled"
+                  class="usa-list usa-list--unstyled"
                 >
                   <li
-                    className="usa-footer__secondary-link"
+                    class="usa-footer__secondary-link"
                   >
                     <a
                       href="https://www.epa.gov/"
@@ -47,7 +47,7 @@ Array [
                     </a>
                   </li>
                   <li
-                    className="usa-footer__secondary-link"
+                    class="usa-footer__secondary-link"
                   >
                     <a
                       href="https://www.whitehouse.gov/omb"
@@ -58,7 +58,7 @@ Array [
                     </a>
                   </li>
                   <li
-                    className="usa-footer__secondary-link"
+                    class="usa-footer__secondary-link"
                   >
                     <a
                       href="https://www.energy.gov/"
@@ -69,7 +69,7 @@ Array [
                     </a>
                   </li>
                   <li
-                    className="usa-footer__secondary-link"
+                    class="usa-footer__secondary-link"
                   >
                     <a
                       href="https://www.hud.gov/"
@@ -83,21 +83,21 @@ Array [
               </section>
             </div>
             <div
-              className="mobile-lg:grid-col-6 desktop:grid-col-3"
+              class="mobile-lg:grid-col-6 desktop:grid-col-3"
             >
               <section
-                className="usa-footer__primary-content usa-footer__primary-content--collapsible"
+                class="usa-footer__primary-content usa-footer__primary-content--collapsible"
               >
                 <h4
-                  className="usa-footer__primary-link"
+                  class="usa-footer__primary-link"
                 >
                   More Information
                 </h4>
                 <ul
-                  className="usa-list usa-list--unstyled"
+                  class="usa-list usa-list--unstyled"
                 >
                   <li
-                    className="usa-footer__secondary-link"
+                    class="usa-footer__secondary-link"
                   >
                     <a
                       href="https://www.whitehouse.gov/"
@@ -108,7 +108,7 @@ Array [
                     </a>
                   </li>
                   <li
-                    className="usa-footer__secondary-link"
+                    class="usa-footer__secondary-link"
                   >
                     <a
                       href="#"
@@ -117,7 +117,7 @@ Array [
                     </a>
                   </li>
                   <li
-                    className="usa-footer__secondary-link"
+                    class="usa-footer__secondary-link"
                   >
                     <a
                       href="#"
@@ -129,32 +129,32 @@ Array [
               </section>
             </div>
             <div
-              className="mobile-lg:grid-col-6 desktop:grid-col-3"
+              class="mobile-lg:grid-col-6 desktop:grid-col-3"
             >
               <section
-                className="usa-footer__primary-content usa-footer__primary-content--collapsible"
+                class="usa-footer__primary-content usa-footer__primary-content--collapsible"
               >
                 <h4
-                  className="usa-footer__primary-link"
+                  class="usa-footer__primary-link"
                 >
                   <br />
                 </h4>
                 <ul
-                  className="usa-list usa-list--unstyled"
+                  class="usa-list usa-list--unstyled"
                 >
                   <li
-                    className="usa-footer__secondary-link"
+                    class="usa-footer__secondary-link"
                   >
                     <div
-                      className="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2"
+                      class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2"
                       data-testid="footerLogo"
                     >
                       <div
-                        className="mobile-lg:grid-col-auto"
+                        class="mobile-lg:grid-col-auto"
                       >
                         <img
                           alt="Whitehouse logo"
-                          className="usa-footer__logo-img"
+                          class="usa-footer__logo-img"
                           src="test-file-stub"
                         />
                       </div>
@@ -164,41 +164,41 @@ Array [
               </section>
             </div>
             <div
-              className="mobile-lg:grid-col-6 desktop:grid-col-3"
+              class="mobile-lg:grid-col-6 desktop:grid-col-3"
             >
               <section
-                className="usa-footer__primary-content usa-footer__primary-content--collapsible"
+                class="usa-footer__primary-content usa-footer__primary-content--collapsible"
               >
                 <h4
-                  className="usa-footer__primary-link"
+                  class="usa-footer__primary-link"
                 >
                   Council on Environmental Quality
                   <br />
                 </h4>
                 <ul
-                  className="usa-list usa-list--unstyled"
+                  class="usa-list usa-list--unstyled"
                 >
                   <li
-                    className="usa-footer__secondary-link"
+                    class="usa-footer__secondary-link"
                   >
                     <address
-                      className="usa-footer__address footerAddressReadability"
+                      class="usa-footer__address footerAddressReadability"
                     >
                       <div
-                        className="usa-footer__contact-info grid-row grid-gap"
+                        class="usa-footer__contact-info grid-row grid-gap"
                       >
                         <div
-                          className=""
+                          class=""
                         >
                           730 Jackson Pl NW
                         </div>
                         <div
-                          className=""
+                          class=""
                         >
                           Washington, D.C. 20506
                         </div>
                         <div
-                          className=""
+                          class=""
                         >
                           (202) 395-5750
                         </div>
@@ -212,7 +212,7 @@ Array [
         </nav>
       </div>
     </div>
-  </footer>,
+  </footer>
-  ",",
+  ,
-]
+</DocumentFragment>
 `;