mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-02-21 09:11:26 -08:00
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
This commit is contained in:
Nat Hillard
GitHub
parent
7e6144c96f
commit
426f596c7a
16 changed files with 2584 additions and 890 deletions
13
.github/workflows/e2e.yml
vendored
Normal file
13
.github/workflows/e2e.yml
vendored
Normal file
|
|
@ -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
|
||||
|
|
@ -6,6 +6,7 @@ module.exports = {
|
|||
},
|
||||
'extends': [
|
||||
'plugin:react/recommended',
|
||||
'plugin:cypress/recommended',
|
||||
'google',
|
||||
],
|
||||
'parser': '@typescript-eslint/parser',
|
||||
|
|
|
|||
2
client/.gitignore
vendored
2
client/.gitignore
vendored
|
|
@ -2,3 +2,5 @@ node_modules/
|
|||
.cache/
|
||||
public
|
||||
.eslintcache
|
||||
cypress/screenshots/
|
||||
cypress/videos/
|
||||
|
|
|
|||
4
client/cypress.json
Normal file
4
client/cypress.json
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"baseUrl": "http://localhost:8000/",
|
||||
"integrationFolder": "cypress/e2e"
|
||||
}
|
||||
34
client/cypress/e2e/accessibility.test.js
Normal file
34
client/cypress/e2e/accessibility.test.js
Normal file
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
11
client/cypress/e2e/sample.spec.js
Normal file
11
client/cypress/e2e/sample.spec.js
Normal file
|
|
@ -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');
|
||||
});
|
||||
});
|
||||
5
client/cypress/fixtures/example.json
Normal file
5
client/cypress/fixtures/example.json
Normal file
|
|
@ -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"
|
||||
}
|
||||
34
client/cypress/plugins/index.js
Normal file
34
client/cypress/plugins/index.js
Normal file
|
|
@ -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;
|
||||
},
|
||||
});
|
||||
};
|
||||
27
client/cypress/support/commands.js
Normal file
27
client/cypress/support/commands.js
Normal file
|
|
@ -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) => { ... })
|
||||
18
client/cypress/support/index.js
Normal file
18
client/cypress/support/index.js
Normal file
|
|
@ -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';
|
||||
|
|
@ -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'],
|
||||
};
|
||||
|
|
|
|||
3209
client/package-lock.json
generated
3209
client/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -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": {
|
||||
|
|
|
|||
1
client/setup-test-env.js
Normal file
1
client/setup-test-env.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
import '@testing-library/jest-dom/extend-expect';
|
||||
|
|
@ -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
|
||||
.create(<LocalizedComponent><J40Footer /></LocalizedComponent>)
|
||||
.toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
const {asFragment} = render(
|
||||
<LocalizedComponent>
|
||||
<J40Footer />
|
||||
</LocalizedComponent>,
|
||||
);
|
||||
expect(asFragment()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
`;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue