From 2c6815620c5b6abd5a20b062b1a778f0f6480148 Mon Sep 17 00:00:00 2001
From: TSenter <tyler.senter.427@gmail.com>
Date: Thu, 1 Aug 2024 17:32:00 -0400
Subject: [PATCH] refactor: Use Glimmer TS files for tests

---
 .../{alert-test.ts => alert-test.gts}         | 17 +++--
 ...on-group-test.ts => button-group-test.gts} | 71 ++++++++++++-------
 .../{button-test.ts => button-test.gts}       | 44 ++++++------
 .../{card-test.ts => card-test.gts}           | 21 +++---
 .../{footer-test.ts => footer-test.gts}       | 46 ++++++------
 .../{header-test.ts => header-test.gts}       | 13 ++--
 ...tor-test.ts => loading-indicator-test.gts} | 10 +--
 ...tainer-test.ts => card-container-test.gts} | 10 +--
 .../mktg/{card-test.ts => card-test.gts}      | 69 +++++++++---------
 .../mktg/{faq-test.ts => faq-test.gts}        | 27 ++++---
 .../{mktg-header-test.ts => header-test.gts}  | 20 +++---
 ...ainer-test.ts => promo-container-test.gts} | 19 ++---
 .../mktg/{promo-test.ts => promo-test.gts}    | 66 ++++++++---------
 .../{progress-test.ts => progress-test.gts}   | 24 +++----
 14 files changed, 241 insertions(+), 216 deletions(-)
 rename packages/ember-test-app/tests/integration/components/{alert-test.ts => alert-test.gts} (87%)
 rename packages/ember-test-app/tests/integration/components/{button-group-test.ts => button-group-test.gts} (61%)
 rename packages/ember-test-app/tests/integration/components/{button-test.ts => button-test.gts} (80%)
 rename packages/ember-test-app/tests/integration/components/{card-test.ts => card-test.gts} (70%)
 rename packages/ember-test-app/tests/integration/components/{footer-test.ts => footer-test.gts} (62%)
 rename packages/ember-test-app/tests/integration/components/{header-test.ts => header-test.gts} (92%)
 rename packages/ember-test-app/tests/integration/components/{loading-indicator-test.ts => loading-indicator-test.gts} (79%)
 rename packages/ember-test-app/tests/integration/components/mktg/{card-container-test.ts => card-container-test.gts} (83%)
 rename packages/ember-test-app/tests/integration/components/mktg/{card-test.ts => card-test.gts} (82%)
 rename packages/ember-test-app/tests/integration/components/mktg/{faq-test.ts => faq-test.gts} (79%)
 rename packages/ember-test-app/tests/integration/components/mktg/{mktg-header-test.ts => header-test.gts} (79%)
 rename packages/ember-test-app/tests/integration/components/mktg/{promo-container-test.ts => promo-container-test.gts} (67%)
 rename packages/ember-test-app/tests/integration/components/mktg/{promo-test.ts => promo-test.gts} (61%)
 rename packages/ember-test-app/tests/integration/components/{progress-test.ts => progress-test.gts} (83%)

