fabricjs · asturur · Jul 17, 2023 · Jul 8, 2023 · Jul 8, 2023 · Jul 8, 2023
diff --git a/.codesandbox/templates/vanilla/package.json b/.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": [

diff --git a/.github/workflows/tests.yml b/.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: npx playwright test
+      - 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]

diff --git a/.gitignore b/.gitignore
@@ -7,7 +7,7 @@ change-output.md
 before_commit
 /coverage/
 .idea/
-/dist
+**/dist
 /cli_output/
 e2e/test-report/
 e2e/test-results/
diff --git a/.npmignore b/.npmignore
@@ -7,6 +7,7 @@ lib/*.png
 coverage/
 test/
 test*
+e2e/
 .DS_Store
 .codesandbox/
 .devcontainer/
diff --git a/CHANGELOG.md b/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)

diff --git a/e2e/imports.ts b/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',
+};
diff --git a/e2e/site/favicon.ico b/e2e/site/favicon.ico
diff --git a/e2e/site/index.html b/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>
diff --git a/e2e/tests/template/index.spec.ts b/e2e/tests/template/index.spec.ts
@@ -0,0 +1,8 @@
+import { test } from '@playwright/test';
+import { TestUtil } from '../../utils/TestUtil';
+import '../../utils/setupTest';
+
+test('TEST NAME', async ({ page }) => {
+  const util = new TestUtil(page);
+  // write the test
+});
diff --git a/e2e/tests/template/index.ts b/e2e/tests/template/index.ts
@@ -0,0 +1,18 @@
+/**
+ * Runs in the **BROWSER**
+ * Use absolute imports defined in '../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);
+
+  return { textbox };
+});
diff --git a/e2e/tests/test.ts b/e2e/tests/test.ts
@@ -0,0 +1,34 @@
+/**
+ * Runs from the BROWSER context
+ */
+
+import type { Object as FabricObject } from 'fabric';
+import { Canvas } from 'fabric';
+
+type Targets = Record<string, FabricObject>;
+
+/**
+ * Call this method **once**
+ */
+export async function beforeAll(
+  /**
+   * @returns a map of {@link FabricObject} for playwright to access during tests
+   */
+  cb: (canvas: Canvas) => Targets | Promise<Targets> | void,
+  options?
+) {
+  const canvas = new Canvas(document.getElementById('canvas'), options);
+  window.canvas = canvas;
+  window.targets = (await cb(canvas)) || {};
+  window.dispatchEvent(new CustomEvent('setup:completed'));
+}
+
+/**
+ * Call this method **once**
+ */
+export async function afterAll(cb: (canvas: Canvas) => void | Promise<void>) {
+  window.__teardown = async () => {
+    await cb(window.canvas);
+    window.dispatchEvent(new CustomEvent('teardown:completed'));
+  };
+}
diff --git a/e2e/tests/text/text-editing.spec.ts b/e2e/tests/text/text-editing.spec.ts
diff --git a/e2e/tests/text/text-editing/index.spec.ts b/e2e/tests/text/text-editing/index.spec.ts
@@ -0,0 +1,86 @@
+import { expect, test } from '@playwright/test';
+import { ObjectUtil } from '../../../utils/ObjectUtil';
+import { TestUtil } from '../../../utils/TestUtil';
+import '../../../utils/setupTest';
+
+test('textbox typing and resizing', async ({ page }) => {
+  const util = new TestUtil(page);
+  const textboxUtil = new ObjectUtil('textbox', page);
+  const textCenter = await textboxUtil.getObjectCenter();
+
+  expect(await util.screenshot()).toMatchSnapshot({ name: 'initial.png' });
+
+  await util.clickCanvas({
+    position: textCenter,
+    clickCount: 2,
+    delay: 200,
+  });
+
+  expect(await util.screenshot()).toMatchSnapshot({ name: 'start.png' });
+
+  await page
+    .locator('textarea')
+    .type(
+      'insert text in a textbox from the keyboard will wrap text on current textbox width',
+      {
+        // delay: 160,
+      }
+    );
+
+  expect(await util.screenshot()).toMatchSnapshot({ name: 'typed.png' });
+
+  const mrControlPoint = await textboxUtil.getObjectControlPoint('mr');
+
+  // click outside to stop editing
+  await util.clickCanvas({
+    position: {
+      x: mrControlPoint.x + 20,
+      y: mrControlPoint.y,
+    },
+    clickCount: 1,
+    delay: 200,
+  });
+  expect(await util.screenshot()).toMatchSnapshot({ name: 'exit_editing.png' });
+
+  // click the object to select it
+  await util.clickCanvas({
+    position: textCenter,
+  });
+
+  // drag the mr control
+  await page.mouse.move(mrControlPoint.x, mrControlPoint.y);
+  await page.mouse.down();
+  await page.mouse.move(mrControlPoint.x + 300, mrControlPoint.y, {
+    steps: 40,
+  });
+  expect(await util.screenshot()).toMatchSnapshot({
+    name: 'increase_width_mr.png',
+  });
+  // drag in the opposite direction
+  await page.mouse.move(mrControlPoint.x - 300, mrControlPoint.y, {
+    steps: 60,
+  });
+  await page.mouse.up();
+  expect(await util.screenshot()).toMatchSnapshot({
+    name: 'decrease_width_mr.png',
+  });
+
+  // drag the ml control
+  const mlControlPoint = await textboxUtil.getObjectControlPoint('ml');
+  await page.mouse.move(mlControlPoint.x, mlControlPoint.y);
+  await page.mouse.down();
+  await page.mouse.move(mlControlPoint.x - 300, mlControlPoint.y, {
+    steps: 40,
+  });
+  expect(await util.screenshot()).toMatchSnapshot({
+    name: 'increase_width_ml.png',
+  });
+  // drag in the opposite direction
+  await page.mouse.move(mlControlPoint.x + 300, mlControlPoint.y, {
+    steps: 60,
+  });
+  await page.mouse.up();
+  expect(await util.screenshot()).toMatchSnapshot({
+    name: 'decrease_width_ml.png',
+  });
+});
diff --git a/e2e/tests/text/text-editing/index.spec.ts-snapshots/decrease-width-ml.png b/e2e/tests/text/text-editing/index.spec.ts-snapshots/decrease-width-ml.png
diff --git a/e2e/tests/text/text-editing/index.spec.ts-snapshots/decrease-width-mr.png b/e2e/tests/text/text-editing/index.spec.ts-snapshots/decrease-width-mr.png
diff --git a/e2e/tests/text/text-editing/index.spec.ts-snapshots/exit-editing.png b/e2e/tests/text/text-editing/index.spec.ts-snapshots/exit-editing.png
diff --git a/e2e/tests/text/text-editing/index.spec.ts-snapshots/increase-width-ml.png b/e2e/tests/text/text-editing/index.spec.ts-snapshots/increase-width-ml.png
diff --git a/e2e/tests/text/text-editing/index.spec.ts-snapshots/increase-width-mr.png b/e2e/tests/text/text-editing/index.spec.ts-snapshots/increase-width-mr.png
diff --git a/e2e/tests/text/text-editing/index.spec.ts-snapshots/initial.png b/e2e/tests/text/text-editing/index.spec.ts-snapshots/initial.png
diff --git a/e2e/tests/text/text-editing/index.spec.ts-snapshots/start.png b/e2e/tests/text/text-editing/index.spec.ts-snapshots/start.png
diff --git a/e2e/tests/text/text-editing/index.spec.ts-snapshots/typed.png b/e2e/tests/text/text-editing/index.spec.ts-snapshots/typed.png
diff --git a/e2e/tests/text/text-editing/index.ts b/e2e/tests/text/text-editing/index.ts
@@ -0,0 +1,9 @@
+import { Textbox } from 'fabric';
+import { beforeAll } from 'test';
+
+beforeAll((canvas) => {
+  const textbox = new Textbox('initial text', { width: 200, left: 50 });
+  canvas.add(textbox);
+
+  return { textbox };
+});
diff --git a/e2e/tsconfig.json b/e2e/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "sourceMap": true,
+    "outDir": "./dist",
+    "allowSyntheticDefaultImports": true,
+    /**
+     * A reflection of the configured imports used by test scripts
+     * **IMPORTANT**: be sure to keep this updated to reflect `./imports.ts` correctly
+     */
+    "paths": { "fabric": ["../dist"], "test": ["./tests/test.ts"] }
+  }
+}