mirror of
https://github.com/Choices-js/Choices.git
synced 2024-05-20 22:46:33 +02:00
Use Chrome with Cypress (Electron resulted in flaky dropdown test), save Puppeteer diff image even if pixelmatch throws error, update Chrome snapshot
This commit is contained in:
parent
977221650a
commit
20579bad35
Binary file not shown.
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 24 KiB |
11
.github/actions-scripts/puppeteer.js
vendored
11
.github/actions-scripts/puppeteer.js
vendored
|
@ -11,8 +11,11 @@ const server = require('../../server');
|
||||||
async function test() {
|
async function test() {
|
||||||
const browser = await puppeteer.launch();
|
const browser = await puppeteer.launch();
|
||||||
const page = await browser.newPage();
|
const page = await browser.newPage();
|
||||||
|
const artifactsPath = 'screenshot';
|
||||||
|
const snapshotName = `puppeteer-${process.platform}.png`;
|
||||||
let error;
|
let error;
|
||||||
let pixelDifference;
|
let pixelDifference;
|
||||||
|
let diff;
|
||||||
|
|
||||||
if (!server.listening) await once(server, 'listening');
|
if (!server.listening) await once(server, 'listening');
|
||||||
|
|
||||||
|
@ -32,8 +35,6 @@ async function test() {
|
||||||
await page.keyboard.press('ArrowDown');
|
await page.keyboard.press('ArrowDown');
|
||||||
await page.keyboard.press('ArrowDown');
|
await page.keyboard.press('ArrowDown');
|
||||||
|
|
||||||
const snapshotName = `puppeteer-${process.platform}.png`;
|
|
||||||
const artifactsPath = 'screenshot';
|
|
||||||
mkdirSync(artifactsPath, { recursive: true });
|
mkdirSync(artifactsPath, { recursive: true });
|
||||||
const imageBuffer = await page.screenshot({
|
const imageBuffer = await page.screenshot({
|
||||||
path: path.join(artifactsPath, snapshotName),
|
path: path.join(artifactsPath, snapshotName),
|
||||||
|
@ -46,7 +47,7 @@ async function test() {
|
||||||
readFileSync(path.resolve(__dirname, `./__snapshots__/${snapshotName}`)),
|
readFileSync(path.resolve(__dirname, `./__snapshots__/${snapshotName}`)),
|
||||||
);
|
);
|
||||||
const { width, height } = screenshot;
|
const { width, height } = screenshot;
|
||||||
const diff = new PNG({ width, height });
|
diff = new PNG({ width, height });
|
||||||
pixelDifference = pixelmatch(
|
pixelDifference = pixelmatch(
|
||||||
screenshot.data,
|
screenshot.data,
|
||||||
snapshot.data,
|
snapshot.data,
|
||||||
|
@ -57,11 +58,13 @@ async function test() {
|
||||||
threshold: 0.6,
|
threshold: 0.6,
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
writeFileSync(path.join(artifactsPath, 'diff.png'), PNG.sync.write(diff));
|
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error(err);
|
console.error(err);
|
||||||
error = err;
|
error = err;
|
||||||
} finally {
|
} finally {
|
||||||
|
if (diff) {
|
||||||
|
writeFileSync(path.join(artifactsPath, 'diff-' + snapshotName), PNG.sync.write(diff));
|
||||||
|
}
|
||||||
await Promise.all([
|
await Promise.all([
|
||||||
browser.close(),
|
browser.close(),
|
||||||
new Promise(resolve => server.close(resolve)),
|
new Promise(resolve => server.close(resolve)),
|
||||||
|
|
|
@ -565,15 +565,13 @@ describe('Choices - select multiple', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('dropdown scrolling', () => {
|
describe('dropdown scrolling', () => {
|
||||||
let choicesCount: number;
|
let choicesCount;
|
||||||
// let choicesItems: number[];
|
|
||||||
|
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
cy.get('[data-test-hook=scrolling-dropdown]')
|
cy.get('[data-test-hook=scrolling-dropdown]')
|
||||||
.find('.choices__list--dropdown .choices__list .choices__item')
|
.find('.choices__list--dropdown .choices__list .choices__item')
|
||||||
.then(($choices) => {
|
.then(($choices) => {
|
||||||
choicesCount = $choices.length;
|
choicesCount = $choices.length;
|
||||||
// choicesItems = Array.from({ length: 10 }, (_, i) => i + 1);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
cy.get('[data-test-hook=scrolling-dropdown]')
|
cy.get('[data-test-hook=scrolling-dropdown]')
|
||||||
|
@ -590,13 +588,14 @@ describe('Choices - select multiple', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
it('scrolls to next choice on down arrow', () => {
|
it('scrolls to next choice on down arrow', () => {
|
||||||
for (let index = 0; index < choicesCount; index++) {
|
for (let index = 1; index <= choicesCount; index++) {
|
||||||
cy.wait(100);
|
cy.wait(100);
|
||||||
|
|
||||||
cy.get('[data-test-hook=scrolling-dropdown]')
|
cy.get('[data-test-hook=scrolling-dropdown]')
|
||||||
.find('.choices__list--dropdown .choices__list .is-highlighted')
|
.find('.choices__list--dropdown .choices__list .is-highlighted')
|
||||||
.should(($choice) => {
|
.invoke('text')
|
||||||
expect($choice.text().trim()).to.equal(`Choice ${index + 1}`);
|
.then((text) => {
|
||||||
|
expect(text.trim()).to.equal(`Choice ${index}`);
|
||||||
});
|
});
|
||||||
|
|
||||||
cy.get('[data-test-hook=scrolling-dropdown]')
|
cy.get('[data-test-hook=scrolling-dropdown]')
|
||||||
|
@ -619,8 +618,9 @@ describe('Choices - select multiple', () => {
|
||||||
|
|
||||||
cy.get('[data-test-hook=scrolling-dropdown]')
|
cy.get('[data-test-hook=scrolling-dropdown]')
|
||||||
.find('.choices__list--dropdown .choices__list .is-highlighted')
|
.find('.choices__list--dropdown .choices__list .is-highlighted')
|
||||||
.should(($choice) => {
|
.invoke('text')
|
||||||
expect($choice.text().trim()).to.equal(`Choice ${index}`);
|
.then((text) => {
|
||||||
|
expect(text.trim()).to.equal(`Choice ${index}`);
|
||||||
});
|
});
|
||||||
|
|
||||||
cy.get('[data-test-hook=scrolling-dropdown]')
|
cy.get('[data-test-hook=scrolling-dropdown]')
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
"build": "run-p js:build css:build",
|
"build": "run-p js:build css:build",
|
||||||
"lint": "eslint src/scripts/**/*.ts",
|
"lint": "eslint src/scripts/**/*.ts",
|
||||||
"bundlesize": "bundlesize",
|
"bundlesize": "bundlesize",
|
||||||
"cypress:run": "cypress run",
|
"cypress:run": "cypress run --browser chrome",
|
||||||
"cypress:open": "cypress open",
|
"cypress:open": "cypress open",
|
||||||
"cypress:ci": "cypress run --record --group $GITHUB_REF --ci-build-id $GITHUB_SHA",
|
"cypress:ci": "cypress run --record --group $GITHUB_REF --ci-build-id $GITHUB_SHA",
|
||||||
"test": "run-s test:unit test:e2e",
|
"test": "run-s test:unit test:e2e",
|
||||||
|
|
Loading…
Reference in a new issue