Merge pull request #241 from qonto/glint-test-app

feat(ts): setup and use Glint in test-app package
qonto · Oct 16, 2023 · 42e5d17 · 42e5d17
2 parents d8ac234 + 522efe9
commit 42e5d17
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 64 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/test-app/package.json b/test-app/package.json
@@ -18,7 +18,7 @@
     "lint:hbs:fix": "ember-template-lint . --fix",
     "lint:js": "eslint . --cache",
     "lint:js:fix": "eslint . --fix",
-    "lint:types": "tsc --noEmit",
+    "lint:types": "glint",
     "start": "ember serve",
     "test": "concurrently \"pnpm:lint\" \"pnpm:test:*\" --names \"lint,test:\"",
     "test:ember": "ember test",
@@ -34,6 +34,8 @@
     "@embroider/test-setup": "^3.0.2",
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
+    "@glint/core": "1.2.1",
+    "@glint/environment-ember-loose": "1.2.1",
     "@qonto/ember-lottie": "0.6.1",
     "@release-it-plugins/lerna-changelog": "^5.0.0",
     "@tsconfig/ember": "^2.0.0",

diff --git a/test-app/tests/integration/components/lottie-test.ts b/test-app/tests/integration/components/lottie-test.ts
@@ -4,16 +4,16 @@ import { clearRender, find, render } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import type { TestContext as TestContextBase } from '@ember/test-helpers';
 
-import type { LottieArgs } from '@qonto/ember-lottie/components/lottie';
-
 import window from 'ember-window-mock';
 import { setupWindowMock } from 'ember-window-mock/test-support';
 import * as sinon from 'sinon';
 
 interface TestContext extends TestContextBase {
-  args: LottieArgs;
+  onDataReady: () => void;
 }
 
