Convert test-app to TS (#1010)

* Convert test-app to TS

* Move more tests to TS

* Convert trigger tests to TS

* Run lint

Author: mkszepp

ember-basic-dropdown/src/template-registry.ts

@@ -4,10 +4,14 @@
 
 import type BasicDropdownComponent from './components/basic-dropdown';
 import type BasicDropdownWormholeComponent from './components/basic-dropdown-wormhole';
+import type BasicDropdownContentTrigger from './components/basic-dropdown-trigger';
+import type BasicDropdownContentComponent from './components/basic-dropdown-content';
 import type DropdownTriggerModifier from './modifiers/basic-dropdown-trigger';
 
 export default interface Registry {
   BasicDropdown: typeof BasicDropdownComponent;
   BasicDropdownWormhole: typeof BasicDropdownWormholeComponent;
+  BasicDropdownTrigger: typeof BasicDropdownContentTrigger;
+  BasicDropdownContent: typeof BasicDropdownContentComponent;
   'basic-dropdown-trigger': typeof DropdownTriggerModifier;
 }

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

@@ -1,7 +1,4 @@
 import templateOnly from '@ember/component/template-only';
+import type { BasicDropdownContentSignature } from 'ember-basic-dropdown/components/basic-dropdown-content';
 
-export interface MyCustomContentSignature {
-  Element: Element;
-}
-
-export default templateOnly<MyCustomContentSignature>();
+export default templateOnly<BasicDropdownContentSignature>();

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

@@ -1,7 +1,4 @@
 import templateOnly from '@ember/component/template-only';
+import type { BasicDropdownTriggerSignature } from 'ember-basic-dropdown/components/basic-dropdown-trigger';
 
-export interface MyCustomTriggerSignature {
-  Element: Element;
-}
-
-export default templateOnly<MyCustomTriggerSignature>();
+export default templateOnly<BasicDropdownTriggerSignature>();

test-app/app/components/shadow.ts

@@ -25,3 +25,9 @@ export default class ShadowComponent extends Component<{
     },
   );
 }
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    Shadow: typeof ShadowComponent;
+  }
+}

test-app/app/config/environment.d.ts

@@ -9,6 +9,7 @@ declare const config: {
   locationType: 'history' | 'hash' | 'none';
   rootURL: string;
   APP: Record<string, unknown>;
+  'ember-basic-dropdown': Record<string, unknown>;
 };
 
 export default config;

test-app/app/controllers/application.js

@@ -0,0 +1,35 @@
+import type ApplicationInstance from '@ember/application/instance';
+import Controller from '@ember/controller';
+import type Owner from '@ember/owner';
+import type environment from 'test-app/config/environment';
+import { getOwner } from '@ember/owner';
+
+// @ts-expect-error Cannot find name 'FastBoot'.
+const isFastBoot = typeof FastBoot !== 'undefined';
+
+export default class extends Controller {
+  shadowDom = false;
+
+  constructor(owner: Owner) {
+    super(owner);
+
+    const config = (getOwner(this) as ApplicationInstance).resolveRegistration(
+      'config:environment',
+    ) as typeof environment;
+
+    this.shadowDom = (config.APP['shadowDom'] as boolean) ?? false;
+
+    if (!this.shadowDom || isFastBoot) {
+      return;
+    }
+
+    customElements.define(
+      'shadow-root',
+      class extends HTMLElement {
+        connectedCallback() {
+          this.attachShadow({ mode: 'open' });
+        }
+      },
+    );
+  }
+}

test-app/app/controllers/application.ts

@@ -1,17 +1,20 @@
+import type ApplicationInstance from '@ember/application/instance';
 import config from 'test-app/config/environment';
 
 // @ts-expect-error Public property 'isFastBoot' of exported class
 const isFastBoot = typeof FastBoot !== 'undefined';
 
-export function initialize(appInstance) {
-  if (config.environment !== 'test' || isFastBoot || !config.APP.shadowDom) {
+export function initialize(appInstance: ApplicationInstance) {
+  if (config.environment !== 'test' || isFastBoot || !config.APP['shadowDom']) {
     return;
   }
 
-  let appRootElement = appInstance.rootElement;
+  let appRootElement = appInstance.rootElement as HTMLElement | null;
 
   if (typeof appRootElement === 'string') {
-    appRootElement = document.querySelector(appRootElement);
+    appRootElement = document.querySelector(
+      appRootElement,
+    ) as HTMLElement | null;
   }
   const targetElement =
     appRootElement || document.getElementsByTagName('body')[0];
@@ -23,11 +26,11 @@ export function initialize(appInstance) {
   const wormhole = document.createElement('div');
   wormhole.id = 'ember-basic-dropdown-wormhole';
 
-  hostElement.shadowRoot.appendChild(wormhole);
-  hostElement.shadowRoot.appendChild(rootElement);
-  targetElement.appendChild(hostElement);
+  hostElement.shadowRoot?.appendChild(wormhole);
+  hostElement.shadowRoot?.appendChild(rootElement);
+  targetElement?.appendChild(hostElement);
 
-  config.APP.rootElement = '#ember-basic-dropdown-wormhole';
+  config.APP['rootElement'] = '#ember-basic-dropdown-wormhole';
   appInstance.set('rootElement', rootElement);
 }