Move test-app to gts (#1029)

Author: mkszepp

pnpm-lock.yaml

@@ -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>;

test-app/app/components/my-custom-content.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>;

test-app/app/components/my-custom-content.hbs

@@ -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' {

test-app/app/components/my-custom-content.ts

@@ -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' {