Merge pull request #47 from embroider-build/custom-component-test

Update to use explicit resolve.extensions

files/vite.config.mjs

@@ -13,13 +13,24 @@ import { resolve } from 'path';
 import { babel } from '@rollup/plugin-babel';
 
 const root = 'tmp/rewritten-app';
+const extensions = [
+  '.mjs',
+  '.gjs',
+  '.js',
+  '.mts',
+  '.gts',
+  '.ts',
+  '.hbs',
+  '.json',
+];
 
 export default defineConfig(({ mode }) => {
   return {
     root,
-    // esbuild in vite does not support decorators
-    esbuild: false,
     cacheDir: resolve('node_modules', '.vite'),
+    resolve: {
+      extensions,
+    },
     plugins: [
       hbs(),
       templateTag(),
@@ -31,12 +42,7 @@ export default defineConfig(({ mode }) => {
 
       babel({
         babelHelpers: 'runtime',
-
-        // this needs .hbs because our hbs() plugin above converts them to
-        // javascript but the javascript still also needs babel, but we don't want
-        // to rename them because vite isn't great about knowing how to hot-reload
-        // them if we resolve them to made-up names.
-        extensions: ['.gjs', '.js', '.hbs', '.ts', '.gts'],
+        extensions,
       }),
     ],
     optimizeDeps: optimizeDeps(),

tests/fixture/app/components/custom-component.hbs

@@ -0,0 +1,3 @@
+<div id="custom-component">
+    I am a custom component
+</div>

tests/fixture/app/router.js

@@ -8,4 +8,5 @@ export default class Router extends EmberRouter {
 
 Router.map(function () {
   this.route('styles');
+  this.route('custom-component');
 });

tests/fixture/app/templates/custom-component.hbs

@@ -0,0 +1 @@
+<CustomComponent />

tests/fixture/tests/acceptance/custom-component-test.js

@@ -0,0 +1,14 @@
+import { module, test } from 'qunit';
+import { visit, currentURL } from '@ember/test-helpers';
+import { setupApplicationTest } from '<%= name %>/tests/helpers';
+
+module('Acceptance | custom-component page', function (hooks) {
+  setupApplicationTest(hooks);
+
+  test('visiting /custom-component', async function (assert) {
+    await visit('/custom-component');
+
+    assert.strictEqual(currentURL(), '/custom-component');
+    assert.dom('#custom-component').containsText('I am a custom component');
+  });
+})