work on image tests

jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  testEnvironment: require.resolve('jest-environment-jsdom-sixteen'),
+};

src/__tests__/matchChart.ts

@@ -1,7 +1,8 @@
 /// <reference types="jest" />
 /// <reference types="node" />
 
-import { helpers, Chart } from '../chart';
+import { Chart } from '@sgratzl/chartjs-esm-facade';
+// import 'path2d-polyfill';
 import { toMatchImageSnapshot } from 'jest-image-snapshot';
 
 expect.extend({ toMatchImageSnapshot });
@@ -35,11 +36,10 @@ export default async function matchChart(config: any, width = 300, height = 300,
   );
   const ctx = canvas.getContext('2d')!;
 
-  // sync
-  helpers.requestAnimFrame = (c: () => void) => c();
-
   new Chart(ctx, config);
 
+  await new Promise((resolve) => setTimeout(resolve, 100));
+
   const image = await toBuffer(canvas);
   expect(image).toMatchImageSnapshot(matchOptions);
 }

src/controllers/EulerDiagramController.spec.ts

@@ -3,6 +3,7 @@ import { registry } from '@sgratzl/chartjs-esm-facade';
 import { EulerDiagramController } from './EulerDiagramController';
 import { extractSets } from '../data';
 import { ArcSlice } from '../elements';
+import matchChart from '../__tests__/matchChart';
 
 describe('Euler', () => {
   beforeAll(() => {
@@ -21,18 +22,18 @@ describe('Euler', () => {
       }
     );
     expect(data.labels).toHaveLength(7);
-    // return matchChart(
-    //   {
-    //     type: EulerDiagramController.id,
-    //     data,
-    //     options: {
-    //       legend: {
-    //         display: false,
-    //       },
-    //     },
-    //   },
-    //   1000,
-    //   500
-    // );
+    return matchChart(
+      {
+        type: EulerDiagramController.id,
+        data,
+        options: {
+          legend: {
+            display: false,
+          },
+        },
+      },
+      1000,
+      500
+    );
   });
 });

src/controllers/VennDiagramController.spec.ts

@@ -3,6 +3,7 @@ import { VennDiagramController } from './VennDiagramController';
 import { extractSets } from '../data';
 import { registry } from '@sgratzl/chartjs-esm-facade';
 import { ArcSlice } from '../elements';
+import matchChart from '../__tests__/matchChart';
 
 describe('venn', () => {
   beforeAll(() => {
@@ -21,18 +22,18 @@ describe('venn', () => {
       }
     );
     expect(data.labels).toHaveLength(7);
-    // return matchChart(
-    //   {
-    //     type: VennDiagramController.id,
-    //     data,
-    //     options: {
-    //       legend: {
-    //         display: false,
-    //       },
-    //     },
-    //   },
-    //   1000,
-    //   500
-    // );
+    return matchChart(
+      {
+        type: VennDiagramController.id,
+        data,
+        options: {
+          legend: {
+            display: false,
+          },
+        },
+      },
+      1000,
+      500
+    );
   });
 });