test(playwright): add snapshots, refactor utils, coverage

.codesandbox/templates/vanilla/package.json

@@ -13,7 +13,7 @@
   "devDependencies": {
     "@parcel/transformer-typescript-tsc": "^2.7.0",
     "open-cli": "^7.0.1",
-    "parcel": "^2.7.0",
+    "parcel": "^2.9.3",
     "typescript": "^5.0.2"
   },
   "keywords": [

.github/workflows/tests.yml

@@ -68,9 +68,7 @@ jobs:
       - name: Build fabric.js
         uses: ./.github/actions/build-fabric-cached
       - name: Run ${{ matrix.target }} ${{ matrix.suite }} headless test
-        uses: coactions/setup-xvfb@v1
-        with:
-          run: npm run test -- -c ${{ matrix.target }} -s ${{ matrix.suite }}
+        run: xvfb-run npm run test -- -c ${{ matrix.target }} -s ${{ matrix.suite }}
   node:
     needs: [prime-build]
     runs-on: ubuntu-latest
@@ -109,8 +107,33 @@ jobs:
         with:
           name: coverage-jest
           path: .nyc_output/*.json
+  e2e:
+    needs: [prime-build]
+    name: Playwright tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/cached-install
+      - name: Build fabric.js
+        uses: ./.github/actions/build-fabric-cached
+        # Playwright suggests against caching the browser install
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps chromium
+      - name: Run Playwright tests
+        run: xvfb-run npm run test:e2e
+      - name: Upload Test Output
+        uses: actions/upload-artifact@v3
+        if: failure()
+        with:
+          name: e2e-report
+          path: ./e2e/test-report/
+      - name: Upload test coverage
+        uses: actions/upload-artifact@v3
+        with:
+          name: coverage-e2e
+          path: ./e2e/test-results/**/coverage.json
   coverage:
-    needs: [node-coverage]
+    needs: [node-coverage, e2e]
     name: Coverage reporting
     runs-on: ubuntu-latest
     steps:
@@ -127,6 +150,10 @@ jobs:
         with:
           name: coverage-visual
           path: .nyc_output
+      - uses: actions/download-artifact@v3
+        with:
+          name: coverage-e2e
+          path: .nyc_output
       - run: ls -l .nyc_output
       - run: npm run coverage:report
       - uses: ShaMan123/[email protected]

.gitignore

@@ -7,7 +7,7 @@ change-output.md
 before_commit
 /coverage/
 .idea/
-/dist
+**/dist
 /cli_output/
 e2e/test-report/
 e2e/test-results/

.npmignore

@@ -7,6 +7,7 @@ lib/*.png
 coverage/
 test/
 test*
+e2e/
 .DS_Store
 .codesandbox/
 .devcontainer/

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [next]
 
+- test(playwright): add snapshots, refactor utils, coverage [#9078](https://github.com/fabricjs/fabric.js/pull/9078)
 - chore(TS) Add type-checking to files excluded with ts-nocheck ( Parser mostly ) [#9085](https://github.com/fabricjs/fabric.js/pull/9085)
 - test(Text): Add some tests for text in Jest [#9083](https://github.com/fabricjs/fabric.js/pull/9083)
 - ci(): Install system deps only when necessary [#9086](https://github.com/fabricjs/fabric.js/pull/9086)

e2e/imports.ts

@@ -0,0 +1,12 @@
+import { readJSONSync } from 'fs-extra';
+
+/**
+ * The import map used by `./utils/setupApp` to inject into the page
+ * so test scripts can use modules (relative imports don't seem to work out of the box)
+ *
+ * **IMPORTANT**: be sure to update the paths field in `./tsconfig.json` to reflect imports correctly
+ */
+export default {
+  fabric: readJSONSync('./package.json').module.slice(1),
+  test: '/e2e/dist/test.js',
+};

e2e/setup/index.ts

@@ -0,0 +1,6 @@
+// call first
+import './setupSelectors';
+// call before using fabric
+import './setupCoverage';
+// call at the end - navigates the page
+import './setupApp';

e2e/setup/setupApp.ts

@@ -0,0 +1,76 @@
+import { test } from '@playwright/test';
+import { existsSync, readFileSync } from 'fs';
+import path from 'path';
+import imports from '../imports';
+import { JSDOM } from 'jsdom';
+
+test.beforeEach(async ({ page }, { file }) => {
+  await page.goto('/e2e/site');
+  // expose imports for consumption
+  page.addScriptTag({
+    type: 'importmap',
+    content: JSON.stringify({
+      imports,
+    }),
+  });
+  // add test script
+  const testDir = path.relative(
+    path.resolve(process.cwd(), 'e2e', 'tests'),
+    path.resolve(file, '..')
+  );
+  const pathToHTML = path.resolve(
+    process.cwd(),
+    'e2e',
+    'tests',
+    testDir,
+    'index.html'
+  );
+  if (existsSync(pathToHTML)) {
+    const doc = new JSDOM(readFileSync(pathToHTML).toString()).window.document;
+    await page.evaluate((html) => {
+      document.body.innerHTML = `${html}`;
+    }, doc.body.innerHTML);
+  }
+  const pathToApp = path.resolve(
+    process.cwd(),
+    'e2e',
+    'tests',
+    testDir,
+    'index.ts'
+  );
+  const pathToBuiltApp = path.resolve(
+    process.cwd(),
+    'e2e',
+    'dist',
+    testDir,
+    'index.js'
+  );
+  const exists = existsSync(pathToBuiltApp);
+  if (!exists && existsSync(pathToApp)) {
+    throw new Error(
+      `test script '${pathToBuiltApp}' not found: global setup script probably did not run`
+    );
+  } else if (exists) {
+    // used to avoid a race condition that occurs because of script loading
+    const trigger = page.evaluate(
+      () =>
+        new Promise((resolve) => {
+          window.addEventListener('fabric:setup', resolve, { once: true });
+        })
+    );
+    await page.addScriptTag({
+      type: 'module',
+      content: `${readFileSync(
+        path.relative(process.cwd(), pathToApp)
+      ).toString()}
+       window.dispatchEvent(new CustomEvent('fabric:setup'));
+       `,
+    });
+    await trigger;
+    await page.evaluate(() => window.__setupFabricHook());
+  }
+});
+
+test.afterEach(async ({ page }) => {
+  await page.evaluate(() => window.__teardownFabricHook());
+});

e2e/setup/setupCoverage.ts

@@ -0,0 +1,43 @@
+import { test } from '@playwright/test';
+import { ensureDirSync, writeFileSync } from 'fs-extra';
+import _ from 'lodash';
+import path from 'path';
+import { URL } from 'url';
+import v8toIstanbul from 'v8-to-istanbul';
+
+// https://playwright.dev/docs/api/class-coverage
+
+test.beforeEach(async ({ page }) => {
+  await page.coverage.startJSCoverage({ reportAnonymousScripts: false });
+});
+
+test.afterEach(async ({ page }, { outputDir }) => {
+  const coverage = await page.coverage.stopJSCoverage();
+  const nyc = _.fromPairs(
+    await Promise.all(
+      coverage.map(async ({ url, source, functions }) => {
+        let pathname = url;
+        try {
+          // remove url origin
+          pathname = pathname.slice(new URL(url).origin.length + 1);
+        } catch (error) {}
+        const pathTo = path.resolve(process.cwd(), pathname);
+        const converter = v8toIstanbul(pathTo, 0, {
+          source: source!,
+        });
+        await converter.load();
+        converter.applyCoverage(functions);
+        return [pathTo, converter.toIstanbul()];
+      })
+    )
+  );
+  ensureDirSync(outputDir);
+  writeFileSync(
+    path.resolve(outputDir, 'coverage-v8.json'),
+    JSON.stringify(coverage, null, 2)
+  );
+  writeFileSync(
+    path.resolve(outputDir, 'coverage.json'),
+    JSON.stringify(nyc, null, 2)
+  );
+});

e2e/setup/setupSelectors.ts

@@ -0,0 +1,33 @@
+import { selectors, test } from '@playwright/test';
+
+test.beforeAll(async () => {
+  await selectors.register('canvas_wrapper', () => {
+    return {
+      query(root: Document, selector: string) {
+        return root.querySelector(selector).parentElement;
+      },
+
+      queryAll(root: Document, selector: string) {
+        return Array.from(root.querySelectorAll(selector)).map(
+          (el) => el.parentElement
+        );
+      },
+    };
+  });
+
+  await selectors.register('canvas_top', () => {
+    return {
+      query(root: Document, selector: string) {
+        return root
+          .querySelector(selector)
+          .parentElement.querySelector('canvas.upper-canvas');
+      },
+
+      queryAll(root: Document, selector: string) {
+        return Array.from(root.querySelectorAll(selector)).map((el) =>
+          el.parentElement.querySelector('canvas.upper-canvas')
+        );
+      },
+    };
+  });
+});

e2e/site/index.html

@@ -1,25 +1,19 @@
 <html>
   <head>
-    <script type="text/javascript" src="/dist/index.js"></script>
+    <title>Fabric e2e Testing Suite</title>
+    <link rel="icon" type="image/x-icon" href="./favicon.ico" />
     <style>
       body {
         padding: 0;
         margin: 0;
+        background-color: black;
       }
-      .canvas-container {
-        border: 1px solid black;
+      [data-fabric='wrapper'] {
+        background-color: white;
       }
     </style>
   </head>
   <body>
-    <canvas id="test-canvas" width="800" height="600"></canvas>
+    <canvas id="canvas" width="800" height="600"></canvas>
   </body>
-  <script type="text/javascript">
-    const fabricCanvas = new fabric.Canvas(
-      document.getElementById('test-canvas'),
-      { enableRetinaScaling: false }
-    );
-    window.fabricCanvas = fabricCanvas;
-    window.setupScene = (json) => fabricCanvas.loadFromJSON(json);
-  </script>
 </html>

e2e/tests/template/index.html

@@ -0,0 +1,6 @@
+<!-- 
+    This file overrides the `body` of the test app as defined in `e2e/site/index.html`.
+    Add it only if there is a need to change `body`
+ -->
+
+<canvas id="canvas" width="800" height="600"></canvas>

e2e/tests/template/index.spec.ts

@@ -0,0 +1,12 @@
+import { test } from '@playwright/test';
+import { CanvasUtil } from '../../utils/CanvasUtil';
+import { ObjectUtil } from '../../utils/ObjectUtil';
+
+import '../../setup';
+
+test('TEST NAME', async ({ page }) => {
+  const canvasUtil = new CanvasUtil(page);
+  // note that `textbox` correlates to the returned key in `index.ts` => `beforeAll`
+  const textboxUtil = new ObjectUtil(page, 'textbox');
+  // write the test
+});

e2e/tests/template/index.ts

@@ -0,0 +1,20 @@
+/**
+ * Runs in the **BROWSER**
+ * Use absolute imports defined in 'e2e/imports.ts'
+ */
+
+import * as fabric from 'fabric';
+import { beforeAll } from 'test';
+
+beforeAll((canvas) => {
+  const textbox = new fabric.Textbox('fabric.js test', {
+    width: 200,
+    top: 20,
+  });
+  canvas.add(textbox);
+  canvas.centerObjectH(textbox);
+
+  // playwright will be able to access the passed objects by their keys
+  // make sure to pass unique keys across the entire app
+  return { textbox };
+});