-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Update the accessibility check to use the shared package
- Loading branch information
Alex Page
committed
Mar 11, 2021
1 parent
7bed283
commit a21ad68
Showing
3 changed files
with
12 additions
and
102 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,107 +1,19 @@ | ||
| /* eslint-disable no-console */ | ||
| const os = require('os'); | ||
|
|
||
| const puppeteer = require('puppeteer'); | ||
| const pMap = require('p-map'); | ||
| const chalk = require('chalk'); | ||
|
|
||
| // eslint-disable-next-line node/no-path-concat | ||
| const iframePath = `file://${__dirname}/../build/storybook/static/iframe.html`; | ||
| const concurrentCount = os.cpus().length; | ||
| const skippedStoryIds = ['playground-playground', 'all-examples']; | ||
|
|
||
| const getUrls = async (browser) => { | ||
| // Get the URLS from storybook | ||
| const page = await browser.newPage(); | ||
| await page.goto(iframePath); | ||
| const storyIds = await page.evaluate(() => | ||
| window.__STORYBOOK_CLIENT_API__.raw().map((story) => story.id), | ||
| ); | ||
| await page.close(); | ||
|
|
||
| const urls = storyIds.reduce((memo, storyId) => { | ||
| // If it is a story id that is not in excludedStoryIds | ||
| if (skippedStoryIds.every((id) => !storyId.includes(id))) { | ||
| const url = `${iframePath}?id=${storyId}`; | ||
| memo.push( | ||
| url, | ||
| // Dark mode has lots of errors. It is still very WIP so ignore for now | ||
| // `${url}&contexts=Color%20scheme%3DDark%20Mode`, | ||
| ); | ||
| } | ||
|
|
||
| return memo; | ||
| }, []); | ||
|
|
||
| return urls; | ||
| }; | ||
|
|
||
| const formatFailure = (fail) => { | ||
| return ` - ${fail.failureSummary.split('\n ')[1]}\n ${fail.html}`; | ||
| }; | ||
|
|
||
| const formatMessage = (id, violations) => { | ||
| const url = chalk.underline.blue( | ||
| `http://localhost:6006/iframe.html?id=all-components-${id}`, | ||
| ); | ||
| return violations | ||
| .map((fail) => { | ||
| const message = fail.nodes | ||
| .map((error) => formatFailure(error)) | ||
| .join('\n'); | ||
| return `${chalk.red(fail.impact)} => ${url}\n${message}`; | ||
| }) | ||
| .join('\n'); | ||
| }; | ||
| const {storybookA11yTest} = require('@shopify/storybook-a11y-test'); | ||
|
|
||
| (async () => { | ||
| try { | ||
| // Open a browser | ||
| console.log(chalk.bold(`🌐 Opening ${concurrentCount} tabs in chromium`)); | ||
| const browser = await puppeteer.launch(); | ||
|
|
||
| // Get the test ids from storybook | ||
| const testIds = await getUrls(browser); | ||
|
|
||
| console.log(chalk.bold(`🧪 Testing ${testIds.length} urls with axe`)); | ||
|
|
||
| // Test the pages with axe | ||
| const testPage = async (url) => { | ||
| const id = url.replace(`${iframePath}?id=all-components-`, ''); | ||
| console.log(` - ${id}`); | ||
|
|
||
| try { | ||
| const page = await browser.newPage(); | ||
| await page.goto(url); | ||
| const result = await page.evaluate(() => | ||
| window.axe.run(document.getElementById('root'), {}), | ||
| ); | ||
| await page.close(); | ||
|
|
||
| if (result.violations.length) { | ||
| return formatMessage(id, result.violations); | ||
| } | ||
| } catch (error) { | ||
| return `please retry => ${id}:\n - ${error.message}`; | ||
| } | ||
| }; | ||
| const options = { | ||
| iframePath: 'build/storybook/static/iframe.html', | ||
| skippedStoryIds: ['playground-playground', 'all-examples'], | ||
| }; | ||
|
|
||
| const results = await pMap(testIds, testPage, { | ||
| concurrency: concurrentCount, | ||
| }); | ||
| await browser.close(); | ||
| const results = await storybookA11yTest(options); | ||
|
|
||
| // Format the results and log them out | ||
| const messages = results.filter((x) => x); | ||
| if (messages.length) { | ||
| console.error(chalk.bold(`‼️ Test failures found`)); | ||
| console.log(messages.join('\n')); | ||
| process.exit(1); | ||
| } else { | ||
| console.log(chalk.bold('🧚♀️ Accessibility is all g')); | ||
| } | ||
| } catch (error) { | ||
| console.error(error.message); | ||
| if (results.length) { | ||
| console.error(`‼️ Test failures found`); | ||
| console.log(results.join('\n')); | ||
| process.exit(1); | ||
| } else { | ||
| console.log('🧚♀️ Accessibility is all g'); | ||
| } | ||
| })(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters