feat: e2e (#3501)

* feat: add e2e test

* feat: 升级到 G2 正式版

* feat: add tests base url

* fix: web server command

* chore: update snapshots for release version

* feat: ChatGPT cr

.github/workflows/cr.yml

@@ -0,0 +1,23 @@
+name: Code Review
+
+permissions:
+  contents: read
+  pull-requests: write
+
+on:
+  pull_request:
+    types: [opened, reopened, synchronize]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: anc95/ChatGPT-CodeReview@main
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
+          # Optional
+          LANGUAGE: Chinese
+          MODEL:
+          top_p: 1
+          temperature: 1

.github/workflows/playwright.yml

@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: actions/setup-node@v3
+      with:
+        node-version: 16
+    - name: Install dependencies
+      run: npm ci
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+    - name: Run Playwright tests
+      run: npx playwright test
+    - uses: actions/upload-artifact@v3
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -14,3 +14,12 @@ coverage
 # Website cache byb dumi
 site/.dumi/tmp
 site/.dumi/tmp-production
+/test-results/
+/playwright-report/
+/playwright/.cache/
+/test-results/
+/playwright-report/
+/playwright/.cache/
+/test-results/
+/playwright-report/
+/playwright/.cache/

.husky/pre-commit

@@ -3,3 +3,4 @@
 
 npm run lint-staged
 npm run lint
+# npm run test

.npmrc

@@ -1,4 +1,5 @@
 auto-install-peers=true
 strict-peer-dependencies=false
+scripts-prepend-node-path=true
 public-hoist-pattern[]=@antv/*
 public-hoist-pattern[]=d3-*

__tests__/integration/main.ts

@@ -14,6 +14,7 @@ const renderers = {
 const app = document.getElementById('app') as HTMLElement;
 // Create a plot container.
 const container = document.createElement('div');
+container.className = 'container';
 // Create a case select.
 const caseSelect = document.createElement('select') as HTMLSelectElement;
 caseSelect.style.margin = '12px';

e2e/.env

@@ -0,0 +1,2 @@
+# e2e snapshots dir
+SNAPSHOTS_DIR=snapshots

e2e/plots/line.spec.ts

@@ -0,0 +1,20 @@
+import path from 'path';
+import { test, expect } from '@playwright/test';
+import { createDiff, getSnapshotName, toHump, sleep } from '../utils';
+
+const IMG_DIR = path.resolve(__dirname, '..', process.env.SNAPSHOTS_DIR as string);
+
+const files = getSnapshotName();
+
+test.afterAll(() => {
+  createDiff();
+});
+
+test('Plot snapshots', async ({ page }) => {
+  for (const filename of files) {
+    const [name] = filename.split('.');
+    await page.goto(`/?name=${toHump(name)}`);
+    await sleep(1000);
+    await page.locator('.container').screenshot({ path: `${IMG_DIR}/${name}.png` });
+  }
+});

e2e/utils/Index.ts

@@ -0,0 +1,4 @@
+export { createDiff } from './create-diff';
+export { getSnapshotName } from './get-snapshot-name';
+export { toHump } from './to-hump';
+export { sleep } from './sleep';

e2e/utils/create-diff.ts

@@ -0,0 +1,58 @@
+import * as fs from 'fs';
+import path from 'path';
+import { PNG } from 'pngjs';
+import pixelmatch from 'pixelmatch';
+
+const STABLE = 'stable';
+
+const DIFF = 'diff';
+
+const maxError = 0;
+
+const IMG_DIR = path.resolve(__dirname, `../${process.env.SNAPSHOTS_DIR}`);
+
+export const createDiff = async () => {
+  const files = fs.readdirSync(IMG_DIR);
+  files.forEach((filename) => {
+    if (filename.endsWith(`${STABLE}.png`) || filename.endsWith(`${DIFF}.png`)) return;
+    diffFile(IMG_DIR, filename);
+  });
+};
+
+/**
+ * diff between PNGs
+ */
+const diffFile = (filePath: string, filename: string) => {
+  const [name, type] = filename.split('.');
+  // 当前截图生成的图片
+  const testSnapshotFile = `${filePath}/${filename}`;
+  // 用于下次比对的图片
+  const stableFile = `${filePath}/${name}-${STABLE}.${type}`;
+  // diff 文件
+  const diffFile = `${filePath}/${name}-${DIFF}.${type}`;
+  // 不存在时直接写入
+  if (!fs.existsSync(stableFile)) {
+    fs.copyFileSync(testSnapshotFile, stableFile);
+    return;
+  }
+
+  const snap = PNG.sync.read(fs.readFileSync(testSnapshotFile));
+  const stable = PNG.sync.read(fs.readFileSync(stableFile));
+  const { width, height } = snap;
+
+  const diff = new PNG({ width, height });
+
+  // @see https://github.com/mapbox/pixelmatch#pixelmatchimg1-img2-output-width-height-options
+  const mismatch = pixelmatch(snap.data, stable.data, diff.data, width, height, {
+    threshold: 0.1,
+  });
+
+  if (mismatch > maxError) {
+    fs.writeFileSync(diffFile, PNG.sync.write(diff));
+  } else {
+    try {
+      fs.unlinkSync(diffFile);
+      // eslint-disable-next-line no-empty
+    } catch (err) {}
+  }
+};

e2e/utils/get-snapshot-name.ts

@@ -0,0 +1,9 @@
+import * as fs from 'fs';
+import path from 'path';
+
+const DEMO_DIR = path.resolve(__dirname, `../../__tests__/integration/plots`);
+
+export const getSnapshotName = () => {
+  const files = fs.readdirSync(DEMO_DIR);
+  return files.filter((filename) => filename !== 'index.ts');
+};

e2e/utils/sleep.ts

@@ -0,0 +1,5 @@
+export const sleep = (n: number) => {
+  return new Promise((resolve) => {
+    setTimeout(resolve, n);
+  });
+};

e2e/utils/to-hump.ts

@@ -0,0 +1,5 @@
+export const toHump = (name = '') => {
+  return name.replace(/-(\w)/g, (all, letter) => {
+    return letter.toUpperCase();
+  });
+};