fix vite test app

patricklx · patricklx · commit d406b5b2232a · 2025-06-26T11:50:49.000+02:00
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/test-apps/shared/tests/ember_debug/object-inspector-test.js b/test-apps/shared/tests/ember_debug/object-inspector-test.js
@@ -16,21 +16,13 @@ import { VERSION } from '@ember/version';
 import { tracked } from '@glimmer/tracking';
 import { module, skip, test } from 'qunit';
 import { hbs } from 'ember-cli-htmlbars';
-import require from 'require';
 import hasEmberVersion from '@ember/test-helpers/has-ember-version';
 import { compareVersion } from 'ember-debug/version';
 import EmberDebug from 'ember-debug/main';
 import setupEmberDebugTest from '../helpers/setup-ember-debug-test';
 import EmberRoute from '@ember/routing/route';
 import Controller from '@ember/controller';
-
-const GlimmerComponent = (function () {
-  try {
-    return require('@glimmer/component').default;
-  } catch {
-    // ignore, return undefined
-  }
-})();
+import GlimmerComponent from '@glimmer/component';
 
 let objectInspector;
 
diff --git a/test-apps/shared/tests/ember_debug/view-debug-test.js b/test-apps/shared/tests/ember_debug/view-debug-test.js
@@ -24,18 +24,8 @@ import { isInVersionSpecifier } from 'ember-debug/version';
 import { VERSION } from 'ember-debug/ember';
 import GlimmerComponent from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
+import templateOnlyComponent from '@ember/component/template-only';
 
-let templateOnlyComponent = null;
-try {
-  // eslint-disable-next-line no-undef,ember/new-module-imports
-  templateOnlyComponent = Ember._templateOnlyComponent;
-  // eslint-disable-next-line no-empty
-} catch {}
-try {
-  // eslint-disable-next-line no-undef
-  templateOnlyComponent = require('ember').default._templateOnlyComponent;
-  // eslint-disable-next-line no-empty
-} catch {}
 
 // TODO switch to an adapter architecture, similar to the acceptance tests
 async function captureMessage(type, callback) {
diff --git a/test-apps/shared/tests/test-helper.js b/test-apps/shared/tests/test-helper.js
@@ -29,4 +29,9 @@ export async function waitForEmberDebug() {
     await new Promise((res) => setTimeout(res, 1));
   }
 }
-waitForEmberDebug().then(() => start());
+
+if (!globalThis.NO_TEST_AUTO_START) {
+  waitForEmberDebug().then(() => start());
+}
+
+export { start };
diff --git a/test-apps/vite-app/app/app.ts b/test-apps/vite-app/app/app.ts
@@ -1,3 +1,4 @@
+/* eslint-disable */
 import Application from '@ember/application';
 import compatModules from '@embroider/virtual/compat-modules';
 import Resolver from 'ember-resolver';
diff --git a/test-apps/vite-app/app/inspector-support.js b/test-apps/vite-app/app/inspector-support.js
@@ -0,0 +1,25 @@
+// this is to support ember > 6
+
+import Ember from 'ember';
+import * as runtime from '@glimmer/runtime';
+import * as tracking from '@glimmer/tracking';
+import * as validator from '@glimmer/validator';
+import * as component from '@glimmer/component';
+import { RSVP } from '@ember/-internals/runtime';
+import * as metal from '@ember/-internals/metal';
+import * as runloop from '@ember/runloop';
+
+import config from 'test-app/config/environment';
+
+window.define('@glimmer/tracking', () => tracking);
+window.define('@glimmer/runtime', () => runtime);
+window.define('@ember/-internals/metal', () => metal);
+window.define('@glimmer/validator', () => validator);
+window.define('@glimmer/component', () => component);
+window.define('@ember/runloop', () => runloop);
+window.define('rsvp', () => RSVP);
+window.define('ember', () => ({ default: Ember }));
+window.define('test-app/config/environment', () => ({
+  default: config,
+}));
+document.dispatchEvent(new Event('Ember'));
diff --git a/test-apps/vite-app/babel.config.cjs b/test-apps/vite-app/babel.config.cjs
@@ -16,7 +16,8 @@ module.exports = {
           'ember-cli-htmlbars-inline-precompile',
           'htmlbars-inline-precompile',
         ],
