Showcase: convert modifier/helper integration tests to gts or typescript (#3366)

Co-authored-by: Alexey Kulakov <[email protected]>

Author: shleewhite

pnpm-lock.yaml

@@ -50,6 +50,7 @@
     "@embroider/macros": "^1.18.1",
     "@embroider/test-setup": "^4.0.0",
     "@eslint/js": "^9.27.0",
+    "@floating-ui/dom": "^1.6.12",
     "@glimmer/component": "^2.0.0",
     "@glimmer/tracking": "^1.1.2",
     "@glint/core": "^1.5.2",

showcase/package.json

@@ -4,17 +4,27 @@
  */
 
 import { module, test } from 'qunit';
-import { setupRenderingTest } from 'showcase/tests/helpers';
+
 import { hdsFormatDate } from '@hashicorp/design-system-components/helpers/hds-format-date';
 
+import { setupRenderingTest } from 'showcase/tests/helpers';
+
 module(
   'Integration | Helper | hds-format-date - hdsFormatDate()',
   function (hooks) {
     setupRenderingTest(hooks);
 
-    test('it formats a date with the provided options', async function (assert) {
+    test('it formats a date with the provided options', function (assert) {
       const date = new Date('2021-01-01T00:00:00Z');
-      const options = {
+      const options: {
+        month: Intl.DateTimeFormatOptions['month'];
+        day: Intl.DateTimeFormatOptions['day'];
+        year?: Intl.DateTimeFormatOptions['year'];
+        hour?: Intl.DateTimeFormatOptions['hour'];
+        minute?: Intl.DateTimeFormatOptions['minute'];
+        second?: Intl.DateTimeFormatOptions['second'];
+        timeZoneName?: Intl.DateTimeFormatOptions['timeZoneName'];
+      } = {
         month: 'long',
         day: 'numeric',
         year: 'numeric',

showcase/tests/integration/helpers/hds-format-date-test.js renamed to showcase/tests/integration/helpers/hds-format-date-test.ts

@@ -4,15 +4,17 @@
  */
 
 import { module, test } from 'qunit';
-import { setupRenderingTest } from 'showcase/tests/helpers';
+
 import { hdsFormatRelative } from '@hashicorp/design-system-components/helpers/hds-format-relative';
 
+import { setupRenderingTest } from 'showcase/tests/helpers';
+
 module(
   'Integration | Helper | hds-format-relative - hdsFormatRelative()',
   function (hooks) {
     setupRenderingTest(hooks);
 
-    test('it formats a relative time with the default options', async function (assert) {
+    test('it formats a relative time with the default options', function (assert) {
       const value = -1;
       const result = hdsFormatRelative([value]);
 
@@ -22,7 +24,7 @@ module(
       );
     });
 
-    test('it formats a relative time with the provided options', async function (assert) {
+    test('it formats a relative time with the provided options', function (assert) {
       const value = -1;
       const unit = 'day';
       const result = hdsFormatRelative([value, unit]);

showcase/tests/integration/helpers/hds-format-relative-test.js renamed to showcase/tests/integration/helpers/hds-format-relative-test.ts

@@ -4,10 +4,12 @@
  */
 
 import { module, test } from 'qunit';
-import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, setupOnerror } from '@ember/test-helpers';
+
 import hdsT from '@hashicorp/design-system-components/helpers/hds-t';
 
+import { setupRenderingTest } from 'showcase/tests/helpers';
+
 const DEFAULT_STRING = 'Default text';
 
 module('Integration | Helper | hds-t', function (hooks) {
@@ -49,7 +51,10 @@ module('Integration | Helper | hds-t', function (hooks) {
         });
 
         await render(
-          <template>{{hdsT value default=DEFAULT_STRING}}</template>,
+          <template>
+            {{! @glint-expect-error - testing invalid scenarios }}
+            {{hdsT value default=DEFAULT_STRING}}
+          </template>,
         );
 
         assert.throws(function () {
@@ -59,11 +64,7 @@ module('Integration | Helper | hds-t', function (hooks) {
     });
   });
 
-  module('ember-intl service is available', function (hooks) {
-    hooks.beforeEach(function () {
-      this.intl = this.owner.lookup('service:intl');
-    });
-
+  module('ember-intl service is available', function () {
     test('it returns translated string if locale is present and key exists', async function (assert) {
       const intl = this.owner.lookup('service:intl');