From 3258d565704bf92aa64c7841035ef7599c756ada Mon Sep 17 00:00:00 2001 From: Vincent Scavinner Date: Wed, 11 Oct 2023 09:58:50 +0200 Subject: [PATCH] refactor: migrate test-app to TypeScript --- .github/workflows/ci.yml | 6 +- package.json | 1 + test-app/app/{app.js => app.ts} | 0 test-app/app/{router.js => router.ts} | 0 test-app/config/ember-try.js | 9 +++ test-app/package.json | 1 + test-app/tests/helpers/{index.js => index.ts} | 13 +++- .../{component-test.js => component-test.ts} | 65 ++++++++++++------- .../tests/{test-helper.js => test-helper.ts} | 5 +- test-app/tsconfig.json | 1 + test-app/types/glint.d.ts | 3 +- test-app/types/index.d.ts | 2 - test-app/types/test-app/index.d.ts | 13 +--- 13 files changed, 73 insertions(+), 46 deletions(-) rename test-app/app/{app.js => app.ts} (100%) rename test-app/app/{router.js => router.ts} (100%) rename test-app/tests/helpers/{index.js => index.ts} (78%) rename test-app/tests/integration/components/amount-input/{component-test.js => component-test.ts} (73%) rename test-app/tests/{test-helper.js => test-helper.ts} (68%) delete mode 100644 test-app/types/index.d.ts diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 1980f03e..7a2f3b15 100644 --- a/.github/workflows/ci.yml +++ b/.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 diff --git a/package.json b/package.json index 7724d454..3c239e50 100644 --- a/package.json +++ b/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", diff --git a/test-app/app/app.js b/test-app/app/app.ts similarity index 100% rename from test-app/app/app.js rename to test-app/app/app.ts diff --git a/test-app/app/router.js b/test-app/app/router.ts similarity index 100% rename from test-app/app/router.js rename to test-app/app/router.ts diff --git a/test-app/config/ember-try.js b/test-app/config/ember-try.js index 9125f9d3..2d44090a 100644 --- a/test-app/config/ember-try.js +++ b/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', diff --git a/test-app/package.json b/test-app/package.json index e67f2150..c5f5fabc 100644 --- a/test-app/package.json +++ b/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" diff --git a/test-app/tests/helpers/index.js b/test-app/tests/helpers/index.ts similarity index 78% rename from test-app/tests/helpers/index.js rename to test-app/tests/helpers/index.ts index 7f70de80..3822198f 100644 --- a/test-app/tests/helpers/index.js +++ b/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. diff --git a/test-app/tests/integration/components/amount-input/component-test.js b/test-app/tests/integration/components/amount-input/component-test.ts similarity index 73% rename from test-app/tests/integration/components/amount-input/component-test.js rename to test-app/tests/integration/components/amount-input/component-test.ts index 66a42ac2..878c69e9 100644 --- a/test-app/tests/integration/components/amount-input/component-test.js +++ b/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` - + hooks.beforeEach(function (this: TestContext) { + this.update = NOOP; + }); + + test('is of type number', async function (this: TestContext, assert) { + await render(hbs` + `); 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(hbs` (hbs` @@ -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(hbs` (hbs` (hbs` (hbs` extends Ember.ArrayPrototypeExtensions {} - // interface Function extends Ember.FunctionPrototypeExtensions {} -} - -export {}; +import 'ember-source/types'; +import 'ember-source/types/preview';