Skip to content

Commit

Permalink
Replace pa11y with underlying HTML_CodeSniffer (#285)
Browse files Browse the repository at this point in the history
* Replace pa11y with underlying HTML_CodeSniffer

**Why**:

- It currently duplicates and sometimes conflicts with our integration testing setup
   - Currently, we run two separate versions of Puppeteer, which each download separate copies of Chromium
   - Also helps me to avoid debugging a vague error occurring when upgrading dependencies to latest version
- Consolidates testing tools to Jest
- A step toward alignment of accessibility integration testing, as it could be reasonably substituted with aXe
- Easier to run individual tests, which was difficult before since Jest setup occurred through scripts/jest.sh and did not support additional arguments. Now, test commands can go directly through the Jest CLI.
- Fewer dependencies overall

* Remove deleted accessibility job

* Swap test-jest npm script with test

* Remove unused pa11y configuration file
aduth authored Jan 25, 2022

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent b65183b commit a9b3275
Showing 11 changed files with 64 additions and 1,726 deletions.
20 changes: 2 additions & 18 deletions .circleci/config.yml
Original file line number Diff line number Diff line change
@@ -67,7 +67,7 @@ jobs:
- build
- run:
name: Run jest integration test
command: npm run test-jest
command: npm test
visual-regression:
working_directory: ~/identity-style-guide
executor: ruby_browsers
@@ -79,22 +79,7 @@ jobs:
- build
- run:
name: Run visual regression test
command: npm run test-jest
- store_artifacts:
path: tmp/results
destination: results
- store_test_results:
path: tmp/results
accessibility:
working_directory: ~/identity-style-guide
executor: ruby_browsers
steps:
- checkout
- bundle-npm-install
- build
- run:
name: Run pa11y accessibility test
command: npm run test-pa11y
command: npm test
- store_artifacts:
path: tmp/results
destination: results
@@ -108,4 +93,3 @@ workflows:
- lints
- integration
- visual-regression
- accessibility
9 changes: 0 additions & 9 deletions .pa11yci.js

This file was deleted.

10 changes: 1 addition & 9 deletions Makefile
Original file line number Diff line number Diff line change
@@ -61,15 +61,7 @@ copy-scss:
./node_modules/.bin/gulp copy-scss

test: build
make test-runners

test-runners: test-runner-pa11y test-runner-jest

test-runner-pa11y:
./scripts/pa11y.sh

test-runner-jest:
./scripts/jest.sh
npm exec jest

clean:
rm -rf $(OUTPUT_DIR)
2 changes: 2 additions & 0 deletions jest-puppeteer.config.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
process.env.JEST_PORT = process.env.JEST_PORT || '40410';

module.exports = {
server: {
command: `ruby -run -ehttpd ./dist -p${process.env.JEST_PORT}`,
1,652 changes: 8 additions & 1,644 deletions package-lock.json

Large diffs are not rendered by default.

8 changes: 2 additions & 6 deletions package.json
Original file line number Diff line number Diff line change
@@ -34,8 +34,6 @@
"prelint": "make build-package",
"lint": "gulp lint",
"test": "make test",
"test-pa11y": "make test-runner-pa11y",
"test-jest": "make test-runner-jest",
"build": "make build",
"federalist": "make build-assets",
"prepublishOnly": "make lint && make clean && make build-assets build-package"
@@ -76,7 +74,6 @@
"eslint-config-airbnb-base": "^14.2.1",
"eslint-plugin-import": "^2.24.2",
"eslint-plugin-prettier": "^4.0.0",
"get-port-cli": "^2.0.0",
"gulp": "^4.0.2",
"gulp-babel": "^8.0.0",
"gulp-if": "^3.0.0",
@@ -87,10 +84,10 @@
"gulp-sass": "^5.1.0",
"gulp-sourcemaps": "^3.0.0",
"gulp-uglify": "^3.0.2",
"html_codesniffer": "^2.5.1",
"jest": "^27.0.3",
"jest-puppeteer": "^5.0.4",
"mkdirp": "^1.0.4",
"pa11y-ci": "^2.4.1",
"pixelmatch": "^5.2.1",
"pngjs": "^6.0.0",
"postcss": "^8.4.5",
@@ -99,7 +96,6 @@
"sass-embedded": "^1.0.0-rc.1",
"stylelint": "^14.1.0",
"vinyl-buffer": "^1.0.1",
"vinyl-source-stream": "^2.0.0",
"wait-on": "^5.3.0"
"vinyl-source-stream": "^2.0.0"
}
}
5 changes: 0 additions & 5 deletions scripts/jest.sh

This file was deleted.

29 changes: 0 additions & 29 deletions scripts/pa11y.sh

This file was deleted.

35 changes: 35 additions & 0 deletions test/accessibility.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
/* eslint-disable no-await-in-loop */

import path from 'path';
import { getURLsFromSitemap } from './support/sitemap';

const MESSAGE_TYPE_ERROR = 1;

test('accessibility', async () => {
const urls = await getURLsFromSitemap();

for (const url of urls) {
await page.goto(url);
await page.addScriptTag({
path: path.resolve(__dirname, '../node_modules/html_codesniffer/build/HTMLCS.js'),
});
const messages = await page.evaluate(
() =>
new Promise((resolve, reject) => {
window.HTMLCS.process('WCAG2AA', window.document, (error) => {
if (error) {
reject(error);
} else {
resolve(window.HTMLCS.getMessages());
}
});
}),
);

for (const message of messages) {
if (message.type === MESSAGE_TYPE_ERROR) {
throw message;
}
}
}
}, 1000000);
8 changes: 2 additions & 6 deletions test/screenshot.test.js
Original file line number Diff line number Diff line change
@@ -6,18 +6,14 @@ const assert = require('assert');
const mkdirp = require('mkdirp');
const { PNG } = require('pngjs');
const match = require('pixelmatch');
const { getURLsFromSitemap } = require('./support/sitemap');

const { writeFile } = fsPromises;

const LOCAL_HOST = `http://localhost:${process.env.JEST_PORT}`;
const REMOTE_HOST = 'https://design.login.gov';
const DIFF_DIRECTORY = join(__dirname, '../tmp/results/screenshot-diff');

async function getURLsFromSitemap(url) {
await page.goto(url);
return page.$$eval('url loc', (locs) => locs.map((loc) => loc.textContent));
}

async function stubAnimations() {
await page.evaluate(() => {
const isGif = (img) => img.src.endsWith('.gif');
@@ -84,7 +80,7 @@ function fillImageToSize(image, width, height) {
}

test('screenshot visual regression', async () => {
const paths = (await getURLsFromSitemap(`${LOCAL_HOST}/sitemap.xml`)).map(getURLPath);
const paths = (await getURLsFromSitemap()).map(getURLPath);

for (const path of paths) {
const local = await getScreenshot(LOCAL_HOST + path);
12 changes: 12 additions & 0 deletions test/support/sitemap.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
const LOCAL_HOST = `http://localhost:${process.env.JEST_PORT}`;
const REMOTE_HOST = 'https://design.login.gov';

function getNormalizedURL(url) {
return url.replace(REMOTE_HOST, LOCAL_HOST);
}

export async function getURLsFromSitemap() {
await page.goto(`${LOCAL_HOST}/sitemap.xml`);
const urls = await page.$$eval('url loc', (locs) => locs.map((loc) => loc.textContent));
return urls.map(getNormalizedURL);
}

0 comments on commit a9b3275

Please sign in to comment.