-        transforms: [...templateCompatSupport()],
+        // remove resolver-transform so that it does not change the hbs
+        transforms: [...templateCompatSupport()].slice(0, -1),
       },
     ],
     [
diff --git a/test-apps/vite-app/config/environment.js b/test-apps/vite-app/config/environment.js
@@ -2,7 +2,7 @@
 
 module.exports = function (environment) {
   const ENV = {
-    modulePrefix: 'test-app',
+    modulePrefix: 'vite-app',
     environment,
     rootURL: '/',
     locationType: 'history',
diff --git a/test-apps/vite-app/package.json b/test-apps/vite-app/package.json
@@ -24,7 +24,7 @@
     "lint:hbs:fix": "ember-template-lint . --fix",
     "lint:js": "eslint . --cache",
     "lint:js:fix": "eslint . --fix",
-    "start": "ember serve",
+    "start": "vite",
     "test": "concurrently \"npm:lint\" \"npm:test:*\" --names \"lint,test:\"",
     "test:ember": "ember test"
   },
@@ -75,6 +75,8 @@
     "ember-resolver": "^13.1.0",
     "ember-source": "~5.12.0",
     "ember-try": "^4.0.0",
+    "loader.js": "^4.7.0",
+    "send": "^1.2.0",
     "eslint-plugin-n": "^16.1.0",
     "prettier": "^3.0.3",
     "qunit": "^2.19.4",
diff --git a/test-apps/vite-app/tests/index.html b/test-apps/vite-app/tests/index.html
@@ -1,43 +1,52 @@
 <!DOCTYPE html>
 <html>
-<head>
-  <meta charset="utf-8">
-  <title>TsAppTemplate Tests</title>
-  <meta name="description" content="">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-
-  {{content-for "head"}}
-  {{content-for "test-head"}}
-
-  <link rel="stylesheet" href="/@embroider/virtual/vendor.css">
-  <link rel="stylesheet" href="/@embroider/virtual/app.css">
-  <link rel="stylesheet" href="/@embroider/virtual/test-support.css">
-
-  {{content-for "head-footer"}}
-  {{content-for "test-head-footer"}}
-</head>
-<body>
-{{content-for "body"}}
-{{content-for "test-body"}}
-
-<div id="qunit"></div>
-<div id="qunit-fixture">
-  <div id="ember-testing-container">
-    <div id="ember-testing"></div>
-  </div>
-</div>
-
-<script src="/testem.js" integrity="" data-embroider-ignore></script>
-<script src="/@embroider/virtual/vendor.js"></script>
-<script src="/@embroider/virtual/test-support.js"></script>
-<script type="module">import "ember-testing";</script>
-
-<script type="module">
-  import { start } from './test-helper';
-  import.meta.glob("./**/*.{js,ts,gjs,gts}", { eager: true });
-  start();
-</script>
-
-{{content-for "body-footer"}}
-</body>
+  <head>
+    <meta charset="utf-8">
+    <title>TsAppTemplate Tests</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    {{content-for "head"}}
+    {{content-for "test-head"}}
+
+    <link rel="stylesheet" href="/@embroider/virtual/vendor.css">
+    <link rel="stylesheet" href="/@embroider/virtual/app.css">
+    <link rel="stylesheet" href="/@embroider/virtual/test-support.css">
+
+    {{content-for "head-footer"}}
+    {{content-for "test-head-footer"}}
+  </head>
+  <body>
+    {{content-for "body"}}
+    {{content-for "test-body"}}
+
+    <div id="qunit"></div>
+    <div id="qunit-fixture">
+      <div id="ember-testing-container">
+        <div id="ember-testing"></div>
+      </div>
+    </div>
+
+    <script src="/testem.js" integrity="" data-embroider-ignore></script>
+    <script src="/@embroider/virtual/vendor.js"></script>
+    <script src="/@embroider/virtual/test-support.js"></script>
+    <script type="module">import "ember-testing";</script>
+
+    <script type='module'>
+      import '../app/inspector-support';
+      globalThis.NO_TEST_AUTO_START = true;
+    </script>
+
+    <script src="/ember_debug"></script>
+
+    <script type="module">
+      import { waitForEmberDebug, start } from '../../shared/tests/test-helper';
+      const tests = import.meta.glob("../../shared/tests/**/*.{js,ts,gjs,gts}");
+      await waitForEmberDebug();
+      await Promise.all(Object.values(tests).map(load => load()));
+      start();
+    </script>
+
+    {{content-for "body-footer"}}
+  </body>
 </html>
diff --git a/test-apps/vite-app/vite.config.mjs b/test-apps/vite-app/vite.config.mjs
@@ -1,9 +1,104 @@
 import { defineConfig } from 'vite';
 import { extensions, classicEmberSupport, ember } from '@embroider/vite';
 import { babel } from '@rollup/plugin-babel';
+import path from 'path';
+import fs from 'fs';
+import send from 'send';
+
+function emberDebug() {
+  const testingDir = path.resolve(__dirname, '../../dist/testing');
+  const distDir = path.resolve(__dirname, '../../dist');
+  const shared = path.resolve(__dirname, '../shared');
+  const testingFolderExists = fs.existsSync(testingDir);
+  const dist = testingFolderExists ? testingDir : distDir;
+  const files = [
+    'ember_debug.js',
+    'background.js',
+    'content-script.js',
+    'panes-3-16-0/ember_debug.js',
+  ];
+  return {
+    name: 'ember-debug-loader',
+    async resolveId(id, importer, opts) {
+      if (id.startsWith('ember-debug')) {
+        return id;
+      }
+      if (id.startsWith('vite-app')) {
+        const sharedId = id.replace('vite-app', `${shared}/app`);
+        const resolved = await this.resolve(sharedId, importer, opts);
+        if (resolved) {
+          return resolved;
+        }
+      }
+      if (importer?.includes('shared')) {
+        return this.resolve(id, importer.replace(shared, process.cwd()), opts);
+      }
+    },
+    load(id) {
+      if (id.startsWith('ember-debug/version')) {
+        return `
+        export default requireModule('${id}').default;
+        export const compareVersion = requireModule('${id}').compareVersion;
+        export const isInVersionSpecifier = requireModule('${id}').isInVersionSpecifier;
+        `;
+      }
+      if (id.startsWith('ember-debug/type-check')) {
+        return `
+        export default requireModule('${id}').default;
+        export const inspect = requireModule('${id}').inspect;
+        `;
+      }
+      if (id.startsWith('ember-debug/ember')) {
+        return `
+        export default requireModule('${id}').default;
+        export const VERSION = requireModule('${id}').VERSION;
+        `;
+      }
+      if (id.startsWith('ember-debug')) {
+        return `export default requireModule('${id}').default`;
+      }
+    },
+    writeBundle() {
+      for (const file of files) {
+        fs.cpSync(
+          path.resolve(dist, file),
+          path.resolve(__dirname, 'dist', file),
+        );
+      }
+    },
+    configureServer(server) {
+      return () => {
+        server.middlewares.use((req, res, next) => {
+          let originalUrl = req.originalUrl;
+          const found =
+            originalUrl &&
+            files.find((f) => f.startsWith(originalUrl.slice(1)));
+          if (found) {
+            const assetUrl = path.resolve(dist, found);
+            if (assetUrl) {
+              return send(req, assetUrl).pipe(res);
+            }
+          }
+          return next();
+        });
+      };
+    },
+  };
+}
 
 export default defineConfig({
+  resolve: {
+    alias: {
+      'test-app': 'vite-app',
+    },
+  },
+  build: {
+    rollupOptions: {
+      external: [/^ember-debug/],
+    },
+  },
   plugins: [
+    emberDebug(),
     classicEmberSupport(),
     ember(),
     babel({

Original file line number	Diff line number	Diff line change
`@@ -29,4 +29,9 @@ export async function waitForEmberDebug() {`
`29`	`29`	`await new Promise((res) => setTimeout(res, 1));`
`30`	`30`	`}`
`31`	`31`	`}`
`32`		`-waitForEmberDebug().then(() => start());`
	`32`	`+`
	`33`	`+if (!globalThis.NO_TEST_AUTO_START) {`
	`34`	`+ waitForEmberDebug().then(() => start());`
	`35`	`+}`
	`36`	`+`
	`37`	`+export { start };`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+/* eslint-disable */`
`1`	`2`	`import Application from '@ember/application';`
`2`	`3`	`import compatModules from '@embroider/virtual/compat-modules';`
`3`	`4`	`import Resolver from 'ember-resolver';`