refactor: Use Glimmer TS files for tests

knoxville-utilities-board · Aug 2, 2024 · 2c68156 · 2c68156
1 parent 3cb51aa
commit 2c68156
Show file tree

Hide file tree

Showing 14 changed files with 241 additions and 216 deletions.
diff --git a/...ests/integration/components/alert-test.ts → ...sts/integration/components/alert-test.gts b/...ests/integration/components/alert-test.ts → ...sts/integration/components/alert-test.gts
@@ -8,6 +8,7 @@ import {
   type TestContext,
 } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
+import Alert from '@nrg-ui/ember/components/alert';
 
 interface Context extends TestContext {
   dismissHandler: () => void;
@@ -17,12 +18,13 @@ module('Integration | components | alert', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it renders', async function (assert) {
-    await render(hbs`
+    await render(<template>
       <Alert
         @dismissible={{true}}
         @icon="bi-exclamation-triangle-fill"
-        @text="Foo bar" />
-    `);
+        @text="Foo bar"
+      />
+    </template>);
 
     assert
       .dom('div.alert')
@@ -70,16 +72,17 @@ module('Integration | components | alert', function (hooks) {
 
     let actionFired = false;
 
-    this.dismissHandler = () => {
+    const dismissHandler = () => {
       actionFired = true;
     };
 
-    await render(hbs`
+    await render(<template>
       <Alert
         @dismissible={{true}}
         @type="success"
-        @onDismiss={{this.dismissHandler}} />
-    `);
+        @onDismiss={{dismissHandler}}
+      />
+    </template>);
 
     await click('button');
     await clearRender();

diff --git a/...tegration/components/button-group-test.ts → ...egration/components/button-group-test.gts b/...tegration/components/button-group-test.ts → ...egration/components/button-group-test.gts
@@ -1,7 +1,8 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { click, render, type TestContext } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import { fn } from '@ember/helper';
+import ButtonGroup from '@nrg-ui/ember/components/button-group';
 
 interface Context extends TestContext {
   clickHandler: (type: string, evt: MouseEvent) => void;
@@ -13,16 +14,16 @@ module('Integration | components | button-group', function (hooks) {
   test('it renders', async function (this: Context, assert) {
     assert.expect(9);
 
-    this.clickHandler = (type: string, evt: MouseEvent) => {
+    const clickHandler = (type: string, evt: MouseEvent) => {
       assert.step(type);
       assert.ok(evt, 'action is fired with event');
     };
 
-    await render(hbs`
-      <ButtonGroup @onClick={{fn this.clickHandler "group"}} as |Group|>
-        <Group.Button @text="Foo bar" @onClick={{fn this.clickHandler "button"}} />
+    await render(<template>
+      <ButtonGroup @onClick={{fn clickHandler "group"}} as |Group|>
+        <Group.Button @text="Foo bar" @onClick={{fn clickHandler "button"}} />
       </ButtonGroup>
-    `);
+    </template>);
 
     assert.dom('div:has(button)').hasAttribute('role', 'group');
 
@@ -43,17 +44,21 @@ module('Integration | components | button-group', function (hooks) {
   test('a disabled group disables all buttons', async function (this: Context, assert) {
     assert.expect(6);
 
-    this.clickHandler = (type: string, evt: MouseEvent) => {
+    const clickHandler = (type: string, evt: MouseEvent) => {
       assert.notOk(type);
       assert.notOk(evt, 'action is fired with event');
     };
 
-    await render(hbs`
-      <ButtonGroup @disabled={{true}} @onClick={{fn this.clickHandler "group"}} as |Group|>
-        <Group.Button @text="Foo" @onClick={{fn this.clickHandler "foo"}} />
-        <Group.Button @text="Bar" @onClick={{fn this.clickHandler "bar"}} />
+    await render(<template>
+      <ButtonGroup
+        @disabled={{true}}
+        @onClick={{fn clickHandler "group"}}
+        as |Group|
+      >
+        <Group.Button @text="Foo" @onClick={{fn clickHandler "foo"}} />
+        <Group.Button @text="Bar" @onClick={{fn clickHandler "bar"}} />
       </ButtonGroup>
-    `);
+    </template>);
 
     assert
       .dom('div:has(button)')
@@ -77,20 +82,36 @@ module('Integration | components | button-group', function (hooks) {
   test('nested groups fire actions', async function (this: Context, assert) {
     assert.expect(16);
 
-    this.clickHandler = (type: string, evt: MouseEvent) => {
+    const clickHandler = (type: string, evt: MouseEvent) => {
       assert.step(type);
       assert.ok(evt, 'action is fired with event');
     };
 
-    await render(hbs`
-      <ButtonGroup @onClick={{fn this.clickHandler "group"}} as |Group|>
-        <Group.Button class="btn-primary" @text="Foo" @onClick={{fn this.clickHandler "foo"}} />
-        <Group.SubGroup @onClick={{fn this.clickHandler "subgroup"}} data-test-subgroup as |SubGroup|>
-          <SubGroup.Button class="btn-primary" @text="Bar" @onClick={{fn this.clickHandler "bar"}} />
-          <SubGroup.Button class="btn-primary" @text="Baz" @onClick={{fn this.clickHandler "baz"}} />
+    await render(<template>
+      <ButtonGroup @onClick={{fn clickHandler "group"}} as |Group|>
+        <Group.Button
+          class="btn-primary"
+          @text="Foo"
+          @onClick={{fn clickHandler "foo"}}
+        />
+        <Group.SubGroup
+          @onClick={{fn clickHandler "subgroup"}}
+          data-test-subgroup
+          as |SubGroup|
+        >
+          <SubGroup.Button
+            class="btn-primary"
+            @text="Bar"
+            @onClick={{fn clickHandler "bar"}}
+          />
+          <SubGroup.Button
+            class="btn-primary"
+            @text="Baz"
+            @onClick={{fn clickHandler "baz"}}
+          />
         </Group.SubGroup>
       </ButtonGroup>
-    `);
+    </template>);
 
     assert.dom('div:has(button)').hasAttribute('role', 'group');
 
@@ -118,19 +139,19 @@ module('Integration | components | button-group', function (hooks) {
   test('nested groups fire only one action per event', async function (this: Context, assert) {
     assert.expect(1);
 
-    this.clickHandler = (type: string, evt: MouseEvent) => {
+    const clickHandler = (type: string, evt: MouseEvent) => {
       assert.ok(evt, 'action is fired with event');
     };
 
-    await render(hbs`
-      <ButtonGroup @onClick={{fn this.clickHandler "group"}} as |Group|>
+    await render(<template>
+      <ButtonGroup @onClick={{fn clickHandler "group"}} as |Group|>
         <Group.SubGroup as |SubGroup|>
           <SubGroup.SubGroup as |SubGroup2|>
-            <SubGroup2.Button/>
+            <SubGroup2.Button />
           </SubGroup.SubGroup>
         </Group.SubGroup>
       </ButtonGroup>
-    `);
+    </template>);
 
     await click('button');
   });

diff --git a/...sts/integration/components/button-test.ts → ...ts/integration/components/button-test.gts b/...sts/integration/components/button-test.ts → ...ts/integration/components/button-test.gts
@@ -1,7 +1,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { click, findAll, render, type TestContext } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Button from '@nrg-ui/ember/components/button';
 
 interface Context extends TestContext {
   clickHandler: (evt: MouseEvent) => void;
@@ -13,13 +13,13 @@ module('Integration | components | button', function (hooks) {
   test('it renders', async function (this: Context, assert) {
     assert.expect(12);
 
-    this.clickHandler = (evt: MouseEvent) => {
+    const clickHandler = (evt: MouseEvent) => {
       assert.ok(evt, 'action is fired with event');
     };
 
-    await render(
-      hbs`<Button @text="Foo bar" @onClick={{this.clickHandler}} />`,
-    );
+    await render(<template>
+      <Button @text="Foo bar" @onClick={{clickHandler}} />
+    </template>);
 
     assert
       .dom('button')
@@ -31,11 +31,11 @@ module('Integration | components | button', function (hooks) {
 
     await click('button');
 
-    await render(hbs`
-      <Button @onClick={{this.clickHandler}}>
+    await render(<template>
+      <Button @onClick={{clickHandler}}>
         <div>Inner content</div>
       </Button>
-    `);
+    </template>);
 
     assert
       .dom('button')
@@ -52,13 +52,13 @@ module('Integration | components | button', function (hooks) {
   test('it can be disabled', async function (this: Context, assert) {
     assert.expect(4);
 
-    this.clickHandler = (evt: MouseEvent) => {
+    const clickHandler = (evt: MouseEvent) => {
       assert.notOk(evt, 'action is fired with event');
     };
 
-    await render(
-      hbs`<Button @disabled={{true}} @onClick={{this.clickHandler}} />`,
-    );
+    await render(<template>
+      <Button @disabled={{true}} @onClick={{clickHandler}} />
+    </template>);
 
     assert
       .dom('button')
@@ -77,13 +77,13 @@ module('Integration | components | button', function (hooks) {
   test('it can be loading', async function (this: Context, assert) {
     assert.expect(10);
 
-    this.clickHandler = (evt: MouseEvent) => {
+    const clickHandler = (evt: MouseEvent) => {
       assert.notOk(evt, 'action is fired with event');
     };
 
-    await render(
-      hbs`<Button @loading={{true}} @onClick={{this.clickHandler}} />`,
-    );
+    await render(<template>
+      <Button @loading={{true}} @onClick={{clickHandler}} />
+    </template>);
 
     assert
       .dom('button')
@@ -116,29 +116,29 @@ module('Integration | components | button', function (hooks) {
   test('it can have an icon', async function (assert) {
     assert.expect(7);
 
-    await render(hbs`
+    await render(<template>
       <Button @icon="bi-suitcase">
         <span>Text</span>
       </Button>
-    `);
+    </template>);
 
     assert.dom('button > i:first-child').hasClass('bi-suitcase');
     assert.dom('button > span:last-child').containsText('Text');
 
-    await render(hbs`
+    await render(<template>
       <Button @icon="bi-suitcase" @iconPosition="right">
         <span>Text</span>
       </Button>
-    `);
+    </template>);
 
     assert.dom('button > span:first-child').containsText('Text');
     assert.dom('button > i:last-child').hasClass('bi-suitcase');
 
-    await render(hbs`
+    await render(<template>
       <Button @icon="bi-suitcase" @iconLabel="Suitcase">
         <span>Text</span>
       </Button>
-    `);
+    </template>);
 
     assert
       .dom('button > i:first-child')

diff --git a/...tests/integration/components/card-test.ts → ...ests/integration/components/card-test.gts b/...tests/integration/components/card-test.ts → ...ests/integration/components/card-test.gts
@@ -1,21 +1,22 @@
 import { assert, module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Card from '@nrg-ui/ember/components/card';
 
 module('Integration | components | card', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it renders the card with the correct content', async function () {
-    await render(hbs`
-    <Card>
-      <:header>
-        <p>Header content</p>
-      </:header>
-      <:body>
-        <p>Body content</p>
-      </:body>
-    </Card>`);
+    await render(<template>
+      <Card>
+        <:header>
+          <p>Header content</p>
+        </:header>
+        <:body>
+          <p>Body content</p>
+        </:body>
+      </Card>
+    </template>);
 
     assert.dom('.card').exists('Card is rendered');
     assert