Skip to content
Permalink
Browse files

chore: declare `toBeGolden` to TypeScript (#6080)

Which means we can avoid all the ts-expect-errors on any `toBeGolden`
calls.
  • Loading branch information
jackfranklin committed Jun 23, 2020
1 parent 70a900e commit 381b0f833cabcbda00a462a9913f10ea08c64253
Showing with 11 additions and 48 deletions.
  1. +0 −4 test/coverage.spec.ts
  2. +0 −7 test/emulation.spec.ts
  3. +6 −0 test/mocha-utils.ts
  4. +0 −2 test/requestinterception.spec.ts
  5. +5 −35 test/screenshot.spec.ts
@@ -123,8 +123,6 @@ describe('Coverage specs', function () {
const coverage = await page.coverage.stopJSCoverage();
expect(
JSON.stringify(coverage, null, 2).replace(/:\d{4}\//g, ':<PORT>/')
// TODO (@jackfranklin) extend the Expect typedefs to fix this
// @ts-expect-error toBeGolden matcher
).toBeGolden('jscoverage-involved.txt');
});
describe('resetOnNavigation', function () {
@@ -227,8 +225,6 @@ describe('Coverage specs', function () {
const coverage = await page.coverage.stopCSSCoverage();
expect(
JSON.stringify(coverage, null, 2).replace(/:\d{4}\//g, ':<PORT>/')
// TODO (@jackfranklin) extend the Expect typedefs to fix this
// @ts-expect-error toBeGolden matcher
).toBeGolden('csscoverage-involved.txt');
});
it('should ignore injected stylesheets', async () => {
@@ -354,49 +354,42 @@ describe('Emulation', () => {
{
await page.emulateVisionDeficiency('none');
const screenshot = await page.screenshot();
// @ts-expect-error TODO (@jackfranklin) toBeGolden needs declaring
expect(screenshot).toBeGolden('screenshot-sanity.png');
}

{
await page.emulateVisionDeficiency('achromatopsia');
const screenshot = await page.screenshot();
// @ts-expect-error TODO (@jackfranklin) toBeGolden needs declaring
expect(screenshot).toBeGolden('vision-deficiency-achromatopsia.png');
}

{
await page.emulateVisionDeficiency('blurredVision');
const screenshot = await page.screenshot();
// @ts-expect-error TODO (@jackfranklin) toBeGolden needs declaring
expect(screenshot).toBeGolden('vision-deficiency-blurredVision.png');
}

{
await page.emulateVisionDeficiency('deuteranopia');
const screenshot = await page.screenshot();
// @ts-expect-error TODO (@jackfranklin) toBeGolden needs declaring
expect(screenshot).toBeGolden('vision-deficiency-deuteranopia.png');
}

{
await page.emulateVisionDeficiency('protanopia');
const screenshot = await page.screenshot();
// @ts-expect-error TODO (@jackfranklin) toBeGolden needs declaring
expect(screenshot).toBeGolden('vision-deficiency-protanopia.png');
}

{
await page.emulateVisionDeficiency('tritanopia');
const screenshot = await page.screenshot();
// @ts-expect-error TODO (@jackfranklin) toBeGolden needs declaring
expect(screenshot).toBeGolden('vision-deficiency-tritanopia.png');
}

{
await page.emulateVisionDeficiency('none');
const screenshot = await page.screenshot();
// @ts-expect-error TODO (@jackfranklin) toBeGolden needs declaring
expect(screenshot).toBeGolden('screenshot-sanity.png');
}
});
@@ -100,6 +100,12 @@ const defaultBrowserOptions = Object.assign(
}
})();

declare module 'expect/build/types' {
interface Matchers<R> {
toBeGolden(x: string): R;
}
}

const setupGoldenAssertions = (): void => {
const suffix = product.toLowerCase();
const GOLDEN_DIR = path.join(__dirname, 'golden-' + suffix);
@@ -666,8 +666,6 @@ describe('request interception', function () {
return new Promise((fulfill) => (img.onload = fulfill));
}, server.PREFIX);
const img = await page.$('img');
// TODO (@jackfranklin): toBeGolden type fix
// @ts-expect-error
expect(await img.screenshot()).toBeGolden('mock-binary-response.png');
});
it('should stringify intercepted request response headers', async () => {
@@ -33,8 +33,6 @@ describe('Screenshots', function () {
await page.setViewport({ width: 500, height: 500 });
await page.goto(server.PREFIX + '/grid.html');
const screenshot = await page.screenshot();
// TODO (@jackfranklin): toBeGolden type fix
// @ts-expect-error
expect(screenshot).toBeGolden('screenshot-sanity.png');
});
itFailsFirefox('should clip rect', async () => {
@@ -50,8 +48,6 @@ describe('Screenshots', function () {
height: 100,
},
});
// TODO (@jackfranklin): toBeGolden type fix
// @ts-expect-error
expect(screenshot).toBeGolden('screenshot-clip-rect.png');
});
itFailsFirefox('should clip elements to the viewport', async () => {
@@ -67,8 +63,6 @@ describe('Screenshots', function () {
height: 100,
},
});
// TODO (@jackfranklin): toBeGolden type fix
// @ts-expect-error
expect(screenshot).toBeGolden('screenshot-offscreen-clip.png');
});
it('should run in parallel', async () => {
@@ -90,8 +84,6 @@ describe('Screenshots', function () {
);
}
const screenshots = await Promise.all(promises);
// TODO (@jackfranklin): toBeGolden type fix
// @ts-expect-error
expect(screenshots[1]).toBeGolden('grid-cell-1.png');
});
itFailsFirefox('should take fullPage screenshots', async () => {
@@ -102,8 +94,6 @@ describe('Screenshots', function () {
const screenshot = await page.screenshot({
fullPage: true,
});
// TODO (@jackfranklin): toBeGolden type fix
// @ts-expect-error
expect(screenshot).toBeGolden('screenshot-grid-fullpage.png');
});
it('should run in parallel in multiple pages', async () => {
@@ -128,8 +118,6 @@ describe('Screenshots', function () {
);
const screenshots = await Promise.all(promises);
for (let i = 0; i < N; ++i)
// TODO (@jackfranklin): toBeGolden type fix
// @ts-expect-error
expect(screenshots[i]).toBeGolden(`grid-cell-${i}.png`);
await Promise.all(pages.map((page) => page.close()));
});
@@ -139,8 +127,6 @@ describe('Screenshots', function () {
await page.setViewport({ width: 100, height: 100 });
await page.goto(server.EMPTY_PAGE);
const screenshot = await page.screenshot({ omitBackground: true });
// TODO (@jackfranklin): toBeGolden type fix
// @ts-expect-error
expect(screenshot).toBeGolden('transparent.png');
});
itFailsFirefox('should render white background on jpeg file', async () => {
@@ -152,8 +138,6 @@ describe('Screenshots', function () {
omitBackground: true,
type: 'jpeg',
});
// TODO (@jackfranklin): toBeGolden type fix
// @ts-expect-error
expect(screenshot).toBeGolden('white.jpg');
});
it('should work with odd clip size on Retina displays', async () => {
@@ -167,8 +151,6 @@ describe('Screenshots', function () {
height: 11,
},
});
// TODO (@jackfranklin): toBeGolden type fix
// @ts-expect-error
expect(screenshot).toBeGolden('screenshot-clip-odd-size.png');
});
itFailsFirefox('should return base64', async () => {
@@ -179,9 +161,11 @@ describe('Screenshots', function () {
const screenshot = await page.screenshot({
encoding: 'base64',
});
// TODO (@jackfranklin): toBeGolden type fix
// @ts-expect-error
expect(Buffer.from(screenshot, 'base64')).toBeGolden(
// TODO (@jackfranklin): improve the screenshot types.
// - if we pass encoding: 'base64', it returns a string
// - else it returns a buffer.
// If we can fix that we can avoid this "as string" here.
expect(Buffer.from(screenshot as string, 'base64')).toBeGolden(
'screenshot-sanity.png'
);
});
@@ -196,8 +180,6 @@ describe('Screenshots', function () {
await page.evaluate(() => window.scrollBy(50, 100));
const elementHandle = await page.$('.box:nth-of-type(3)');
const screenshot = await elementHandle.screenshot();
// TODO (@jackfranklin): toBeGolden type fix
// @ts-expect-error
expect(screenshot).toBeGolden('screenshot-element-bounding-box.png');
});
it('should take into account padding and border', async () => {
@@ -217,8 +199,6 @@ describe('Screenshots', function () {
`);
const elementHandle = await page.$('div');
const screenshot = await elementHandle.screenshot();
// TODO (@jackfranklin): toBeGolden type fix
// @ts-expect-error
expect(screenshot).toBeGolden('screenshot-element-padding-border.png');
});
it('should capture full element when larger than viewport', async () => {
@@ -243,8 +223,6 @@ describe('Screenshots', function () {
`);
const elementHandle = await page.$('div.to-screenshot');
const screenshot = await elementHandle.screenshot();
// TODO (@jackfranklin): toBeGolden type fix
// @ts-expect-error
expect(screenshot).toBeGolden(
'screenshot-element-larger-than-viewport.png'
);
@@ -279,8 +257,6 @@ describe('Screenshots', function () {
`);
const elementHandle = await page.$('div.to-screenshot');
const screenshot = await elementHandle.screenshot();
// TODO (@jackfranklin): toBeGolden type fix
// @ts-expect-error
expect(screenshot).toBeGolden(
'screenshot-element-scrolled-into-view.png'
);
@@ -298,8 +274,6 @@ describe('Screenshots', function () {
transform: rotateZ(200deg);">&nbsp;</div>`);
const elementHandle = await page.$('div');
const screenshot = await elementHandle.screenshot();
// TODO (@jackfranklin): toBeGolden type fix
// @ts-expect-error
expect(screenshot).toBeGolden('screenshot-element-rotate.png');
});
itFailsFirefox('should fail to screenshot a detached element', async () => {
@@ -331,8 +305,6 @@ describe('Screenshots', function () {
);
const elementHandle = await page.$('div');
const screenshot = await elementHandle.screenshot();
// TODO (@jackfranklin): toBeGolden type fix
// @ts-expect-error
expect(screenshot).toBeGolden('screenshot-element-fractional.png');
});
itFailsFirefox('should work for an element with an offset', async () => {
@@ -343,8 +315,6 @@ describe('Screenshots', function () {
);
const elementHandle = await page.$('div');
const screenshot = await elementHandle.screenshot();
// TODO (@jackfranklin): toBeGolden type fix
// @ts-expect-error
expect(screenshot).toBeGolden('screenshot-element-fractional-offset.png');
});
});

0 comments on commit 381b0f8

Please sign in to comment.
You can’t perform that action at this time.