From 60387dae0c8f62f8e634f670793fc9273d2aea0d Mon Sep 17 00:00:00 2001
From: Markus Sanin <markus.sanin@zeppelin-group.com>
Date: Mon, 8 Dec 2025 18:04:51 +0100
Subject: [PATCH] Move test-app to gts

---
 pnpm-lock.yaml                                |  44 +-
 test-app/app/components/my-custom-content.gts |   6 +
 test-app/app/components/my-custom-content.hbs |   1 -
 test-app/app/components/my-custom-content.ts  |   4 -
 test-app/app/components/my-custom-trigger.gts |   6 +
 test-app/app/components/my-custom-trigger.hbs |   1 -
 test-app/app/components/my-custom-trigger.ts  |   4 -
 .../{shadow-root.ts => shadow-root.gts}       |  13 +
 test-app/app/components/shadow-root.hbs       |  10 -
 .../app/components/{shadow.ts => shadow.gts}  |  12 +
 test-app/app/components/shadow.hbs            |  10 -
 test-app/app/templates/application.gts        |  13 +
 test-app/app/templates/application.hbs        |   5 -
 test-app/app/templates/shadow-root.gts        |  11 +
 test-app/app/templates/shadow-root.hbs        |   4 -
 test-app/eslint.config.mjs                    |   3 +
 test-app/package.json                         |   3 +-
 ...opdown-test.ts => basic-dropdown-test.gts} | 942 +++++++++++-------
 ...st.ts => basic-dropdown-wormhole-test.gts} |  14 +-
 .../{content-test.ts => content-test.gts}     | 548 +++++++---
 .../{trigger-test.ts => trigger-test.gts}     | 618 +++++++++---
 21 files changed, 1534 insertions(+), 738 deletions(-)
 create mode 100644 test-app/app/components/my-custom-content.gts
 delete mode 100644 test-app/app/components/my-custom-content.hbs
 delete mode 100644 test-app/app/components/my-custom-content.ts
 create mode 100644 test-app/app/components/my-custom-trigger.gts
 delete mode 100644 test-app/app/components/my-custom-trigger.hbs
 delete mode 100644 test-app/app/components/my-custom-trigger.ts
 rename test-app/app/components/{shadow-root.ts => shadow-root.gts} (75%)
 delete mode 100644 test-app/app/components/shadow-root.hbs
 rename test-app/app/components/{shadow.ts => shadow.gts} (71%)
 delete mode 100644 test-app/app/components/shadow.hbs
 create mode 100644 test-app/app/templates/application.gts
 delete mode 100644 test-app/app/templates/application.hbs
 create mode 100644 test-app/app/templates/shadow-root.gts
 delete mode 100644 test-app/app/templates/shadow-root.hbs
 rename test-app/tests/integration/components/{basic-dropdown-test.ts => basic-dropdown-test.gts} (70%)
 rename test-app/tests/integration/components/{basic-dropdown-wormhole-test.ts => basic-dropdown-wormhole-test.gts} (83%)
 rename test-app/tests/integration/components/{content-test.ts => content-test.gts} (73%)
 rename test-app/tests/integration/components/{trigger-test.ts => trigger-test.gts} (74%)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 383abf0e..497b532b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -432,7 +432,7 @@ importers:
         version: 6.7.2(@types/node@24.10.1)(handlebars@4.7.8)(underscore@1.13.7)
       ember-cli-app-version:
         specifier: ^7.0.0
-        version: 7.0.0(ember-source@6.9.0(@glimmer/component@2.0.0)(rsvp@4.8.5))
+        version: 7.0.0(ember-source@6.7.0(@glimmer/component@2.0.0)(rsvp@4.8.5))
       ember-cli-babel:
         specifier: ^8.2.0
         version: 8.2.0(@babel/core@7.28.5)
@@ -444,10 +444,10 @@ importers:
         version: 3.3.3(ember-cli@6.7.2(@types/node@24.10.1)(handlebars@4.7.8)(underscore@1.13.7))
       ember-cli-deprecation-workflow:
         specifier: ^3.4.0
-        version: 3.4.0(ember-source@6.9.0(@glimmer/component@2.0.0)(rsvp@4.8.5))
+        version: 3.4.0(ember-source@6.7.0(@glimmer/component@2.0.0)(rsvp@4.8.5))
       ember-cli-fastboot:
         specifier: ^4.1.5
-        version: 4.1.5(ember-source@6.9.0(@glimmer/component@2.0.0)(rsvp@4.8.5))
+        version: 4.1.5(ember-source@6.7.0(@glimmer/component@2.0.0)(rsvp@4.8.5))
       ember-cli-htmlbars:
         specifier: ^6.3.0
         version: 6.3.0
@@ -465,7 +465,7 @@ importers:
         version: 4.0.2
       ember-load-initializers:
         specifier: ^3.0.1
-        version: 3.0.1(ember-source@6.9.0(@glimmer/component@2.0.0)(rsvp@4.8.5))
+        version: 3.0.1(ember-source@6.7.0(@glimmer/component@2.0.0)(rsvp@4.8.5))
       ember-modifier:
         specifier: ^4.2.2
         version: 4.2.2(@babel/core@7.28.5)
@@ -478,9 +478,12 @@ importers:
       ember-resolver:
         specifier: ^13.1.1
         version: 13.1.1
+      ember-route-template:
+        specifier: ^1.0.3
+        version: 1.0.3
       ember-source:
-        specifier: ~6.9.0
-        version: 6.9.0(@glimmer/component@2.0.0)(rsvp@4.8.5)
+        specifier: ~6.7.0
+        version: 6.7.0(@glimmer/component@2.0.0)(rsvp@4.8.5)
       ember-source-channel-url:
         specifier: ^3.0.0
         version: 3.0.0(encoding@0.1.13)
@@ -4136,6 +4139,9 @@ packages:
   ember-rfc176-data@0.3.18:
     resolution: {integrity: sha512-JtuLoYGSjay1W3MQAxt3eINWXNYYQliK90tLwtb8aeCuQK8zKGCRbBodVIrkcTqshULMnRuTOS6t1P7oQk3g6Q==}
 
