Merge pull request #2112 from patricklx/test-ts-syntax

fix build with gts
embroider-build · Oct 8, 2024 · e757dc6 · e757dc6
2 parents 89d7d7f + 68df644
commit e757dc6
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 11 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/tests/scenarios/typescript-app-test.ts b/tests/scenarios/typescript-app-test.ts
@@ -8,6 +8,31 @@ let typescriptApp = tsAppScenarios.map('typescript-app', project => {
   merge(project.files, {
     app: {
       components: {
+        'test-gts.gts': `
+            import Component from '@glimmer/component';
+            import { tracked } from '@glimmer/tracking';
+            import { action } from '@ember/object';
+            import { on } from '@ember/modifier';
+
+            interface Signature {
+              Element: HTMLDivElement;
+              Blocks: {
+                default: [number]
+              }
+            }
+
+            export default class Incrementer extends Component<Signature> {
+              @tracked count = 0;
+
+              @action increment() { this.count++ }
+              <template>
+                <div ...attributes>
+                  <button {{on 'click' this.increment}}>increment</button>
+                  {{yield this.count}}
+                </div>
+              </template>
+            }
+        `,
         'incrementer.ts': `
             import Component from '@glimmer/component';
             import { tracked } from '@glimmer/tracking';
@@ -36,6 +61,29 @@ let typescriptApp = tsAppScenarios.map('typescript-app', project => {
     },
     tests: {
       rendering: {
+        'gts-test.gts': `
+            import { module, test } from 'qunit';
+            import { setupRenderingTest } from 'ember-qunit';
+            import { render, click } from '@ember/test-helpers';
+            import TestGts from '/app/components/test-gts';
+
+            module('Rendering', function (hooks) {
+              setupRenderingTest(hooks);
+
+              test('increments', async function (assert) {
+                await render(<template>
+                  <TestGts as |count|>
+                    <out>{{count}}</out>
+                  </TestGts>
+                </template>);
+
+                assert.dom('out').hasText('0');
+
+                await click('button');
+                assert.dom('out').hasText('1');
+              });
+            });
+          `,
         'incrementer-test.ts': `
             import { module, test } from 'qunit';
             import { setupRenderingTest } from 'ember-qunit';

diff --git a/tests/scenarios/vite-internals-test.ts b/tests/scenarios/vite-internals-test.ts
@@ -1,4 +1,4 @@
-import { appScenarios, baseAddon } from './scenarios';
+import { baseAddon, tsAppScenarios } from './scenarios';
 import type { PreparedApp } from 'scenario-tester';
 import QUnit from 'qunit';
 import fetch from 'node-fetch';
@@ -7,7 +7,7 @@ import { setupAuditTest } from '@embroider/test-support/audit-assertions';
 
 const { module: Qmodule, test } = QUnit;
 
-appScenarios
+tsAppScenarios
   .only('release')
   .map('vite-internals', app => {
     // These are for a custom testem setup that will let us do runtime tests
@@ -54,10 +54,19 @@ appScenarios
 
       app: {
         components: {
-          'alpha.js': `
+          'fancy-gts.gts': `
             import Component from '@glimmer/component';
             export default class extends Component {
-              message = "alpha";
+              message: string = "fancy gts";
+              <template>
+                <div class="fancy-gts">{{this.message}}</div>
+              </template>
+            }
+          `,
+          'alpha.ts': `
+            import Component from '@glimmer/component';
+            export default class extends Component {
+              message: string = "alpha";
             }
           `,
           'alpha.hbs': `
@@ -80,7 +89,7 @@ appScenarios
             import Component from '@glimmer/component';
             export default class extends Component {
               message = "delta";
-            }
+           }
           `,
         },
         templates: {
@@ -90,6 +99,7 @@ appScenarios
           `,
           'index.hbs': `
             <FancyButton />
+            <FancyGts />
             <WelcomePage />
           `,
         },
@@ -109,12 +119,13 @@ appScenarios
           components: {
             'example-test.js': `
               import { module, test } from 'qunit';
-              import { setupRenderingTest } from 'app-template/tests/helpers';
+              import { setupRenderingTest } from 'ts-app-template/tests/helpers';
               import { render } from '@ember/test-helpers';
               import { hbs } from 'ember-cli-htmlbars';
-              import { appLibOne as libOneViaAddon, appLibTwo as libTwoViaAddon } from 'app-template/v1-example-addon';
-              import appLibOne from 'app-template/lib/app-lib-one';
-              import appLibTwo from 'app-template/lib/app-lib-two';
+              import { appLibOne as libOneViaAddon, appLibTwo as libTwoViaAddon } from 'ts-app-template/v1-example-addon';
+              import appLibOne from 'ts-app-template/lib/app-lib-one';
+              import appLibTwo from 'ts-app-template/lib/app-lib-two';
+
 
               module('Integration | Component | example', function (hooks) {
                 setupRenderingTest(hooks);
@@ -187,7 +198,7 @@ appScenarios
       app: {
         'v1-example-addon.js': `
           import appLibOne from './lib/app-lib-one';
-          import appLibTwo from 'app-template/lib/app-lib-two';
+          import appLibTwo from 'ts-app-template/lib/app-lib-two';
           export { appLibOne, appLibTwo };
         `,
         templates: {
@@ -240,7 +251,7 @@ appScenarios
             .module('./index.html')
             .resolves(/\/index.html.*/) // in-html app-boot script
             .toModule()
-            .resolves(/\/app\.js.*/)
+            .resolves(/\/app\.ts.*/)
             .toModule()
             .resolves(/.*\/-embroider-entrypoint.js/)
             .toModule()

diff --git a/tests/ts-app-template/babel.config.cjs b/tests/ts-app-template/babel.config.cjs
@@ -2,6 +2,7 @@ const { babelCompatSupport, templateCompatSupport } = require('@embroider/compat
 
 module.exports = {
   plugins: [
+    ['@babel/plugin-transform-typescript'],
     [
       'babel-plugin-ember-template-compilation',
       {

diff --git a/tests/ts-app-template/package.json b/tests/ts-app-template/package.json
@@ -30,6 +30,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.22.20",
+    "@babel/plugin-transform-typescript": "^7.21.3",
     "@babel/eslint-parser": "^7.21.3",
     "@babel/plugin-proposal-decorators": "^7.21.0",
     "@ember/optional-features": "^2.0.0",