Merge pull request #589 from qonto/typescript-conversion

refactor: migrate test-app package to TypeScript

.github/workflows/ci.yml

@@ -102,9 +102,11 @@ jobs:
         with:
           node-version: 16.x
           args: "--frozen-lockfile"
-      - name: Update TS version
+      - name: Update TS version on addon package
         run: pnpm add -D ${{ matrix.typescript-scenario }}
         working-directory: ember-amount-input
+      - name: Update TS version on test-app package
+        run: pnpm add -D ${{ matrix.typescript-scenario }}
+        working-directory: test-app
       - name: Type checking
         run: pnpm lint:types
-        working-directory: ember-amount-input

package.json

@@ -12,6 +12,7 @@
     "build": "pnpm --filter ember-amount-input build",
     "lint": "pnpm --filter '*' lint",
     "lint:fix": "pnpm --filter '*' lint:fix",
+    "lint:types": "pnpm --filter '*' lint:types",
     "prepare": "pnpm build",
     "start": "concurrently 'pnpm:start:*' --restart-after 5000 --prefix-colors cyan,white,yellow",
     "start:addon": "pnpm --filter ember-amount-input start",

test-app/config/ember-try.js

@@ -3,6 +3,12 @@
 const getChannelURL = require('ember-source-channel-url');
 const { embroiderSafe, embroiderOptimized } = require('@embroider/test-setup');
 
