Merge pull request #1430 from NullVoxPopuli/nvp/vite-support

Support vite

Author: NullVoxPopuli

.github/workflows/ci.yml

@@ -54,6 +54,8 @@ jobs:
           - { name: "Broccoli (v1 Addon)", dir: ".", cmd: "pnpm test:ember" }
           - { name: "Broccoli (v1 App)", dir: './test-apps/broccoli', cmd: 'pnpm test:ember' }
           - { name: "Webpack + Embroider 3 ", dir: './test-apps/embroider3-webpack', cmd: 'pnpm test:ember' }
+          - { name: "Vite + Compat", dir: './test-apps/vite-with-compat', cmd: 'pnpm build:tests && pnpm test:exam' }
+
     steps:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v4

.gitignore

@@ -1,6 +1,8 @@
 # compiled output
 /dist/
 /acceptance-dist/
+dist-*/
+test-execution-*.json
 /declarations/
 
 # dependencies

CONTRIBUTING.md

@@ -25,3 +25,14 @@
 - Visit the dummy application at [http://localhost:4200](http://localhost:4200).
 
 For more information on using ember-cli, visit [https://cli.emberjs.com/release/](https://cli.emberjs.com/release/).
+
+## Debugging testem
+
+Terminal 1
+```bash
+pnpm ember exam --load-balance --path ./dist --parallel 2 --testem-debug testem.log
+```
+Terminal 2
+```bash
+tail -f testem.log
+```

README.md

@@ -93,30 +93,54 @@ Update your test-helper.js or test-helper.ts, to have add the ember-exam `start`
 + import { setupEmberOnerrorValidation } from 'ember-qunit';
 + import { start as startEmberExam } from 'ember-exam/test-support';
 
-  export function start() {
+- export function start() {
++ export async function start({ availableModules }) {
     setApplication(Application.create(config.APP));
 
     setup(QUnit.assert);
     setupEmberOnerrorValidation();
 
 -   qunitStart();
 +   // Options passed to `start` will be passed-through to ember-qunit
-+   startEmberExam();
++   await startEmberExam({ availableModules });
   }
 ```
 
+Then, update your tests/index.html to pass availableModules to start:
+```html
+<script type="module">
+  import { start } from './test-helper.js';
+
+  const availableModules = {
+    ...import.meta.glob('./application/**/*-test.{js,ts,gjs,gts}'),
+    ...import.meta.glob('./rendering/**/*-test.{js,ts,gjs,gts}'),
+    ...import.meta.glob('./unit/**/*-test.{js,ts,gjs,gts}'),
+  };
+
+	start({ availableModules });
+</script>
+```
+
+
 Testing development:
 ```bash 
-NODE_ENV=development vite build --mode test
-ember exam --path dist
+NODE_ENV=development vite build --mode development
+ember exam --path dist --config-file ./testem.cjs
 ```
 
 Testing production:
 ```bash
 vite build --mode test
-ember exam --path dist
+ember exam --path dist --config-file ./testem.cjs
 ```
 
+> [!NOTE]
+> Specifying the `--path` is important because otherwise ember-cli will try to build your vite app, and it will error. 
+
+> [!NOTE]
+> Specifying the `--config-path` is important because ember-cli (what backs ember-exam) doesn't know about cjs files. 
+
+
 ### Version < `3.0.0`
 
 

addon-test-support/-private/ember-exam-test-loader.js

@@ -1,3 +1,4 @@
+import { assert } from '@ember/debug';
 import getUrlParams from './get-url-params';
 import splitTestModules from './split-test-modules';
 import weightTestModules from './weight-test-modules';
@@ -59,7 +60,7 @@ export default class EmberExamTestLoader extends TestLoader {
    *
    * @method loadModules
    */
-  loadModules() {
+  async loadModules({ availableModules } = {}) {
     const loadBalance = this._urlParams.get('loadBalance');
     const browserId = this._urlParams.get('browser');
     const modulePath = this._urlParams.get('modulePath');
@@ -75,7 +76,18 @@ export default class EmberExamTestLoader extends TestLoader {
       partitions = [partitions];
     }
 
-    super.loadModules();
+    if (!availableModules) {
+      super.loadModules();
+    } else {
+      assert(
+        `Available modules must be an object.`,
+        typeof availableModules === 'object',
+      );
+
+      this._availableModules = availableModules;
+      this._testModules = Object.keys(availableModules);
+    }
+
     this.setupModuleMetadataHandler();
 
     if (modulePath || filePath) {
@@ -93,6 +105,7 @@ export default class EmberExamTestLoader extends TestLoader {
         split,
         partitions,
       );
+
       this._testem.emit(
         'testem:set-modules-queue',
         this._testModules,
@@ -104,25 +117,70 @@ export default class EmberExamTestLoader extends TestLoader {
         split,
         partitions,
       );
+
+      if (this._availableModules) {
+        await this.loadAvailableModules();
+        return;
+      }
+
+      /**
+       * Legacy support
+       */
       this._testModules.forEach((moduleName) => {
         super.require(moduleName);
         super.unsee(moduleName);
       });
     }
   }
 
+  /**
+   * availableModules are passed in from loadModules
+   * from loadEmberExam
+   * from start
+   */
+  async loadAvailableModules() {
+    if (this._availableModules) {
+      await Promise.all(
+        this._testModules.map(async (moduleName) => {
+          let loader = this._availableModules[moduleName];
+
+          /**
+           * If it's not a function, it's already loaded
+           */
+          if (typeof loader === 'function') {
+            await loader();
+          }
+        }),
+      );
+    }
+  }
+
   /**
    * Allow loading one module at a time.
    *
    * @method loadIndividualModule
    * @param {string} moduleName
    */
-  loadIndividualModule(moduleName) {
+  async loadIndividualModule(moduleName) {
     if (moduleName === undefined) {
       throw new Error(
         'Failed to load a test module. `moduleName` is undefined in `loadIndividualModule`.',
       );
     }
+
+    if (this._availableModules) {
+      let loader = this._availableModules[moduleName];
+
+      /**
+       * If it's not a function, it's already loaded
+       */
+      if (typeof loader === 'function') {
+        await loader();
+      }
+
+      return;
+    }
+
     super.require(moduleName);
     super.unsee(moduleName);
   }
@@ -168,10 +226,10 @@ export default class EmberExamTestLoader extends TestLoader {
 
       return nextModuleAsyncIterator
         .next()
-        .then((response) => {
+        .then(async (response) => {
           if (!response.done) {
             const moduleName = response.value;
-            this.loadIndividualModule(moduleName);
+            await this.loadIndividualModule(moduleName);
 
             // if no tests were added, request the next module
             if (this._qunit.config.queue.length === 0) {

addon-test-support/start.js

@@ -6,15 +6,16 @@ import { start as qunitStart } from 'ember-qunit';
  *
  * @function loadTests
  * @param {*} testLoader
+ * @param {*} loaderOptions
  */
-function loadTests(testLoader) {
+async function loadTests(testLoader, loaderOptions = {}) {
   if (testLoader === undefined) {
     throw new Error(
       'A testLoader instance has not been created. You must call `loadEmberExam()` before calling `loadTest()`.',
     );
   }
 
-  testLoader.loadModules();
+  await testLoader.loadModules(loaderOptions);
 }
 
 /**
@@ -24,11 +25,13 @@ function loadTests(testLoader) {
  * @function start
  * @param {*} qunitOptions
  */
-export default function start(qunitOptions) {
-  const modifiedOptions = qunitOptions || Object.create(null);
+export default async function start(qunitOptions = {}) {
+  const { availableModules, ...modifiedOptions } =
+    qunitOptions || Object.create(null);
+
   modifiedOptions.loadTests = false;
 
   const testLoader = loadEmberExam();
-  loadTests(testLoader);
+  await loadTests(testLoader, { availableModules });
   qunitStart(modifiedOptions);
 }

docs-app/filtering.md

@@ -6,7 +6,25 @@ Ember Exam provides options to filter test suites by two types - module path and
 $ ember exam --module-path=<module-path>
 ```
 
-The `module-path` option allows you to filter module paths by a given value. Module paths are mapped by test files and they are generated during `ember build`. After the build, `tests.js` file is created and it resides under [build-directory]/assets. The file is combined of all tests in an application and it has a form of `define("<module-path>", others..`.
+#### For Vite Apps
+
+The `file-path` option allows you to filter modules by the given relative path that is generated from `import.meta.glob(...)` in your `tests/index.html`.
+
+```bash
+# This will run tests that are defined in `/my-application/tests/unit/my-test.js`
+$ ember exam --file-path='/my-application/tests/unit/my-test.js'
+
+# This will run all test files that are under `/my-application/tests/unit/`
+$ ember exam --file-path='/my-application/tests/unit/*.js'
+```
+
+
+#### For non-Vite Apps
+
+
+The `module-path` option allows you to filter module paths by a given value. Module paths are mapped by test files and they are generated during `ember build`. After the build, `tests.js` file is created and it resides under [build-directory]/assets. 
+
+The file is combined of all tests in an application and it has a form of `define("<module-path>", others..`.
 
 The value for `module-path` can have either string or regular expression, for instance:
 

docs-app/quickstart.md

@@ -35,13 +35,84 @@ ember exam --load-balance --parallel --server --no-launch
 
 The idea is that you can replace `ember test` with `ember exam` and never look back.
 
+To get the unique features of Ember Exam (described in-depth below), you will need to **replace** the use of `start()` from `ember-qunit` in `test-helper.js` with `start()` from `ember-exam`:
+
+
+## Setup
+
+### With Vite
+
+
+Update your test-helper.js or test-helper.ts, to have add the ember-exam `start` function:
+```diff
+  // ...
+  import { setApplication } from '@ember/test-helpers';
+  import { setup } from 'qunit-dom';
+- import { start as qunitStart, setupEmberOnerrorValidation } from 'ember-qunit';
++ import { setupEmberOnerrorValidation } from 'ember-qunit';
++ import { start as startEmberExam } from 'ember-exam/test-support';
+
+- export function start() {
++ export async function start({ availableModules }) {
+    setApplication(Application.create(config.APP));
+
+    setup(QUnit.assert);
+    setupEmberOnerrorValidation();
+
+-   qunitStart();
++   // Options passed to `start` will be passed-through to ember-qunit
++   await startEmberExam({ availableModules });
+  }
+```
+
+Then, update your tests/index.html to pass availableModules to start:
+```html
+<script type="module">
+  import { start } from './test-helper.js';
+
+  const availableModules = {
+    ...import.meta.glob('./application/**/*-test.{js,ts,gjs,gts}'),
+    ...import.meta.glob('./rendering/**/*-test.{js,ts,gjs,gts}'),
+    ...import.meta.glob('./unit/**/*-test.{js,ts,gjs,gts}'),
+  };
+
+	start({ availableModules });
+</script>
+```
+
+ We need to tell vite to build the app before telling ember/exam to run tests on that output.
+
+Testing development:
+```bash 
+NODE_ENV=development vite build --mode development
+ember exam --path dist --config-file ./testem.cjs
+```
+
+Testing production:
+```bash
+vite build --mode test
+ember exam --path dist --config-file ./testem.cjs
+```
+
+> [!NOTE]
+> Specifying the `--path` is important because otherwise ember-cli will try to build your vite app, and it will error. 
+
+> [!NOTE]
+> Specifying the `--config-path` is important because ember-cli (what backs ember-exam) doesn't know about cjs files. 
+
+
+### broccoli / ember-cli 
+
+
 To get the unique features of Ember Exam (described in-depth below), you will need to **replace** the use of `start()` from `ember-qunit` in `test-helper.js` with `start()` from `ember-exam`:
 
 ```js
 // test-helper.js
-import start from 'ember-exam/test-support/start';
+- import { start, setupEmberOnerrorValidation } from 'ember-qunit';
++ import { setupEmberOnerrorValidation } from 'ember-qunit';
++ import { start } from 'ember-exam/test-support';
 
-// start() triggers qunit start after instantiating qunit test-loader instance and loading test modules.
+// Options passed to `start` will be passed-through to ember-qunit
 start();
 ```
 

lib/commands/task/test.js

@@ -7,6 +7,15 @@ module.exports = TestTask.extend({
       options.custom_browser_socket_events;
     transformOptions.browser_module_mapping = options.browser_module_mapping;
 
+    if (options.loadBalance) {
+      /**
+       * the parallel option is how testem knows to boot browsers simultaneously.
+       * setting testPage to an array isn't enough.
+       * default behavior is 1 browser at a time, which defeats the purpose of loadBalance.
+       */
+      transformOptions.parallel = options.testPage.length;
+    }
+
     return transformOptions;
   },
 });