chore: remove node-canvas and use SVG snapshot instead (antvis#5733)

* chore: remove node-canvas

* chore: update snapshots

* chore: wordcloud & heatmap test case should run on CI

* chore: upload snapshots

* chore: reset entity counter making snapshots stable

* chore: remove canvas dep on ci

* chore: add max error ratio

* chore: run static-tooltip test cases

* chore: skip upload cov on ci

* chore: run static test cases

* chore: hide axis first

* chore: run chart-auto-fit test case on ci

* chore: run api- test cases

* chore: run interaction test cases

* chore: run animation test cases

* chore: run all test cases

* chore: run all test cases on ci

* chore: skip 2 cases

* chore: run all test cases

* chore: use svg renderer in unit tests

* chore: upload diff html

* chore: update snapshots

* chore: remove oss upload script

* chore: enable axis

* chore: update snapshots

* chore: remove test.only

* chore: run skipped cases

.github/workflows/build.yml

@@ -24,20 +24,12 @@ jobs:
           npm install
           npm run ci
 
-      - name: Upload Snapshot
-        if: ${{ failure() }}
-        env:
-          REF_NAME: ${{ github.ref_name }}
-          GITHUB_WORKSPACE: ${{ github.workspace }}
-          OSS_REGION: ${{ secrets.OSS_REGION }}
-          OSS_ACCESS_KEY_ID: ${{ secrets.OSS_ACCESS_KEY_ID }}
-          OSS_ACCESS_KEY_SECRET: ${{ secrets.OSS_ACCESS_KEY_SECRET }}
-          OSS_BUCKET: ${{ secrets.OSS_BUCKET }}
-        run: |
-          npm run upload
-
-      - name: Update coverall
-        if: ${{ success() }}
-        uses: coverallsapp/github-action@master
+      - name: Upload blob report to GitHub Actions Artifacts
+        if: always()
+        uses: actions/upload-artifact@v3
         with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
+          name: snapshots
+          path: |
+            __tests__/integration/snapshots/**/*-actual.svg
+            __tests__/integration/snapshots/**/*-actual.html
+          retention-days: 1

__tests__/integration/animation-control.spec.ts

@@ -34,11 +34,11 @@ describe('context.animations', () => {
     for (let i = 0; i < intervals.length; i++) {
       const currentTime = intervals[i];
       await goto(currentTime);
-      await expect(context.canvas).toMatchCanvasSnapshot(dir, `interval${i}`);
+      await expect(context.canvas).toMatchDOMSnapshot(dir, `interval${i}`);
     }
 
     await finish();
-    await expect(context.canvas).toMatchCanvasSnapshot(
+    await expect(context.canvas).toMatchDOMSnapshot(
       dir,
       `interval${intervals.length}`,
     );

__tests__/integration/api-chart-auto-fit.spec.ts

@@ -21,14 +21,14 @@ describe('chart.options.autoFit', () => {
     fitted = rest.fitted;
     await finished;
     await sleep(20);
-    await expect(canvas).toMatchCanvasSnapshot(dir, 'step0');
+    await expect(canvas).toMatchDOMSnapshot(dir, 'step0');
   });
 
   it('chart.forceFit() should fit parent container', async () => {
     button.dispatchEvent(new CustomEvent('click'));
     await fitted;
     await sleep(20);
-    await expect(canvas).toMatchCanvasSnapshot(dir, 'step1');
+    await expect(canvas).toMatchDOMSnapshot(dir, 'step1');
   });
 
   afterAll(() => {

__tests__/integration/api-chart-change-data-empty.spec.ts

@@ -16,7 +16,7 @@ describe('chart.options.autoFit', () => {
     });
     await finished;
     await sleep(20);
-    await expect(canvas).toMatchCanvasSnapshot(dir, 'step0');
+    await expect(canvas).toMatchDOMSnapshot(dir, 'step0');
   });
 
   afterAll(() => {

__tests__/integration/api-chart-change-data-facet.spec.ts

@@ -16,7 +16,7 @@ describe('mark.changeSize', () => {
     await refreshed;
     const dir = `${__dirname}/snapshots/api`;
     await sleep(20);
-    await expect(canvas).toMatchCanvasSnapshot(dir, render.name);
+    await expect(canvas).toMatchDOMSnapshot(dir, render.name);
   });
 
   afterAll(() => {

__tests__/integration/api-chart-change-data-legend.spec.ts

@@ -14,7 +14,7 @@ describe('chart.changeData', () => {
     await finished;
     const dir = `${__dirname}/snapshots/api`;
     await sleep(20);
-    await expect(canvas).toMatchCanvasSnapshot(dir, render.name);
+    await expect(canvas).toMatchDOMSnapshot(dir, render.name);
   });
 
   afterAll(() => {

__tests__/integration/api-chart-change-size-custom-shape.spec.ts

@@ -16,7 +16,7 @@ describe('mark.changeSize', () => {
     await new Promise<void>((resolve) => chart.on('afterchangesize', resolve));
     const dir = `${__dirname}/snapshots/api`;
     await sleep(20);
-    await expect(canvas).toMatchCanvasSnapshot(dir, render.name);
+    await expect(canvas).toMatchDOMSnapshot(dir, render.name);
   });
 
   afterAll(() => {

__tests__/integration/api-chart-change-size-polar.spec.ts

@@ -16,7 +16,7 @@ describe('mark.changeSize', () => {
     await resized;
     const dir = `${__dirname}/snapshots/api`;
     await sleep(20);
-    await expect(canvas).toMatchCanvasSnapshot(dir, render.name);
+    await expect(canvas).toMatchDOMSnapshot(dir, render.name);
   });
 
   afterAll(() => {

__tests__/integration/api-chart-change-size.spec.ts

@@ -16,7 +16,7 @@ describe('mark.changeSize', () => {
     await new Promise<void>((resolve) => chart.on('afterchangesize', resolve));
     const dir = `${__dirname}/snapshots/api`;
     await sleep(20);
-    await expect(canvas).toMatchCanvasSnapshot(dir, render.name);
+    await expect(canvas).toMatchDOMSnapshot(dir, render.name);
   });
 
   afterAll(() => {

__tests__/integration/api-chart-emit-brush-highlight-axis-cross.spec.ts

@@ -30,12 +30,12 @@ describe('chart.on', () => {
       },
     });
     await sleep(20);
-    await expect(canvas).toMatchCanvasSnapshot(dir, 'step0');
+    await expect(canvas).toMatchDOMSnapshot(dir, 'step0');
 
     // chart.emit('brushAxis:remove', options) should reset.
     chart.emit('brushAxis:remove', {});
     await sleep(20);
-    await expect(canvas).toMatchCanvasSnapshot(dir, 'step1');
+    await expect(canvas).toMatchDOMSnapshot(dir, 'step1');
 
     chart.off();
 

__tests__/integration/api-chart-emit-brush-highlight-axis-horizontal.spec.ts

@@ -25,12 +25,12 @@ describe('chart.on', () => {
       data: { selection: [[20, 30], undefined, [100, 300]] },
     });
     await sleep(20);
-    await expect(canvas).toMatchCanvasSnapshot(dir, 'step0');
+    await expect(canvas).toMatchDOMSnapshot(dir, 'step0');
 
     // chart.emit('brushAxis:remove', options) should reset.
     chart.emit('brushAxis:remove', {});
     await sleep(20);
-    await expect(canvas).toMatchCanvasSnapshot(dir, 'step1');
+    await expect(canvas).toMatchDOMSnapshot(dir, 'step1');
 
     chart.off();
 

__tests__/integration/api-chart-emit-brush-highlight-axis-vertical.spec.ts

@@ -25,12 +25,12 @@ describe('chart.on', () => {
       data: { selection: [[20, 30], undefined, [100, 300]] },
     });
     await sleep(20);
-    await expect(canvas).toMatchCanvasSnapshot(dir, 'step0');
+    await expect(canvas).toMatchDOMSnapshot(dir, 'step0');
 
     // chart.emit('brushAxis:remove', options) should reset.
     chart.emit('brushAxis:remove', {});
     await sleep(20);
-    await expect(canvas).toMatchCanvasSnapshot(dir, 'step1');
+    await expect(canvas).toMatchDOMSnapshot(dir, 'step1');
 
     chart.off();
 

__tests__/integration/api-chart-emit-brush-highlight-x.spec.ts

@@ -18,12 +18,12 @@ describe('chart.emit', () => {
     button.dispatchEvent(new CustomEvent('click'));
     await highlighted;
     await sleep(20);
-    await expect(canvas).toMatchCanvasSnapshot(dir, 'step0');
+    await expect(canvas).toMatchDOMSnapshot(dir, 'step0');
 
     button1.dispatchEvent(new CustomEvent('click'));
     await removed;
     await sleep(20);
-    await expect(canvas).toMatchCanvasSnapshot(dir, 'step1');
+    await expect(canvas).toMatchDOMSnapshot(dir, 'step1');
   });
 
   afterAll(() => {

__tests__/integration/api-chart-emit-click-tooltip.spec.ts

@@ -2,11 +2,11 @@ import { chartEmitClickTooltip as render } from '../plots/api/chart-emit-click-t
 import { kebabCase } from './utils/kebabCase';
 import { dispatchFirstElementEvent, dispatchPlotEvent } from './utils/event';
 import './utils/useSnapshotMatchers';
-import { createDOMGCanvas } from './utils/createDOMGCanvas';
+import { createNodeGCanvas } from './utils/createNodeGCanvas';
 
 describe('chart.emit', () => {
   const dir = `${__dirname}/snapshots/api/${kebabCase(render.name)}`;
-  const canvas = createDOMGCanvas(640, 480);
+  const canvas = createNodeGCanvas(640, 480);
 
   it('chart.tooltip should disable native events.', async () => {
     const { finished } = render({
@@ -19,18 +19,21 @@ describe('chart.emit', () => {
     dispatchFirstElementEvent(canvas, 'pointerover');
 
     await expect(canvas).toMatchDOMSnapshot(dir, 'step0', {
+      fileFormat: 'html',
       selector: '.g2-tooltip',
     });
 
     // Click item to show tooltip.
     dispatchFirstElementEvent(canvas, 'click', { detail: 1 });
     await expect(canvas).toMatchDOMSnapshot(dir, 'step1', {
+      fileFormat: 'html',
       selector: '.g2-tooltip',
     });
 
     // Click plot to hide tooltip.
     dispatchPlotEvent(canvas, 'click', { detail: 1 });
     await expect(canvas).toMatchDOMSnapshot(dir, 'step2', {
+      fileFormat: 'html',
       selector: '.g2-tooltip',
     });
   });

__tests__/integration/api-chart-emit-element-highlight.spec.ts

@@ -23,12 +23,12 @@ describe('chart.emit', () => {
       data: { data: { population: 5038433 } },
     });
     await sleep(20);
-    await expect(canvas).toMatchCanvasSnapshot(dir, 'step0');
+    await expect(canvas).toMatchDOMSnapshot(dir, 'step0');
 
     // chart.emit('element:unhighlight', options) should reset.
     chart.emit('element:unhighlight', {});
     await sleep(20);
-    await expect(canvas).toMatchCanvasSnapshot(dir, 'step1');
+    await expect(canvas).toMatchDOMSnapshot(dir, 'step1');
 
     chart.off();
 

__tests__/integration/api-chart-emit-element-select-single.spec.ts

@@ -22,7 +22,7 @@ describe('chart.emit', () => {
       data: { data: [{ population: 5038433 }, { population: 3983091 }] },
     });
     await sleep(20);
-    await expect(canvas).toMatchCanvasSnapshot(dir, 'step0');
+    await expect(canvas).toMatchDOMSnapshot(dir, 'step0');
   });
 
   afterAll(() => {

__tests__/integration/api-chart-emit-element-select.spec.ts

@@ -27,12 +27,12 @@ describe('chart.emit', () => {
       data: { data: [{ population: 5038433 }, { population: 3983091 }] },
     });
     await sleep(20);
-    await expect(canvas).toMatchCanvasSnapshot(dir, 'step0');
+    await expect(canvas).toMatchDOMSnapshot(dir, 'step0');
 
     // chart.emit('element:unselect', options) should reset.
     chart.emit('element:unselect', {});
     await sleep(20);
-    await expect(canvas).toMatchCanvasSnapshot(dir, 'step1');
+    await expect(canvas).toMatchDOMSnapshot(dir, 'step1');
 
     chart.off();
 

__tests__/integration/api-chart-emit-enable-disable-tooltip.spec.ts

@@ -1,6 +1,6 @@
 import './utils/useSnapshotMatchers';
 import { Chart } from '../../src';
-import { createDOMGCanvas } from './utils/createDOMGCanvas';
+import { createNodeGCanvas } from './utils/createNodeGCanvas';
 import { sleep } from './utils/sleep';
 import { dispatchFirstElementEvent, dispatchPlotEvent } from './utils/event';
 import { kebabCase } from './utils/kebabCase';
@@ -44,8 +44,8 @@ describe('chart.emit', () => {
   const dir = `${__dirname}/snapshots/api/${kebabCase(
     'chartEmitEnableDisableTooltip',
   )}`;
-  const barCanvas = createDOMGCanvas(640, 480);
-  const lineCanvas = createDOMGCanvas(640, 480);
+  const barCanvas = createNodeGCanvas(640, 480);
+  const lineCanvas = createNodeGCanvas(640, 480);
 
   it('chart.emit enable item tooltip.', async () => {
     const { finished, chart } = renderBar({
@@ -59,13 +59,15 @@ describe('chart.emit', () => {
 
     dispatchFirstElementEvent(barCanvas, 'pointerover');
     await expect(barCanvas).toMatchDOMSnapshot(dir, 'step0', {
+      fileFormat: 'html',
       selector: '.g2-tooltip',
     });
 
     chart.emit('tooltip:enable');
 
     dispatchFirstElementEvent(barCanvas, 'pointerover');
     await expect(barCanvas).toMatchDOMSnapshot(dir, 'step1', {
+      fileFormat: 'html',
       selector: '.g2-tooltip',
     });
   });
@@ -83,6 +85,7 @@ describe('chart.emit', () => {
       offsetY: 100,
     });
     await expect(lineCanvas).toMatchDOMSnapshot(dir, 'step2', {
+      fileFormat: 'html',
       selector: '.g2-tooltip',
     });
 
@@ -92,6 +95,7 @@ describe('chart.emit', () => {
       offsetY: 100,
     });
     await expect(lineCanvas).toMatchDOMSnapshot(dir, 'step3', {
+      fileFormat: 'html',
       selector: '.g2-tooltip',
     });
   });

__tests__/integration/api-chart-emit-item-tooltip-hide-content.spec.ts

@@ -5,10 +5,10 @@ import {
   createPromise,
   receiveExpectData,
 } from './utils/event';
-import { createDOMGCanvas } from './utils/createDOMGCanvas';
+import { createNodeGCanvas } from './utils/createNodeGCanvas';
 
 describe('chart.emit', () => {
-  const canvas = createDOMGCanvas(800, 500);
+  const canvas = createNodeGCanvas(800, 500);
 
   it('chart.tooltip hide body should emit events.', async () => {
     const { finished, chart, clear } = render({

__tests__/integration/api-chart-emit-item-tooltip.spec.ts

@@ -6,11 +6,11 @@ import {
   receiveExpectData,
 } from './utils/event';
 import './utils/useSnapshotMatchers';
-import { createDOMGCanvas } from './utils/createDOMGCanvas';
+import { createNodeGCanvas } from './utils/createNodeGCanvas';
 
 describe('chart.emit', () => {
   const dir = `${__dirname}/snapshots/api/${kebabCase(render.name)}`;
-  const canvas = createDOMGCanvas(800, 500);
+  const canvas = createNodeGCanvas(800, 500);
 
   it('chart.emit and chart.on should control item tooltip display.', async () => {
     const { finished, chart, clear } = render({
@@ -22,12 +22,14 @@ describe('chart.emit', () => {
 
     // chart.emit("tooltip:show", options) should show tooltip.
     await expect(canvas).toMatchDOMSnapshot(dir, 'step0', {
+      fileFormat: 'html',
       selector: '.g2-tooltip',
     });
 
     // chart.emit("tooltip:hide") should hide tooltip.
     chart.emit('tooltip:hide');
     await expect(canvas).toMatchDOMSnapshot(dir, 'step1', {
+      fileFormat: 'html',
       selector: '.g2-tooltip',
     });
 

__tests__/integration/api-chart-emit-legend-filter.spec.ts

@@ -24,12 +24,12 @@ describe('chart.emit', () => {
       data: { channel: 'color', values: ['Sports', 'Strategy'] },
     });
     await sleep(20);
-    await expect(canvas).toMatchCanvasSnapshot(dir, 'step0');
+    await expect(canvas).toMatchDOMSnapshot(dir, 'step0');
 
     // chart.emit('legend:reset', options) should reset.
     chart.emit('legend:reset', {});
     await sleep(20);
-    await expect(canvas).toMatchCanvasSnapshot(dir, 'step1');
+    await expect(canvas).toMatchDOMSnapshot(dir, 'step1');
 
     chart.off();
 

__tests__/integration/api-chart-emit-legend-highlight.spec.ts

@@ -27,12 +27,12 @@ describe('chart.emit', () => {
       data: { channel: 'color', value: 'Increase' },
     });
     await sleep(20);
-    await expect(canvas).toMatchCanvasSnapshot(dir, 'step0');
+    await expect(canvas).toMatchDOMSnapshot(dir, 'step0');
 
     // chart.emit('legend:unhighlight', options) should reset.
     chart.emit('legend:unhighlight', {});
     await sleep(20);
-    await expect(canvas).toMatchCanvasSnapshot(dir, 'step1');
+    await expect(canvas).toMatchDOMSnapshot(dir, 'step1');
 
     chart.off();
 

__tests__/integration/api-chart-emit-pie-tooltip.spec.ts

@@ -1,11 +1,11 @@
 import { chartEmitPieTooltip as render } from '../plots/api/chart-emit-pie-tooltip';
 import { kebabCase } from './utils/kebabCase';
 import './utils/useSnapshotMatchers';
-import { createDOMGCanvas } from './utils/createDOMGCanvas';
+import { createNodeGCanvas } from './utils/createNodeGCanvas';
 
 describe('chart.emit', () => {
   const dir = `${__dirname}/snapshots/api/${kebabCase(render.name)}`;
-  const canvas = createDOMGCanvas(800, 500);
+  const canvas = createNodeGCanvas(800, 500);
 
   it('chart.emit and chart.on should control item tooltip display.', async () => {
     const { finished, chart, clear } = render({
@@ -17,6 +17,7 @@ describe('chart.emit', () => {
 
     // chart.emit("tooltip:show", options) should show tooltip.
     await expect(canvas).toMatchDOMSnapshot(dir, 'step0', {
+      fileFormat: 'html',
       selector: '.g2-tooltip',
     });
   });