+const NOOP = (): void => {};
+
 module('Integration | Component | lottie', function (hooks) {
   setupRenderingTest(hooks);
   setupWindowMock(hooks);
@@ -22,24 +22,20 @@ module('Integration | Component | lottie', function (hooks) {
     document.querySelector;
 
   hooks.beforeEach(function (this: TestContext) {
-    this.args = {
-      onDataReady: (): void => {
-        /* noop */
-      },
-    };
+    this.onDataReady = NOOP;
   });
 
   hooks.afterEach(function () {
     document.querySelector = originalQuerySelector;
   });
 
   test('it renders', async function (this: TestContext, assert) {
-    this.args.onDataReady = (): void => assert.step('data ready called');
+    this.onDataReady = (): void => assert.step('data ready called');
 
-    await render(hbs`
+    await render<TestContext>(hbs`
       <Lottie
         @path="/data.json"
-        @onDataReady={{this.args.onDataReady}}
+        @onDataReady={{this.onDataReady}}
       />
     `);
 
@@ -57,7 +53,7 @@ module('Integration | Component | lottie', function (hooks) {
       } as unknown as MediaQueryList;
     };
 
-    await render(hbs`
+    await render<TestContext>(hbs`
       <Lottie
         @path="/data.json"
       />
@@ -67,7 +63,7 @@ module('Integration | Component | lottie', function (hooks) {
     assert.verifySteps([`matchMedia((prefers-reduced-motion: reduce))`]);
   });
 
-  test('it should listen for changes to prefers-reduced-motion and cleanup the listener when destroyed', async function (this: TestContext, assert) {
+  test('it listens for changes to prefers-reduced-motion and cleanup the listener when destroyed', async function (this: TestContext, assert) {
     const addEventListener = sinon.spy();
     const removeEventListener = sinon.spy();
     window.matchMedia = (): MediaQueryList => {
@@ -78,7 +74,7 @@ module('Integration | Component | lottie', function (hooks) {
       } as unknown as MediaQueryList;
     };
 
-    await render(hbs`
+    await render<TestContext>(hbs`
       <Lottie
         @path="/data.json"
       />
@@ -91,20 +87,16 @@ module('Integration | Component | lottie', function (hooks) {
     assert.true(removeEventListener.calledOnce);
   });
 
-  test('it should not autoplay the animation when prefers-reduced-motion is enabled', async function (this: TestContext, assert) {
+  test('it does not autoplay the animation when prefers-reduced-motion is enabled', async function (this: TestContext, assert) {
     window.matchMedia = (): MediaQueryList => {
       return {
-        addEventListener: () => {
-          /** noop */
-        },
-        removeEventListener: () => {
-          /** noop */
-        },
+        addEventListener: NOOP,
+        removeEventListener: NOOP,
         matches: true,
       } as unknown as MediaQueryList;
     };
 
-    await render(hbs`
+    await render<TestContext>(hbs`
       <Lottie
         @path="/data.json"
         @autoplay={{true}}
@@ -115,20 +107,16 @@ module('Integration | Component | lottie', function (hooks) {
     assert.dom('[data-test-autoplay=false]').exists();
   });
 
-  test('it should not autoplay the animation when autoplay is false', async function (this: TestContext, assert) {
+  test('it does not autoplay the animation when autoplay is false', async function (this: TestContext, assert) {
     window.matchMedia = (): MediaQueryList => {
       return {
-        addEventListener: () => {
-          /** noop */
-        },
-        removeEventListener: () => {
-          /** noop */
-        },
+        addEventListener: NOOP,
+        removeEventListener: NOOP,
         matches: false,
       } as unknown as MediaQueryList;
     };
 
-    await render(hbs`
+    await render<TestContext>(hbs`
       <Lottie
         @path="/data.json"
         @autoplay={{false}}
@@ -139,20 +127,16 @@ module('Integration | Component | lottie', function (hooks) {
     assert.dom('[data-test-autoplay=false]').exists();
   });
 
-  test('it should autoplay the animation when prefers-reduced-motion is disabled', async function (this: TestContext, assert) {
+  test('it autoplays the animation when prefers-reduced-motion is disabled', async function (this: TestContext, assert) {
     window.matchMedia = (): MediaQueryList => {
       return {
-        addEventListener: () => {
-          /** noop */
-        },
-        removeEventListener: () => {
-          /** noop */
-        },
+        addEventListener: NOOP,
+        removeEventListener: NOOP,
         matches: false,
       } as unknown as MediaQueryList;
     };
 
-    await render(hbs`
+    await render<TestContext>(hbs`
       <Lottie
         @path="/data.json"
         @autoplay={{true}}
@@ -163,20 +147,16 @@ module('Integration | Component | lottie', function (hooks) {
     assert.dom('[data-test-autoplay=true]').exists();
   });
 
-  test('it should autoplay the animation by default when prefers-reduced-motion is disabled', async function (this: TestContext, assert) {
+  test('it autoplays the animation by default when prefers-reduced-motion is disabled', async function (this: TestContext, assert) {
     window.matchMedia = (): MediaQueryList => {
       return {
-        addEventListener: () => {
-          /** noop */
-        },
-        removeEventListener: () => {
-          /** noop */
-        },
+        addEventListener: NOOP,
+        removeEventListener: NOOP,
         matches: false,
       } as unknown as MediaQueryList;
     };
 
-    await render(hbs`
+    await render<TestContext>(hbs`
       <Lottie
         @path="/data.json"
       />
@@ -186,31 +166,31 @@ module('Integration | Component | lottie', function (hooks) {
     assert.dom('[data-test-autoplay=true]').exists();
   });
 
-  test('it should not call document.querySelector when containerId is undefined or null', async function (this: TestContext, assert) {
+  test('it does not call document.querySelector when containerId is undefined', async function (this: TestContext, assert) {
     const querySelector = sinon.spy();
     document.querySelector = querySelector;
-    await render(hbs`
+    await render<TestContext>(hbs`
       <Lottie
         @path="/data.json"
       />
     `);
 
     assert.false(querySelector.calledOnce);
 
-    await render(hbs`
+    await render<TestContext>(hbs`
       <Lottie
         @path="/data.json"
-        @containerId={{null}}
+        @containerId={{undefined}}
       />
     `);
 
     assert.false(querySelector.calledOnce);
   });
 
-  test('it should call document.querySelector when containerId is not falsy', async function (this: TestContext, assert) {
+  test('it calls document.querySelector when containerId is not falsy', async function (this: TestContext, assert) {
     const querySelector = sinon.spy();
     document.querySelector = querySelector;
-    await render(hbs`
+    await render<TestContext>(hbs`
       <Lottie
         @path="/data.json"
         @containerId='this-is-an-id'

diff --git a/test-app/tsconfig.json b/test-app/tsconfig.json
@@ -87,5 +87,11 @@
     "app/**/*",
     "tests/**/*",
     "types/**/*"
-  ]
+  ],
+  "glint": {
+    "environment": "ember-loose",
+    "transform": {
+      "include": ["app/**", "tests/**"]
+    }
+  }
 }
diff --git a/test-app/types/glint.d.ts b/test-app/types/glint.d.ts
@@ -0,0 +1,6 @@
+import '@glint/environment-ember-loose';
+import type LottieRegistry from '@qonto/ember-lottie/template-registry';
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry extends LottieRegistry {}
+}