+  ember-route-template@1.0.3:
+    resolution: {integrity: sha512-p//Nk4g4Wu9F8cZdjB69rKxTRi6RRW32a8K5sYsi5cofTcJtPBXRWUXWpQEjJX6qcucgxooQwEm9+7MOy4lwNw==}
+
   ember-router-generator@2.0.0:
     resolution: {integrity: sha512-89oVHVJwmLDvGvAUWgS87KpBoRhy3aZ6U0Ql6HOmU4TrPkyaa8pM0W81wj9cIwjYprcQtN9EwzZMHnq46+oUyw==}
     engines: {node: 8.* || 10.* || >= 12}
@@ -12545,10 +12551,10 @@ snapshots:
       - supports-color
       - webpack
 
-  ember-cli-app-version@7.0.0(ember-source@6.9.0(@glimmer/component@2.0.0)(rsvp@4.8.5)):
+  ember-cli-app-version@7.0.0(ember-source@6.7.0(@glimmer/component@2.0.0)(rsvp@4.8.5)):
     dependencies:
       ember-cli-babel: 7.26.11
-      ember-source: 6.9.0(@glimmer/component@2.0.0)(rsvp@4.8.5)
+      ember-source: 6.7.0(@glimmer/component@2.0.0)(rsvp@4.8.5)
       git-repo-info: 2.1.1
     transitivePeerDependencies:
       - supports-color
@@ -12648,15 +12654,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  ember-cli-deprecation-workflow@3.4.0(ember-source@6.9.0(@glimmer/component@2.0.0)(rsvp@4.8.5)):
-    dependencies:
-      '@babel/core': 7.28.5
-      ember-cli-babel: 8.2.0(@babel/core@7.28.5)
-      ember-source: 6.9.0(@glimmer/component@2.0.0)(rsvp@4.8.5)
-    transitivePeerDependencies:
-      - supports-color
-
-  ember-cli-fastboot@4.1.5(ember-source@6.9.0(@glimmer/component@2.0.0)(rsvp@4.8.5)):
+  ember-cli-fastboot@4.1.5(ember-source@6.7.0(@glimmer/component@2.0.0)(rsvp@4.8.5)):
     dependencies:
       broccoli-concat: 4.2.5
       broccoli-file-creator: 2.1.1
@@ -12668,7 +12666,7 @@ snapshots:
       ember-cli-lodash-subset: 2.0.1
       ember-cli-preprocess-registry: 3.3.0
       ember-cli-version-checker: 5.1.2
-      ember-source: 6.9.0(@glimmer/component@2.0.0)(rsvp@4.8.5)
+      ember-source: 6.7.0(@glimmer/component@2.0.0)(rsvp@4.8.5)
       fastboot: 4.1.5
       fastboot-express-middleware: 4.1.2
       fastboot-transform: 0.1.3
@@ -13000,10 +12998,6 @@ snapshots:
     dependencies:
       ember-source: 6.7.0(@glimmer/component@2.0.0)(rsvp@4.8.5)
 
-  ember-load-initializers@3.0.1(ember-source@6.9.0(@glimmer/component@2.0.0)(rsvp@4.8.5)):
-    dependencies:
-      ember-source: 6.9.0(@glimmer/component@2.0.0)(rsvp@4.8.5)
-
   ember-modifier@4.2.2(@babel/core@7.28.5):
     dependencies:
       '@embroider/addon-shim': 1.10.2
@@ -13040,6 +13034,12 @@ snapshots:
 
   ember-rfc176-data@0.3.18: {}
 
+  ember-route-template@1.0.3:
+    dependencies:
+      '@embroider/addon-shim': 1.10.2
+    transitivePeerDependencies:
+      - supports-color
+
   ember-router-generator@2.0.0:
     dependencies:
       '@babel/parser': 7.28.5
diff --git a/test-app/app/components/my-custom-content.gts b/test-app/app/components/my-custom-content.gts
new file mode 100644
index 00000000..a660a5f4
--- /dev/null
+++ b/test-app/app/components/my-custom-content.gts
@@ -0,0 +1,6 @@
+import type { BasicDropdownContentSignature } from 'ember-basic-dropdown/components/basic-dropdown-content';
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+export default <template>
+  <span id="my-custom-content" ...attributes>My custom content</span>
+</template> satisfies TemplateOnlyComponent<BasicDropdownContentSignature>;
diff --git a/test-app/app/components/my-custom-content.hbs b/test-app/app/components/my-custom-content.hbs
deleted file mode 100644
index 3415a3fd..00000000
--- a/test-app/app/components/my-custom-content.hbs
+++ /dev/null
@@ -1 +0,0 @@
-<span id="my-custom-content" ...attributes>My custom content</span>
\ No newline at end of file
diff --git a/test-app/app/components/my-custom-content.ts b/test-app/app/components/my-custom-content.ts
deleted file mode 100644
index e675f7ab..00000000
--- a/test-app/app/components/my-custom-content.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import templateOnly from '@ember/component/template-only';
-import type { BasicDropdownContentSignature } from 'ember-basic-dropdown/components/basic-dropdown-content';
-
-export default templateOnly<BasicDropdownContentSignature>();
diff --git a/test-app/app/components/my-custom-trigger.gts b/test-app/app/components/my-custom-trigger.gts
new file mode 100644
index 00000000..48e5376f
--- /dev/null
+++ b/test-app/app/components/my-custom-trigger.gts
@@ -0,0 +1,6 @@
+import type { BasicDropdownTriggerSignature } from 'ember-basic-dropdown/components/basic-dropdown-trigger';
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+export default <template>
+  <span id="my-custom-trigger" ...attributes>My custom trigger</span>
+</template> satisfies TemplateOnlyComponent<BasicDropdownTriggerSignature>;
diff --git a/test-app/app/components/my-custom-trigger.hbs b/test-app/app/components/my-custom-trigger.hbs
deleted file mode 100644
index 399e864f..00000000
--- a/test-app/app/components/my-custom-trigger.hbs
+++ /dev/null
@@ -1 +0,0 @@
-<span id="my-custom-trigger" ...attributes>My custom trigger</span>
\ No newline at end of file
diff --git a/test-app/app/components/my-custom-trigger.ts b/test-app/app/components/my-custom-trigger.ts
deleted file mode 100644
index 363649c3..00000000
--- a/test-app/app/components/my-custom-trigger.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import templateOnly from '@ember/component/template-only';
-import type { BasicDropdownTriggerSignature } from 'ember-basic-dropdown/components/basic-dropdown-trigger';
-
-export default templateOnly<BasicDropdownTriggerSignature>();
diff --git a/test-app/app/components/shadow-root.ts b/test-app/app/components/shadow-root.gts
similarity index 75%
rename from test-app/app/components/shadow-root.ts
rename to test-app/app/components/shadow-root.gts
index b510009d..2042b8f8 100644
--- a/test-app/app/components/shadow-root.ts
+++ b/test-app/app/components/shadow-root.gts
@@ -1,5 +1,6 @@
 import Component from '@glimmer/component';
 import { getOwner } from '@ember/owner';
+import not from 'ember-truth-helpers/helpers/not';
 
 // @ts-expect-error Public property 'isFastBoot' of exported class
 const isFastBoot = typeof FastBoot !== 'undefined';
@@ -38,6 +39,18 @@ export default class ShadowRoot extends Component<{
   get getStyles() {
     return [...document.head.querySelectorAll('link')].map((link) => link.href);
   }
+  <template>
+    {{#if (not this.shadowDom)}}
+      {{yield}}
+    {{else if this.shadowRootElement}}
+      {{#in-element this.shadowRootElement}}
+        {{#each this.getStyles as |styleHref|}}
+          <link rel="stylesheet" type="text/css" href={{styleHref}} />
+        {{/each}}
+        {{yield}}
+      {{/in-element}}
+    {{/if}}
+  </template>
 }
 
 declare module '@glint/environment-ember-loose/registry' {
diff --git a/test-app/app/components/shadow-root.hbs b/test-app/app/components/shadow-root.hbs
deleted file mode 100644
index 07d5e3f0..00000000
--- a/test-app/app/components/shadow-root.hbs
+++ /dev/null
@@ -1,10 +0,0 @@
-{{#if (not this.shadowDom)}}
-  {{yield}}
-{{else if this.shadowRootElement}}
-  {{#in-element this.shadowRootElement}}
-    {{#each this.getStyles as |styleHref|}}
-      <link rel="stylesheet" type="text/css" href={{styleHref}} />
-    {{/each}}
-    {{yield}}
-  {{/in-element}}
-{{/if}}
\ No newline at end of file
diff --git a/test-app/app/components/shadow.ts b/test-app/app/components/shadow.gts
similarity index 71%
rename from test-app/app/components/shadow.ts
rename to test-app/app/components/shadow.gts
index 5271cbac..e06811c6 100644
--- a/test-app/app/components/shadow.ts
+++ b/test-app/app/components/shadow.gts
@@ -24,6 +24,18 @@ export default class Shadow extends Component<{
       set(div);
     },
   );
+  <template>
+    <div data-shadow {{this.attachShadow this.setShadow}} ...attributes></div>
+
+    {{#if this.shadow}}
+      {{#in-element this.shadow}}
+        {{#each this.getStyles as |styleHref|}}
+          <link rel="stylesheet" type="text/css" href={{styleHref}} />
+        {{/each}}
+        {{yield}}
+      {{/in-element}}
+    {{/if}}
+  </template>
 }
 
 declare module '@glint/environment-ember-loose/registry' {
diff --git a/test-app/app/components/shadow.hbs b/test-app/app/components/shadow.hbs
deleted file mode 100644
index 367d74b9..00000000
--- a/test-app/app/components/shadow.hbs
+++ /dev/null
@@ -1,10 +0,0 @@
-<div data-shadow {{this.attachShadow this.setShadow}} ...attributes></div>
-
-{{#if this.shadow}}
-  {{#in-element this.shadow}}
-    {{#each this.getStyles as |styleHref|}}
-      <link rel="stylesheet" type="text/css" href={{styleHref}} />
-    {{/each}}
-    {{yield}}
-  {{/in-element}}
-{{/if}}
\ No newline at end of file
diff --git a/test-app/app/templates/application.gts b/test-app/app/templates/application.gts
new file mode 100644
index 00000000..2e1e89b4
--- /dev/null
+++ b/test-app/app/templates/application.gts
@@ -0,0 +1,13 @@
+import RouteTemplate from 'ember-route-template';
+import ShadowRoot from '../components/shadow-root';
+import BasicDropdownWormhole from 'ember-basic-dropdown/components/basic-dropdown-wormhole';
+
+export default RouteTemplate(
+  <template>
+    <ShadowRoot>
+      <BasicDropdownWormhole />
+
+      {{outlet}}
+    </ShadowRoot>
+  </template>,
+);
diff --git a/test-app/app/templates/application.hbs b/test-app/app/templates/application.hbs
deleted file mode 100644
index 02a7db90..00000000
--- a/test-app/app/templates/application.hbs
+++ /dev/null
@@ -1,5 +0,0 @@
-<ShadowRoot>
-  <BasicDropdownWormhole />
-
-  {{outlet}}
-</ShadowRoot>
\ No newline at end of file
diff --git a/test-app/app/templates/shadow-root.gts b/test-app/app/templates/shadow-root.gts
new file mode 100644
index 00000000..86cc98c9
--- /dev/null
+++ b/test-app/app/templates/shadow-root.gts
@@ -0,0 +1,11 @@
+import RouteTemplate from 'ember-route-template';
+import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown';
+
+export default RouteTemplate(
+  <template>
+    <BasicDropdown as |dropdown|>
+      <dropdown.Trigger>Open me, i'm in shadow</dropdown.Trigger>
+      <dropdown.Content><h3>Content of the dropdown in shadow</h3></dropdown.Content>
+    </BasicDropdown>
+  </template>,
+);
diff --git a/test-app/app/templates/shadow-root.hbs b/test-app/app/templates/shadow-root.hbs
deleted file mode 100644
index bef6c213..00000000
--- a/test-app/app/templates/shadow-root.hbs
+++ /dev/null
@@ -1,4 +0,0 @@
-<BasicDropdown as |dropdown|>
-  <dropdown.Trigger>Open me, i'm in shadow</dropdown.Trigger>
-  <dropdown.Content><h3>Content of the dropdown in shadow</h3></dropdown.Content>
-</BasicDropdown>
\ No newline at end of file
diff --git a/test-app/eslint.config.mjs b/test-app/eslint.config.mjs
index 37985344..1404ae8c 100644
--- a/test-app/eslint.config.mjs
+++ b/test-app/eslint.config.mjs
@@ -96,6 +96,9 @@ export default ts.config(
     plugins: {
       qunit,
     },
+    rules: {
+      '@typescript-eslint/no-this-alias': 'off',
+    },
   },
   /**
    * CJS node files
diff --git a/test-app/package.json b/test-app/package.json
index 76ce01e9..b82786c9 100644
--- a/test-app/package.json
+++ b/test-app/package.json
@@ -74,7 +74,8 @@
     "ember-page-title": "^9.0.3",
     "ember-qunit": "^9.0.4",
     "ember-resolver": "^13.1.1",
-    "ember-source": "~6.9.0",
+    "ember-route-template": "^1.0.3",
+    "ember-source": "~6.7.0",
     "ember-source-channel-url": "^3.0.0",
     "ember-template-imports": "^4.3.0",
     "ember-template-lint": "^7.9.3",
diff --git a/test-app/tests/integration/components/basic-dropdown-test.ts b/test-app/tests/integration/components/basic-dropdown-test.gts
similarity index 70%
rename from test-app/tests/integration/components/basic-dropdown-test.ts
rename to test-app/tests/integration/components/basic-dropdown-test.gts
index 95ea1f7f..cafc2cb9 100644
--- a/test-app/tests/integration/components/basic-dropdown-test.ts
+++ b/test-app/tests/integration/components/basic-dropdown-test.gts
@@ -1,6 +1,5 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { hbs } from 'ember-cli-htmlbars';
 import {
   render,
   click,
@@ -11,12 +10,15 @@ import {
   settled,
   type TestContext,
 } from '@ember/test-helpers';
+import MyCustomTrigger from 'test-app/components/my-custom-trigger';
+import MyCustomContent from 'test-app/components/my-custom-content';
+import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown';
+import { on } from '@ember/modifier';
+import Shadow from 'test-app/components/shadow';
 import type { Dropdown, HorizontalPosition } from 'ember-basic-dropdown/types';
 import type { CalculatePosition } from 'ember-basic-dropdown/utils/calculate-position';
 import type { ComponentLike } from '@glint/template';
 import type { BasicDropdownTriggerSignature } from 'ember-basic-dropdown/components/basic-dropdown-trigger';
-import MyCustomTrigger from 'test-app/components/my-custom-trigger';
-import MyCustomContent from 'test-app/components/my-custom-content';
 import type { BasicDropdownContentSignature } from 'ember-basic-dropdown/components/basic-dropdown-content';
 
 interface ExtendedTestContext extends TestContext {
@@ -44,14 +46,20 @@ module('Integration | Component | basic-dropdown', function (hooks) {
   test<ExtendedTestContext>('Its `toggle` action opens and closes the dropdown', async function (assert) {
     assert.expect(3);
 
-    await render(hbs`
-      <BasicDropdown as |dropdown|>
-        <button type="button" class="ember-basic-dropdown-trigger" {{on "click" dropdown.actions.toggle}}></button>
-        {{#if dropdown.isOpen}}
-          <div id="dropdown-is-opened"></div>
-        {{/if}}
-      </BasicDropdown>
-    `);
+    await render(
+      <template>
+        <BasicDropdown as |dropdown|>
+          <button
+            type="button"
+            class="ember-basic-dropdown-trigger"
+            {{on "click" dropdown.actions.toggle}}
+          ></button>
+          {{#if dropdown.isOpen}}
+            <div id="dropdown-is-opened"></div>
+          {{/if}}
+        </BasicDropdown>
+      </template>,
+    );
 
     assert
       .dom('#dropdown-is-opened', getRootNode(this.element))
@@ -77,14 +85,16 @@ module('Integration | Component | basic-dropdown', function (hooks) {
   test<ExtendedTestContext>("The click event with the right button doesn't open it", async function (assert) {
     assert.expect(2);
 
-    await render(hbs`
-      <BasicDropdown as |dd|>
-        <dd.Trigger>Click me</dd.Trigger>
-        {{#if dd.isOpen}}
-          <div id="dropdown-is-opened"></div>
-        {{/if}}
-      </BasicDropdown>
-    `);
+    await render(
+      <template>
+        <BasicDropdown as |dd|>
+          <dd.Trigger>Click me</dd.Trigger>
+          {{#if dd.isOpen}}
+            <div id="dropdown-is-opened"></div>
+          {{/if}}
+        </BasicDropdown>
+      </template>,
+    );
 
     assert
       .dom('#dropdown-is-opened', getRootNode(this.element))
@@ -98,14 +108,20 @@ module('Integration | Component | basic-dropdown', function (hooks) {
   test<ExtendedTestContext>('Its `open` action opens the dropdown', async function (assert) {
     assert.expect(3);
 
-    await render(hbs`
-      <BasicDropdown as |dropdown|>
-        <button type="button" class="ember-basic-dropdown-trigger" {{on "click" dropdown.actions.open}}></button>
-        {{#if dropdown.isOpen}}
-          <div id="dropdown-is-opened"></div>
-        {{/if}}
-      </BasicDropdown>
-    `);
+    await render(
+      <template>
+        <BasicDropdown as |dropdown|>
+          <button
+            type="button"
+            class="ember-basic-dropdown-trigger"
+            {{on "click" dropdown.actions.open}}
+          ></button>
+          {{#if dropdown.isOpen}}
+            <div id="dropdown-is-opened"></div>
+          {{/if}}
+        </BasicDropdown>
+      </template>,
+    );
 
     assert
       .dom('#dropdown-is-opened', getRootNode(this.element))
@@ -131,14 +147,20 @@ module('Integration | Component | basic-dropdown', function (hooks) {
   test<ExtendedTestContext>('Its `close` action closes the dropdown', async function (assert) {
     assert.expect(3);
 
-    await render(hbs`
-      <BasicDropdown @initiallyOpened={{true}} as |dropdown|>
-        <button type="button" class="ember-basic-dropdown-trigger" {{on "click" dropdown.actions.close}}></button>
-        {{#if dropdown.isOpen}}
-          <div id="dropdown-is-opened"></div>
-        {{/if}}
-      </BasicDropdown>
-    `);
+    await render(
+      <template>
+        <BasicDropdown @initiallyOpened={{true}} as |dropdown|>
+          <button
+            type="button"
+            class="ember-basic-dropdown-trigger"
+            {{on "click" dropdown.actions.close}}
+          ></button>
+          {{#if dropdown.isOpen}}
+            <div id="dropdown-is-opened"></div>
+          {{/if}}
+        </BasicDropdown>
+      </template>,
+    );
 
     assert
       .dom('#dropdown-is-opened', getRootNode(this.element))
@@ -162,6 +184,8 @@ module('Integration | Component | basic-dropdown', function (hooks) {
   });
 
   test<ExtendedTestContext>('It can receive an onOpen action that is fired just before the component opens', async function (assert) {
+    const self = this;
+
     assert.expect(4);
 
     this.onOpen = function (dropdown: Dropdown, e?: Event) {
@@ -176,14 +200,20 @@ module('Integration | Component | basic-dropdown', function (hooks) {
       assert.ok(!!e, 'Receives an argument as second argument');
       assert.ok(true, 'onOpen action was invoked');
     };
-    await render<ExtendedTestContext>(hbs`
-      <BasicDropdown @onOpen={{this.onOpen}} as |dropdown|>
-        <button type="button" class="ember-basic-dropdown-trigger" {{on "click" dropdown.actions.open}}></button>
-        {{#if dropdown.isOpen}}
-          <div id="dropdown-is-opened"></div>
-        {{/if}}
-      </BasicDropdown>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <BasicDropdown @onOpen={{self.onOpen}} as |dropdown|>
+          <button
+            type="button"
+            class="ember-basic-dropdown-trigger"
+            {{on "click" dropdown.actions.open}}
+          ></button>
+          {{#if dropdown.isOpen}}
+            <div id="dropdown-is-opened"></div>
+          {{/if}}
+        </BasicDropdown>
+      </template>,
+    );
 
     await click(
       getRootNode(this.element).querySelector(
@@ -193,20 +223,28 @@ module('Integration | Component | basic-dropdown', function (hooks) {
   });
 
   test<ExtendedTestContext>('returning false from the `onOpen` action prevents the dropdown from opening', async function (assert) {
+    const self = this;
+
     assert.expect(2);
 
     this.onOpen = function () {
       assert.ok(true, 'willOpen has been called');
       return false;
     };
-    await render<ExtendedTestContext>(hbs`
-      <BasicDropdown @onOpen={{this.onOpen}} as |dropdown|>
-        <button type="button" class="ember-basic-dropdown-trigger" {{on "click" dropdown.actions.open}}></button>
-        {{#if dropdown.isOpen}}
-          <div id="dropdown-is-opened"></div>
-        {{/if}}
-      </BasicDropdown>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <BasicDropdown @onOpen={{self.onOpen}} as |dropdown|>
+          <button
+            type="button"
+            class="ember-basic-dropdown-trigger"
+            {{on "click" dropdown.actions.open}}
+          ></button>
+          {{#if dropdown.isOpen}}
+            <div id="dropdown-is-opened"></div>
+          {{/if}}
+        </BasicDropdown>
+      </template>,
+    );
 
     await click(
       getRootNode(this.element).querySelector(
@@ -219,6 +257,8 @@ module('Integration | Component | basic-dropdown', function (hooks) {
   });
 
   test<ExtendedTestContext>('It can receive an onClose action that is fired when the component closes', async function (assert) {
+    const self = this;
+
     assert.expect(7);
 
     this.onClose = function (dropdown, e) {
@@ -233,14 +273,20 @@ module('Integration | Component | basic-dropdown', function (hooks) {
       assert.ok(!!e, 'Receives an argument as second argument');
       assert.ok(true, 'onClose action was invoked');
     };
-    await render<ExtendedTestContext>(hbs`
-      <BasicDropdown @onClose={{this.onClose}} as |dropdown|>
-        <button type="button" class="ember-basic-dropdown-trigger" {{on "click" dropdown.actions.toggle}}></button>
-        {{#if dropdown.isOpen}}
-          <div id="dropdown-is-opened"></div>
-        {{/if}}
-      </BasicDropdown>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <BasicDropdown @onClose={{self.onClose}} as |dropdown|>
+          <button
+            type="button"
+            class="ember-basic-dropdown-trigger"
+            {{on "click" dropdown.actions.toggle}}
+          ></button>
+          {{#if dropdown.isOpen}}
+            <div id="dropdown-is-opened"></div>
+          {{/if}}
+        </BasicDropdown>
+      </template>,
+    );
 
     assert
       .dom('#dropdown-is-opened', getRootNode(this.element))
@@ -264,20 +310,28 @@ module('Integration | Component | basic-dropdown', function (hooks) {
   });
 
   test<ExtendedTestContext>('returning false from the `onClose` action prevents the dropdown from closing', async function (assert) {
+    const self = this;
+
     assert.expect(4);
 
     this.onClose = function () {
       assert.ok(true, 'willClose has been invoked');
       return false;
     };
-    await render<ExtendedTestContext>(hbs`
-      <BasicDropdown @onClose={{this.onClose}} as |dropdown|>
-        <button type="button" class="ember-basic-dropdown-trigger" {{on "click" dropdown.actions.toggle}}></button>
-        {{#if dropdown.isOpen}}
-          <div id="dropdown-is-opened"></div>
-        {{/if}}
-      </BasicDropdown>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <BasicDropdown @onClose={{self.onClose}} as |dropdown|>
+          <button
+            type="button"
+            class="ember-basic-dropdown-trigger"
+            {{on "click" dropdown.actions.toggle}}
+          ></button>
+          {{#if dropdown.isOpen}}
+            <div id="dropdown-is-opened"></div>
+          {{/if}}
+        </BasicDropdown>
+      </template>,
+    );
 
     assert
       .dom('#dropdown-is-opened', getRootNode(this.element))
@@ -303,13 +357,15 @@ module('Integration | Component | basic-dropdown', function (hooks) {
   test<ExtendedTestContext>('It can be rendered already opened when the `initiallyOpened=true`', async function (assert) {
     assert.expect(1);
 
-    await render(hbs`
-      <BasicDropdown @initiallyOpened={{true}} as |dropdown|>
-        {{#if dropdown.isOpen}}
-          <div id="dropdown-is-opened"></div>
-        {{/if}}
-      </BasicDropdown>
-    `);
+    await render(
+      <template>
+        <BasicDropdown @initiallyOpened={{true}} as |dropdown|>
+          {{#if dropdown.isOpen}}
+            <div id="dropdown-is-opened"></div>
+          {{/if}}
+        </BasicDropdown>
+      </template>,
+    );
 
     assert
       .dom('#dropdown-is-opened', getRootNode(this.element))
@@ -317,20 +373,28 @@ module('Integration | Component | basic-dropdown', function (hooks) {
   });
 
   test<ExtendedTestContext>('Calling the `open` method while the dropdown is already opened does not call `onOpen` action', async function (assert) {
+    const self = this;
+
     assert.expect(1);
     let onOpenCalls = 0;
     this.onOpen = () => {
       onOpenCalls++;
     };
 
-    await render<ExtendedTestContext>(hbs`
-      <BasicDropdown @onOpen={{this.onOpen}} as |dropdown|>
-        <button type="button" class="ember-basic-dropdown-trigger" {{on "click" dropdown.actions.open}}></button>
-        {{#if dropdown.isOpen}}
-          <div id="dropdown-is-opened"></div>
-        {{/if}}
-      </BasicDropdown>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <BasicDropdown @onOpen={{self.onOpen}} as |dropdown|>
+          <button
+            type="button"
+            class="ember-basic-dropdown-trigger"
+            {{on "click" dropdown.actions.open}}
+          ></button>
+          {{#if dropdown.isOpen}}
+            <div id="dropdown-is-opened"></div>
+          {{/if}}
+        </BasicDropdown>
+      </template>,
+    );
     await click(
       getRootNode(this.element).querySelector(
         '.ember-basic-dropdown-trigger',
@@ -350,6 +414,8 @@ module('Integration | Component | basic-dropdown', function (hooks) {
   });
 
   test<ExtendedTestContext>('Calling the `close` method while the dropdown is already opened does not call `onOpen` action', async function (assert) {
+    const self = this;
+
     assert.expect(1);
     let onCloseCalls = 0;
 
@@ -357,14 +423,20 @@ module('Integration | Component | basic-dropdown', function (hooks) {
       onCloseCalls++;
     };
 
-    await render<ExtendedTestContext>(hbs`
-      <BasicDropdown @onClose={{this.onClose}} as |dropdown|>
-        <button type="button" class="ember-basic-dropdown-trigger" {{on "click" dropdown.actions.close}}></button>
-        {{#if dropdown.isOpen}}
-          <div id="dropdown-is-opened"></div>
-        {{/if}}
-      </BasicDropdown>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <BasicDropdown @onClose={{self.onClose}} as |dropdown|>
+          <button
+            type="button"
+            class="ember-basic-dropdown-trigger"
+            {{on "click" dropdown.actions.close}}
+          ></button>
+          {{#if dropdown.isOpen}}
+            <div id="dropdown-is-opened"></div>
+          {{/if}}
+        </BasicDropdown>
+      </template>,
+    );
     await click(
       getRootNode(this.element).querySelector(
         '.ember-basic-dropdown-trigger',
@@ -386,12 +458,14 @@ module('Integration | Component | basic-dropdown', function (hooks) {
   test<ExtendedTestContext>('It adds the proper class to trigger and content when it receives `@horizontalPosition="right"`', async function (assert) {
     assert.expect(2);
 
-    await render(hbs`
-      <BasicDropdown @horizontalPosition="right" as |dropdown|>
-        <dropdown.Trigger>Press me</dropdown.Trigger>
-        <dropdown.Content><h3>Content of the dropdown</h3></dropdown.Content>
-      </BasicDropdown>
-    `);
+    await render(
+      <template>
+        <BasicDropdown @horizontalPosition="right" as |dropdown|>
+          <dropdown.Trigger>Press me</dropdown.Trigger>
+          <dropdown.Content><h3>Content of the dropdown</h3></dropdown.Content>
+        </BasicDropdown>
+      </template>,
+    );
 
     await click(
       getRootNode(this.element).querySelector(
@@ -416,12 +490,14 @@ module('Integration | Component | basic-dropdown', function (hooks) {
   test<ExtendedTestContext>('It adds the proper class to trigger and content when it receives `horizontalPosition="center"`', async function (assert) {
     assert.expect(2);
 
-    await render(hbs`
-      <BasicDropdown @horizontalPosition="center" as |dropdown|>
-        <dropdown.Trigger>Press me</dropdown.Trigger>
-        <dropdown.Content><h3>Content of the dropdown</h3></dropdown.Content>
-      </BasicDropdown>
-    `);
+    await render(
+      <template>
+        <BasicDropdown @horizontalPosition="center" as |dropdown|>
+          <dropdown.Trigger>Press me</dropdown.Trigger>
+          <dropdown.Content><h3>Content of the dropdown</h3></dropdown.Content>
+        </BasicDropdown>
+      </template>,
+    );
 
     await click(
       getRootNode(this.element).querySelector(
@@ -445,12 +521,14 @@ module('Integration | Component | basic-dropdown', function (hooks) {
   test<ExtendedTestContext>('It prefers right over left when it receives "auto-right"', async function (assert) {
     assert.expect(2);
 
-    await render(hbs`
-      <BasicDropdown @horizontalPosition="auto-right" as |dropdown|>
-        <dropdown.Trigger>Press me</dropdown.Trigger>
-        <dropdown.Content><h3>Content of the dropdown</h3></dropdown.Content>
-      </BasicDropdown>
-    `);
+    await render(
+      <template>
+        <BasicDropdown @horizontalPosition="auto-right" as |dropdown|>
+          <dropdown.Trigger>Press me</dropdown.Trigger>
+          <dropdown.Content><h3>Content of the dropdown</h3></dropdown.Content>
+        </BasicDropdown>
+      </template>,
+    );
 
     await click(
       getRootNode(this.element).querySelector(
@@ -474,12 +552,14 @@ module('Integration | Component | basic-dropdown', function (hooks) {
   test<ExtendedTestContext>('It adds the proper class to trigger and content when it receives `verticalPosition="above"`', async function (assert) {
     assert.expect(2);
 
-    await render(hbs`
-      <BasicDropdown @verticalPosition="above" as |dropdown|>
-        <dropdown.Trigger>Press me</dropdown.Trigger>
-        <dropdown.Content><h3>Content of the dropdown</h3></dropdown.Content>
-      </BasicDropdown>
-    `);
+    await render(
+      <template>
+        <BasicDropdown @verticalPosition="above" as |dropdown|>
+          <dropdown.Trigger>Press me</dropdown.Trigger>
+          <dropdown.Content><h3>Content of the dropdown</h3></dropdown.Content>
+        </BasicDropdown>
+      </template>,
+    );
 
     await click(
       getRootNode(this.element).querySelector(
@@ -503,12 +583,16 @@ module('Integration | Component | basic-dropdown', function (hooks) {
   test<ExtendedTestContext>('It passes the `renderInPlace` property to the yielded content component', async function (assert) {
     assert.expect(1);
 
-    await render(hbs`
-      <BasicDropdown @renderInPlace={{true}} as |dropdown|>
-        <dropdown.Trigger>Click me</dropdown.Trigger>
-        <dropdown.Content><div id="dropdown-is-opened"></div></dropdown.Content>
-      </BasicDropdown>
-    `);
+    await render(
+      <template>
+        <BasicDropdown @renderInPlace={{true}} as |dropdown|>
+          <dropdown.Trigger>Click me</dropdown.Trigger>
+          <dropdown.Content><div
+              id="dropdown-is-opened"
+            ></div></dropdown.Content>
+        </BasicDropdown>
+      </template>,
+    );
 
     await click(
       getRootNode(this.element).querySelector(
@@ -523,12 +607,16 @@ module('Integration | Component | basic-dropdown', function (hooks) {
   test<ExtendedTestContext>('It adds a special class to both trigger and content when `@renderInPlace={{true}}`', async function (assert) {
     assert.expect(2);
 
-    await render(hbs`
-      <BasicDropdown @renderInPlace={{true}} as |dropdown|>
-        <dropdown.Trigger>Click me</dropdown.Trigger>
-        <dropdown.Content><div id="dropdown-is-opened"></div></dropdown.Content>
-      </BasicDropdown>
-    `);
+    await render(
+      <template>
+        <BasicDropdown @renderInPlace={{true}} as |dropdown|>
+          <dropdown.Trigger>Click me</dropdown.Trigger>
+          <dropdown.Content><div
+              id="dropdown-is-opened"
+            ></div></dropdown.Content>
+        </BasicDropdown>
+      </template>,
+    );
 
     await click(
       getRootNode(this.element).querySelector(
@@ -552,12 +640,16 @@ module('Integration | Component | basic-dropdown', function (hooks) {
   test<ExtendedTestContext>('When rendered in-place, the content still contains the --above/below classes', async function (assert) {
     assert.expect(2);
 
-    await render(hbs`
-      <BasicDropdown @renderInPlace={{true}} as |dropdown|>
-        <dropdown.Trigger>Click me</dropdown.Trigger>
-        <dropdown.Content><div id="dropdown-is-opened"></div></dropdown.Content>
-      </BasicDropdown>
-    `);
+    await render(
+      <template>
+        <BasicDropdown @renderInPlace={{true}} as |dropdown|>
+          <dropdown.Trigger>Click me</dropdown.Trigger>
+          <dropdown.Content><div
+              id="dropdown-is-opened"
+            ></div></dropdown.Content>
+        </BasicDropdown>
+      </template>,
+    );
 
     await click(
       getRootNode(this.element).querySelector(
@@ -571,12 +663,20 @@ module('Integration | Component | basic-dropdown', function (hooks) {
         'The content has a class indicating that it was placed below the trigger',
       );
 
-    await render(hbs`
-      <BasicDropdown @renderInPlace={{true}} @verticalPosition="above" as |dropdown|>
-        <dropdown.Trigger>Click me</dropdown.Trigger>
-        <dropdown.Content><div id="dropdown-is-opened"></div></dropdown.Content>
-      </BasicDropdown>
-    `);
+    await render(
+      <template>
+        <BasicDropdown
+          @renderInPlace={{true}}
+          @verticalPosition="above"
+          as |dropdown|
+        >
+          <dropdown.Trigger>Click me</dropdown.Trigger>
+          <dropdown.Content><div
+              id="dropdown-is-opened"
+            ></div></dropdown.Content>
+        </BasicDropdown>
+      </template>,
+    );
 
     await click(
       getRootNode(this.element).querySelector(
@@ -594,12 +694,16 @@ module('Integration | Component | basic-dropdown', function (hooks) {
   test<ExtendedTestContext>('It adds a wrapper element when `@renderInPlace={{true}}`', async function (assert) {
     assert.expect(2);
 
-    await render(hbs`
-      <BasicDropdown @renderInPlace={{true}} as |dropdown|>
-        <dropdown.Trigger>Click me</dropdown.Trigger>
-        <dropdown.Content><div id="dropdown-is-opened"></div></dropdown.Content>
-      </BasicDropdown>
-    `);
+    await render(
+      <template>
+        <BasicDropdown @renderInPlace={{true}} as |dropdown|>
+          <dropdown.Trigger>Click me</dropdown.Trigger>
+          <dropdown.Content><div
+              id="dropdown-is-opened"
+            ></div></dropdown.Content>
+        </BasicDropdown>
+      </template>,
+    );
 
     await click(
       getRootNode(this.element).querySelector(
@@ -618,12 +722,18 @@ module('Integration | Component | basic-dropdown', function (hooks) {
   test<ExtendedTestContext>('When rendered in-place, it prefers right over left with position "auto-right"', async function (assert) {
     assert.expect(2);
 
-    await render(hbs`
-      <BasicDropdown @renderInPlace={{true}} @horizontalPosition="auto-right" as |dropdown|>
-        <dropdown.Trigger>Press me</dropdown.Trigger>
-        <dropdown.Content><h3>Content of the dropdown</h3></dropdown.Content>
-      </BasicDropdown>
-    `);
+    await render(
+      <template>
+        <BasicDropdown
+          @renderInPlace={{true}}
+          @horizontalPosition="auto-right"
+          as |dropdown|
+        >
+          <dropdown.Trigger>Press me</dropdown.Trigger>
+          <dropdown.Content><h3>Content of the dropdown</h3></dropdown.Content>
+        </BasicDropdown>
+      </template>,
+    );
 
     await click(
       getRootNode(this.element).querySelector(
@@ -647,12 +757,18 @@ module('Integration | Component | basic-dropdown', function (hooks) {
   test<ExtendedTestContext>('When rendered in-place, it applies right class for position "right"', async function (assert) {
     assert.expect(2);
 
-    await render(hbs`
-      <BasicDropdown @renderInPlace={{true}} @horizontalPosition="right" as |dropdown|>
-        <dropdown.Trigger>Press me</dropdown.Trigger>
-        <dropdown.Content><h3>Content of the dropdown</h3></dropdown.Content>
-      </BasicDropdown>
-    `);
+    await render(
+      <template>
+        <BasicDropdown
+          @renderInPlace={{true}}
+          @horizontalPosition="right"
+          as |dropdown|
+        >
+          <dropdown.Trigger>Press me</dropdown.Trigger>
+          <dropdown.Content><h3>Content of the dropdown</h3></dropdown.Content>
+        </BasicDropdown>
+      </template>,
+    );
 
     await click(
       getRootNode(this.element).querySelector(
@@ -676,26 +792,32 @@ module('Integration | Component | basic-dropdown', function (hooks) {
   test<ExtendedTestContext>('[ISSUE #127] Having more than one dropdown with `@renderInPlace={{true}}` raises an exception', async function (assert) {
     assert.expect(1);
 
-    await render(hbs`
-      <BasicDropdown @renderInPlace={{true}}></BasicDropdown>
-      <BasicDropdown @renderInPlace={{true}}></BasicDropdown>
-    `);
+    await render(
+      <template>
+        <BasicDropdown @renderInPlace={{true}} />
+        <BasicDropdown @renderInPlace={{true}} />
+      </template>,
+    );
 
     assert.ok(true, 'The test has run without errors');
   });
 
   test<ExtendedTestContext>('It passes the `disabled` property as part of the public API, and updates is if it changes', async function (assert) {
+    const self = this;
+
     assert.expect(2);
     this.disabled = true;
-    await render<ExtendedTestContext>(hbs`
-      <BasicDropdown @disabled={{this.disabled}} as |dropdown|>
-        {{#if dropdown.disabled}}
-          <div id="disabled-dropdown-marker">Disabled!</div>
-        {{else}}
-          <div id="enabled-dropdown-marker">Enabled!</div>
-        {{/if}}
-      </BasicDropdown>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <BasicDropdown @disabled={{self.disabled}} as |dropdown|>
+          {{#if dropdown.disabled}}
+            <div id="disabled-dropdown-marker">Disabled!</div>
+          {{else}}
+            <div id="enabled-dropdown-marker">Enabled!</div>
+          {{/if}}
+        </BasicDropdown>
+      </template>,
+    );
 
     assert
       .dom('#disabled-dropdown-marker', getRootNode(this.element))
@@ -709,11 +831,13 @@ module('Integration | Component | basic-dropdown', function (hooks) {
   test<ExtendedTestContext>('It passes the `uniqueId` property as part of the public API', async function (assert) {
     assert.expect(1);
 
-    await render(hbs`
-      <BasicDropdown as |dropdown|>
-        <div id="dropdown-unique-id-container">{{dropdown.uniqueId}}</div>
-      </BasicDropdown>
-    `);
+    await render(
+      <template>
+        <BasicDropdown as |dropdown|>
+          <div id="dropdown-unique-id-container">{{dropdown.uniqueId}}</div>
+        </BasicDropdown>
+      </template>,
+    );
 
     assert
       .dom('#dropdown-unique-id-container', getRootNode(this.element))
@@ -721,15 +845,21 @@ module('Integration | Component | basic-dropdown', function (hooks) {
   });
 
   test<ExtendedTestContext>("If the dropdown gets disabled while it's open, it closes automatically", async function (assert) {
+    const self = this;
+
     assert.expect(2);
 
     this.disabled = false;
-    await render<ExtendedTestContext>(hbs`
-      <BasicDropdown @disabled={{this.disabled}} as |dropdown|>
-        <dropdown.Trigger>Click me</dropdown.Trigger>
-        <dropdown.Content><div id="dropdown-is-opened"></div></dropdown.Content>
-      </BasicDropdown>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <BasicDropdown @disabled={{self.disabled}} as |dropdown|>
+          <dropdown.Trigger>Click me</dropdown.Trigger>
+          <dropdown.Content><div
+              id="dropdown-is-opened"
+            ></div></dropdown.Content>
+        </BasicDropdown>
+      </template>,
+    );
 
     await click(
       getRootNode(this.element).querySelector(
@@ -746,20 +876,28 @@ module('Integration | Component | basic-dropdown', function (hooks) {
   });
 
   test<ExtendedTestContext>("If the component's `disabled` property changes, the `registerAPI` action is called", async function (assert) {
+    const self = this;
+
     assert.expect(3);
 
     this.disabled = false;
     this.toggleDisabled = () => this.set('disabled', this.disabled);
     this.registerAPI = (api) => this.set('remoteController', api);
-    await render<ExtendedTestContext>(hbs`
-      <BasicDropdown @disabled={{this.disabled}} @registerAPI={{this.registerAPI}} as |dropdown|>
-        <dropdown.Trigger>Click me</dropdown.Trigger>
-      </BasicDropdown>
-      <button type="button" {{on "click" this.toggleDisabled}}>Toggle</button>
-      {{#if this.remoteController.disabled}}
-        <div id="is-disabled"></div>
-      {{/if}}
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <BasicDropdown
+          @disabled={{self.disabled}}
+          @registerAPI={{self.registerAPI}}
+          as |dropdown|
+        >
+          <dropdown.Trigger>Click me</dropdown.Trigger>
+        </BasicDropdown>
+        <button type="button" {{on "click" self.toggleDisabled}}>Toggle</button>
+        {{#if self.remoteController.disabled}}
+          <div id="is-disabled"></div>
+        {{/if}}
+      </template>,
+    );
 
     await click(
       getRootNode(this.element).querySelector(
@@ -782,13 +920,15 @@ module('Integration | Component | basic-dropdown', function (hooks) {
   test<ExtendedTestContext>('It can receive `@destination="id-of-elmnt"` to customize where `#-in-element` is going to render the content', async function (assert) {
     assert.expect(1);
 
-    await render(hbs`
-      <BasicDropdown @destination="id-of-elmnt" as |dd|>
-        <dd.Trigger>Click me</dd.Trigger>
-        <dd.Content>Hello</dd.Content>
-      </BasicDropdown>
-      <div id="id-of-elmnt"></div>
-    `);
+    await render(
+      <template>
+        <BasicDropdown @destination="id-of-elmnt" as |dd|>
+          <dd.Trigger>Click me</dd.Trigger>
+          <dd.Content>Hello</dd.Content>
+        </BasicDropdown>
+        <div id="id-of-elmnt"></div>
+      </template>,
+    );
     await click(
       getRootNode(this.element).querySelector(
         '.ember-basic-dropdown-trigger',
@@ -814,12 +954,16 @@ module('Integration | Component | basic-dropdown', function (hooks) {
   test<ExtendedTestContext>('By default, the `aria-controls` attribute of the trigger contains the id of the content', async function (assert) {
     assert.expect(1);
 
-    await render(hbs`
-      <BasicDropdown @renderInPlace={{true}} as |dropdown|>
-        <dropdown.Trigger>Click me</dropdown.Trigger>
-        <dropdown.Content><div id="dropdown-is-opened"></div></dropdown.Content>
-      </BasicDropdown>
-    `);
+    await render(
+      <template>
+        <BasicDropdown @renderInPlace={{true}} as |dropdown|>
+          <dropdown.Trigger>Click me</dropdown.Trigger>
+          <dropdown.Content><div
+              id="dropdown-is-opened"
+            ></div></dropdown.Content>
+        </BasicDropdown>
+      </template>,
+    );
     await click(
       getRootNode(this.element).querySelector(
         '.ember-basic-dropdown-trigger',
@@ -839,12 +983,16 @@ module('Integration | Component | basic-dropdown', function (hooks) {
 
   test<ExtendedTestContext>('When opened, the `aria-owns` attribute of the trigger parent contains the id of the content', async function (assert) {
     assert.expect(2);
-    await render(hbs`
-      <BasicDropdown @renderInPlace={{true}} as |dropdown|>
-        <dropdown.Trigger>Click me</dropdown.Trigger>
-        <dropdown.Content><div id="dropdown-is-opened"></div></dropdown.Content>
-      </BasicDropdown>
-    `);
+    await render(
+      <template>
+        <BasicDropdown @renderInPlace={{true}} as |dropdown|>
+          <dropdown.Trigger>Click me</dropdown.Trigger>
+          <dropdown.Content><div
+              id="dropdown-is-opened"
+            ></div></dropdown.Content>
+        </BasicDropdown>
+      </template>,
+    );
     const trigger = getRootNode(this.element).querySelector(
       '.ember-basic-dropdown-trigger',
     ) as HTMLElement;
@@ -873,18 +1021,22 @@ module('Integration | Component | basic-dropdown', function (hooks) {
 
   // Repositioning
   test<ExtendedTestContext>('The `reposition` public action returns an object with the changes', async function (assert) {
+    const self = this;
+
     assert.expect(4);
     let remoteController: Dropdown | null = null;
     this.registerAPI = (api) => (remoteController = api);
 
-    await render<ExtendedTestContext>(hbs`
-      <BasicDropdown @registerAPI={{this.registerAPI}} as |dropdown|>
-        <dropdown.Trigger>Click me</dropdown.Trigger>
-        <dropdown.Content>
-          <div id="dropdown-is-opened"></div>
-        </dropdown.Content>
-      </BasicDropdown>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <BasicDropdown @registerAPI={{self.registerAPI}} as |dropdown|>
+          <dropdown.Trigger>Click me</dropdown.Trigger>
+          <dropdown.Content>
+            <div id="dropdown-is-opened"></div>
+          </dropdown.Content>
+        </BasicDropdown>
+      </template>,
+    );
 
     await click(
       getRootNode(this.element).querySelector(
@@ -902,6 +1054,8 @@ module('Integration | Component | basic-dropdown', function (hooks) {
   });
 
   test<ExtendedTestContext>('The user can pass a custom `calculatePosition` function to customize how the component is placed on the screen', async function (assert) {
+    const self = this;
+
     assert.expect(4);
     this.calculatePosition = function (
       _triggerElement,
@@ -920,14 +1074,19 @@ module('Integration | Component | basic-dropdown', function (hooks) {
         },
       };
     };
-    await render<ExtendedTestContext>(hbs`
-      <BasicDropdown @calculatePosition={{this.calculatePosition}} as |dropdown|>
-        <dropdown.Trigger>Click me</dropdown.Trigger>
-        <dropdown.Content>
-          <div id="dropdown-is-opened"></div>
-        </dropdown.Content>
-      </BasicDropdown>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <BasicDropdown
+          @calculatePosition={{self.calculatePosition}}
+          as |dropdown|
+        >
+          <dropdown.Trigger>Click me</dropdown.Trigger>
+          <dropdown.Content>
+            <div id="dropdown-is-opened"></div>
+          </dropdown.Content>
+        </BasicDropdown>
+      </template>,
+    );
     await click(
       getRootNode(this.element).querySelector(
         '.ember-basic-dropdown-trigger',
@@ -952,6 +1111,8 @@ module('Integration | Component | basic-dropdown', function (hooks) {
   });
 
   test<ExtendedTestContext>('The user can use the `renderInPlace` flag option to modify how the position is calculated in the `calculatePosition` function', async function (assert) {
+    const self = this;
+
     assert.expect(4);
     this.calculatePosition = function (
       _triggerElement,
@@ -980,14 +1141,20 @@ module('Integration | Component | basic-dropdown', function (hooks) {
         };
       }
     };
-    await render<ExtendedTestContext>(hbs`
-      <BasicDropdown @calculatePosition={{this.calculatePosition}} @renderInPlace={{true}} as |dropdown|>
-        <dropdown.Trigger>Click me</dropdown.Trigger>
-        <dropdown.Content>
-          <div id="dropdown-is-opened"></div>
-        </dropdown.Content>
-      </BasicDropdown>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <BasicDropdown
+          @calculatePosition={{self.calculatePosition}}
+          @renderInPlace={{true}}
+          as |dropdown|
+        >
+          <dropdown.Trigger>Click me</dropdown.Trigger>
+          <dropdown.Content>
+            <div id="dropdown-is-opened"></div>
+          </dropdown.Content>
+        </BasicDropdown>
+      </template>,
+    );
     await click(
       getRootNode(this.element).querySelector(
         '.ember-basic-dropdown-trigger',
@@ -1012,16 +1179,23 @@ module('Integration | Component | basic-dropdown', function (hooks) {
 
   // Customization of inner components
   test<ExtendedTestContext>('It allows to customize the trigger passing `@triggerComponent="my-custom-trigger"`', async function (assert) {
+    const self = this;
+
     assert.expect(1);
 
     this.triggerComponent = MyCustomTrigger;
 
-    await render<ExtendedTestContext>(hbs`
-      <BasicDropdown @triggerComponent={{this.triggerComponent}} as |dropdown|>
-        <dropdown.Trigger>Press me</dropdown.Trigger>
-        <dropdown.Content><h3>Content of the dropdown</h3></dropdown.Content>
-      </BasicDropdown>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <BasicDropdown
+          @triggerComponent={{self.triggerComponent}}
+          as |dropdown|
+        >
+          <dropdown.Trigger>Press me</dropdown.Trigger>
+          <dropdown.Content><h3>Content of the dropdown</h3></dropdown.Content>
+        </BasicDropdown>
+      </template>,
+    );
 
     assert
       .dom('#my-custom-trigger', getRootNode(this.element))
@@ -1029,16 +1203,23 @@ module('Integration | Component | basic-dropdown', function (hooks) {
   });
 
   test<ExtendedTestContext>('It allows to customize the content passing `contentComponent="my-custom-content"`', async function (assert) {
+    const self = this;
+
     assert.expect(1);
 
     this.contentComponent = MyCustomContent;
 
-    await render<ExtendedTestContext>(hbs`
-      <BasicDropdown @contentComponent={{this.contentComponent}} as |dropdown|>
-        <dropdown.Trigger>Press me</dropdown.Trigger>
-        <dropdown.Content><h3>Content of the dropdown</h3></dropdown.Content>
-      </BasicDropdown>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <BasicDropdown
+          @contentComponent={{self.contentComponent}}
+          as |dropdown|
+        >
+          <dropdown.Trigger>Press me</dropdown.Trigger>
+          <dropdown.Content><h3>Content of the dropdown</h3></dropdown.Content>
+        </BasicDropdown>
+      </template>,
+    );
     await click(
       getRootNode(this.element).querySelector(
         '.ember-basic-dropdown-trigger',
@@ -1051,6 +1232,8 @@ module('Integration | Component | basic-dropdown', function (hooks) {
 
   // State replacement
   test<ExtendedTestContext>('The registerAPI is called with every mutation of the publicAPI object', async function (assert) {
+    const self = this;
+
     assert.expect(7);
     const apis: Dropdown[] = [];
     this.disabled = false;
@@ -1059,12 +1242,18 @@ module('Integration | Component | basic-dropdown', function (hooks) {
         apis.push(api);
       }
     };
-    await render<ExtendedTestContext>(hbs`
-      <BasicDropdown @disabled={{this.disabled}} @registerAPI={{this.registerAPI}} as |dropdown|>
-        <dropdown.Trigger>Open me</dropdown.Trigger>
-        <dropdown.Content><h3>Content of the dropdown</h3></dropdown.Content>
-      </BasicDropdown>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <BasicDropdown
+          @disabled={{self.disabled}}
+          @registerAPI={{self.registerAPI}}
+          as |dropdown|
+        >
+          <dropdown.Trigger>Open me</dropdown.Trigger>
+          <dropdown.Content><h3>Content of the dropdown</h3></dropdown.Content>
+        </BasicDropdown>
+      </template>,
+    );
 
     await click(
       getRootNode(this.element).querySelector(
@@ -1094,6 +1283,8 @@ module('Integration | Component | basic-dropdown', function (hooks) {
   });
 
   test<ExtendedTestContext>('removing the dropdown in response to onClose does not error', async function (assert) {
+    const self = this;
+
     assert.expect(2);
 
     this.isOpen = true;
@@ -1102,14 +1293,16 @@ module('Integration | Component | basic-dropdown', function (hooks) {
       this.set('isOpen', false);
     };
 
-    await render<ExtendedTestContext>(hbs`
-      {{#if this.isOpen}}
-        <BasicDropdown @onClose={{this.onClose}} as |dropdown|>
-          <dropdown.Trigger>Open me</dropdown.Trigger>
-          <dropdown.Content><h3>Content of the dropdown</h3></dropdown.Content>
-        </BasicDropdown>
-      {{/if}}
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        {{#if self.isOpen}}
+          <BasicDropdown @onClose={{self.onClose}} as |dropdown|>
+            <dropdown.Trigger>Open me</dropdown.Trigger>
+            <dropdown.Content><h3>Content of the dropdown</h3></dropdown.Content>
+          </BasicDropdown>
+        {{/if}}
+      </template>,
+    );
 
     assert
       .dom('.ember-basic-dropdown-trigger', getRootNode(this.element))
@@ -1132,35 +1325,42 @@ module('Integration | Component | basic-dropdown', function (hooks) {
   test<ExtendedTestContext>('Dropdowns can be infinitely nested, clicking in children will not close parents, clicking in parents closes children', async function (assert) {
     assert.expect(12);
 
-    await render(hbs`
-      <BasicDropdown as |parent|>
-        <parent.Trigger class='parent' @htmlTag="button">Trigger of the first dropdown</parent.Trigger>
-        <parent.Content @overlay={{true}}>
-          <BasicDropdown as |child|>
-            <p class="body-parent">
-              <br>First level of the dropdpwn<br>
-            </p>
-            <child.Trigger class='child' @htmlTag="button">Trigger of the second dropdown</child.Trigger>
-            <child.Content @overlay={{true}}>
-              <p class="body-child">
-                <br>Second level of the second<br>
-                <BasicDropdown as |grandchild|>
-                  <p>
-                    <br>Second level of the dropdpwn<br>
-                  </p>
-                  <grandchild.Trigger class='grandchild' @htmlTag="button">Trigger of the Third dropdown</grandchild.Trigger>
-                  <grandchild.Content @overlay={{true}}>
-                    <p class="body-grandchild">
-                      <br>Third level of the third<br>
-                    </p>
-                  </grandchild.Content>
-                </BasicDropdown>
+    await render(
+      <template>
+        <BasicDropdown as |parent|>
+          <parent.Trigger class="parent" @htmlTag="button">Trigger of the first
+            dropdown</parent.Trigger>
+          <parent.Content @overlay={{true}}>
+            <BasicDropdown as |child|>
+              <p class="body-parent">
+                <br />First level of the dropdpwn<br />
               </p>
-            </child.Content>
-          </BasicDropdown>
-        </parent.Content>
-      </BasicDropdown>
-    `);
+              <child.Trigger class="child" @htmlTag="button">Trigger of the
+                second dropdown</child.Trigger>
+              <child.Content @overlay={{true}}>
+                <p class="body-child">
+                  <br />Second level of the second<br />
+                  <BasicDropdown as |grandchild|>
+                    <p>
+                      <br />Second level of the dropdpwn<br />
+                    </p>
+                    <grandchild.Trigger
+                      class="grandchild"
+                      @htmlTag="button"
+                    >Trigger of the Third dropdown</grandchild.Trigger>
+                    <grandchild.Content @overlay={{true}}>
+                      <p class="body-grandchild">
+                        <br />Third level of the third<br />
+                      </p>
+                    </grandchild.Content>
+                  </BasicDropdown>
+                </p>
+              </child.Content>
+            </BasicDropdown>
+          </parent.Content>
+        </BasicDropdown>
+      </template>,
+    );
 
     //open the nested dropdown
     await click(
@@ -1243,6 +1443,8 @@ module('Integration | Component | basic-dropdown', function (hooks) {
 
   // Misc bugfixes
   test<ExtendedTestContext>('[BUGFIX] Dropdowns rendered in place do not register events twice', async function (assert) {
+    const self = this;
+
     assert.expect(2);
     let called = false;
     this.onFocusOut = function () {
@@ -1252,13 +1454,22 @@ module('Integration | Component | basic-dropdown', function (hooks) {
     this.onOpen = function () {
       assert.ok(true);
     };
-    await render<ExtendedTestContext>(hbs`
-      <input type="text" id="outer-input">
-      <BasicDropdown @renderInPlace={{true}} @onOpen={{this.onOpen}} as |dropdown|>
-        <dropdown.Trigger>Open me</dropdown.Trigger>
-        <dropdown.Content {{on "focusout" this.onFocusOut}}><input type="text" id="inner-input"></dropdown.Content>
-      </BasicDropdown>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <input type="text" id="outer-input" />
+        <BasicDropdown
+          @renderInPlace={{true}}
+          @onOpen={{self.onOpen}}
+          as |dropdown|
+        >
+          <dropdown.Trigger>Open me</dropdown.Trigger>
+          <dropdown.Content {{on "focusout" self.onFocusOut}}><input
+              type="text"
+              id="inner-input"
+            /></dropdown.Content>
+        </BasicDropdown>
+      </template>,
+    );
     await click(
       getRootNode(this.element).querySelector(
         '.ember-basic-dropdown-trigger',
@@ -1273,6 +1484,8 @@ module('Integration | Component | basic-dropdown', function (hooks) {
   });
 
   test<ExtendedTestContext>('[BUGFIX] It protects the inline styles from undefined values returned in the `calculatePosition` callback', async function (assert) {
+    const self = this;
+
     assert.expect(1);
     this.calculatePosition = function () {
       return {
@@ -1281,12 +1494,17 @@ module('Integration | Component | basic-dropdown', function (hooks) {
         style: {},
       };
     };
-    await render<ExtendedTestContext>(hbs`
-      <BasicDropdown @calculatePosition={{this.calculatePosition}} as |dropdown|>
-        <dropdown.Trigger>Open me</dropdown.Trigger>
-        <dropdown.Content>Some content</dropdown.Content>
-      </BasicDropdown>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <BasicDropdown
+          @calculatePosition={{self.calculatePosition}}
+          as |dropdown|
+        >
+          <dropdown.Trigger>Open me</dropdown.Trigger>
+          <dropdown.Content>Some content</dropdown.Content>
+        </BasicDropdown>
+      </template>,
+    );
     await click(
       getRootNode(this.element).querySelector(
         '.ember-basic-dropdown-trigger',
@@ -1298,6 +1516,8 @@ module('Integration | Component | basic-dropdown', function (hooks) {
   });
 
   test<ExtendedTestContext>('It includes the inline styles returned from the `calculatePosition` callback', async function (assert) {
+    const self = this;
+
     assert.expect(1);
     this.calculatePosition = function () {
       return {
@@ -1309,12 +1529,17 @@ module('Integration | Component | basic-dropdown', function (hooks) {
         },
       };
     };
-    await render<ExtendedTestContext>(hbs`
-      <BasicDropdown @calculatePosition={{this.calculatePosition}} as |dropdown|>
-        <dropdown.Trigger>Open me</dropdown.Trigger>
-        <dropdown.Content>Some content</dropdown.Content>
-      </BasicDropdown>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <BasicDropdown
+          @calculatePosition={{self.calculatePosition}}
+          as |dropdown|
+        >
+          <dropdown.Trigger>Open me</dropdown.Trigger>
+          <dropdown.Content>Some content</dropdown.Content>
+        </BasicDropdown>
+      </template>,
+    );
     await click(
       getRootNode(this.element).querySelector(
         '.ember-basic-dropdown-trigger',
@@ -1349,12 +1574,16 @@ module('Integration | Component | basic-dropdown', function (hooks) {
         `,
     );
 
-    await render(hbs`
-       <BasicDropdown @renderInPlace={{true}} as |dropdown|>
-         <dropdown.Trigger><button type="button">Open me</button></dropdown.Trigger>
-         <dropdown.Content><div id="dropdown-is-opened">CONTENT</div></dropdown.Content>
-       </BasicDropdown>
-     `);
+    await render(
+      <template>
+        <BasicDropdown @renderInPlace={{true}} as |dropdown|>
+          <dropdown.Trigger><button type="button">Open me</button></dropdown.Trigger>
+          <dropdown.Content><div
+              id="dropdown-is-opened"
+            >CONTENT</div></dropdown.Content>
+        </BasicDropdown>
+      </template>,
+    );
 
     await click(
       getRootNode(this.element).querySelector(
@@ -1423,6 +1652,8 @@ module('Integration | Component | basic-dropdown', function (hooks) {
 
   // Styles properly get reset
   test<ExtendedTestContext>('Styles properly get reset if the positioning changes while open', async function (assert) {
+    const self = this;
+
     assert.expect(4);
     let publicApi: Dropdown | null = null;
     this.registerAPI = (api) => (publicApi = api);
@@ -1450,14 +1681,20 @@ module('Integration | Component | basic-dropdown', function (hooks) {
       };
     };
 
-    await render<ExtendedTestContext>(hbs`
-      <BasicDropdown @registerAPI={{this.registerAPI}} @calculatePosition={{this.calculatePosition}} as |dropdown|>
-        <dropdown.Trigger>Click me</dropdown.Trigger>
-        <dropdown.Content>
-          <div id="dropdown-is-opened"></div>
-        </dropdown.Content>
-      </BasicDropdown>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <BasicDropdown
+          @registerAPI={{self.registerAPI}}
+          @calculatePosition={{self.calculatePosition}}
+          as |dropdown|
+        >
+          <dropdown.Trigger>Click me</dropdown.Trigger>
+          <dropdown.Content>
+            <div id="dropdown-is-opened"></div>
+          </dropdown.Content>
+        </BasicDropdown>
+      </template>,
+    );
 
     await click(
       getRootNode(this.element).querySelector(
@@ -1504,16 +1741,18 @@ module('Integration | Component | basic-dropdown', function (hooks) {
     wormhole.id = 'ember-basic-dropdown-wormhole';
     document.getElementById('ember-testing')?.appendChild(wormhole);
 
-    await render<ExtendedTestContext>(hbs`
-      <Shadow>
-        <BasicDropdown as |dropdown|>
-          <dropdown.Trigger>Click me</dropdown.Trigger>
-          <dropdown.Content>
-            <div id="dropdown-is-opened"></div>
-          </dropdown.Content>
-        </BasicDropdown>
-      </Shadow>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <Shadow>
+          <BasicDropdown as |dropdown|>
+            <dropdown.Trigger>Click me</dropdown.Trigger>
+            <dropdown.Content>
+              <div id="dropdown-is-opened"></div>
+            </dropdown.Content>
+          </BasicDropdown>
+        </Shadow>
+      </template>,
+    );
 
     assert
       .dom('#dropdown-is-opened', getRootNode(this.element))
@@ -1545,16 +1784,21 @@ module('Integration | Component | basic-dropdown', function (hooks) {
   });
 
   test<ExtendedTestContext>('Shadow dom: Its `toggle` action opens and closes the dropdown with renderInPlace', async function (assert) {
-    await render(hbs`
+    await render(
+      <template>
         <Shadow>
-            <BasicDropdown @renderInPlace={{true}} as |dropdown|>
-                <dropdown.Trigger>Click me</dropdown.Trigger>
-                <dropdown.Content>
-                    <div style="height: 100px; width: 100px; background: black" id="dropdown-is-opened"></div>
-                </dropdown.Content>
-            </BasicDropdown>
+          <BasicDropdown @renderInPlace={{true}} as |dropdown|>
+            <dropdown.Trigger>Click me</dropdown.Trigger>
+            <dropdown.Content>
+              <div
+                style="height: 100px; width: 100px; background: black"
+                id="dropdown-is-opened"
+              ></div>
+            </dropdown.Content>
+          </BasicDropdown>
         </Shadow>
-    `);
+      </template>,
+    );
 
     assert
       .dom('#dropdown-is-opened', getRootNode(this.element))
@@ -1614,18 +1858,20 @@ module('Integration | Component | basic-dropdown', function (hooks) {
   });
 
   test<ExtendedTestContext>('Shadow dom: Its `toggle` action opens and closes the dropdown when wormhole is inside shadow dom', async function (assert) {
-    await render(hbs`
-      <Shadow>
-        <BasicDropdown @destination="wormhole-in-shadow-dom" as |dropdown|>
-          <dropdown.Trigger>Click me</dropdown.Trigger>
-          <dropdown.Content>
-            <div id="dropdown-is-opened"></div>
-          </dropdown.Content>
-        </BasicDropdown>
+    await render(
+      <template>
+        <Shadow>
+          <BasicDropdown @destination="wormhole-in-shadow-dom" as |dropdown|>
+            <dropdown.Trigger>Click me</dropdown.Trigger>
+            <dropdown.Content>
+              <div id="dropdown-is-opened"></div>
+            </dropdown.Content>
+          </BasicDropdown>
 
-        <div id="wormhole-in-shadow-dom"></div>
-      </Shadow>
-    `);
+          <div id="wormhole-in-shadow-dom"></div>
+        </Shadow>
+      </template>,
+    );
 
     assert
       .dom('#dropdown-is-opened', getRootNode(this.element))
diff --git a/test-app/tests/integration/components/basic-dropdown-wormhole-test.ts b/test-app/tests/integration/components/basic-dropdown-wormhole-test.gts
similarity index 83%
rename from test-app/tests/integration/components/basic-dropdown-wormhole-test.ts
rename to test-app/tests/integration/components/basic-dropdown-wormhole-test.gts
index dfbd1a08..0b7ed71a 100644
--- a/test-app/tests/integration/components/basic-dropdown-wormhole-test.ts
+++ b/test-app/tests/integration/components/basic-dropdown-wormhole-test.gts
@@ -1,9 +1,9 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { hbs } from 'ember-cli-htmlbars';
 import { render } from '@ember/test-helpers';
 import { setConfig } from 'ember-basic-dropdown/config';
 import { defaultBasicDropdownConfig } from 'test-app/app';
+import BasicDropdownWormhole from 'ember-basic-dropdown/components/basic-dropdown-wormhole';
 import type { TestContext } from '@ember/test-helpers';
 
 interface ExtendedTestContext extends TestContext {
@@ -22,9 +22,7 @@ module('Integration | Component | basic-dropdown-wormhole', function (hooks) {
   });
 
   test<ExtendedTestContext>('Is present', async function (assert) {
-    await render(hbs`
-      <BasicDropdownWormhole />
-    `);
+    await render(<template><BasicDropdownWormhole /></template>);
 
     assert
       .dom('#ember-basic-dropdown-wormhole', getRootNode(this.element))
@@ -37,7 +35,7 @@ module('Integration | Component | basic-dropdown-wormhole', function (hooks) {
       destination: 'custom-wormhole-destination',
     });
 
-    await render(hbs`<BasicDropdownWormhole />`);
+    await render(<template><BasicDropdownWormhole /></template>);
 
     assert
       .dom(
@@ -55,9 +53,9 @@ module('Integration | Component | basic-dropdown-wormhole', function (hooks) {
   });
 
   test<ExtendedTestContext>('Has class my-custom-class', async function (assert) {
-    await render(hbs`
-      <BasicDropdownWormhole class="my-custom-class" />
-    `);
+    await render(
+      <template><BasicDropdownWormhole class="my-custom-class" /></template>,
+    );
 
     assert
       .dom('.my-custom-class', getRootNode(this.element))
diff --git a/test-app/tests/integration/components/content-test.ts b/test-app/tests/integration/components/content-test.gts
similarity index 73%
rename from test-app/tests/integration/components/content-test.ts
rename to test-app/tests/integration/components/content-test.gts
index 9cb2a696..edfb800e 100644
--- a/test-app/tests/integration/components/content-test.ts
+++ b/test-app/tests/integration/components/content-test.gts
@@ -1,6 +1,5 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { hbs } from 'ember-cli-htmlbars';
 import {
   render,
   click,
@@ -8,6 +7,9 @@ import {
   settled,
   type TestContext,
 } from '@ember/test-helpers';
+import BasicDropdownContent from 'ember-basic-dropdown/components/basic-dropdown-content';
+import { on } from '@ember/modifier';
+import { fn } from '@ember/helper';
 import type { Dropdown } from 'ember-basic-dropdown/types';
 
 interface ExtendedTestContext extends TestContext {
@@ -35,6 +37,8 @@ module('Integration | Component | basic-dropdown-content', function (hooks) {
 
   // Basic rendering
   test<ExtendedTestContext>('If the dropdown is open renders the given block in a div with class `ember-basic-dropdown-content`', async function (assert) {
+    const self = this;
+
     assert.expect(2);
     this.dropdown = {
       uniqueId: 'e123',
@@ -54,10 +58,15 @@ module('Integration | Component | basic-dropdown-content', function (hooks) {
         },
       },
     };
-    await render<ExtendedTestContext>(hbs`
-      <div id="destination-el"></div>
-      <BasicDropdownContent @dropdown={{this.dropdown}} @destination="destination-el">Lorem ipsum</BasicDropdownContent>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <div id="destination-el"></div>
+        <BasicDropdownContent
+          @dropdown={{self.dropdown}}
+          @destination="destination-el"
+        >Lorem ipsum</BasicDropdownContent>
+      </template>,
+    );
     assert
       .dom('.ember-basic-dropdown-content', getRootNode(this.element))
       .hasText('Lorem ipsum', 'It contains the given block');
@@ -70,6 +79,8 @@ module('Integration | Component | basic-dropdown-content', function (hooks) {
   });
 
   test<ExtendedTestContext>('If a `@defaultClass` argument is provided to the content, its value is added to the list of classes', async function (assert) {
+    const self = this;
+
     assert.expect(2);
     this.dropdown = {
       uniqueId: 'e123',
@@ -89,10 +100,16 @@ module('Integration | Component | basic-dropdown-content', function (hooks) {
         },
       },
     };
-    await render<ExtendedTestContext>(hbs`
-      <div id="destination-el"></div>
-      <BasicDropdownContent @dropdown={{this.dropdown}} @destination="destination-el" @defaultClass="extra-class">Lorem ipsum</BasicDropdownContent>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <div id="destination-el"></div>
+        <BasicDropdownContent
+          @dropdown={{self.dropdown}}
+          @destination="destination-el"
+          @defaultClass="extra-class"
+        >Lorem ipsum</BasicDropdownContent>
+      </template>,
+    );
     assert
       .dom('.ember-basic-dropdown-content', getRootNode(this.element))
       .hasText('Lorem ipsum', 'It contains the given block');
@@ -102,6 +119,8 @@ module('Integration | Component | basic-dropdown-content', function (hooks) {
   });
 
   test<ExtendedTestContext>('If the dropdown is closed, nothing is rendered', async function (assert) {
+    const self = this;
+
     assert.expect(1);
     this.dropdown = {
       uniqueId: 'e123',
@@ -121,16 +140,23 @@ module('Integration | Component | basic-dropdown-content', function (hooks) {
         },
       },
     };
-    await render<ExtendedTestContext>(hbs`
-      <div id="destination-el"></div>
-      <BasicDropdownContent @dropdown={{this.dropdown}} @destination="destination-el">Lorem ipsum</BasicDropdownContent>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <div id="destination-el"></div>
+        <BasicDropdownContent
+          @dropdown={{self.dropdown}}
+          @destination="destination-el"
+        >Lorem ipsum</BasicDropdownContent>
+      </template>,
+    );
     assert
       .dom('.ember-basic-dropdown-content', getRootNode(this.element))
       .doesNotExist('Nothing is rendered');
   });
 
   test<ExtendedTestContext>('If it receives `@renderInPlace={{true}}`, it is rendered right here instead of elsewhere', async function (assert) {
+    const self = this;
+
     assert.expect(2);
     this.dropdown = {
       uniqueId: 'e123',
@@ -150,9 +176,15 @@ module('Integration | Component | basic-dropdown-content', function (hooks) {
         },
       },
     };
-    await render<ExtendedTestContext>(hbs`
-      <BasicDropdownContent @dropdown={{this.dropdown}} @destination="destination-el" @renderInPlace={{true}}>Lorem ipsum</BasicDropdownContent>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <BasicDropdownContent
+          @dropdown={{self.dropdown}}
+          @destination="destination-el"
+          @renderInPlace={{true}}
+        >Lorem ipsum</BasicDropdownContent>
+      </template>,
+    );
     assert
       .dom('.ember-basic-dropdown-content', getRootNode(this.element))
       .exists('It is rendered in the spot');
@@ -165,6 +197,8 @@ module('Integration | Component | basic-dropdown-content', function (hooks) {
   });
 
   test<ExtendedTestContext>('It derives the ID of the content from the `uniqueId` property of of the dropdown', async function (assert) {
+    const self = this;
+
     assert.expect(1);
     this.dropdown = {
       uniqueId: 'e123',
@@ -184,10 +218,15 @@ module('Integration | Component | basic-dropdown-content', function (hooks) {
         },
       },
     };
-    await render<ExtendedTestContext>(hbs`
-      <div id="destination-el"></div>
-      <BasicDropdownContent @dropdown={{this.dropdown}} @destination="destination-el">Lorem ipsum</BasicDropdownContent>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <div id="destination-el"></div>
+        <BasicDropdownContent
+          @dropdown={{self.dropdown}}
+          @destination="destination-el"
+        >Lorem ipsum</BasicDropdownContent>
+      </template>,
+    );
     assert
       .dom('.ember-basic-dropdown-content', getRootNode(this.element))
       .hasAttribute(
@@ -198,6 +237,8 @@ module('Integration | Component | basic-dropdown-content', function (hooks) {
   });
 
   test<ExtendedTestContext>('If it receives `class="foo123"`, the rendered content will have that class along with the default one', async function (assert) {
+    const self = this;
+
     assert.expect(1);
     this.dropdown = {
       uniqueId: 'e123',
@@ -217,16 +258,24 @@ module('Integration | Component | basic-dropdown-content', function (hooks) {
         },
       },
     };
-    await render<ExtendedTestContext>(hbs`
-      <div id="destination-el"></div>
-      <BasicDropdownContent @dropdown={{this.dropdown}} @destination="destination-el" class="foo123">Lorem ipsum</BasicDropdownContent>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <div id="destination-el"></div>
+        <BasicDropdownContent
+          @dropdown={{self.dropdown}}
+          @destination="destination-el"
+          class="foo123"
+        >Lorem ipsum</BasicDropdownContent>
+      </template>,
+    );
     assert
       .dom('.ember-basic-dropdown-content', getRootNode(this.element))
       .hasClass('foo123', 'The dropdown contains that class');
   });
 
   test<ExtendedTestContext>('If it receives `dir="rtl"`, the rendered content will have the attribute set', async function (assert) {
+    const self = this;
+
     assert.expect(1);
     this.dropdown = {
       uniqueId: '',
@@ -246,10 +295,16 @@ module('Integration | Component | basic-dropdown-content', function (hooks) {
         },
       },
     };
-    await render<ExtendedTestContext>(hbs`
-      <div id="destination-el"></div>
-      <BasicDropdownContent @dropdown={{this.dropdown}} @destination="destination-el" dir="rtl">Lorem ipsum</BasicDropdownContent>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <div id="destination-el"></div>
+        <BasicDropdownContent
+          @dropdown={{self.dropdown}}
+          @destination="destination-el"
+          dir="rtl"
+        >Lorem ipsum</BasicDropdownContent>
+      </template>,
+    );
     assert
       .dom('.ember-basic-dropdown-content', getRootNode(this.element))
       .hasAttribute('dir', 'rtl', 'The dropdown has `dir="rtl"`');
@@ -257,6 +312,8 @@ module('Integration | Component | basic-dropdown-content', function (hooks) {
 
   // Clicking while the component is opened
   test<ExtendedTestContext>('Clicking anywhere in the app outside the component will invoke the close action on the dropdown', async function (assert) {
+    const self = this;
+
     assert.expect(1);
     this.dropdown = {
       uniqueId: 'e123',
@@ -278,16 +335,24 @@ module('Integration | Component | basic-dropdown-content', function (hooks) {
         },
       },
     };
-    await render<ExtendedTestContext>(hbs`
-      <div id="destination-el"></div>
-      <div id="other-div"></div>
-      <BasicDropdownContent @dropdown={{this.dropdown}} @rootEventType="mousedown" @destination="destination-el">Lorem ipsum</BasicDropdownContent>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <div id="destination-el"></div>
+        <div id="other-div"></div>
+        <BasicDropdownContent
+          @dropdown={{self.dropdown}}
+          @rootEventType="mousedown"
+          @destination="destination-el"
+        >Lorem ipsum</BasicDropdownContent>
+      </template>,
+    );
 
     await click('#other-div');
   });
 
   test<ExtendedTestContext>('Specifying the rootEventType as click will not close a component if it is opened', async function (assert) {
+    const self = this;
+
     assert.expect(0);
     this.dropdown = {
       uniqueId: 'e123',
@@ -309,16 +374,24 @@ module('Integration | Component | basic-dropdown-content', function (hooks) {
         },
       },
     };
-    await render<ExtendedTestContext>(hbs`
-      <div id="destination-el"></div>
-      <div id="other-div"></div>
-      <BasicDropdownContent @dropdown={{this.dropdown}} @rootEventType="click" @destination="destination-el">Lorem ipsum</BasicDropdownContent>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <div id="destination-el"></div>
+        <div id="other-div"></div>
+        <BasicDropdownContent
+          @dropdown={{self.dropdown}}
+          @rootEventType="click"
+          @destination="destination-el"
+        >Lorem ipsum</BasicDropdownContent>
+      </template>,
+    );
 
     await triggerEvent('#other-div', 'mousedown');
   });
 
   test<ExtendedTestContext>('Specifying the rootEventType as mousedown will close a component if it is opened', async function (assert) {
+    const self = this;
+
     assert.expect(1);
     this.dropdown = {
       uniqueId: 'e123',
@@ -340,16 +413,24 @@ module('Integration | Component | basic-dropdown-content', function (hooks) {
         },
       },
     };
-    await render<ExtendedTestContext>(hbs`
-      <div id="destination-el"></div>
-      <div id="other-div"></div>
-      <BasicDropdownContent @dropdown={{this.dropdown}} @rootEventType="mousedown" @destination="destination-el">Lorem ipsum</BasicDropdownContent>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <div id="destination-el"></div>
+        <div id="other-div"></div>
+        <BasicDropdownContent
+          @dropdown={{self.dropdown}}
+          @rootEventType="mousedown"
+          @destination="destination-el"
+        >Lorem ipsum</BasicDropdownContent>
+      </template>,
+    );
 
     await triggerEvent('#other-div', 'mousedown');
   });
 
   test<ExtendedTestContext>("Clicking anywhere inside the dropdown content doesn't invoke the close action", async function (assert) {
+    const self = this;
+
     assert.expect(0);
     this.dropdown = {
       uniqueId: 'e123',
@@ -372,14 +453,21 @@ module('Integration | Component | basic-dropdown-content', function (hooks) {
       },
     };
 
-    await render<ExtendedTestContext>(hbs`
-      <div id="destination-el"></div>
-      <BasicDropdownContent @dropdown={{this.dropdown}} @destination="destination-el"><div id="inside-div">Lorem ipsum</div></BasicDropdownContent>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <div id="destination-el"></div>
+        <BasicDropdownContent
+          @dropdown={{self.dropdown}}
+          @destination="destination-el"
+        ><div id="inside-div">Lorem ipsum</div></BasicDropdownContent>
+      </template>,
+    );
     await click('#inside-div');
   });
 
   test<ExtendedTestContext>("Clicking in inside the a dropdown content nested inside another dropdown content doesn't invoke the close action on neither of them if the second is rendered in place", async function (assert) {
+    const self = this;
+
     assert.expect(0);
     this.dropdown1 = {
       uniqueId: 'ember1',
@@ -421,22 +509,33 @@ module('Integration | Component | basic-dropdown-content', function (hooks) {
         },
       },
     };
-    await render<ExtendedTestContext>(hbs`
-      <div id="destination-el"></div>
-      <div id="fake-trigger"></div>
-      <BasicDropdownContent @dropdown={{this.dropdown1}} @destination="destination-el">
-        Lorem ipsum
-        <BasicDropdownContent @dropdown={{this.dropdown2}} @destination="destination-el" @renderInPlace={{true}}>
-          <div id="nested-content-div">dolor sit amet</div>
+    await render<ExtendedTestContext>(
+      <template>
+        <div id="destination-el"></div>
+        <div id="fake-trigger"></div>
+        <BasicDropdownContent
+          @dropdown={{self.dropdown1}}
+          @destination="destination-el"
+        >
+          Lorem ipsum
+          <BasicDropdownContent
+            @dropdown={{self.dropdown2}}
+            @destination="destination-el"
+            @renderInPlace={{true}}
+          >
+            <div id="nested-content-div">dolor sit amet</div>
+          </BasicDropdownContent>
         </BasicDropdownContent>
-      </BasicDropdownContent>
-    `);
+      </template>,
+    );
 
     await click('#nested-content-div');
   });
 
   // Touch gestures while the component is opened
   test<ExtendedTestContext>('Tapping anywhere in the app outside the component will invoke the close action on the dropdown', async function (assert) {
+    const self = this;
+
     assert.expect(1);
     this.dropdown = {
       uniqueId: 'e123',
@@ -458,17 +557,25 @@ module('Integration | Component | basic-dropdown-content', function (hooks) {
         },
       },
     };
-    await render<ExtendedTestContext>(hbs`
-      <div id="destination-el"></div>
-      <div id="other-div"></div>
-      <BasicDropdownContent @dropdown={{this.dropdown}} @destination="destination-el" @isTouchDevice={{true}}>Lorem ipsum</BasicDropdownContent>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <div id="destination-el"></div>
+        <div id="other-div"></div>
+        <BasicDropdownContent
+          @dropdown={{self.dropdown}}
+          @destination="destination-el"
+          @isTouchDevice={{true}}
+        >Lorem ipsum</BasicDropdownContent>
+      </template>,
+    );
 
     await triggerEvent('#other-div', 'touchstart');
     await triggerEvent('#other-div', 'touchend');
   });
 
   test<ExtendedTestContext>('Scrolling (touchstart + touchmove + touchend) anywhere in the app outside the component will invoke the close action on the dropdown', async function (assert) {
+    const self = this;
+
     assert.expect(0);
     this.dropdown = {
       uniqueId: 'e123',
@@ -490,11 +597,17 @@ module('Integration | Component | basic-dropdown-content', function (hooks) {
         },
       },
     };
-    await render<ExtendedTestContext>(hbs`
-      <div id="destination-el"></div>
-      <div id="other-div"></div>
-      <BasicDropdownContent @dropdown={{this.dropdown}} @destination="destination-el" @isTouchDevice={{true}}>Lorem ipsum</BasicDropdownContent>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <div id="destination-el"></div>
+        <div id="other-div"></div>
+        <BasicDropdownContent
+          @dropdown={{self.dropdown}}
+          @destination="destination-el"
+          @isTouchDevice={{true}}
+        >Lorem ipsum</BasicDropdownContent>
+      </template>,
+    );
 
     await triggerEvent('#other-div', 'touchstart');
     await triggerEvent('#other-div', 'touchmove', {
@@ -506,6 +619,8 @@ module('Integration | Component | basic-dropdown-content', function (hooks) {
   });
 
   test<ExtendedTestContext>('Using stylus on touch device will handle scroll/tap to fire close action properly', async function (assert) {
+    const self = this;
+
     assert.expect(1);
     this.dropdown = {
       uniqueId: 'e123',
@@ -527,11 +642,17 @@ module('Integration | Component | basic-dropdown-content', function (hooks) {
         },
       },
     };
-    await render<ExtendedTestContext>(hbs`
-      <div id="destination-el"></div>
-      <div id="other-div"></div>
-      <BasicDropdownContent @dropdown={{this.dropdown}} @destination="destination-el" @isTouchDevice={{true}}>Lorem ipsum</BasicDropdownContent>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <div id="destination-el"></div>
+        <div id="other-div"></div>
+        <BasicDropdownContent
+          @dropdown={{self.dropdown}}
+          @destination="destination-el"
+          @isTouchDevice={{true}}
+        >Lorem ipsum</BasicDropdownContent>
+      </template>,
+    );
 
     // scroll
     await triggerEvent('#other-div', 'touchstart');
@@ -554,6 +675,8 @@ module('Integration | Component | basic-dropdown-content', function (hooks) {
 
   // Arbitrary events
   test<ExtendedTestContext>('The user can attach arbitrary events to the content', async function (assert) {
+    const self = this;
+
     assert.expect(3);
     this.dropdown = {
       uniqueId: 'e123',
@@ -578,17 +701,25 @@ module('Integration | Component | basic-dropdown-content', function (hooks) {
       assert.deepEqual(api, this.dropdown, 'The first argument is the API');
       assert.ok(e instanceof window.Event, 'the second argument is an event');
     };
-    await render<ExtendedTestContext>(hbs`
-      <div id="destination-el"></div>
-      <BasicDropdownContent @dropdown={{this.dropdown}} @destination="destination-el" {{on "mouseenter" (fn this.onMouseEnter this.dropdown)}}>
-        Content
-      </BasicDropdownContent>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <div id="destination-el"></div>
+        <BasicDropdownContent
+          @dropdown={{self.dropdown}}
+          @destination="destination-el"
+          {{on "mouseenter" (fn self.onMouseEnter self.dropdown)}}
+        >
+          Content
+        </BasicDropdownContent>
+      </template>,
+    );
     await triggerEvent('.ember-basic-dropdown-content', 'mouseenter');
   });
 
   // Repositining
   test<ExtendedTestContext>('The component is repositioned immediatly when opened', async function (assert) {
+    const self = this;
+
     assert.expect(1);
     this.dropdown = {
       uniqueId: 'e123',
@@ -610,13 +741,20 @@ module('Integration | Component | basic-dropdown-content', function (hooks) {
         },
       },
     };
-    await render<ExtendedTestContext>(hbs`
-      <div id="destination-el"></div>
-      <BasicDropdownContent @dropdown={{this.dropdown}} @destination="destination-el">Lorem ipsum</BasicDropdownContent>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <div id="destination-el"></div>
+        <BasicDropdownContent
+          @dropdown={{self.dropdown}}
+          @destination="destination-el"
+        >Lorem ipsum</BasicDropdownContent>
+      </template>,
+    );
   });
 
   test<ExtendedTestContext>('The component is not repositioned if it is closed', async function (assert) {
+    const self = this;
+
     assert.expect(0);
     this.dropdown = {
       uniqueId: 'e123',
@@ -637,13 +775,20 @@ module('Integration | Component | basic-dropdown-content', function (hooks) {
         },
       },
     };
-    await render<ExtendedTestContext>(hbs`
-      <div id="destination-el"></div>
-      <BasicDropdownContent @dropdown={{this.dropdown}} @destination="destination-el">Lorem ipsum</BasicDropdownContent>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <div id="destination-el"></div>
+        <BasicDropdownContent
+          @dropdown={{self.dropdown}}
+          @destination="destination-el"
+        >Lorem ipsum</BasicDropdownContent>
+      </template>,
+    );
   });
 
   test<ExtendedTestContext>('The component cancels events when preventScroll is true', async function (assert) {
+    const self = this;
+
     assert.expect(4);
     this.dropdown = {
       uniqueId: 'e123',
@@ -664,17 +809,29 @@ module('Integration | Component | basic-dropdown-content', function (hooks) {
       },
     };
 
-    await render<ExtendedTestContext>(hbs`
-      <div id="destination-el"></div>
-      <div id="outer-div" style="width: 100px; height: 100px; overflow: auto;">
-        <div style="width: 200px; height: 200px;">content scroll test</div>
-      </div>
-      <BasicDropdownContent @dropdown={{this.dropdown}} @preventScroll={{true}} @destination="destination-el">
-        <div id="inner-div" style="width: 100px; height: 100px; overflow: auto;">
+    await render<ExtendedTestContext>(
+      <template>
+        <div id="destination-el"></div>
+        <div
+          id="outer-div"
+          style="width: 100px; height: 100px; overflow: auto;"
+        >
           <div style="width: 200px; height: 200px;">content scroll test</div>
         </div>
-      </BasicDropdownContent>
-    `);
+        <BasicDropdownContent
+          @dropdown={{self.dropdown}}
+          @preventScroll={{true}}
+          @destination="destination-el"
+        >
+          <div
+            id="inner-div"
+            style="width: 100px; height: 100px; overflow: auto;"
+          >
+            <div style="width: 200px; height: 200px;">content scroll test</div>
+          </div>
+        </BasicDropdownContent>
+      </template>,
+    );
 
     const innerScrollable = getRootNode(this.element).querySelector(
       '#inner-div',
@@ -723,6 +880,8 @@ module('Integration | Component | basic-dropdown-content', function (hooks) {
   });
 
   test<ExtendedTestContext>('The component is repositioned if the window scrolls', async function (assert) {
+    const self = this;
+
     assert.expect(1);
     let repositions = 0;
     this.dropdown = {
@@ -744,10 +903,15 @@ module('Integration | Component | basic-dropdown-content', function (hooks) {
         },
       },
     };
-    await render<ExtendedTestContext>(hbs`
-      <div id="destination-el"></div>
-      <BasicDropdownContent @dropdown={{this.dropdown}} @destination="destination-el">Lorem ipsum</BasicDropdownContent>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <div id="destination-el"></div>
+        <BasicDropdownContent
+          @dropdown={{self.dropdown}}
+          @destination="destination-el"
+        >Lorem ipsum</BasicDropdownContent>
+      </template>,
+    );
     window.dispatchEvent(new window.Event('scroll'));
     await settled();
     assert.strictEqual(
@@ -758,6 +922,8 @@ module('Integration | Component | basic-dropdown-content', function (hooks) {
   });
 
   test<ExtendedTestContext>('The component is repositioned if the window is resized', async function (assert) {
+    const self = this;
+
     assert.expect(1);
     let repositions = 0;
     this.dropdown = {
@@ -779,10 +945,15 @@ module('Integration | Component | basic-dropdown-content', function (hooks) {
         },
       },
     };
-    await render<ExtendedTestContext>(hbs`
-      <div id="destination-el"></div>
-      <BasicDropdownContent @dropdown={{this.dropdown}} @destination="destination-el">Lorem ipsum</BasicDropdownContent>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <div id="destination-el"></div>
+        <BasicDropdownContent
+          @dropdown={{self.dropdown}}
+          @destination="destination-el"
+        >Lorem ipsum</BasicDropdownContent>
+      </template>,
+    );
     window.dispatchEvent(new window.Event('resize'));
     await settled();
     assert.strictEqual(
@@ -793,6 +964,8 @@ module('Integration | Component | basic-dropdown-content', function (hooks) {
   });
 
   test<ExtendedTestContext>('The component is repositioned if the orientation changes', async function (assert) {
+    const self = this;
+
     assert.expect(1);
     let repositions = 0;
     this.dropdown = {
@@ -814,10 +987,15 @@ module('Integration | Component | basic-dropdown-content', function (hooks) {
         },
       },
     };
-    await render<ExtendedTestContext>(hbs`
-      <div id="destination-el"></div>
-      <BasicDropdownContent @dropdown={{this.dropdown}} @destination="destination-el">Lorem ipsum</BasicDropdownContent>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <div id="destination-el"></div>
+        <BasicDropdownContent
+          @dropdown={{self.dropdown}}
+          @destination="destination-el"
+        >Lorem ipsum</BasicDropdownContent>
+      </template>,
+    );
     window.dispatchEvent(new window.Event('orientationchange'));
     await settled();
     assert.strictEqual(
@@ -828,6 +1006,8 @@ module('Integration | Component | basic-dropdown-content', function (hooks) {
   });
 
   test<ExtendedTestContext>('The component is repositioned when the content of the dropdown changes', async function (assert) {
+    const self = this;
+
     assert.expect(1);
     let repositions = 0;
     this.dropdown = {
@@ -849,12 +1029,17 @@ module('Integration | Component | basic-dropdown-content', function (hooks) {
         },
       },
     };
-    await render<ExtendedTestContext>(hbs`
-      <div id="destination-el"></div>
-      <BasicDropdownContent @dropdown={{this.dropdown}} @destination="destination-el">
-        <div id="content-target-div"></div>
-      </BasicDropdownContent>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <div id="destination-el"></div>
+        <BasicDropdownContent
+          @dropdown={{self.dropdown}}
+          @destination="destination-el"
+        >
+          <div id="content-target-div"></div>
+        </BasicDropdownContent>
+      </template>,
+    );
     const target = getRootNode(this.element).querySelector(
       '#content-target-div',
     ) as HTMLElement;
@@ -865,6 +1050,8 @@ module('Integration | Component | basic-dropdown-content', function (hooks) {
   });
 
   test<ExtendedTestContext>('The component is repositioned when the content of the dropdown is changed through ember', async function (assert) {
+    const self = this;
+
     assert.expect(1);
     let repositions = 0;
     this.dropdown = {
@@ -887,20 +1074,27 @@ module('Integration | Component | basic-dropdown-content', function (hooks) {
       },
     };
     this.divVisible = false;
-    await render<ExtendedTestContext>(hbs`
-      <div id="destination-el"></div>
-      <BasicDropdownContent @dropdown={{this.dropdown}} @destination="destination-el">
-        {{#if this.divVisible}}
-          <div></div>
-        {{/if}}
-      </BasicDropdownContent>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <div id="destination-el"></div>
+        <BasicDropdownContent
+          @dropdown={{self.dropdown}}
+          @destination="destination-el"
+        >
+          {{#if self.divVisible}}
+            <div></div>
+          {{/if}}
+        </BasicDropdownContent>
+      </template>,
+    );
     this.set('divVisible', true);
     await settled();
     assert.strictEqual(repositions, 2, 'It was repositioned twice');
   });
 
   test<ExtendedTestContext>('@shouldReposition can be used to control which mutations should trigger a reposition', async function (assert) {
+    const self = this;
+
     assert.expect(2);
     const done = assert.async();
     this.dropdown = {
@@ -936,12 +1130,18 @@ module('Integration | Component | basic-dropdown-content', function (hooks) {
         });
     };
 
-    await render<ExtendedTestContext>(hbs`
-      <div id="destination-el"></div>
-      <BasicDropdownContent @dropdown={{this.dropdown}} @destination="destination-el" @shouldReposition={{this.shouldReposition}}>
-        <div id="content-target-div"></div>
-      </BasicDropdownContent>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <div id="destination-el"></div>
+        <BasicDropdownContent
+          @dropdown={{self.dropdown}}
+          @destination="destination-el"
+          @shouldReposition={{self.shouldReposition}}
+        >
+          <div id="content-target-div"></div>
+        </BasicDropdownContent>
+      </template>,
+    );
     const target = getRootNode(this.element).querySelector(
       '#content-target-div',
     );
@@ -950,6 +1150,8 @@ module('Integration | Component | basic-dropdown-content', function (hooks) {
   });
 
   test<ExtendedTestContext>('A renderInPlace component is repositioned if the window scrolls', async function (assert) {
+    const self = this;
+
     assert.expect(1);
     let repositions = 0;
     this.dropdown = {
@@ -971,10 +1173,16 @@ module('Integration | Component | basic-dropdown-content', function (hooks) {
         },
       },
     };
-    await render<ExtendedTestContext>(hbs`
-      <div id="destination-el"></div>
-      <BasicDropdownContent @dropdown={{this.dropdown}} @renderInPlace={{true}} @destination="destination-el">Lorem ipsum</BasicDropdownContent>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <div id="destination-el"></div>
+        <BasicDropdownContent
+          @dropdown={{self.dropdown}}
+          @renderInPlace={{true}}
+          @destination="destination-el"
+        >Lorem ipsum</BasicDropdownContent>
+      </template>,
+    );
     window.dispatchEvent(new window.Event('scroll'));
     await settled();
     assert.strictEqual(
@@ -986,6 +1194,8 @@ module('Integration | Component | basic-dropdown-content', function (hooks) {
 
   // Overlay
   test<ExtendedTestContext>('If it receives an `overlay=true` option, there is an overlay covering all the screen', async function (assert) {
+    const self = this;
+
     assert.expect(2);
     this.dropdown = {
       uniqueId: 'e123',
@@ -1005,12 +1215,18 @@ module('Integration | Component | basic-dropdown-content', function (hooks) {
         },
       },
     };
-    await render<ExtendedTestContext>(hbs`
-      <div id="destination-el"></div>
-      <BasicDropdownContent @dropdown={{this.dropdown}} @destination="destination-el" @overlay={{true}}>
-        <input type="text" id="test-input-focusin" />
-      </BasicDropdownContent>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <div id="destination-el"></div>
+        <BasicDropdownContent
+          @dropdown={{self.dropdown}}
+          @destination="destination-el"
+          @overlay={{true}}
+        >
+          <input type="text" id="test-input-focusin" />
+        </BasicDropdownContent>
+      </template>,
+    );
     assert
       .dom('.ember-basic-dropdown-overlay', getRootNode(this.element))
       .exists('There is one overlay');
@@ -1065,6 +1281,8 @@ module('Integration | Component | basic-dropdown-content', function (hooks) {
     }
 
     test<ExtendedTestContext>('It properly handles the onFocusIn action', async function (assert) {
+      const self = this;
+
       assert.expect(4);
 
       const onFocusIn = (dropdown: Dropdown, e?: FocusEvent) => {
@@ -1074,16 +1292,18 @@ module('Integration | Component | basic-dropdown-content', function (hooks) {
 
       this.set('onFocusIn', onFocusIn);
 
-      await render<ExtendedTestContext>(hbs`
-        <div id="destination-el"></div>
-        <BasicDropdownContent
-          @dropdown={{this.dropdown}}
-          @destination="destination-el"
-          @onFocusIn={{this.onFocusIn}}
-        >
-          <div id="content-target-div"></div>
-        </BasicDropdownContent>
-      `);
+      await render<ExtendedTestContext>(
+        <template>
+          <div id="destination-el"></div>
+          <BasicDropdownContent
+            @dropdown={{self.dropdown}}
+            @destination="destination-el"
+            @onFocusIn={{self.onFocusIn}}
+          >
+            <div id="content-target-div"></div>
+          </BasicDropdownContent>
+        </template>,
+      );
 
       await triggerEvent(
         getRootNode(this.element).querySelector(
@@ -1094,6 +1314,8 @@ module('Integration | Component | basic-dropdown-content', function (hooks) {
     });
 
     test<ExtendedTestContext>('It properly handles the onFocusOut action', async function (assert) {
+      const self = this;
+
       assert.expect(4);
 
       const onFocusOut = (dropdown: Dropdown, e?: FocusEvent) => {
@@ -1103,16 +1325,18 @@ module('Integration | Component | basic-dropdown-content', function (hooks) {
 
       this.set('onFocusOut', onFocusOut);
 
-      await render<ExtendedTestContext>(hbs`
+      await render<ExtendedTestContext>(
+        <template>
           <div id="destination-el"></div>
           <BasicDropdownContent
-            @dropdown={{this.dropdown}}
+            @dropdown={{self.dropdown}}
             @destination="destination-el"
-            @onFocusOut={{this.onFocusOut}}
+            @onFocusOut={{self.onFocusOut}}
           >
             <div id="content-target-div"></div>
           </BasicDropdownContent>
-        `);
+        </template>,
+      );
 
       await triggerEvent(
         getRootNode(this.element).querySelector(
@@ -1123,6 +1347,8 @@ module('Integration | Component | basic-dropdown-content', function (hooks) {
     });
 
     test<ExtendedTestContext>('It properly handles the onMouseEnter action', async function (assert) {
+      const self = this;
+
       assert.expect(4);
 
       const onMouseEnter = (dropdown: Dropdown, e?: MouseEvent) => {
@@ -1132,16 +1358,18 @@ module('Integration | Component | basic-dropdown-content', function (hooks) {
 
       this.set('onMouseEnter', onMouseEnter);
 
-      await render<ExtendedTestContext>(hbs`
+      await render<ExtendedTestContext>(
+        <template>
           <div id="destination-el"></div>
           <BasicDropdownContent
-            @dropdown={{this.dropdown}}
+            @dropdown={{self.dropdown}}
             @destination="destination-el"
-            @onMouseEnter={{this.onMouseEnter}}
+            @onMouseEnter={{self.onMouseEnter}}
           >
             <div id="content-target-div"></div>
           </BasicDropdownContent>
-        `);
+        </template>,
+      );
 
       await triggerEvent(
         getRootNode(this.element).querySelector(
@@ -1152,6 +1380,8 @@ module('Integration | Component | basic-dropdown-content', function (hooks) {
     });
 
     test<ExtendedTestContext>('It properly handles the onMouseLeave action', async function (assert) {
+      const self = this;
+
       assert.expect(4);
 
       const onMouseLeave = (dropdown: Dropdown, e?: MouseEvent) => {
@@ -1161,16 +1391,18 @@ module('Integration | Component | basic-dropdown-content', function (hooks) {
 
       this.set('onMouseLeave', onMouseLeave);
 
-      await render<ExtendedTestContext>(hbs`
+      await render<ExtendedTestContext>(
+        <template>
           <div id="destination-el"></div>
           <BasicDropdownContent
-            @dropdown={{this.dropdown}}
+            @dropdown={{self.dropdown}}
             @destination="destination-el"
-            @onMouseLeave={{this.onMouseLeave}}
+            @onMouseLeave={{self.onMouseLeave}}
           >
             <div id="content-target-div"></div>
           </BasicDropdownContent>
-        `);
+        </template>,
+      );
 
       await triggerEvent(
         getRootNode(this.element).querySelector(
diff --git a/test-app/tests/integration/components/trigger-test.ts b/test-app/tests/integration/components/trigger-test.gts
similarity index 74%
rename from test-app/tests/integration/components/trigger-test.ts
rename to test-app/tests/integration/components/trigger-test.gts
index d70cd1bc..5bcecf86 100644
--- a/test-app/tests/integration/components/trigger-test.ts
+++ b/test-app/tests/integration/components/trigger-test.gts
@@ -1,6 +1,5 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { hbs } from 'ember-cli-htmlbars';
 import {
   render,
   triggerEvent,
@@ -10,6 +9,9 @@ import {
   focus,
   type TestContext,
 } from '@ember/test-helpers';
+import BasicDropdownTrigger from 'ember-basic-dropdown/components/basic-dropdown-trigger';
+import { on } from '@ember/modifier';
+import { fn } from '@ember/helper';
 import type { Dropdown } from 'ember-basic-dropdown/types';
 
 interface ExtendedTestContext extends TestContext {
@@ -67,16 +69,20 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
   setupRenderingTest(hooks);
 
   test<ExtendedTestContext>('It renders the given block in a div with class `ember-basic-dropdown-trigger`, with no wrapper around', async function (assert) {
+    const self = this;
+
     assert.expect(2);
     this.dropdown = {
       ...dropdownBase,
       uniqueId: '123',
     };
-    await render<ExtendedTestContext>(hbs`
-      <div id="direct-parent">
-        <BasicDropdownTrigger @dropdown={{this.dropdown}}>Click me</BasicDropdownTrigger>
-      </div>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <div id="direct-parent">
+          <BasicDropdownTrigger @dropdown={{self.dropdown}}>Click me</BasicDropdownTrigger>
+        </div>
+      </template>,
+    );
 
     assert
       .dom(
@@ -90,16 +96,23 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
   });
 
   test<ExtendedTestContext>('If a `@defaultClass` argument is provided to the trigger, its value is added to the list of classes', async function (assert) {
+    const self = this;
+
     assert.expect(1);
     this.dropdown = {
       ...dropdownBase,
       uniqueId: '123',
     };
-    await render<ExtendedTestContext>(hbs`
-      <div id="direct-parent">
-        <BasicDropdownTrigger @dropdown={{this.dropdown}} @defaultClass="extra-class">Click me</BasicDropdownTrigger>
-      </div>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <div id="direct-parent">
+          <BasicDropdownTrigger
+            @dropdown={{self.dropdown}}
+            @defaultClass="extra-class"
+          >Click me</BasicDropdownTrigger>
+        </div>
+      </template>,
+    );
 
     assert
       .dom('.ember-basic-dropdown-trigger', getRootNode(this.element))
@@ -108,14 +121,18 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
 
   // Attributes and a11y
   test<ExtendedTestContext>("If it doesn't receive any tabindex, defaults to 0", async function (assert) {
+    const self = this;
+
     assert.expect(1);
     this.dropdown = {
       ...dropdownBase,
       uniqueId: '123',
     };
-    await render<ExtendedTestContext>(hbs`
-      <BasicDropdownTrigger @dropdown={{this.dropdown}}>Click me</BasicDropdownTrigger>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <BasicDropdownTrigger @dropdown={{self.dropdown}}>Click me</BasicDropdownTrigger>
+      </template>,
+    );
 
     assert
       .dom('.ember-basic-dropdown-trigger', getRootNode(this.element))
@@ -123,14 +140,21 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
   });
 
   test<ExtendedTestContext>('If it receives a tabindex={{false}}, it removes the tabindex', async function (assert) {
+    const self = this;
+
     assert.expect(1);
     this.dropdown = {
       ...dropdownBase,
       uniqueId: '123',
     };
-    await render<ExtendedTestContext>(hbs`
-      <BasicDropdownTrigger tabindex={{false}} @dropdown={{this.dropdown}}>Click me</BasicDropdownTrigger>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <BasicDropdownTrigger
+          tabindex={{false}}
+          @dropdown={{self.dropdown}}
+        >Click me</BasicDropdownTrigger>
+      </template>,
+    );
 
     assert
       .dom('.ember-basic-dropdown-trigger', getRootNode(this.element))
@@ -138,14 +162,18 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
   });
 
   test<ExtendedTestContext>('If it receives `tabindex="3"`, the tabindex of the element is 3', async function (assert) {
+    const self = this;
+
     assert.expect(1);
     this.dropdown = {
       ...dropdownBase,
       uniqueId: '123',
     };
-    await render<ExtendedTestContext>(hbs`
-      <BasicDropdownTrigger @dropdown={{this.dropdown}} tabindex="3">Click me</BasicDropdownTrigger>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <BasicDropdownTrigger @dropdown={{self.dropdown}} tabindex="3">Click me</BasicDropdownTrigger>
+      </template>,
+    );
 
     assert
       .dom('.ember-basic-dropdown-trigger', getRootNode(this.element))
@@ -153,14 +181,19 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
   });
 
   test<ExtendedTestContext>('If it receives `title="something"`, if has that title attribute', async function (assert) {
+    const self = this;
+
     assert.expect(1);
     this.dropdown = {
       ...dropdownBase,
       uniqueId: '123',
     };
-    await render<ExtendedTestContext>(hbs`
-      <BasicDropdownTrigger @dropdown={{this.dropdown}} title="foobar">Click me</BasicDropdownTrigger>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <BasicDropdownTrigger @dropdown={{self.dropdown}} title="foobar">Click
+          me</BasicDropdownTrigger>
+      </template>,
+    );
 
     assert
       .dom('.ember-basic-dropdown-trigger', getRootNode(this.element))
@@ -168,14 +201,19 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
   });
 
   test<ExtendedTestContext>('If it receives `id="some-id"`, if has that id', async function (assert) {
+    const self = this;
+
     assert.expect(1);
     this.dropdown = {
       ...dropdownBase,
       uniqueId: '123',
     };
-    await render<ExtendedTestContext>(hbs`
-      <BasicDropdownTrigger @dropdown={{this.dropdown}} id="my-own-id">Click me</BasicDropdownTrigger>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <BasicDropdownTrigger @dropdown={{self.dropdown}} id="my-own-id">Click
+          me</BasicDropdownTrigger>
+      </template>,
+    );
 
     assert
       .dom('.ember-basic-dropdown-trigger', getRootNode(this.element))
@@ -183,15 +221,19 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
   });
 
   test<ExtendedTestContext>("If the dropdown is disabled, the trigger doesn't have tabindex attribute", async function (assert) {
+    const self = this;
+
     assert.expect(1);
     this.dropdown = {
       ...dropdownBase,
       uniqueId: '123',
       disabled: true,
     };
-    await render<ExtendedTestContext>(hbs`
-      <BasicDropdownTrigger @dropdown={{this.dropdown}}>Click me</BasicDropdownTrigger>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <BasicDropdownTrigger @dropdown={{self.dropdown}}>Click me</BasicDropdownTrigger>
+      </template>,
+    );
 
     assert
       .dom('.ember-basic-dropdown-trigger', getRootNode(this.element))
@@ -199,15 +241,19 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
   });
 
   test<ExtendedTestContext>('If it belongs to a disabled dropdown, it gets an `aria-disabled=true` attribute for a11y', async function (assert) {
+    const self = this;
+
     assert.expect(2);
     this.dropdown = {
       ...dropdownBase,
       uniqueId: '123',
       disabled: true,
     };
-    await render<ExtendedTestContext>(hbs`
-      <BasicDropdownTrigger @dropdown={{this.dropdown}}>Click me</BasicDropdownTrigger>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <BasicDropdownTrigger @dropdown={{self.dropdown}}>Click me</BasicDropdownTrigger>
+      </template>,
+    );
 
     assert
       .dom('.ember-basic-dropdown-trigger', getRootNode(this.element))
@@ -219,15 +265,19 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
   });
 
   test<ExtendedTestContext>('If the received dropdown is open, it has an `aria-expanded="true"` attribute, otherwise `"false"`', async function (assert) {
+    const self = this;
+
     assert.expect(2);
     this.dropdown = {
       ...dropdownBase,
       uniqueId: '123',
       isOpen: false,
     };
-    await render<ExtendedTestContext>(hbs`
-      <BasicDropdownTrigger @dropdown={{this.dropdown}}>Click me</BasicDropdownTrigger>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <BasicDropdownTrigger @dropdown={{self.dropdown}}>Click me</BasicDropdownTrigger>
+      </template>,
+    );
     assert
       .dom('.ember-basic-dropdown-trigger', getRootNode(this.element))
       .hasAttribute('aria-expanded', 'false', 'the aria-expanded is false');
@@ -238,28 +288,40 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
   });
 
   test<ExtendedTestContext>('If it has an `aria-controls="foo123"` attribute pointing to the id of the content', async function (assert) {
+    const self = this;
+
     assert.expect(1);
     this.dropdown = {
       ...dropdownBase,
       uniqueId: '123',
     };
-    await render<ExtendedTestContext>(hbs`
-      <BasicDropdownTrigger @dropdown={{this.dropdown}}>Click me</BasicDropdownTrigger>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <BasicDropdownTrigger @dropdown={{self.dropdown}}>Click me</BasicDropdownTrigger>
+      </template>,
+    );
     assert
       .dom('.ember-basic-dropdown-trigger', getRootNode(this.element))
       .hasAttribute('aria-controls', 'ember-basic-dropdown-content-123');
   });
 
   test<ExtendedTestContext>('If it receives `@htmlTag`, the trigger uses that tag name', async function (assert) {
+    const self = this;
+
     assert.expect(2);
     this.dropdown = {
       ...dropdownBase,
       uniqueId: '123',
     };
-    await render<ExtendedTestContext>(hbs`
-      <BasicDropdownTrigger @dropdown={{this.dropdown}} @htmlTag="button" type="button">Click me</BasicDropdownTrigger>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <BasicDropdownTrigger
+          @dropdown={{self.dropdown}}
+          @htmlTag="button"
+          type="button"
+        >Click me</BasicDropdownTrigger>
+      </template>,
+    );
     assert.strictEqual(
       (
         getRootNode(this.element).querySelector(
@@ -274,56 +336,81 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
   });
 
   test<ExtendedTestContext>('If it receives `role="presentation"` it gets that attribute', async function (assert) {
+    const self = this;
+
     assert.expect(1);
     this.dropdown = {
       ...dropdownBase,
       uniqueId: '123',
     };
-    await render<ExtendedTestContext>(hbs`
-      <BasicDropdownTrigger @dropdown={{this.dropdown}} role="presentation">Click me</BasicDropdownTrigger>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <BasicDropdownTrigger
+          @dropdown={{self.dropdown}}
+          role="presentation"
+        >Click me</BasicDropdownTrigger>
+      </template>,
+    );
     assert
       .dom('.ember-basic-dropdown-trigger', getRootNode(this.element))
       .hasAttribute('role', 'presentation');
   });
 
   test<ExtendedTestContext>('If it receives `aria-owns="custom-owns"` it gets that attribute', async function (assert) {
+    const self = this;
+
     assert.expect(1);
     this.dropdown = {
       ...dropdownBase,
       uniqueId: '123',
     };
-    await render<ExtendedTestContext>(hbs`
-      <BasicDropdownTrigger @dropdown={{this.dropdown}} aria-owns="custom-owns">Click me</BasicDropdownTrigger>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <BasicDropdownTrigger
+          @dropdown={{self.dropdown}}
+          aria-owns="custom-owns"
+        >Click me</BasicDropdownTrigger>
+      </template>,
+    );
     assert
       .dom('.ember-basic-dropdown-trigger', getRootNode(this.element))
       .hasAttribute('aria-owns', 'custom-owns');
   });
 
   test<ExtendedTestContext>('If it receives `aria-controls="custom-controls"` it gets that attribute', async function (assert) {
+    const self = this;
+
     assert.expect(1);
     this.dropdown = {
       ...dropdownBase,
       uniqueId: '123',
     };
-    await render<ExtendedTestContext>(hbs`
-      <BasicDropdownTrigger @dropdown={{this.dropdown}} aria-controls="custom-controls">Click me</BasicDropdownTrigger>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <BasicDropdownTrigger
+          @dropdown={{self.dropdown}}
+          aria-controls="custom-controls"
+        >Click me</BasicDropdownTrigger>
+      </template>,
+    );
     assert
       .dom('.ember-basic-dropdown-trigger', getRootNode(this.element))
       .hasAttribute('aria-controls', 'custom-controls');
   });
 
   test<ExtendedTestContext>('If it does not receive an specific `role`, the default is `button`', async function (assert) {
+    const self = this;
+
     assert.expect(1);
     this.dropdown = {
       ...dropdownBase,
       uniqueId: '123',
     };
-    await render<ExtendedTestContext>(hbs`
-      <BasicDropdownTrigger @dropdown={{this.dropdown}}>Click me</BasicDropdownTrigger>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <BasicDropdownTrigger @dropdown={{self.dropdown}}>Click me</BasicDropdownTrigger>
+      </template>,
+    );
     assert
       .dom('.ember-basic-dropdown-trigger', getRootNode(this.element))
       .hasAttribute('role', 'button');
@@ -331,6 +418,8 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
 
   // Custom actions
   test<ExtendedTestContext>('the user can bind arbitrary events to the trigger', async function (assert) {
+    const self = this;
+
     assert.expect(2);
     this.dropdown = {
       ...dropdownBase,
@@ -347,9 +436,14 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
         'It receives the event as second argument',
       );
     };
-    await render<ExtendedTestContext>(hbs`
-      <BasicDropdownTrigger @dropdown={{this.dropdown}} {{on "mouseenter" (fn this.onMouseEnter this.dropdown)}}>Click me</BasicDropdownTrigger>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <BasicDropdownTrigger
+          @dropdown={{self.dropdown}}
+          {{on "mouseenter" (fn self.onMouseEnter self.dropdown)}}
+        >Click me</BasicDropdownTrigger>
+      </template>,
+    );
     await triggerEvent(
       getRootNode(this.element).querySelector(
         '.ember-basic-dropdown-trigger',
@@ -360,6 +454,8 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
 
   // Default behaviour
   test<ExtendedTestContext>('click events invoke the `toggle` action on the dropdown by default', async function (assert) {
+    const self = this;
+
     assert.expect(3);
     this.dropdown = {
       ...dropdownBase,
@@ -380,9 +476,11 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
         },
       },
     };
-    await render<ExtendedTestContext>(hbs`
-      <BasicDropdownTrigger @dropdown={{this.dropdown}}>Click me</BasicDropdownTrigger>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <BasicDropdownTrigger @dropdown={{self.dropdown}}>Click me</BasicDropdownTrigger>
+      </template>,
+    );
     await triggerEvent(
       getRootNode(this.element).querySelector(
         '.ember-basic-dropdown-trigger',
@@ -392,6 +490,8 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
   });
 
   test<ExtendedTestContext>('mousedown events DO NOT invoke the `toggle` action on the dropdown by default', async function (assert) {
+    const self = this;
+
     assert.expect(0);
     this.dropdown = {
       ...dropdownBase,
@@ -403,9 +503,11 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
         },
       },
     };
-    await render<ExtendedTestContext>(hbs`
-      <BasicDropdownTrigger @dropdown={{this.dropdown}}>Click me</BasicDropdownTrigger>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <BasicDropdownTrigger @dropdown={{self.dropdown}}>Click me</BasicDropdownTrigger>
+      </template>,
+    );
     await triggerEvent(
       getRootNode(this.element).querySelector(
         '.ember-basic-dropdown-trigger',
@@ -415,6 +517,8 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
   });
 
   test<ExtendedTestContext>('click events DO NOT invoke the `toggle` action on the dropdown if `@eventType="mousedown"`', async function (assert) {
+    const self = this;
+
     assert.expect(0);
     this.dropdown = {
       ...dropdownBase,
@@ -426,9 +530,14 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
         },
       },
     };
-    await render<ExtendedTestContext>(hbs`
-      <BasicDropdownTrigger @dropdown={{this.dropdown}} @eventType="mousedown">Click me</BasicDropdownTrigger>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <BasicDropdownTrigger
+          @dropdown={{self.dropdown}}
+          @eventType="mousedown"
+        >Click me</BasicDropdownTrigger>
+      </template>,
+    );
     await triggerEvent(
       getRootNode(this.element).querySelector(
         '.ember-basic-dropdown-trigger',
@@ -438,6 +547,8 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
   });
 
   test<ExtendedTestContext>('mousedown events invoke the `toggle` action on the dropdown if `eventType="mousedown"', async function (assert) {
+    const self = this;
+
     assert.expect(3);
     this.dropdown = {
       ...dropdownBase,
@@ -458,9 +569,14 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
         },
       },
     };
-    await render<ExtendedTestContext>(hbs`
-      <BasicDropdownTrigger @dropdown={{this.dropdown}} @eventType="mousedown">Click me</BasicDropdownTrigger>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <BasicDropdownTrigger
+          @dropdown={{self.dropdown}}
+          @eventType="mousedown"
+        >Click me</BasicDropdownTrigger>
+      </template>,
+    );
     await triggerEvent(
       getRootNode(this.element).querySelector(
         '.ember-basic-dropdown-trigger',
@@ -470,6 +586,8 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
   });
 
   test<ExtendedTestContext>('when `stopPropagation` is true the `click` event does not bubble', async function (assert) {
+    const self = this;
+
     assert.expect(3);
     this.handlerInParent = () =>
       assert.ok(false, 'This should never be called');
@@ -493,11 +611,17 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
         },
       },
     };
-    await render<ExtendedTestContext>(hbs`
-      <div role="button" {{on "click" this.handlerInParent}}>
-        <BasicDropdownTrigger @dropdown={{this.dropdown}} @stopPropagation={{true}} role="presentation">Click me</BasicDropdownTrigger>
-      </div>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <div role="button" {{on "click" self.handlerInParent}}>
+          <BasicDropdownTrigger
+            @dropdown={{self.dropdown}}
+            @stopPropagation={{true}}
+            role="presentation"
+          >Click me</BasicDropdownTrigger>
+        </div>
+      </template>,
+    );
     await triggerEvent(
       getRootNode(this.element).querySelector(
         '.ember-basic-dropdown-trigger',
@@ -507,6 +631,8 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
   });
 
   test<ExtendedTestContext>('when `stopPropagation` is true and eventType is true, the `click` event does not bubble', async function (assert) {
+    const self = this;
+
     assert.expect(3);
     this.handlerInParent = () =>
       assert.ok(false, 'This should never be called');
@@ -530,11 +656,17 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
         },
       },
     };
-    await render<ExtendedTestContext>(hbs`
-      <div role="button" {{on "click" this.handlerInParent}}>
-        <BasicDropdownTrigger @dropdown={{this.dropdown}} @stopPropagation={{true}} role="presentation">Click me</BasicDropdownTrigger>
-      </div>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <div role="button" {{on "click" self.handlerInParent}}>
+          <BasicDropdownTrigger
+            @dropdown={{self.dropdown}}
+            @stopPropagation={{true}}
+            role="presentation"
+          >Click me</BasicDropdownTrigger>
+        </div>
+      </template>,
+    );
     await triggerEvent(
       getRootNode(this.element).querySelector(
         '.ember-basic-dropdown-trigger',
@@ -544,6 +676,8 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
   });
 
   test<ExtendedTestContext>('Pressing ENTER fires the `toggle` action on the dropdown', async function (assert) {
+    const self = this;
+
     assert.expect(3);
     this.dropdown = {
       ...dropdownBase,
@@ -564,9 +698,11 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
         },
       },
     };
-    await render<ExtendedTestContext>(hbs`
-      <BasicDropdownTrigger @dropdown={{this.dropdown}}>Click me</BasicDropdownTrigger>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <BasicDropdownTrigger @dropdown={{self.dropdown}}>Click me</BasicDropdownTrigger>
+      </template>,
+    );
 
     await triggerKeyEvent(
       getRootNode(this.element).querySelector(
@@ -578,6 +714,8 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
   });
 
   test<ExtendedTestContext>('Pressing SPACE fires the `toggle` action on the dropdown and preventsDefault to avoid scrolling', async function (assert) {
+    const self = this;
+
     assert.expect(4);
     this.dropdown = {
       ...dropdownBase,
@@ -599,9 +737,11 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
         },
       },
     };
-    await render<ExtendedTestContext>(hbs`
-      <BasicDropdownTrigger @dropdown={{this.dropdown}}>Click me</BasicDropdownTrigger>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <BasicDropdownTrigger @dropdown={{self.dropdown}}>Click me</BasicDropdownTrigger>
+      </template>,
+    );
 
     await triggerKeyEvent(
       getRootNode(this.element).querySelector(
@@ -613,6 +753,8 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
   });
 
   test<ExtendedTestContext>('Pressing ESC fires the `close` action on the dropdown', async function (assert) {
+    const self = this;
+
     assert.expect(3);
     this.dropdown = {
       ...dropdownBase,
@@ -633,9 +775,11 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
         },
       },
     };
-    await render<ExtendedTestContext>(hbs`
-      <BasicDropdownTrigger @dropdown={{this.dropdown}}>Click me</BasicDropdownTrigger>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <BasicDropdownTrigger @dropdown={{self.dropdown}}>Click me</BasicDropdownTrigger>
+      </template>,
+    );
 
     await triggerKeyEvent(
       getRootNode(this.element).querySelector(
@@ -647,6 +791,8 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
   });
 
   test<ExtendedTestContext>('Pressing ENTER/SPACE/ESC does nothing if there is a `{{on "keydown"}}` event that calls stopImmediatePropagation', async function (assert) {
+    const self = this;
+
     assert.expect(0);
     this.keyDown = (e) => e.stopImmediatePropagation();
     this.dropdown = {
@@ -662,9 +808,14 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
         },
       },
     };
-    await render<ExtendedTestContext>(hbs`
-      <BasicDropdownTrigger @dropdown={{this.dropdown}} {{on "keydown" this.keyDown}}>Click me</BasicDropdownTrigger>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <BasicDropdownTrigger
+          @dropdown={{self.dropdown}}
+          {{on "keydown" self.keyDown}}
+        >Click me</BasicDropdownTrigger>
+      </template>,
+    );
 
     await triggerKeyEvent(
       getRootNode(this.element).querySelector(
@@ -690,6 +841,8 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
   });
 
   test<ExtendedTestContext>('Tapping invokes the toggle action on the dropdown', async function (assert) {
+    const self = this;
+
     assert.expect(4);
     this.dropdown = {
       ...dropdownBase,
@@ -715,9 +868,11 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
         },
       },
     };
-    await render<ExtendedTestContext>(hbs`
-      <BasicDropdownTrigger @dropdown={{this.dropdown}}>Click me</BasicDropdownTrigger>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <BasicDropdownTrigger @dropdown={{self.dropdown}}>Click me</BasicDropdownTrigger>
+      </template>,
+    );
     await tap(
       getRootNode(this.element).querySelector(
         '.ember-basic-dropdown-trigger',
@@ -726,6 +881,8 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
   });
 
   test<ExtendedTestContext>("Firing a mousemove between a touchstart and a touchend (touch scroll) doesn't fire the toggle action", async function (assert) {
+    const self = this;
+
     assert.expect(0);
     this.dropdown = {
       ...dropdownBase,
@@ -737,9 +894,11 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
         },
       },
     };
-    await render<ExtendedTestContext>(hbs`
-      <BasicDropdownTrigger @dropdown={{this.dropdown}}>Click me</BasicDropdownTrigger>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <BasicDropdownTrigger @dropdown={{self.dropdown}}>Click me</BasicDropdownTrigger>
+      </template>,
+    );
 
     await triggerEvent(
       getRootNode(this.element).querySelector(
@@ -768,6 +927,8 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
   });
 
   test<ExtendedTestContext>('Using stylus on touch device will handle scroll/tap to fire toggle action properly', async function (assert) {
+    const self = this;
+
     assert.expect(1);
     this.dropdown = {
       ...dropdownBase,
@@ -782,9 +943,11 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
         },
       },
     };
-    await render<ExtendedTestContext>(hbs`
-      <BasicDropdownTrigger @dropdown={{this.dropdown}}>Click me</BasicDropdownTrigger>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <BasicDropdownTrigger @dropdown={{self.dropdown}}>Click me</BasicDropdownTrigger>
+      </template>,
+    );
 
     // scroll
     await triggerEvent(
@@ -840,6 +1003,8 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
   });
 
   test<ExtendedTestContext>("If its dropdown is disabled it won't respond to mouse, touch or keyboard event", async function (assert) {
+    const self = this;
+
     assert.expect(0);
     this.dropdown = {
       ...dropdownBase,
@@ -858,9 +1023,11 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
         },
       },
     };
-    await render<ExtendedTestContext>(hbs`
-      <BasicDropdownTrigger @dropdown={{this.dropdown}}>Click me</BasicDropdownTrigger>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <BasicDropdownTrigger @dropdown={{self.dropdown}}>Click me</BasicDropdownTrigger>
+      </template>,
+    );
     await click(
       getRootNode(this.element).querySelector(
         '.ember-basic-dropdown-trigger',
@@ -892,6 +1059,8 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
 
   // Decorating and overriding default event handlers
   test<ExtendedTestContext>('A user-supplied {{on "mousedown"}} callback will execute before the default toggle behavior', async function (assert) {
+    const self = this;
+
     assert.expect(3);
     let userActionRunFirst = false;
 
@@ -915,10 +1084,16 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
       userActionRunFirst = true;
     };
 
-    await render<ExtendedTestContext>(hbs`
-      {{!-- template-lint-disable no-pointer-down-event-binding --}}
-      <BasicDropdownTrigger {{on "mousedown" this.mouseDown}} @dropdown={{this.dropdown}} @eventType="mousedown">Click me</BasicDropdownTrigger>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        {{! template-lint-disable no-pointer-down-event-binding }}
+        <BasicDropdownTrigger
+          {{on "mousedown" self.mouseDown}}
+          @dropdown={{self.dropdown}}
+          @eventType="mousedown"
+        >Click me</BasicDropdownTrigger>
+      </template>,
+    );
 
     await click(
       getRootNode(this.element).querySelector(
@@ -928,6 +1103,8 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
   });
 
   test<ExtendedTestContext>('A user-supplied {{on "click"}} callback that calls `stopImmediatePropagation`, will prevent the default behavior', async function (assert) {
+    const self = this;
+
     assert.expect(1);
 
     this.dropdown = {
@@ -946,9 +1123,14 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
       assert.ok(true, 'The `userSuppliedAction()` action has been fired');
     };
 
-    await render<ExtendedTestContext>(hbs`
-      <BasicDropdownTrigger {{on "click" this.click}} @dropdown={{this.dropdown}}>Click me</BasicDropdownTrigger>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <BasicDropdownTrigger
+          {{on "click" self.click}}
+          @dropdown={{self.dropdown}}
+        >Click me</BasicDropdownTrigger>
+      </template>,
+    );
 
     await click(
       getRootNode(this.element).querySelector(
@@ -958,6 +1140,8 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
   });
 
   test<ExtendedTestContext>('A user-supplied {{on "mousedown"}} callback that calls `stopImmediatePropagation` will prevent the default behavior', async function (assert) {
+    const self = this;
+
     assert.expect(1);
 
     this.dropdown = {
@@ -976,10 +1160,16 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
       assert.ok(true, 'The user-supplied action has been fired');
     };
 
-    await render<ExtendedTestContext>(hbs`
-      {{!-- template-lint-disable no-pointer-down-event-binding --}}
-      <BasicDropdownTrigger {{on "mousedown" this.mouseDown}} @dropdown={{this.dropdown}} @eventType="mousedown">Click me</BasicDropdownTrigger>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        {{! template-lint-disable no-pointer-down-event-binding }}
+        <BasicDropdownTrigger
+          {{on "mousedown" self.mouseDown}}
+          @dropdown={{self.dropdown}}
+          @eventType="mousedown"
+        >Click me</BasicDropdownTrigger>
+      </template>,
+    );
 
     await click(
       getRootNode(this.element).querySelector(
@@ -989,6 +1179,8 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
   });
 
   test<ExtendedTestContext>('A user-supplied {{on "touchend"}} callback will execute before the default toggle behavior', async function (assert) {
+    const self = this;
+
     assert.expect(3);
     let userActionRunFirst = false;
 
@@ -1012,11 +1204,16 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
       userActionRunFirst = true;
     };
 
-    await render<ExtendedTestContext>(hbs`
-      <BasicDropdownTrigger {{on "touchend" this.touchEnd}} @dropdown={{this.dropdown}}>
-        Click me
-      </BasicDropdownTrigger>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <BasicDropdownTrigger
+          {{on "touchend" self.touchEnd}}
+          @dropdown={{self.dropdown}}
+        >
+          Click me
+        </BasicDropdownTrigger>
+      </template>,
+    );
     await tap(
       getRootNode(this.element).querySelector(
         '.ember-basic-dropdown-trigger',
@@ -1025,6 +1222,8 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
   });
 
   test<ExtendedTestContext>('A user-supplied {{on "touchend"}} callback calling e.stopImmediatePropagation will prevent the default behavior', async function (assert) {
+    const self = this;
+
     assert.expect(2);
 
     this.dropdown = {
@@ -1047,11 +1246,16 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
       assert.ok(true, 'The user-supplied touchend callback has been fired');
     };
 
-    await render<ExtendedTestContext>(hbs`
-      <BasicDropdownTrigger {{on "touchend" this.touchEnd}} @dropdown={{this.dropdown}}>
-        Click me
-      </BasicDropdownTrigger>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <BasicDropdownTrigger
+          {{on "touchend" self.touchEnd}}
+          @dropdown={{self.dropdown}}
+        >
+          Click me
+        </BasicDropdownTrigger>
+      </template>,
+    );
     await tap(
       getRootNode(this.element).querySelector(
         '.ember-basic-dropdown-trigger',
@@ -1060,6 +1264,8 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
   });
 
   test<ExtendedTestContext>('A user-supplied `{{on "keydown"}}` action will execute before the default toggle behavior', async function (assert) {
+    const self = this;
+
     assert.expect(3);
     let userActionRunFirst = false;
 
@@ -1083,9 +1289,14 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
       userActionRunFirst = true;
     };
 
-    await render<ExtendedTestContext>(hbs`
-      <BasicDropdownTrigger {{on "keydown" this.keyDown}} @dropdown={{this.dropdown}}>Click me</BasicDropdownTrigger>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <BasicDropdownTrigger
+          {{on "keydown" self.keyDown}}
+          @dropdown={{self.dropdown}}
+        >Click me</BasicDropdownTrigger>
+      </template>,
+    );
     await triggerKeyEvent(
       getRootNode(this.element).querySelector(
         '.ember-basic-dropdown-trigger',
@@ -1096,6 +1307,8 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
   });
 
   test<ExtendedTestContext>('A user-supplied `{{on "keydown"}}` action calling `stopImmediatePropagation` will prevent the default behavior', async function (assert) {
+    const self = this;
+
     assert.expect(1);
 
     this.dropdown = {
@@ -1114,9 +1327,14 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
       assert.ok(true, 'The `userSuppliedAction()` action has been fired');
     };
 
-    await render<ExtendedTestContext>(hbs`
-      <BasicDropdownTrigger {{on "keydown" this.keyDown}} @dropdown={{this.dropdown}}>Click me</BasicDropdownTrigger>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <BasicDropdownTrigger
+          {{on "keydown" self.keyDown}}
+          @dropdown={{self.dropdown}}
+        >Click me</BasicDropdownTrigger>
+      </template>,
+    );
     await triggerKeyEvent(
       getRootNode(this.element).querySelector(
         '.ember-basic-dropdown-trigger',
@@ -1127,6 +1345,8 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
   });
 
   test<ExtendedTestContext>('Tapping an SVG inside of the trigger invokes the toggle action on the dropdown', async function (assert) {
+    const self = this;
+
     assert.expect(3);
     this.dropdown = {
       ...dropdownBase,
@@ -1147,9 +1367,13 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
         },
       },
     };
-    await render<ExtendedTestContext>(hbs`
-      <BasicDropdownTrigger @dropdown={{this.dropdown}}><svg class="trigger-child-svg">Click me</svg></BasicDropdownTrigger>
-    `);
+    await render<ExtendedTestContext>(
+      <template>
+        <BasicDropdownTrigger @dropdown={{self.dropdown}}><svg
+            class="trigger-child-svg"
+          >Click me</svg></BasicDropdownTrigger>
+      </template>,
+    );
     await tap(
       getRootNode(this.element).querySelector(
         '.ember-basic-dropdown-trigger',
@@ -1189,6 +1413,8 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
     }
 
     test<ExtendedTestContext>('It properly handles the onBlur action', async function (assert) {
+      const self = this;
+
       assert.expect(4);
 
       const onBlur = (dropdown: Dropdown, e?: FocusEvent) => {
@@ -1198,9 +1424,14 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
 
       this.set('onBlur', onBlur);
 
-      await render<ExtendedTestContext>(hbs`
-        <BasicDropdownTrigger @dropdown={{this.dropdown}} @onBlur={{this.onBlur}}>hello</BasicDropdownTrigger>
-      `);
+      await render<ExtendedTestContext>(
+        <template>
+          <BasicDropdownTrigger
+            @dropdown={{self.dropdown}}
+            @onBlur={{self.onBlur}}
+          >hello</BasicDropdownTrigger>
+        </template>,
+      );
       await triggerEvent(
         getRootNode(this.element).querySelector(
           '.ember-basic-dropdown-trigger',
@@ -1210,6 +1441,8 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
     });
 
     test<ExtendedTestContext>('It properly handles the onClick action', async function (assert) {
+      const self = this;
+
       assert.expect(4);
 
       const onClick = (dropdown: Dropdown, e?: MouseEvent) => {
@@ -1219,9 +1452,14 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
 
       this.set('onClick', onClick);
 
-      await render<ExtendedTestContext>(hbs`
-        <BasicDropdownTrigger @dropdown={{this.dropdown}} @onClick={{this.onClick}}>hello</BasicDropdownTrigger>
-      `);
+      await render<ExtendedTestContext>(
+        <template>
+          <BasicDropdownTrigger
+            @dropdown={{self.dropdown}}
+            @onClick={{self.onClick}}
+          >hello</BasicDropdownTrigger>
+        </template>,
+      );
       await click(
         getRootNode(this.element).querySelector(
           '.ember-basic-dropdown-trigger',
@@ -1230,6 +1468,8 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
     });
 
     test<ExtendedTestContext>('It properly handles the onFocus action', async function (assert) {
+      const self = this;
+
       assert.expect(4);
 
       const onFocus = (dropdown: Dropdown, e?: FocusEvent) => {
@@ -1239,9 +1479,14 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
 
       this.set('onFocus', onFocus);
 
-      await render<ExtendedTestContext>(hbs`
-        <BasicDropdownTrigger @dropdown={{this.dropdown}} @onFocus={{this.onFocus}}>hello</BasicDropdownTrigger>
-      `);
+      await render<ExtendedTestContext>(
+        <template>
+          <BasicDropdownTrigger
+            @dropdown={{self.dropdown}}
+            @onFocus={{self.onFocus}}
+          >hello</BasicDropdownTrigger>
+        </template>,
+      );
       await focus(
         getRootNode(this.element).querySelector(
           '.ember-basic-dropdown-trigger',
@@ -1250,6 +1495,8 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
     });
 
     test<ExtendedTestContext>('It properly handles the onFocusIn action', async function (assert) {
+      const self = this;
+
       assert.expect(4);
 
       const onFocusIn = (dropdown: Dropdown, e?: FocusEvent) => {
@@ -1259,9 +1506,14 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
 
       this.set('onFocusIn', onFocusIn);
 
-      await render<ExtendedTestContext>(hbs`
-        <BasicDropdownTrigger @dropdown={{this.dropdown}} @onFocusIn={{this.onFocusIn}}>hello</BasicDropdownTrigger>
-      `);
+      await render<ExtendedTestContext>(
+        <template>
+          <BasicDropdownTrigger
+            @dropdown={{self.dropdown}}
+            @onFocusIn={{self.onFocusIn}}
+          >hello</BasicDropdownTrigger>
+        </template>,
+      );
       await triggerEvent(
         getRootNode(this.element).querySelector(
           '.ember-basic-dropdown-trigger',
@@ -1271,6 +1523,8 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
     });
 
     test<ExtendedTestContext>('It properly handles the onFocusOut action', async function (assert) {
+      const self = this;
+
       assert.expect(4);
 
       const onFocusOut = (dropdown: Dropdown, e?: FocusEvent) => {
@@ -1280,9 +1534,14 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
 
       this.set('onFocusOut', onFocusOut);
 
-      await render<ExtendedTestContext>(hbs`
-        <BasicDropdownTrigger @dropdown={{this.dropdown}} @onFocusOut={{this.onFocusOut}}>hello</BasicDropdownTrigger>
-      `);
+      await render<ExtendedTestContext>(
+        <template>
+          <BasicDropdownTrigger
+            @dropdown={{self.dropdown}}
+            @onFocusOut={{self.onFocusOut}}
+          >hello</BasicDropdownTrigger>
+        </template>,
+      );
       await triggerEvent(
         getRootNode(this.element).querySelector(
           '.ember-basic-dropdown-trigger',
@@ -1292,6 +1551,8 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
     });
 
     test<ExtendedTestContext>('It properly handles the onKeyDown action', async function (assert) {
+      const self = this;
+
       assert.expect(4);
 
       const onKeyDown = (dropdown: Dropdown, e?: KeyboardEvent) => {
@@ -1301,9 +1562,14 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
 
       this.set('onKeyDown', onKeyDown);
 
-      await render<ExtendedTestContext>(hbs`
-        <BasicDropdownTrigger @dropdown={{this.dropdown}} @onKeyDown={{this.onKeyDown}}>hello</BasicDropdownTrigger>
-      `);
+      await render<ExtendedTestContext>(
+        <template>
+          <BasicDropdownTrigger
+            @dropdown={{self.dropdown}}
+            @onKeyDown={{self.onKeyDown}}
+          >hello</BasicDropdownTrigger>
+        </template>,
+      );
       await triggerEvent(
         getRootNode(this.element).querySelector(
           '.ember-basic-dropdown-trigger',
@@ -1313,6 +1579,8 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
     });
 
     test<ExtendedTestContext>('It properly handles the onMouseDown action', async function (assert) {
+      const self = this;
+
       assert.expect(4);
 
       const onMouseDown = (dropdown: Dropdown, e?: MouseEvent) => {
@@ -1322,9 +1590,14 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
 
       this.set('onMouseDown', onMouseDown);
 
-      await render<ExtendedTestContext>(hbs`
-        <BasicDropdownTrigger @dropdown={{this.dropdown}} @onMouseDown={{this.onMouseDown}}>hello</BasicDropdownTrigger>
-      `);
+      await render<ExtendedTestContext>(
+        <template>
+          <BasicDropdownTrigger
+            @dropdown={{self.dropdown}}
+            @onMouseDown={{self.onMouseDown}}
+          >hello</BasicDropdownTrigger>
+        </template>,
+      );
       await triggerEvent(
         getRootNode(this.element).querySelector(
           '.ember-basic-dropdown-trigger',
@@ -1334,6 +1607,8 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
     });
 
     test<ExtendedTestContext>('It properly handles the onMouseEnter action', async function (assert) {
+      const self = this;
+
       assert.expect(4);
 
       const onMouseEnter = (dropdown: Dropdown, e?: MouseEvent) => {
@@ -1343,13 +1618,20 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
 
       this.set('onMouseEnter', onMouseEnter);
 
-      await render<ExtendedTestContext>(hbs`
-        <BasicDropdownTrigger @dropdown={{this.dropdown}} @onMouseEnter={{this.onMouseEnter}}>hello</BasicDropdownTrigger>
-      `);
+      await render<ExtendedTestContext>(
+        <template>
+          <BasicDropdownTrigger
+            @dropdown={{self.dropdown}}
+            @onMouseEnter={{self.onMouseEnter}}
+          >hello</BasicDropdownTrigger>
+        </template>,
+      );
       await triggerEvent('.ember-basic-dropdown-trigger', 'mouseenter');
     });
 
     test<ExtendedTestContext>('It properly handles the onMouseLeave action', async function (assert) {
+      const self = this;
+
       assert.expect(4);
 
       const onMouseLeave = (dropdown: Dropdown, e?: MouseEvent) => {
@@ -1359,9 +1641,14 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
 
       this.set('onMouseLeave', onMouseLeave);
 
-      await render<ExtendedTestContext>(hbs`
-        <BasicDropdownTrigger @dropdown={{this.dropdown}} @onMouseLeave={{this.onMouseLeave}}>hello</BasicDropdownTrigger>
-      `);
+      await render<ExtendedTestContext>(
+        <template>
+          <BasicDropdownTrigger
+            @dropdown={{self.dropdown}}
+            @onMouseLeave={{self.onMouseLeave}}
+          >hello</BasicDropdownTrigger>
+        </template>,
+      );
       await triggerEvent(
         getRootNode(this.element).querySelector(
           '.ember-basic-dropdown-trigger',
@@ -1371,6 +1658,8 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
     });
 
     test<ExtendedTestContext>('It properly handles the onTouchEnd action', async function (assert) {
+      const self = this;
+
       assert.expect(4);
 
       const onTouchEnd = (dropdown: Dropdown, e?: MouseEvent) => {
@@ -1380,9 +1669,14 @@ module('Integration | Component | basic-dropdown-trigger', function (hooks) {
 
       this.set('onTouchEnd', onTouchEnd);
 
-      await render<ExtendedTestContext>(hbs`
-        <BasicDropdownTrigger @dropdown={{this.dropdown}} @onTouchEnd={{this.onTouchEnd}}>hello</BasicDropdownTrigger>
-      `);
+      await render<ExtendedTestContext>(
+        <template>
+          <BasicDropdownTrigger
+            @dropdown={{self.dropdown}}
+            @onTouchEnd={{self.onTouchEnd}}
+          >hello</BasicDropdownTrigger>
+        </template>,
+      );
       await triggerEvent(
         getRootNode(this.element).querySelector(
           '.ember-basic-dropdown-trigger',