cleanup

c

e2e/setup/index.ts

@@ -2,6 +2,9 @@ import setupApp from './setupApp';
 import setupCoverage from './setupCoverage';
 import setupSelectors from './setupSelectors';
 
+/**
+ * @param {Function} [testConfig] pass data/config from the test to the browser
+ */
 export default (testConfig?: () => any) => {
   // call first
   setupSelectors();

e2e/setup/setupApp.ts

@@ -4,6 +4,9 @@ import path from 'path';
 import imports from '../imports';
 import { JSDOM } from 'jsdom';
 
+/**
+ * @param {Function} [testConfig] pass data/config from the test to the browser
+ */
 export default (testConfig: () => any = () => {}) => {
   test.beforeEach(async ({ page }, { file }) => {
     await page.exposeFunction('testConfig', testConfig);

e2e/tests/gradient-transform/index.ts

@@ -14,5 +14,5 @@ before('#canvas', async (el) => {
     enableRetinaScaling: false,
   });
   await render(canvas, fabric, await testConfig());
-  return canvas;
+  return { canvas };
 });

e2e/tests/template-with-node/common.ts

@@ -14,4 +14,5 @@ export function render(canvas: StaticCanvas, fabric: typeof import('fabric')) {
   canvas.add(textbox);
   canvas.centerObjectH(textbox);
   canvas.renderAll();
+  return { textbox };
 }

e2e/tests/template-with-node/index.ts

@@ -3,7 +3,14 @@
  */
 
 import * as fabric from 'fabric';
-import { beforeAll } from '../test';
+import { before } from '../test';
 import { render } from './common';
 
-beforeAll((canvas) => render(canvas, fabric), { enableRetinaScaling: false });
+before('#canvas', async (el) => {
+  const canvas = new fabric.StaticCanvas(el, {
+    backgroundColor: 'white',
+    enableRetinaScaling: false,
+  });
+  const objects = await render(canvas, fabric);
+  return { canvas, objects };
+});

e2e/tests/test.ts

@@ -3,10 +3,13 @@
  */
 
 import type { Object as FabricObject } from 'fabric';
-import { Canvas } from 'fabric';
+import { Canvas, type StaticCanvas } from 'fabric';
 import * as fabric from 'fabric';
 
-const canvasMap = (window.canvasMap = new Map<HTMLCanvasElement, Canvas>());
+const canvasMap = (window.canvasMap = new Map<
+  HTMLCanvasElement,
+  Canvas | StaticCanvas
+>());
 const objectMap = (window.objectMap = new Map<string, FabricObject>());
 
 type AsyncReturnValue<T> = T | Promise<T>;
@@ -33,7 +36,7 @@ export function before(
    * @returns a map of objects for playwright to access during tests
    */
   cb: (canvas: HTMLCanvasElement) => AsyncReturnValue<{
-    canvas: Canvas;
+    canvas: Canvas | StaticCanvas;
     objects?: Record<string, FabricObject>;
   }>
 ) {
@@ -72,7 +75,7 @@ export function beforeAll(
 
 export function after(
   selector: string,
-  cb: (canvas: Canvas) => AsyncReturnValue<void>
+  cb: (canvas: Canvas | StaticCanvas) => AsyncReturnValue<void>
 ) {
   teardownTasks.push(() => {
     const el = document.querySelector<HTMLCanvasElement>(selector);