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

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';