diff --git a/packages/ember-test-app/tests/integration/components/alert-test.ts b/packages/ember-test-app/tests/integration/components/alert-test.gts
similarity index 87%
rename from packages/ember-test-app/tests/integration/components/alert-test.ts
rename to packages/ember-test-app/tests/integration/components/alert-test.gts
index c673fe32e..a798b4759 100644
--- a/packages/ember-test-app/tests/integration/components/alert-test.ts
+++ b/packages/ember-test-app/tests/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/packages/ember-test-app/tests/integration/components/button-group-test.ts b/packages/ember-test-app/tests/integration/components/button-group-test.gts
similarity index 61%
rename from packages/ember-test-app/tests/integration/components/button-group-test.ts
rename to packages/ember-test-app/tests/integration/components/button-group-test.gts
index 9fce4d24d..5a0c1b184 100644
--- a/packages/ember-test-app/tests/integration/components/button-group-test.ts
+++ b/packages/ember-test-app/tests/integration/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/packages/ember-test-app/tests/integration/components/button-test.ts b/packages/ember-test-app/tests/integration/components/button-test.gts
similarity index 80%
rename from packages/ember-test-app/tests/integration/components/button-test.ts
rename to packages/ember-test-app/tests/integration/components/button-test.gts
index 5a0d81209..049cdbc56 100644
--- a/packages/ember-test-app/tests/integration/components/button-test.ts
+++ b/packages/ember-test-app/tests/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/packages/ember-test-app/tests/integration/components/card-test.ts b/packages/ember-test-app/tests/integration/components/card-test.gts
similarity index 70%
rename from packages/ember-test-app/tests/integration/components/card-test.ts
rename to packages/ember-test-app/tests/integration/components/card-test.gts
index d971e9b8e..72546b3f8 100644
--- a/packages/ember-test-app/tests/integration/components/card-test.ts
+++ b/packages/ember-test-app/tests/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
diff --git a/packages/ember-test-app/tests/integration/components/footer-test.ts b/packages/ember-test-app/tests/integration/components/footer-test.gts
similarity index 62%
rename from packages/ember-test-app/tests/integration/components/footer-test.ts
rename to packages/ember-test-app/tests/integration/components/footer-test.gts
index 74e81d021..79d2767f0 100644
--- a/packages/ember-test-app/tests/integration/components/footer-test.ts
+++ b/packages/ember-test-app/tests/integration/components/footer-test.gts
@@ -1,7 +1,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Footer from '@nrg-ui/ember/components/footer';
 
 module('Integration | components | footer', function (hooks) {
   setupRenderingTest(hooks);
@@ -9,7 +9,7 @@ module('Integration | components | footer', function (hooks) {
   test('it renders', async function (assert) {
     assert.expect(1);
 
-    await render(hbs`<Footer/>`);
+    await render(<template><Footer /></template>);
 
     assert.dom('footer').exists();
   });
@@ -17,11 +17,13 @@ module('Integration | components | footer', function (hooks) {
   test('it renders the left content', async function (assert) {
     assert.expect(1);
 
-    await render(hbs`<Footer>
-      <:left>
-        Left Content Test
-      </:left>
-    </Footer>`);
+    await render(<template>
+      <Footer>
+        <:left>
+          Left Content Test
+        </:left>
+      </Footer>
+    </template>);
 
     assert.dom('footer div div div:first-child').hasText('Left Content Test');
   });
@@ -29,11 +31,13 @@ module('Integration | components | footer', function (hooks) {
   test('it renders the right content', async function (assert) {
     assert.expect(1);
 
-    await render(hbs`<Footer>
-      <:right>
-        Right Content Test
-      </:right>
-    </Footer>`);
+    await render(<template>
+      <Footer>
+        <:right>
+          Right Content Test
+        </:right>
+      </Footer>
+    </template>);
 
     assert.dom('footer div div div:nth-child(2)').hasText('Right Content Test');
   });
@@ -41,14 +45,16 @@ module('Integration | components | footer', function (hooks) {
   test('it renders both the left and right content', async function (assert) {
     assert.expect(2);
 
-    await render(hbs`<Footer>
-      <:left>
-        Left Content Test
-      </:left>
-      <:right>
-        Right Content Test
-      </:right>
-    </Footer>`);
+    await render(<template>
+      <Footer>
+        <:left>
+          Left Content Test
+        </:left>
+        <:right>
+          Right Content Test
+        </:right>
+      </Footer>
+    </template>);
 
     assert.dom('footer div div div:first-child').hasText('Left Content Test');
     assert.dom('footer div div div:nth-child(2)').hasText('Right Content Test');
diff --git a/packages/ember-test-app/tests/integration/components/header-test.ts b/packages/ember-test-app/tests/integration/components/header-test.gts
similarity index 92%
rename from packages/ember-test-app/tests/integration/components/header-test.ts
rename to packages/ember-test-app/tests/integration/components/header-test.gts
index 1af139fd5..091c2cdd4 100644
--- a/packages/ember-test-app/tests/integration/components/header-test.ts
+++ b/packages/ember-test-app/tests/integration/components/header-test.gts
@@ -1,13 +1,13 @@
 import { assert, module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Header from '@nrg-ui/ember/components/header';
 
 module('Integration | components | header', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it renders content within the correct named blocks', async function () {
-    await render(hbs`
+    await render(<template>
       <Header>
         <:left>
           <p class="m-0">Left side content</p>
@@ -21,7 +21,8 @@ module('Integration | components | header', function (hooks) {
         <:mobile-drop-section>
           <p class="m-0">mobile drop section content</p>
         </:mobile-drop-section>
-      </Header>`);
+      </Header>
+    </template>);
 
     assert
       .dom('.col.d-flex.justify-content-start p')
@@ -50,7 +51,7 @@ module('Integration | components | header', function (hooks) {
   });
 
   test('it renders content in the correct order', async function () {
-    await render(hbs`
+    await render(<template>
       <Header>
         <:left>
           <p class="m-0">Left side content</p>
@@ -64,7 +65,9 @@ module('Integration | components | header', function (hooks) {
         <:mobile-drop-section>
           <p class="m-0">mobile drop section content</p>
         </:mobile-drop-section>
-      </Header>`);
+      </Header>
+    </template>);
+
     assert.dom('div div p').hasText('Left side content');
     assert.dom('div div:nth-of-type(2) p').hasText('center content');
     assert.dom('div div:nth-of-type(3) p').hasText('right side content');
diff --git a/packages/ember-test-app/tests/integration/components/loading-indicator-test.ts b/packages/ember-test-app/tests/integration/components/loading-indicator-test.gts
similarity index 79%
rename from packages/ember-test-app/tests/integration/components/loading-indicator-test.ts
rename to packages/ember-test-app/tests/integration/components/loading-indicator-test.gts
index 516ee1a83..e5a48d627 100644
--- a/packages/ember-test-app/tests/integration/components/loading-indicator-test.ts
+++ b/packages/ember-test-app/tests/integration/components/loading-indicator-test.gts
@@ -1,13 +1,13 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import LoadingIndicator from '@nrg-ui/ember/components/loading-indicator';
 
 module('Integration | components | loading-indicator', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it renders', async function (assert) {
-    await render(hbs`<LoadingIndicator />`);
+    await render(<template><LoadingIndicator /></template>);
 
     assert
       .dom('div')
@@ -21,9 +21,9 @@ module('Integration | components | loading-indicator', function (hooks) {
   });
 
   test('label can be displayed', async function (assert) {
-    await render(
-      hbs`<LoadingIndicator @label="Foo bar" @showLabel={{true}} />`,
-    );
+    await render(<template>
+      <LoadingIndicator @label="Foo bar" @showLabel={{true}} />
+    </template>);
 
     assert
       .dom('strong:has(+ div)')
diff --git a/packages/ember-test-app/tests/integration/components/mktg/card-container-test.ts b/packages/ember-test-app/tests/integration/components/mktg/card-container-test.gts
similarity index 83%
rename from packages/ember-test-app/tests/integration/components/mktg/card-container-test.ts
rename to packages/ember-test-app/tests/integration/components/mktg/card-container-test.gts
index 172def971..dd6f12aae 100644
--- a/packages/ember-test-app/tests/integration/components/mktg/card-container-test.ts
+++ b/packages/ember-test-app/tests/integration/components/mktg/card-container-test.gts
@@ -1,19 +1,19 @@
 import { assert, module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import CardContainer from '@nrg-ui/ember/components/mktg/card-container';
 
 module('Integration | Component | mktg/card-container', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it renders', async function () {
-    await render(hbs`
-      <Mktg::CardContainer class="bg-info rounded" as |Container|>
+    await render(<template>
+      <CardContainer class="bg-info rounded" as |Container|>
         <Container.Card class="first g-col-12 g-col-md-4" />
         <Container.Card class="second g-col-12 g-col-md-4" />
         <Container.Card class="third g-col-12 g-col-md-4" />
-      </Mktg::CardContainer>
-      `);
+      </CardContainer>
+    </template>);
 
     assert.dom('.grid.p-2').exists('Card container renders');
     assert
diff --git a/packages/ember-test-app/tests/integration/components/mktg/card-test.ts b/packages/ember-test-app/tests/integration/components/mktg/card-test.gts
similarity index 82%
rename from packages/ember-test-app/tests/integration/components/mktg/card-test.ts
rename to packages/ember-test-app/tests/integration/components/mktg/card-test.gts
index d102f85dc..a5a3a716b 100644
--- a/packages/ember-test-app/tests/integration/components/mktg/card-test.ts
+++ b/packages/ember-test-app/tests/integration/components/mktg/card-test.gts
@@ -1,30 +1,28 @@
 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/mktg/card';
 
 module('Integration | Component | mktg/card', function (hooks) {
   setupRenderingTest(hooks);
 
   test('card correctly renders vertical as default', async function () {
-    await render(hbs`
-      <Mktg::Card
-          class="g-col-12"
-          @title="Title"
-          @subtitle="Subtitle"
-        >
+    await render(<template>
+      <Card class="g-col-12" @title="Title" @subtitle="Subtitle">
         <:callout>
           <p>Callout</p>
         </:callout>
         <:start>
-        <div>
-          <p>Start section content</p>
-        </div>
+          <div>
+            <p>Start section content</p>
+          </div>
         </:start>
         <:end>
           <p>End section content</p>
         </:end>
-      </Mktg::Card>`);
+      </Card>
+    </template>);
+
     assert
       .dom('.card.g-col-12')
       .exists('Base card is rendered with passed attributes');
@@ -65,26 +63,28 @@ module('Integration | Component | mktg/card', function (hooks) {
         'End section content',
         'End section renders when block is present',
       );
-    await render(hbs`
-      <Mktg::Card
-          class="g-col-12"
-          @title="Title"
-          @subtitle="Subtitle"
-          @leftAlignCallout={{true}}
-        >
+
+    await render(<template>
+      <Card
+        class="g-col-12"
+        @title="Title"
+        @subtitle="Subtitle"
+        @leftAlignCallout={{true}}
+      >
         <:callout>
           <p>Callout</p>
         </:callout>
         <:start>
-        <div>
-          <p>Start section content</p>
-        </div>
+          <div>
+            <p>Start section content</p>
+          </div>
         </:start>
         <:end>
           <p>End section content</p>
         </:end>
-      </Mktg::Card>
-      `);
+      </Card>
+    </template>);
+
     assert
       .dom(
         '.card .card-header div .d-flex.flex-column.justify-content-start.w-100.m-0',
@@ -107,25 +107,26 @@ module('Integration | Component | mktg/card', function (hooks) {
   });
 
   test('card correctly renders horizontal when @horizontal is true', async function () {
-    await render(hbs`
-      <Mktg::Card
-          class="g-col-12"
-          @title="Title"
-          @subtitle="Subtitle"
-          @horizontal={{true}}
-        >
+    await render(<template>
+      <Card
+        class="g-col-12"
+        @title="Title"
+        @subtitle="Subtitle"
+        @horizontal={{true}}
+      >
         <:callout>
           <p>Callout</p>
         </:callout>
         <:start>
-        <div>
-          <p>Start section content</p>
-        </div>
+          <div>
+            <p>Start section content</p>
+          </div>
         </:start>
         <:end>
           <p>End section content</p>
         </:end>
-      </Mktg::Card>`);
+      </Card>
+    </template>);
 
     assert.notOk(
       document.querySelector('.card-header'),
diff --git a/packages/ember-test-app/tests/integration/components/mktg/faq-test.ts b/packages/ember-test-app/tests/integration/components/mktg/faq-test.gts
similarity index 79%
rename from packages/ember-test-app/tests/integration/components/mktg/faq-test.ts
rename to packages/ember-test-app/tests/integration/components/mktg/faq-test.gts
index 6d0927f99..b09e28f52 100644
--- a/packages/ember-test-app/tests/integration/components/mktg/faq-test.ts
+++ b/packages/ember-test-app/tests/integration/components/mktg/faq-test.gts
@@ -1,17 +1,19 @@
 import { assert, module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { click, render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Faq from '@nrg-ui/ember/components/mktg/faq';
 
 module('Integration | components | mktg/faq', function (hooks) {
   setupRenderingTest(hooks);
 
   test('faq renders', async function () {
-    await render(hbs`<Mktg::Faq class="test" @question="Question">
-      <:answer>
-        <p>Answer</p>
-      </:answer>
-    </Mktg::Faq>`);
+    await render(<template>
+      <Faq class="test" @question="Question">
+        <:answer>
+          <p>Answer</p>
+        </:answer>
+      </Faq>
+    </template>);
 
     assert
       .dom('.d-flex.flex-column.p-2.m-2.bg-white.rounded.test')
@@ -43,11 +45,14 @@ module('Integration | components | mktg/faq', function (hooks) {
       .dom('div div button i')
       .hasClass('bi-dash', 'Icon switches to dash after clicking button');
 
-    await render(hbs`<Mktg::Faq @defaultOpen={{true}} @question="Question">
-      <:answer>
-        <p>Answer</p>
-      </:answer>
-    </Mktg::Faq>`);
+    await render(<template>
+      <Faq @defaultOpen={{true}} @question="Question">
+        <:answer>
+          <p>Answer</p>
+        </:answer>
+      </Faq>
+    </template>);
+
     assert
       .dom('div div div:nth-of-type(2)')
       .hasClass(
diff --git a/packages/ember-test-app/tests/integration/components/mktg/mktg-header-test.ts b/packages/ember-test-app/tests/integration/components/mktg/header-test.gts
similarity index 79%
rename from packages/ember-test-app/tests/integration/components/mktg/mktg-header-test.ts
rename to packages/ember-test-app/tests/integration/components/mktg/header-test.gts
index fc76e2a8c..2123afc4a 100644
--- a/packages/ember-test-app/tests/integration/components/mktg/mktg-header-test.ts
+++ b/packages/ember-test-app/tests/integration/components/mktg/header-test.gts
@@ -1,32 +1,30 @@
 import { assert, module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Header from '@nrg-ui/ember/components/mktg/header';
+import Button from '@nrg-ui/ember/components/button';
 
 module('Integration | components | mktg/header', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it renders', async function () {
-    await render(hbs`
-      <Mktg::Header>
+    await render(<template>
+      <Header>
         <:brand>
           <img src="https://imageplaceholder.net/50" alt="Icon" />
         </:brand>
         <:title>
-            <p class="m-0">Title</p>
+          <p class="m-0">Title</p>
         </:title>
         <:nav>
-          <Button
-            class="btn-outline-light me-1 rounded-pill"
-          >Prev</Button>
-          <Button
-            class="btn-outline-light me-1 rounded-pill"
-          >Next</Button>
+          <Button class="btn-outline-light me-1 rounded-pill">Prev</Button>
+          <Button class="btn-outline-light me-1 rounded-pill">Next</Button>
         </:nav>
         <:options>
           <p class="my-0 me-2 fw-bold">Options content</p>
         </:options>
-      </Mktg::Header>`);
+      </Header>
+    </template>);
 
     assert.dom('div div img').exists('Brand renders content');
     assert
diff --git a/packages/ember-test-app/tests/integration/components/mktg/promo-container-test.ts b/packages/ember-test-app/tests/integration/components/mktg/promo-container-test.gts
similarity index 67%
rename from packages/ember-test-app/tests/integration/components/mktg/promo-container-test.ts
rename to packages/ember-test-app/tests/integration/components/mktg/promo-container-test.gts
index 80df73904..034c07cca 100644
--- a/packages/ember-test-app/tests/integration/components/mktg/promo-container-test.ts
+++ b/packages/ember-test-app/tests/integration/components/mktg/promo-container-test.gts
@@ -1,22 +1,17 @@
 import { assert, module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import PromoContainer from '@nrg-ui/ember/components/mktg/promo-container';
 
 module('Integration | components | mktg/promo-container', function (hooks) {
   setupRenderingTest(hooks);
 
   test('Promo container renders', async function () {
-    await render(
-      hbs`<Mktg::PromoContainer class="promo-container" as |Container|>
-        <Container.Promo class="promo"
-          @productName="Product name"
-        >
+    await render(<template>
+      <PromoContainer class="promo-container" as |Container|>
+        <Container.Promo class="promo" @productName="Product name">
           <:img>
-              <img
-                src="https://place-hold.it/700x700"
-                alt="Placeholder"
-              />
+            <img src="https://place-hold.it/700x700" alt="Placeholder" />
           </:img>
           <:header>
             <p class="m-0 p-0">Header Text</p>
@@ -25,8 +20,8 @@ module('Integration | components | mktg/promo-container', function (hooks) {
             <p>Description</p>
           </:description>
         </Container.Promo>
-      </Mktg::PromoContainer>`,
-    );
+      </PromoContainer>
+    </template>);
 
     assert
       .dom(
diff --git a/packages/ember-test-app/tests/integration/components/mktg/promo-test.ts b/packages/ember-test-app/tests/integration/components/mktg/promo-test.gts
similarity index 61%
rename from packages/ember-test-app/tests/integration/components/mktg/promo-test.ts
rename to packages/ember-test-app/tests/integration/components/mktg/promo-test.gts
index 0e7f89278..087ea7493 100644
--- a/packages/ember-test-app/tests/integration/components/mktg/promo-test.ts
+++ b/packages/ember-test-app/tests/integration/components/mktg/promo-test.gts
@@ -1,29 +1,25 @@
 import { assert, module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { render, find } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Promo from '@nrg-ui/ember/components/mktg/promo';
 
 module('Integration | components | mktg/promo', function (hooks) {
   setupRenderingTest(hooks);
 
   test('Promo component renders', async function () {
-    await render(hbs`<Mktg::Promo
-      class="promo"
-      @productName="Product name"
-    >
-      <:img>
-          <img
-            src="https://place-hold.it/700x700"
-            alt="Placeholder"
-          />
-      </:img>
-      <:header>
-        <p class="m-0 p-0">Header Text</p>
-      </:header>
-      <:description>
-        <p>Description</p>
-      </:description>
-    </Mktg::Promo>`);
+    await render(<template>
+      <Promo class="promo" @productName="Product name">
+        <:img>
+          <img src="https://place-hold.it/700x700" alt="Placeholder" />
+        </:img>
+        <:header>
+          <p class="m-0 p-0">Header Text</p>
+        </:header>
+        <:description>
+          <p>Description</p>
+        </:description>
+      </Promo>
+    </template>);
 
     assert.dom('.row.promo').exists('Promo renders default horizontal');
     assert
@@ -38,7 +34,9 @@ module('Integration | components | mktg/promo', function (hooks) {
         'Description',
         'Description named block renders correct content',
       );
+
     const imageElement = find('img');
+
     assert.equal(
       imageElement?.src,
       'https://place-hold.it/700x700',
@@ -49,24 +47,20 @@ module('Integration | components | mktg/promo', function (hooks) {
       'Placeholder',
       'The img alt tag renders correctly',
     );
-    await render(hbs`<Mktg::Promo
-      class="promo"
-      @vertical={{true}}
-      @productName="Product name"
-    >
-      <:img>
-          <img
-            src="https://place-hold.it/700x700"
-            alt="Placeholder"
-          />
-      </:img>
-      <:header>
-        <p class="m-0 p-0">Header Text</p>
-      </:header>
-      <:description>
-        <p>Description</p>
-      </:description>
-    </Mktg::Promo>`);
+
+    await render(<template>
+      <Promo class="promo" @vertical={{true}} @productName="Product name">
+        <:img>
+          <img src="https://place-hold.it/700x700" alt="Placeholder" />
+        </:img>
+        <:header>
+          <p class="m-0 p-0">Header Text</p>
+        </:header>
+        <:description>
+          <p>Description</p>
+        </:description>
+      </Promo>
+    </template>);
 
     assert.dom('.promo').exists('Promo renders vertical when param is true');
     assert
diff --git a/packages/ember-test-app/tests/integration/components/progress-test.ts b/packages/ember-test-app/tests/integration/components/progress-test.gts
similarity index 83%
rename from packages/ember-test-app/tests/integration/components/progress-test.ts
rename to packages/ember-test-app/tests/integration/components/progress-test.gts
index 8a4b19a1d..932a56c4a 100644
--- a/packages/ember-test-app/tests/integration/components/progress-test.ts
+++ b/packages/ember-test-app/tests/integration/components/progress-test.gts
@@ -1,7 +1,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { find, render, type TestContext } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Progress from '@nrg-ui/ember/components/progress';
 
 interface Context extends TestContext {
   element: HTMLElement;
@@ -11,9 +11,9 @@ module('Integration | components | progress', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it renders (inline)', async function (this: Context, assert) {
-    await render(
-      hbs`<Progress @animated={{true}} @progress={{40}} @striped={{true}} />`,
-    );
+    await render(<template>
+      <Progress @animated={{true}} @progress={{40}} @striped={{true}} />
+    </template>);
 
     assert
       .dom('div:has(> div)')
@@ -30,13 +30,11 @@ module('Integration | components | progress', function (hooks) {
       .hasClass('progress-bar-animated')
       .hasClass('progress-bar-striped');
 
-    /*
-      assert.dom(...).hasStyle uses window.getComputedStyle, which
-      calculates values (e.g. width) based on the actual rendered
-      dimensions of the element. Since we are using a test container
-      with a variable width, we can't use this method to test the width
-      of the progress bar.
-    */
+    //  assert.dom(...).hasStyle uses window.getComputedStyle, which
+    //  calculates values (e.g. width) based on the actual rendered
+    //  dimensions of the element. Since we are using a test container
+    //  with a variable width, we can't use this method to test the width
+    //  of the progress bar.
     const progress = this.element.querySelector(
       'div > div:not(:has(> *))',
     ) as HTMLDivElement;
@@ -45,12 +43,12 @@ module('Integration | components | progress', function (hooks) {
   });
 
   test('it renders (stacked)', async function (this: Context, assert) {
-    await render(hbs`
+    await render(<template>
       <Progress @stacked={{true}} as |Segment|>
         <Segment @progress={{40}} @striped={{true}} @animated={{true}} />
         <Segment class="bg-warning" @title="foo bar" @progress={{60}} />
       </Progress>
-    `);
+    </template>);
 
     const container = find('div.progress-stacked') as HTMLDivElement;
     let segment = container.querySelector(