ci(e2e): support relative imports

.github/workflows/tests.yml

@@ -114,6 +114,8 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - uses: ./.github/actions/cached-install
+        with:
+          node-version: 18.x
       - name: Build fabric.js
         uses: ./.github/actions/build-fabric-cached
         # Playwright suggests against caching the browser install
@@ -127,7 +129,7 @@ jobs:
         with:
           name: e2e-report
           path: ./e2e/test-report/
-      - name: Upload test coverage
+      - name: Upload Test Coverage
         uses: actions/upload-artifact@v3
         with:
           name: coverage-e2e

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [next]
 
+- ci(e2e): support relative imports [#9108](https://github.com/fabricjs/fabric.js/pull/9108)
 - fix(): #8344 stroke projection [#8374](https://github.com/fabricjs/fabric.js/pull/8374)
 - fix(Filters) Removing type from the options passed in the constructor [#9089](https://github.com/fabricjs/fabric.js/pull/9089)
 - feat(InteractiveObject): add `getActiveControl()` to expose `__corner` [#9102](https://github.com/fabricjs/fabric.js/pull/9102)

e2e/.babelrc.js

@@ -0,0 +1,49 @@
+// https://github.com/viruscamp/babel-plugin-transform-imports#using-a-function-as-the-transformer
+
+const path = require('path');
+const testsDir = path.resolve('./e2e/tests');
+const testsBuiltDir = path.resolve('./e2e/dist');
+
+function resolve(file) {
+  const found = ['', '.ts', '/index.ts']
+    .map((resolution) => `${file}${resolution}`)
+    .find((file) => {
+      try {
+        return require.resolve(file);
+      } catch (error) {
+        return false;
+      }
+    });
+  if (!found) {
+    console.error(`Failed to resolve ${file}`);
+    process.exit(1);
+  }
+  return require.resolve(found).replace(/\.ts$/, '.js');
+}
+
+module.exports = {
+  extends: '../.babelrcAlt',
+  plugins: [
+    [
+      'transform-imports',
+      {
+        '\\..*': {
+          skipDefaultConversion: true,
+          transform: function (importName, matches, filename) {
+            const file = resolve(
+              path.resolve(path.dirname(filename), `${matches[0]}`)
+            );
+            return `/${path
+              .relative(
+                process.cwd(),
+                file.startsWith(testsDir)
+                  ? path.resolve(testsBuiltDir, path.relative(testsDir, file))
+                  : file
+              )
+              .replaceAll('\\', '/')}`;
+          },
+        },
+      },
+    ],
+  ],
+};

e2e/imports.ts

@@ -1,12 +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)
+ * The import map used by `./utils/setupApp` to inject into the page so test scripts can use modules.
+ *
+ * Relative imports are supported thanks to babel, see `./.babelrc.js`.
  *
  * **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/setupApp.ts

@@ -61,7 +61,7 @@ test.beforeEach(async ({ page }, { file }) => {
     await page.addScriptTag({
       type: 'module',
       content: `${readFileSync(
-        path.relative(process.cwd(), pathToApp)
+        path.relative(process.cwd(), pathToBuiltApp)
       ).toString()}
        window.dispatchEvent(new CustomEvent('fabric:setup'));
        `,

e2e/tests/template/index.ts

@@ -1,10 +1,10 @@
 /**
  * Runs in the **BROWSER**
- * Use absolute imports defined in 'e2e/imports.ts'
+ * Imports are defined in 'e2e/imports.ts'
  */
 
 import * as fabric from 'fabric';
-import { beforeAll } from 'test';
+import { beforeAll } from '../test';
 
 beforeAll((canvas) => {
   const textbox = new fabric.Textbox('fabric.js test', {

e2e/tests/text/text-editing/index.ts

@@ -1,10 +1,5 @@
-/**
- * Runs in the **BROWSER**
- * Use absolute imports defined in 'e2e/imports.ts'
- */
-
 import { Textbox } from 'fabric';
-import { beforeAll } from 'test';
+import { beforeAll } from '../../test';
 
 beforeAll((canvas) => {
   const textbox = new Textbox('initial text', { width: 200, left: 50 });

e2e/tsconfig.json

@@ -10,6 +10,6 @@
      * 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"] }
+    "paths": { "fabric": ["../dist"] }
   }
 }