+// Needed for ember-source < 4.8, when preview types were first shipped
+const emberTypesPackages = {
+  '@types/ember__application': '^4.0.8',
+  '@types/ember__routing': '^4.0.17',
+};
+
 module.exports = async function () {
   return {
     usePnpm: true,
@@ -12,6 +18,7 @@ module.exports = async function () {
         npm: {
           devDependencies: {
             'ember-source': '~3.28.0',
+            ...emberTypesPackages,
           },
         },
       },
@@ -20,6 +27,7 @@ module.exports = async function () {
         npm: {
           devDependencies: {
             'ember-source': '~4.4.0',
+            ...emberTypesPackages,
           },
         },
       },
@@ -75,6 +83,7 @@ module.exports = async function () {
         npm: {
           devDependencies: {
             'ember-source': '~3.28.0',
+            ...emberTypesPackages,
           },
           ember: {
             edition: 'classic',

test-app/package.json

@@ -20,6 +20,7 @@
     "lint:hbs:fix": "ember-template-lint . --fix",
     "lint:js": "eslint . --cache",
     "lint:js:fix": "eslint . --fix",
+    "lint:types": "glint",
     "start": "ember serve",
     "test": "concurrently \"pnpm:lint\" \"pnpm:test:*\" --names \"lint,test:\"",
     "test:ember": "ember test"

test-app/tests/helpers/index.js → test-app/tests/helpers/index.ts

@@ -1,3 +1,4 @@
+import type { SetupTestOptions } from 'ember-qunit';
 import {
   setupApplicationTest as upstreamSetupApplicationTest,
   setupRenderingTest as upstreamSetupRenderingTest,
@@ -8,7 +9,10 @@ import {
 // test setup functions. This way, you can easily extend the setup that is
 // needed per test type.
 
-function setupApplicationTest(hooks, options) {
+function setupApplicationTest(
+  hooks: NestedHooks,
+  options: SetupTestOptions,
+): void {
   upstreamSetupApplicationTest(hooks, options);
 
   // Additional setup for application tests can be done here.
@@ -27,13 +31,16 @@ function setupApplicationTest(hooks, options) {
   // setupMirage(hooks); // ember-cli-mirage
 }
 
-function setupRenderingTest(hooks, options) {
+function setupRenderingTest(
+  hooks: NestedHooks,
+  options: SetupTestOptions,
+): void {
   upstreamSetupRenderingTest(hooks, options);
 
   // Additional setup for rendering tests can be done here.
 }
 
-function setupTest(hooks, options) {
+function setupTest(hooks: NestedHooks, options: SetupTestOptions): void {
   upstreamSetupTest(hooks, options);
 
   // Additional setup for unit tests can be done here.

test-app/tests/integration/components/amount-input/component-test.js → test-app/tests/integration/components/amount-input/component-test.ts

@@ -1,29 +1,44 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { blur, fillIn, render, typeIn } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
+import { hbs } from 'ember-cli-htmlbars';
+import type { TestContext as TestContextBase } from '@ember/test-helpers';
+
+interface TestContext extends TestContextBase {
+  value: number | string;
+  update: () => void;
+}
+
+const NOOP = (): void => {};
 
 module('Integration | Component | amount-input', function (hooks) {
   setupRenderingTest(hooks);
 
-  test('is of type number', async function (assert) {
-    await render(hbs`
-      <AmountInput />
+  hooks.beforeEach(function (this: TestContext) {
+    this.update = NOOP;
+  });
+
+  test('is of type number', async function (this: TestContext, assert) {
+    await render<TestContext>(hbs`
+      <AmountInput
+        @value={{0}}
+        @update={{this.update}}
+      />
     `);
 
     assert.dom('.amount-input').exists;
     assert.dom('input').hasAttribute('type', 'number');
   });
 
-  test('allows passing arguments', async function (assert) {
-    this.set('value', 1);
+  test('allows passing arguments', async function (this: TestContext, assert) {
+    this.value = 1;
 
-    await render(hbs`
+    await render<TestContext>(hbs`
       <AmountInput
         @inputId='abcd'
-        @currency="USD"
+        @currency='USD'
         @numberOfDecimal={{0}}
-        @placeholder="1.000.000"
+        @placeholder='1.000.000'
         @step={{1}}
         @value={{this.value}}
         @min={{5}}
@@ -45,14 +60,14 @@ module('Integration | Component | amount-input', function (hooks) {
     assert.dom('input').hasAttribute('max', '10');
   });
 
-  test('uses named property declared (even if undefined) instead of defaults', async function (assert) {
-    await render(hbs`
+  test('uses named property declared (even if undefined) instead of defaults', async function (this: TestContext, assert) {
+    await render<TestContext>(hbs`
       <AmountInput
-        @currency={{this.isUndefined}}
-        @numberOfDecimal={{this.isUndefined}}
-        @placeholder={{this.isUndefined}}
-        @step={{this.isUndefined}}
-        @inputId={{this.isUndefined}}
+        @currency={{undefined}}
+        @numberOfDecimal={{undefined}}
+        @placeholder={{undefined}}
+        @step={{undefined}}
+        @inputId={{undefined}}
         @value={{this.value}}
         @update={{fn (mut this.value)}}
       />
@@ -68,8 +83,8 @@ module('Integration | Component | amount-input', function (hooks) {
     assert.dom('input').hasValue('11');
   });
 
-  test('uses defaults if named property are not declared', async function (assert) {
-    await render(hbs`
+  test('uses defaults if named property are not declared', async function (this: TestContext, assert) {
+    await render<TestContext>(hbs`
       <AmountInput
         @value={{this.value}}
         @update={{fn (mut this.value)}}
@@ -86,8 +101,8 @@ module('Integration | Component | amount-input', function (hooks) {
     assert.dom('input').hasValue('10.73');
   });
 
-  test('does not type in when readonly attribute is set to true', async function (assert) {
-    await render(hbs`
+  test('does not type in when readonly attribute is set to true', async function (this: TestContext, assert) {
+    await render<TestContext>(hbs`
       <AmountInput
         @value={{this.value}}
         @update={{fn (mut this.value)}} 
@@ -98,8 +113,8 @@ module('Integration | Component | amount-input', function (hooks) {
     assert.rejects(fillIn('input', '10.726'));
   });
 
-  test('calls update with the formatted value on blur if the value is 0', async function (assert) {
-    await render(hbs`
+  test('calls update with the formatted value on blur if the value is 0', async function (this: TestContext, assert) {
+    await render<TestContext>(hbs`
       <AmountInput
         @numberOfDecimal={{1}}
         @value={{this.value}}
@@ -112,10 +127,10 @@ module('Integration | Component | amount-input', function (hooks) {
     assert.dom('input').hasValue('0.0');
   });
 
-  test('masks `e`, `.` and `,` keys when `numberOfDecimal` argument is set to 0', async function (assert) {
-    this.set('value', 1);
+  test('masks `e`, `.` and `,` keys when `numberOfDecimal` argument is set to 0', async function (this: TestContext, assert) {
+    this.value = 1;
 
-    await render(hbs`
+    await render<TestContext>(hbs`
       <AmountInput
         @numberOfDecimal={{0}}
         @value={{this.value}}

test-app/tests/test-helper.js → test-app/tests/test-helper.ts

@@ -1,5 +1,6 @@
-import Application from '../app';
-import config from '../config/environment';
+import 'qunit-dom';
+import Application from 'test-app/app';
+import config from 'test-app/config/environment';
 import { setApplication } from '@ember/test-helpers';
 import { start } from 'ember-qunit';
 import * as QUnit from 'qunit';

test-app/tsconfig.json

@@ -5,6 +5,7 @@
     // layout, which is not resolvable with the Node resolution algorithm, to
     // work with TypeScript.
     "baseUrl": ".",
+    "lib": ["es2015"],
     // Type check only the code specifically refered to in the source code.
     "skipLibCheck": true,
     "paths": {

test-app/types/glint.d.ts

@@ -1,5 +1,6 @@
 import '@glint/environment-ember-loose';
+import type AmountInputRegistry from 'ember-amount-input/template-registry';
 
 declare module '@glint/environment-ember-loose/registry' {
-  export default interface Registry {}
+  export default interface Registry extends AmountInputRegistry {}
 }

test-app/types/test-app/index.d.ts

@@ -1,11 +1,2 @@
-import type Ember from 'ember';
-
-declare global {
-  // Prevents ESLint from "fixing" this via its auto-fix to turn it into a type
-  // alias (e.g. after running any Ember CLI generator)
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
-  interface Array<T> extends Ember.ArrayPrototypeExtensions<T> {}
-  // interface Function extends Ember.FunctionPrototypeExtensions {}
-}
-
-export {};
+import 'ember-source/types';
+import 'ember-source/types/preview';