From a7f8250c024f658ad3fb1f17790b26f05adb26da Mon Sep 17 00:00:00 2001 From: "yuqi.pyq" Date: Thu, 30 Nov 2023 10:51:47 +0800 Subject: [PATCH] chore: always upload snapshots --- __tests__/integration/canvas.spec.ts | 6 +- __tests__/integration/svg.spec.ts | 43 ++---------- __tests__/integration/util.js | 69 ------------------- .../{canvas.ts => utils/generator.ts} | 13 ++-- __tests__/integration/webgl.spec.ts | 43 ++---------- 5 files changed, 21 insertions(+), 153 deletions(-) delete mode 100644 __tests__/integration/util.js rename __tests__/integration/{canvas.ts => utils/generator.ts} (78%) diff --git a/__tests__/integration/canvas.spec.ts b/__tests__/integration/canvas.spec.ts index 738a85421..2394b1f63 100644 --- a/__tests__/integration/canvas.spec.ts +++ b/__tests__/integration/canvas.spec.ts @@ -1,8 +1,8 @@ import * as _2d from '../demos/2d'; import * as d3 from '../demos/d3'; -import { generateCanvasTestCase } from './canvas'; +import { generateCanvasTestCase } from './utils/generator'; describe('Canvas Snapshot', () => { - generateCanvasTestCase('2d', _2d); - // generateCanvasTestCase('d3', d3); + generateCanvasTestCase('canvas', '2d', _2d); + generateCanvasTestCase('canvas', 'd3', d3); }); diff --git a/__tests__/integration/svg.spec.ts b/__tests__/integration/svg.spec.ts index 02778c040..97d236956 100644 --- a/__tests__/integration/svg.spec.ts +++ b/__tests__/integration/svg.spec.ts @@ -1,41 +1,8 @@ -import { chromium, devices } from 'playwright'; -import * as basic2d from '../demos/2d'; -import './utils/useSnapshotMatchers'; -import { sleep } from './utils/sleep'; +import * as _2d from '../demos/2d'; +import * as d3 from '../demos/d3'; +import { generateCanvasTestCase } from './utils/generator'; -const namespace = '2d'; describe('SVG Snapshot', () => { - Object.keys(basic2d).forEach((key) => { - it(key, async () => { - // Setup - const browser = await chromium.launch({ - args: ['--headless', '--no-sandbox'], - }); - const context = await browser.newContext(devices['Desktop Chrome']); - const page = await context.newPage(); - - await page.addInitScript(() => { - window['USE_PLAYWRIGHT'] = 1; - window['DEFAULT_RENDERER'] = 'svg'; - }); - - // Go to test page served by vite devServer. - const url = `http://localhost:${globalThis.PORT}/?name=${namespace}-${key}`; - await page.goto(url); - - await sleep(300); - - // Chart already rendered, capture into buffer. - const buffer = await page.locator('svg').screenshot(); - - const dir = `${__dirname}/snapshots/${namespace}/svg`; - try { - const maxError = 0; - expect(buffer).toMatchCanvasSnapshot(dir, key, { maxError }); - } finally { - await context.close(); - await browser.close(); - } - }); - }); + generateCanvasTestCase('svg', '2d', _2d); + generateCanvasTestCase('svg', 'd3', d3); }); diff --git a/__tests__/integration/util.js b/__tests__/integration/util.js deleted file mode 100644 index f8393abc7..000000000 --- a/__tests__/integration/util.js +++ /dev/null @@ -1,69 +0,0 @@ -const fs = require('fs'); -const pixelmatch = require('pixelmatch'); -const PNG = require('pngjs').PNG; - -const sleep = (n) => { - return new Promise((resolve) => { - setTimeout(() => { - resolve(undefined); - }, n); - }); -}; - -/** - * diff between PNGs - */ -const diff = (src, target, showMismatchedPixels = true) => { - const img1 = PNG.sync.read(fs.readFileSync(src)); - const img2 = PNG.sync.read(fs.readFileSync(target)); - const { width, height } = img1; - const maxError = 10; - - let diffPNG = null; - let output = null; - if (showMismatchedPixels) { - diffPNG = new PNG({ width, height }); - output = diffPNG.data; - } - - const mismatch = pixelmatch(img1.data, img2.data, output, width, height, { - threshold: 0.1, - }); - - if (showMismatchedPixels && mismatch > maxError && diffPNG) { - const diffPath = src.replace('.png', '.diff.png'); - fs.writeFileSync(diffPath, PNG.sync.write(diffPNG)); - } - - return mismatch; -}; - -/** - * create PNG with rawdata - * @see https://github.com/lukeapage/pngjs/blob/master/examples/newfile.js - */ -const createPNGFromRawdata = async (target, width, height, data) => { - let newfile = new PNG({ width, height }); - for (let y = 0; y < newfile.height; y++) { - for (let x = 0; x < newfile.width; x++) { - let idx = (newfile.width * y + x) << 2; - // flipY - let idx2 = (newfile.width * (newfile.height - y) + x) << 2; - newfile.data[idx] = data[idx2]; - newfile.data[idx + 1] = data[idx2 + 1]; - newfile.data[idx + 2] = data[idx2 + 2]; - newfile.data[idx + 3] = data[idx2 + 3]; - } - } - - return new Promise((resolve) => { - newfile - .pack() - .pipe(fs.createWriteStream(target)) - .on('finish', function () { - resolve(newfile); - }); - }); -}; - -module.exports = { sleep, diff, createPNGFromRawdata }; diff --git a/__tests__/integration/canvas.ts b/__tests__/integration/utils/generator.ts similarity index 78% rename from __tests__/integration/canvas.ts rename to __tests__/integration/utils/generator.ts index 4d0b750be..55dfeee75 100644 --- a/__tests__/integration/canvas.ts +++ b/__tests__/integration/utils/generator.ts @@ -1,8 +1,9 @@ import { chromium, devices } from 'playwright'; -import './utils/useSnapshotMatchers'; -import { sleep } from './utils/sleep'; +import './useSnapshotMatchers'; +import { sleep } from './sleep'; export function generateCanvasTestCase( + renderer: 'canvas' | 'svg' | 'webgl', namespace: string, tests: Record, params?: Partial<{ @@ -23,7 +24,7 @@ export function generateCanvasTestCase( await page.addInitScript(() => { window['USE_PLAYWRIGHT'] = 1; - window['DEFAULT_RENDERER'] = 'canvas'; + window['DEFAULT_RENDERER'] = renderer; window['CANVAS_WIDTH'] = width; window['CANVAS_HEIGHT'] = height; }); @@ -35,9 +36,11 @@ export function generateCanvasTestCase( await sleep(300); // Chart already rendered, capture into buffer. - const buffer = await page.locator('canvas').screenshot(); + const buffer = await page + .locator(renderer === 'svg' ? 'svg' : 'canvas') + .screenshot(); - const dir = `${__dirname}/snapshots/${namespace}/canvas`; + const dir = `${__dirname}/snapshots/${namespace}/${renderer}`; try { const maxError = 0; expect(buffer).toMatchCanvasSnapshot(dir, key, { maxError }); diff --git a/__tests__/integration/webgl.spec.ts b/__tests__/integration/webgl.spec.ts index b615dee1a..61b7a68ec 100644 --- a/__tests__/integration/webgl.spec.ts +++ b/__tests__/integration/webgl.spec.ts @@ -1,41 +1,8 @@ -import { chromium, devices } from 'playwright'; -import * as basic2d from '../demos/2d'; -import './utils/useSnapshotMatchers'; -import { sleep } from './utils/sleep'; +import * as _2d from '../demos/2d'; +import * as d3 from '../demos/d3'; +import { generateCanvasTestCase } from './utils/generator'; -const namespace = '2d'; describe('WebGL Snapshot', () => { - Object.keys(basic2d).forEach((key) => { - it(key, async () => { - // Setup - const browser = await chromium.launch({ - args: ['--headless', '--no-sandbox'], - }); - const context = await browser.newContext(devices['Desktop Chrome']); - const page = await context.newPage(); - - await page.addInitScript(() => { - window['USE_PLAYWRIGHT'] = 1; - window['DEFAULT_RENDERER'] = 'webgl'; - }); - - // Go to test page served by vite devServer. - const url = `http://localhost:${globalThis.PORT}/?name=${namespace}-${key}`; - await page.goto(url); - - await sleep(300); - - // Chart already rendered, capture into buffer. - const buffer = await page.locator('canvas').screenshot(); - - const dir = `${__dirname}/snapshots/${namespace}/webgl`; - try { - const maxError = 0; - expect(buffer).toMatchCanvasSnapshot(dir, key, { maxError }); - } finally { - await context.close(); - await browser.close(); - } - }); - }); + generateCanvasTestCase('webgl', '2d', _2d); + generateCanvasTestCase('webgl', 'd3', d3); });