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."
Just _ -> do
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
need ["log/npm-install.txt", "script/run-axe.sh", "script/axe-puppeteer.js", "log/public.txt"]

3291
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",
"devDependencies": {
"@percy/script": "^1.0.2",
"@percy/cli": "^1.0.0-beta.73",
"@percy/puppeteer": "^2.0.0",
"browserify": "16.2.3",
"puppeteer": "^3.3.0",
"request": "^2.88.0"
},
"dependencies": {
"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,33 +1,76 @@
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) => {
await page.goto(location)
await page.waitFor(`#${name}`)
await percySnapshot(name)
await percySnapshot(page, name)
console.log(`Snapshot complete for ${name}`)
}
const specialProcessing = {
'Modal': async (name, location) => {
await defaultProcessing(name, location)
await page.goto(location)
await page.waitFor(`#${name}`)
await page.click('#launch-modal')
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.select('select', 'warning')
await page.click('#launch-modal')
await page.waitFor('[role="dialog"]')
await percySnapshot('Full Warning Modal')
await percySnapshot(page, 'Full Warning Modal')
await page.click('[aria-label="Close modal"]')
},
'Text.Writing': () => {}
}
}
await page.goto('http://localhost:8000')
await page.waitFor('.module-example__doodad-link')
let links = await page.evaluate(() => {
let nodes = Array.from(document.querySelectorAll('.module-example__doodad-link'));
return nodes.map(node => [node["dataset"]["percyName"], node.href])
it('All', async function () {
page = await browser.newPage();
await page.goto(`http://localhost:${PORT}`);
await page.$('#maincontent');
await percySnapshot(page, this.test.fullTitle());
page.close();
});
it('Doodads', async function () {
page = await browser.newPage();
await page.goto(`http://localhost:${PORT}`);
await page.$('#maincontent');
let links = await page.evaluate(() => {
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
@ -35,4 +78,5 @@ PercyScript.run(async (page, percySnapshot) => {
}
)
}, Promise.resolve())
})
})
});

View File

@ -1,12 +1,3 @@
#!/usr/bin/env bash
set -euo pipefail
# 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
npx percy exec -- mocha script/percy-tests.js --exit

View File

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