Use percy/cli

This commit is contained in:
Tessa Kelly 2022-01-21 16:49:18 -08:00
parent 32dceb0f21
commit bc81b9641d
6 changed files with 1551 additions and 1853 deletions

View File

@ -101,7 +101,7 @@ main = do
writeFileChanged out "Skipped running Percy tests, PERCY_TOKEN not set." writeFileChanged out "Skipped running Percy tests, PERCY_TOKEN not set."
Just _ -> do Just _ -> do
need ["log/npm-install.txt", "log/public.txt"] need ["log/npm-install.txt", "log/public.txt"]
cmd (WithStdout True) (FileStdout out) "script/percy-tests.js" cmd (WithStdout True) (FileStdout out) "script/percy-tests.sh"
"log/axe-report.json" %> \out -> do "log/axe-report.json" %> \out -> do
need ["log/npm-install.txt", "script/run-axe.sh", "script/axe-puppeteer.js", "log/public.txt"] need ["log/npm-install.txt", "script/run-axe.sh", "script/axe-puppeteer.js", "log/public.txt"]

3293
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -26,12 +26,16 @@
}, },
"homepage": "https://github.com/NoRedInk/NoRedInk-ui#readme", "homepage": "https://github.com/NoRedInk/NoRedInk-ui#readme",
"devDependencies": { "devDependencies": {
"@percy/script": "^1.0.2", "@percy/cli": "^1.0.0-beta.73",
"@percy/puppeteer": "^2.0.0",
"browserify": "16.2.3", "browserify": "16.2.3",
"puppeteer": "^3.3.0",
"request": "^2.88.0" "request": "^2.88.0"
}, },
"dependencies": { "dependencies": {
"axe-core": "3.5.6", "axe-core": "3.5.6",
"puppeteer": "3.3.0" "expect": "^27.4.6",
"http-server": "^14.1.0",
"mocha": "^9.1.4"
} }
} }

View File

@ -1,38 +1,82 @@
const PercyScript = require('@percy/script') const expect = require('expect');
const puppeteer = require('puppeteer');
const httpServer = require('http-server');
const percySnapshot = require('@percy/puppeteer');
const platform = require('os').platform();
// We need to change the args passed to puppeteer based on the platform they're using
const puppeteerArgs = /^win/.test(platform) ? [] : ['--single-process'];
const PORT = process.env.PORT_NUMBER || 8000;
describe('Visual tests', function () {
this.timeout(30000);
let page;
let server;
let browser;
before(async () => {
server = httpServer.createServer({ root: `${__dirname}/../public` });
server.listen(PORT);
browser = await puppeteer.launch({
headless: true,
timeout: 10000,
args: puppeteerArgs
});
});
after(() => {
server.close();
});
PercyScript.run(async (page, percySnapshot) => {
const defaultProcessing = async (name, location) => { const defaultProcessing = async (name, location) => {
await page.goto(location) await page.goto(location)
await page.waitFor(`#${name}`) await page.waitFor(`#${name}`)
await percySnapshot(name) await percySnapshot(page, name)
console.log(`Snapshot complete for ${name}`) console.log(`Snapshot complete for ${name}`)
} }
const specialProcessing = { const specialProcessing = {
'Modal': async (name, location) => { 'Modal': async (name, location) => {
await defaultProcessing(name, location) await page.goto(location)
await page.waitFor(`#${name}`)
await page.click('#launch-modal') await page.click('#launch-modal')
await page.waitFor('[role="dialog"]') await page.waitFor('[role="dialog"]')
await percySnapshot('Full Info Modal') await percySnapshot(page, 'Full Info Modal')
await page.click('[aria-label="Close modal"]') await page.click('[aria-label="Close modal"]')
await page.select('select', 'warning') await page.select('select', 'warning')
await page.click('#launch-modal') await page.click('#launch-modal')
await page.waitFor('[role="dialog"]') await page.waitFor('[role="dialog"]')
await percySnapshot('Full Warning Modal') await percySnapshot(page, 'Full Warning Modal')
await page.click('[aria-label="Close modal"]') await page.click('[aria-label="Close modal"]')
} },
'Text.Writing': () => {}
} }
await page.goto('http://localhost:8000')
await page.waitFor('.module-example__doodad-link') it('All', async function () {
let links = await page.evaluate(() => { page = await browser.newPage();
let nodes = Array.from(document.querySelectorAll('.module-example__doodad-link')); await page.goto(`http://localhost:${PORT}`);
return nodes.map(node => [node["dataset"]["percyName"], node.href]) await page.$('#maincontent');
await percySnapshot(page, this.test.fullTitle());
page.close();
}); });
await links.reduce((acc, [name, location]) => { it('Doodads', async function () {
return acc.then(() => { page = await browser.newPage();
let handler = specialProcessing[name] || defaultProcessing await page.goto(`http://localhost:${PORT}`);
return handler(name, location)
} await page.$('#maincontent');
) let links = await page.evaluate(() => {
}, Promise.resolve()) let nodes = Array.from(document.querySelectorAll("[data-nri-description='doodad-link']"));
}) return nodes.map(node => [node.text, node.href])
})
await links.reduce((acc, [name, location]) => {
return acc.then(() => {
let handler = specialProcessing[name] || defaultProcessing
return handler(name, location)
}
)
}, Promise.resolve())
})
});

View File

@ -1,12 +1,3 @@
#!/usr/bin/env bash #!/usr/bin/env bash
set -euo pipefail set -euo pipefail
npx percy exec -- mocha script/percy-tests.js --exit
# start a web server in the background and tear it down when exiting
./script/serve.sh public &
SERVER_PID=$!
cleanup() {
kill "$SERVER_PID"
}
trap cleanup EXIT INT
npx percy exec -- node script/percy-tests.js

View File

@ -116,6 +116,7 @@ preview_ navigate example =
(ClickableText.link example.name (ClickableText.link example.name
[ ClickableText.href (exampleHref example) [ ClickableText.href (exampleHref example)
, ClickableText.css [ Css.marginBottom (Css.px 10) ] , ClickableText.css [ Css.marginBottom (Css.px 10) ]
, ClickableText.nriDescription "doodad-link"
] ]
:: [ Html.div :: [ Html.div
[ Attributes.css [ Attributes.css
@ -197,11 +198,6 @@ exampleLink example =
[ ClickableText.link (fullName example) [ ClickableText.link (fullName example)
[ ClickableText.href (exampleHref example) [ ClickableText.href (exampleHref example)
, ClickableText.large , ClickableText.large
, ClickableText.custom
[ -- this data attribute is used to name the Percy screenshots
String.replace "." "-" example.name
|> Attributes.attribute "data-percy-name"
]
] ]
] ]