test: add tests for AppDatePickerInputSurface

src/__tests__/constants.ts

@@ -0,0 +1 @@
+export const promiseTimeout = 3e3 as const;

src/__tests__/date-picker-input-surface/app-date-picker-input-surface.test.ts

@@ -0,0 +1,59 @@
+import '../../date-picker-input-surface/app-date-picker-input-surface';
+
+import { expect, fixture, html } from '@open-wc/testing';
+
+import { appDatePickerInputSurfaceName } from '../../date-picker-input-surface/constants';
+import type { DatePickerInputSurface } from '../../date-picker-input-surface/date-picker-input-surface';
+import { promiseTimeout } from '../constants';
+
+describe(appDatePickerInputSurfaceName, () => {
+  const elementSelectors = {
+    mdcMenuSurface: '.mdc-menu-surface',
+  } as const;
+
+  it('renders', async () => {
+
+
+    const el = await new Promise<DatePickerInputSurface>(async (resolve) => {
+      const element = await fixture<DatePickerInputSurface>(
+        html`<app-date-picker-input-surface .open=${true} @opened=${() => resolve(element)}>
+          <h1 class=test>Test</h1>
+        </app-date-picker-input-surface>`
+      );
+    });
+
+    const mdcMenuSurface = el.query(elementSelectors.mdcMenuSurface);
+
+    expect(mdcMenuSurface).exist;
+  });
+
+  it('closes when clicking outside of surface', async () => {
+    const el = await new Promise<DatePickerInputSurface>(async (resolve) => {
+      const element = await fixture<DatePickerInputSurface>(
+        html`<app-date-picker-input-surface .open=${true} @opened=${() => resolve(element)}>
+          <h1 class=test>Test</h1>
+        </app-date-picker-input-surface>`
+      );
+    });
+
+    const mdcMenuSurface = el.query(elementSelectors.mdcMenuSurface);
+
+    expect(mdcMenuSurface).exist;
+
+    const closedTask = new Promise<boolean>((resolve) => {
+      el.addEventListener('closed', () => {
+        resolve(true);
+
+        globalThis.setTimeout(() => resolve(false), promiseTimeout);
+      }, { once: true });
+    });
+
+    document.body.click();
+
+    const closed = await closedTask;
+
+    expect(closed).true;
+    expect(el.open).false;
+    expect(mdcMenuSurface).exist;
+  });
+});

src/date-picker-input/date-picker-input.ts

@@ -98,7 +98,7 @@ export class DatePickerInput extends ElementMixin(DatePickerMixin(DatePickerMinM
         <app-date-picker-input-surface
           ?open=${true}
           ?stayOpenOnBodyClick=${true}
-          .anchor=${this}
+          .anchor=${this as HTMLElement}
           @closed=${this.#onClosed}
           @opened=${this.#onOpened}
         >