Fix TS errors & clean some deps (#110)

app/controllers/app/generator.ts

@@ -34,14 +34,14 @@ export default class GeneratorController extends Controller {
 
   @service declare intl: IntlService;
 
+  @service declare gtag: GTagService;
+
   // @service('counter') declare counterService: CounterService;
 
   @service declare router: Services['router'];
 
   declare model: RouteModel<ApplicationRoute>;
 
-  _gtag = gtag;
-
   // get counter() {
   //   return this.counterService.counter;
   // }
@@ -54,7 +54,7 @@ export default class GeneratorController extends Controller {
 
   mesh = trackedFunction(this, () => {
     if (this.font.isResolved && this.font.value) {
-      this._gtag('event', 'stl_generation', {
+      this.gtag.event('stl_generation', {
         event_category: 'stl', // eslint-disable-line camelcase
         value: this.model.type,
       });
@@ -83,7 +83,7 @@ export default class GeneratorController extends Controller {
       return;
     }
 
-    this._gtag('event', 'stl_download', {
+    this.gtag.event('stl_download', {
       event_category: 'stl', // eslint-disable-line camelcase
       value: this.model.type,
     });

package.json

@@ -24,6 +24,7 @@
     "lint:hbs:fix": "ember-template-lint . --fix",
     "lint:js": "eslint . --ext .js,.ts",
     "lint:js:fix": "eslint . --ext .js,.ts --fix",
+    "lint:types": "tsc --noEmit --composite false",
     "start": "ember serve",
     "test": "concurrently \"npm:lint\" \"npm:test:*\" --names \"lint,test:\"",
     "test:ember": "ember test",
@@ -37,7 +38,7 @@
     "@ember/test-helpers": "^3.2.0",
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
-    "@onehilltech/ember-cli-google-analytics": "^1.2.0",
+    "@onehilltech/ember-cli-google-analytics": "^1.5.0",
     "@percy/cli": "^1.27.3",
     "@percy/ember": "^4.2.0",
     "@types/ember__application": "^~4.0",
@@ -61,6 +62,7 @@
     "@types/htmlbars-inline-precompile": "^1.0.1",
     "@types/jsdom-global": "^3.0.2",
     "@types/matter-js": "^0.17.6",
+    "@types/node": "^20.8.7",
     "@types/opentype.js": "^1.3.1",
     "@types/qunit": "^2.11.1",
     "@types/rsvp": "^4.0.3",
@@ -80,7 +82,6 @@
     "ember-cli-htmlbars": "^6.2.0",
     "ember-cli-inject-live-reload": "^2.1.0",
     "ember-cli-inline-content": "^0.4.1",
-    "ember-cli-qunit-parameterize": "^1.0.2",
     "ember-cli-sass": "^10.0.1",
     "ember-cli-sri": "^2.1.1",
     "ember-cli-terser": "^4.0.2",
@@ -114,7 +115,7 @@
     "stylelint-prettier": "^3.0.0",
     "tracked-built-ins": "^3.1.1",
     "tracked-toolbox": "^1.2.2",
-    "typescript": "^4.2.3",
+    "typescript": "^4.9.5",
     "webpack": "^5.78.0"
   },
   "engines": {

tests/acceptance/navigation-test.ts

@@ -2,12 +2,14 @@ import { module, test } from 'qunit';
 import { visit, currentURL, click } from '@ember/test-helpers';
 import { setupApplicationTest } from 'ember-qunit';
 import mockFontManager from 'text2stl/tests/helpers/mock-font-manager';
+import mockGtag from 'text2stl/tests/helpers/mock-gtag';
 
 module('Acceptance | navigation', function (hooks) {
   setupApplicationTest(hooks);
 
   hooks.beforeEach(function () {
     mockFontManager(this.owner);
+    mockGtag(this.owner);
   });
 
   test('visiting /', async function (assert) {

tests/acceptance/visual-test.ts

@@ -6,11 +6,14 @@ import testsSettings from './_tests-settings';
 import percySnapshot from '@percy/ember';
 import TextMakerSettings from 'text2stl/models/text-maker-settings';
 import mockFontManager from 'text2stl/tests/helpers/mock-font-manager';
+import mockGtag from 'text2stl/tests/helpers/mock-gtag';
+
 module('Acceptance | visual', function (hooks) {
   setupApplicationTest(hooks);
 
   hooks.beforeEach(function () {
     mockFontManager(this.owner);
+    mockGtag(this.owner);
   });
 
   for (let testIdx = 0; testIdx < testsSettings.length; testIdx++) {

tests/helpers/mock-gtag.ts

@@ -0,0 +1,11 @@
+import type Owner from '@ember/owner';
+import Service from '@ember/service';
+
+export default function (owner: Owner) {
+  owner.register(
+    'service:gtag',
+    class extends Service {
+      event() {}
+    },
+  );
+}

tests/integration/components/settings-form/text-test.ts

@@ -1,7 +1,6 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { render, click } from '@ember/test-helpers';
-import cases from 'qunit-parameterize';
 import { hbs } from 'ember-cli-htmlbars';
 import config from 'text2stl/config/environment';
 const {
@@ -58,7 +57,7 @@ module('Integration | Component | settings-form/text', function (hooks) {
     assert.strictEqual(model.vAlignment, 'bottom', 'model.vAlignment was updated');
   });
 
-  cases([
+  for (const { type, inputType, title } of [
     { type: ModelType.TextOnly, inputType: 'calcite-text-area', title: 'TextOnly' },
     { type: ModelType.NegativeText, inputType: 'calcite-text-area', title: 'NegativeText' },
     { type: ModelType.TextWithSupport, inputType: 'calcite-text-area', title: 'TextWithSupport' },
@@ -67,16 +66,18 @@ module('Integration | Component | settings-form/text', function (hooks) {
       inputType: 'calcite-input-text',
       title: 'VerticalTextWithSupport',
     },
-  ]).test('Text input type depends on model Type', async function ({ type, inputType }, assert) {
-    const model = new TextMakerSettings({
-      ...textMakerDefault,
-      type,
+  ]) {
+    test(`Text input type depends on model Type [${title}]`, async function (assert) {
+      const model = new TextMakerSettings({
+        ...textMakerDefault,
+        type,
+      });
+      this.set('model', model);
+
+      await render(hbs`<SettingsForm::Text @model={{this.model}} />`);
+      assert.dom(`${inputType}[data-test-settings-text]`).exists(`It renders a ${inputType}`);
     });
-    this.set('model', model);
-
-    await render(hbs`<SettingsForm::Text @model={{this.model}} />`);
-    assert.dom(`${inputType}[data-test-settings-text]`).exists(`It renders a ${inputType}`);
-  });
+  }
 
   test('Text alignment & vertical spacing are shown when text is multiline', async function (assert) {
     const model = new TextMakerSettings({

tests/integration/components/three-preview/renderer-test.ts

@@ -1,34 +1,35 @@
-import { module } from 'qunit';
+import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { render } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
-import cases from 'qunit-parameterize';
 import { Mesh, BoxGeometry } from 'three';
 
 module('Integration | Component | three-preview/renderer', function (hooks) {
   setupRenderingTest(hooks);
 
-  cases([
+  for (const { parentSize, title } of [
     { parentSize: true, title: 'with parentSize true' },
     { parentSize: false, title: 'with parentSize false' },
-  ]).test('it handle parentSize attribute', async function ({ parentSize }, assert) {
-    this.set('parentSize', parentSize);
-    this.set('mesh', new Mesh(new BoxGeometry(12.12, 34.07, 56.42)));
+  ]) {
+    test(`it handle parentSize attribute [${title}]`, async function (assert) {
+      this.set('parentSize', parentSize);
+      this.set('mesh', new Mesh(new BoxGeometry(12.12, 34.07, 56.42)));
 
-    await render(hbs`<div style="width: 200px; height: 100px" data-test-renderer>
-      <ThreePreview::Renderer @mesh={{this.mesh}} @parentSize={{this.parentSize}} />
-    </div>`);
+      await render(hbs`<div style="width: 200px; height: 100px" data-test-renderer>
+        <ThreePreview::Renderer @mesh={{this.mesh}} @parentSize={{this.parentSize}} />
+      </div>`);
 
-    if (parentSize) {
-      assert
-        .dom('[data-test-renderer] canvas')
-        .hasAttribute('width', '200', 'Canvas width is adapted to parent size')
-        .hasAttribute('height', '100', 'Canvas height is adapted to parent size');
-    } else {
-      assert
-        .dom('[data-test-renderer] canvas')
-        .hasAttribute('width', '1024', 'Canvas width is 1024')
-        .hasAttribute('height', '768', 'Canvas height is 768');
-    }
-  });
+      if (parentSize) {
+        assert
+          .dom('[data-test-renderer] canvas')
+          .hasAttribute('width', '200', 'Canvas width is adapted to parent size')
+          .hasAttribute('height', '100', 'Canvas height is adapted to parent size');
+      } else {
+        assert
+          .dom('[data-test-renderer] canvas')
+          .hasAttribute('width', '1024', 'Canvas width is 1024')
+          .hasAttribute('height', '768', 'Canvas height is 768');
+      }
+    });
+  }
 });

tests/unit/controllers/app/generator-test.ts

@@ -4,6 +4,7 @@ import waitUntil from '@ember/test-helpers/wait-until';
 import mockTextSettings from 'text2stl/tests/helpers/mock-text-maker-settings';
 import { Font } from 'opentype.js';
 import { Mesh } from 'three';
+import mockGtag from 'text2stl/tests/helpers/mock-gtag';
 
 import type { TextMakerParameters } from 'text2stl/services/text-maker';
 import type { Variant } from 'text2stl/services/font-manager';
@@ -78,7 +79,7 @@ module('Unit | Controller | app/generator', function (hooks) {
 
   test('it generate a STL with mesh', async function (assert) {
     assert.expect(6);
-
+    mockGtag(this.owner);
     const controller = this.owner.lookup('controller:app/generator') as GeneratorController;
 
     const model = mockTextSettings({
@@ -108,9 +109,10 @@ module('Unit | Controller | app/generator', function (hooks) {
       assert.strictEqual(mesh, mockedMesh, 'it generates STL from mesh');
     };
 
-    controller._gtag = function (type: string, eventName: string, opts: { value: string }) {
-      assert.step(`gtag_${type}_${eventName}_${opts.value}`);
-    } as unknown as typeof gtag;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    this.owner.lookup('service:gtag').event = function (eventName: string, opts: any) {
+      assert.step(`gtag_event_${eventName}_${opts.value}`);
+    };
 
     // Wait for the font to be load
     await waitUntil(() => controller.font.isResolved);

tests/unit/services/font-manager-test.ts

@@ -1,7 +1,6 @@
 import { module, test } from 'qunit';
 import { setupTest } from 'ember-qunit';
 import * as opentype from 'opentype.js';
-import cases from 'qunit-parameterize';
 import type FontManagerService from 'text2stl/services/font-manager';
 import type { Variant } from 'text2stl/services/font-manager';
 
@@ -33,7 +32,7 @@ mockedFontList.set('font3', {
 module('Unit | Service | font-manager', function (hooks) {
   setupTest(hooks);
 
-  cases([
+  for (const { fontName, variantName, expectedFontUrl, title } of [
     {
       fontName: 'font2',
       variantName: undefined,
@@ -52,29 +51,36 @@ module('Unit | Service | font-manager', function (hooks) {
       expectedFontUrl: 'font2_italic.ttf',
       title: 'Font name with variant',
     },
-  ]).test('it fetch font', async function ({ expectedFontUrl, fontName, variantName }, assert) {
-    const service = this.owner.lookup('service:font-manager') as FontManagerService;
-    service.fontList = mockedFontList;
-
-    service.fetch = async function (input: RequestInfo): Promise<Response> {
-      assert.strictEqual(input, expectedFontUrl, 'It fetch the correct font');
-      return {
-        arrayBuffer: () => 'fetched-array-buffer',
-      } as unknown as Response;
-    };
-
-    service.opentype = {
-      parse(buffer: Response): opentype.Font {
-        assert.strictEqual(`${buffer}`, 'fetched-array-buffer', 'font is parsed with fetch result');
-        return 'parsed-font' as unknown as opentype.Font;
-      },
-    } as typeof opentype;
-
-    const font = await service.fetchFont(fontName, variantName);
-    assert.strictEqual(`${font}`, 'parsed-font', 'correct font is returned');
-  });
+  ]) {
+    test(`it fetch font [${title}]`, async function (assert) {
+      assert.expect(3);
+      const service = this.owner.lookup('service:font-manager') as FontManagerService;
+      service.fontList = mockedFontList;
 
-  cases([
+      service.fetch = async function (input: RequestInfo): Promise<Response> {
+        assert.strictEqual(input, expectedFontUrl, 'It fetch the correct font');
+        return {
+          arrayBuffer: () => 'fetched-array-buffer',
+        } as unknown as Response;
+      };
+
+      service.opentype = {
+        parse(buffer: Response): opentype.Font {
+          assert.strictEqual(
+            `${buffer}`,
+            'fetched-array-buffer',
+            'font is parsed with fetch result',
+          );
+          return 'parsed-font' as unknown as opentype.Font;
+        },
+      } as typeof opentype;
+
+      const font = await service.fetchFont(fontName, variantName);
+      assert.strictEqual(`${font}`, 'parsed-font', 'correct font is returned');
+    });
+  }
+
+  for (const { fontName, variantName, title } of [
     {
       fontName: 'Something',
       variantName: 'regular' as Variant,
@@ -85,9 +91,9 @@ module('Unit | Service | font-manager', function (hooks) {
       variantName: 'regular' as Variant,
       title: 'Font name with variant + unexisting files',
     },
-  ]).test(
-    "it throw error when font can't be load",
-    async function ({ fontName, variantName }, assert) {
+  ]) {
+    test(`it throw error when font can't be load  [${title}]`, async function (assert) {
+      assert.expect(1);
       const service = this.owner.lookup('service:font-manager') as FontManagerService;
       service.fontList = mockedFontList;
 
@@ -97,8 +103,8 @@ module('Unit | Service | font-manager', function (hooks) {
       } catch (e) {
         assert.true(true);
       }
-    },
-  );
+    });
+  }
 
   test('it cache font', async function (assert) {
     const fetchDone = assert.async();