feat: implement DatePickerDialogDialog for extensible slot for input

motss · Nov 28, 2021 · e493bfb · e493bfb
1 parent 2c5caef
commit e493bfb
Show file tree

Hide file tree

Showing 13 changed files with 378 additions and 231 deletions.
diff --git a/src/__demo__/demo-app.ts b/src/__demo__/demo-app.ts
@@ -1,5 +1,6 @@
 import '../date-picker-dialog/app-date-picker-dialog.js';
 import '../date-picker-input/app-date-picker-input.js';
+import '../date-picker-input-surface/app-date-picker-input-surface.js';
 import '../date-picker/app-date-picker.js';
 
 import { css, html } from 'lit';

diff --git a/src/__tests__/date-picker-dialog/app-date-picker-dialog.test.ts b/src/__tests__/date-picker-dialog/app-date-picker-dialog.test.ts
@@ -7,8 +7,8 @@ import { DateTimeFormat } from '../../constants';
 import type { AppDatePicker } from '../../date-picker/app-date-picker';
 import { appDatePickerName } from '../../date-picker/constants';
 import type { AppDatePickerDialog } from '../../date-picker-dialog/app-date-picker-dialog';
-import type { AppDatePickerDialogBase } from '../../date-picker-dialog/app-date-picker-dialog-base';
-import { appDatePickerDialogBaseName, appDatePickerDialogName } from '../../date-picker-dialog/constants';
+import type { AppDatePickerDialogDialog } from '../../date-picker-dialog/app-date-picker-dialog-dialog';
+import { appDatePickerDialogDialogName, appDatePickerDialogName } from '../../date-picker-dialog/constants';
 import type { DialogClosedEventDetail, DialogClosingEventDetailAction } from '../../date-picker-dialog/typings';
 import { toDateString } from '../../helpers/to-date-string';
 import { toResolvedDate } from '../../helpers/to-resolved-date';
@@ -22,10 +22,10 @@ import { messageFormatter } from '../test-utils/message-formatter';
 describe(appDatePickerDialogName, () => {
   const elementSelectors = {
     calendarDay: (label: string) => `td.calendar-day[aria-label="${label}"]`,
-    datePickerDialogBase: appDatePickerDialogBaseName,
     datePicker: appDatePickerName,
-    dialogActionReset: `mwc-button[data-dialog-action="reset"]`,
+    datePickerDialogDialog: appDatePickerDialogDialogName,
     dialogActionCancel: `mwc-button[dialogaction="cancel"]`,
+    dialogActionReset: `mwc-button[data-dialog-action="reset"]`,
     dialogActionSet: `mwc-button[dialogaction="set"]`,
     monthCalendar: appMonthCalendarName,
   } as const;
@@ -53,13 +53,16 @@ describe(appDatePickerDialogName, () => {
       globalThis.setTimeout(() => resolve(element), promiseTimeout);
     });
 
-    const datePickerDialogBase =
-      el.querySelector<AppDatePickerDialogBase>(elementSelectors.datePickerDialogBase);
+    const datePickerDialogDialog =
+      el.querySelector<AppDatePickerDialogDialog>(elementSelectors.datePickerDialogDialog);
     const datePicker = el.querySelector(elementSelectors.datePicker);
 
-    expect(datePickerDialogBase).exist;
+    await datePicker?.updateComplete;
+    await datePickerDialogDialog?.updateComplete;
+
+    expect(datePickerDialogDialog).exist;
     expect(datePicker).exist;
-    expect(datePickerDialogBase?.hasAttribute('open')).true;
+    expect(datePickerDialogDialog?.hasAttribute('open')).true;
     expect(el.valueAsDate).deep.equal(new Date(value));
     expect(el.valueAsNumber).equal(+new Date(value));
 
@@ -83,21 +86,23 @@ describe(appDatePickerDialogName, () => {
       CustomEvent
     >(el, 'opened');
 
-    const datePickerDialogBase =
-      el.querySelector<AppDatePickerDialogBase>(elementSelectors.datePickerDialogBase);
+    const datePickerDialogDialog =
+      el.querySelector<AppDatePickerDialogDialog>(elementSelectors.datePickerDialogDialog);
     let datePicker = el.querySelector(elementSelectors.datePicker);
 
-    expect(datePickerDialogBase).exist;
+    expect(datePickerDialogDialog).exist;
     expect(datePicker).exist;
-    expect(datePickerDialogBase?.hasAttribute('open')).false;
+    expect(datePickerDialogDialog?.hasAttribute('open')).false;
 
     el.show();
-    await openedTask;
+    const opened = await openedTask;
     await el.updateComplete;
 
+    expect(opened).not.undefined;
+
     datePicker = el.querySelector(elementSelectors.datePicker);
 
-    expect(datePickerDialogBase?.hasAttribute('open')).true;
+    expect(datePickerDialogDialog?.hasAttribute('open')).true;
 
     const closedTask = eventOnce<
       typeof el,
@@ -106,12 +111,14 @@ describe(appDatePickerDialogName, () => {
     >(el, 'closed');
 
     el.hide();
-    await closedTask;
+    const closed = await closedTask;
     await el.updateComplete;
 
+    expect(closed).not.undefined;
+
     datePicker = el.querySelector(elementSelectors.datePicker);
 
-    expect(datePickerDialogBase?.hasAttribute('open')).false;
+    expect(datePickerDialogDialog?.hasAttribute('open')).false;
   });
 
   type CaseSelectsAndConfirmsNewDate = [string, string, DialogClosingEventDetailAction, boolean, string];
@@ -147,8 +154,8 @@ describe(appDatePickerDialogName, () => {
           CustomEvent
         >(el, 'opened');
 
-        const datePickerDialogBase =
-          el.querySelector<AppDatePickerDialogBase>(elementSelectors.datePickerDialogBase);
+        const datePickerDialogDialog =
+          el.querySelector<AppDatePickerDialogDialog>(elementSelectors.datePickerDialogDialog);
         const datePicker =
           el.querySelector<AppDatePicker>(elementSelectors.datePicker);
         const monthCalendar =
@@ -161,13 +168,14 @@ describe(appDatePickerDialogName, () => {
           el.querySelector<Button>(elementSelectors.dialogActionSet);
 
         el.show();
-        await openedTask;
+        const opened = await openedTask;
         await el.updateComplete;
 
-        expect(datePickerDialogBase).exist;
+        expect(opened).not.undefined;
+        expect(datePickerDialogDialog).exist;
         expect(datePicker).exist;
         expect(dialogActionSet).exist;
-        expect(datePickerDialogBase?.hasAttribute('open')).true;
+        expect(datePickerDialogDialog?.hasAttribute('open')).true;
         expect(el.value).equal(value);
 
         const newValueDate = new Date(testNewValue);
@@ -215,12 +223,18 @@ describe(appDatePickerDialogName, () => {
           default:
         }
 
-        await closedTask;
+        const closed = await closedTask;
         await datePicker?.updateComplete;
         await el.updateComplete;
 
+        if (testDialogAction === 'reset') {
+          expect(closed).undefined;
+        } else {
+          expect(closed).not.undefined;
+        }
+
         expect(
-          datePickerDialogBase?.hasAttribute('open')
+          datePickerDialogDialog?.hasAttribute('open')
         ).equal(expectedDatePickerDialogHasAttributeOpen);
         expect(el.value).equal(expectedDatePickerDialogValue);
         expect(el.valueAsDate).deep.equal(new Date(expectedDatePickerDialogValue));

diff --git a/src/__tests__/date-picker-input/app-date-picker-input.test.ts b/src/__tests__/date-picker-input/app-date-picker-input.test.ts
@@ -1,4 +1,5 @@
 import '../../date-picker-input/app-date-picker-input';
+import '../../date-picker-input-surface/app-date-picker-input-surface';
 
 import type { Button } from '@material/mwc-button';
 import { expect, fixture, html } from '@open-wc/testing';
@@ -139,9 +140,11 @@ describe(appDatePickerInputName, () => {
       CustomEvent<unknown>>(el, 'opened');
 
     el.showPicker();
-    await openedTask;
+    const opened = await openedTask;
     await el.updateComplete;
 
+    expect(opened).not.undefined;
+
     const mdcTextFieldInput = el.query<HTMLInputElement>(elementSelectors.mdcTextFieldInput);
 
     // FIXME: FF94 returns undefined whereas FF96 will return the correct value.
@@ -231,9 +234,11 @@ describe(appDatePickerInputName, () => {
           CustomEvent<unknown>>(el, 'opened');
 
         el.showPicker();
-        await openedTask;
+        const opened = await openedTask;
         await el.updateComplete;
 
+        expect(opened).not.undefined;
+
         let datePickerInputSurface = el.query<AppDatePickerInputSurface>(elementSelectors.datePickerInputSurface);
         let datePicker = el.query<AppDatePicker>(elementSelectors.datePicker);
 
@@ -268,9 +273,11 @@ describe(appDatePickerInputName, () => {
           default:
         }
 
-        await closedTask;
+        const closed = await closedTask;
         await el.updateComplete;
 
+        expect(closed).not.undefined;
+
         datePickerInputSurface = el.query<AppDatePickerInputSurface>(elementSelectors.datePickerInputSurface);
         datePicker = el.query<AppDatePicker>(elementSelectors.datePicker);
 
@@ -310,9 +317,11 @@ describe(appDatePickerInputName, () => {
         await sendKeys({ down: testKey });
         await sendKeys({ up: testKey });
 
-        await openedTask;
+        const opened = await openedTask;
         await el.updateComplete;
 
+        expect(opened).not.undefined;
+
         const datePickerInputSurface = el.query<AppDatePickerInputSurface>(elementSelectors.datePickerInputSurface);
         const datePicker = el.query<AppDatePicker>(elementSelectors.datePicker);
 
@@ -400,9 +409,11 @@ describe(appDatePickerInputName, () => {
           CustomEvent<unknown>>(el, 'opened');
 
         el.showPicker();
-        await openedTask;
+        const opened = await openedTask;
         await el.updateComplete;
 
+        expect(opened).not.undefined;
+
         const datePicker = el.query<AppDatePicker>(elementSelectors.datePicker);
         const monthCalendar = datePicker?.query<AppMonthCalendar>(elementSelectors.monthCalendar);
 
@@ -424,6 +435,9 @@ describe(appDatePickerInputName, () => {
 
         await closedTask;
         await el.updateComplete;
+
+        // FIXME: Webkit returns undefined even `closed` event is fired
+        // expect(closed).not.undefined;
       }
     );
   });
@@ -445,9 +459,11 @@ describe(appDatePickerInputName, () => {
       CustomEvent<unknown>>(el, 'opened');
 
     el.showPicker();
-    await openedTask;
+    const opened = await openedTask;
     await el.updateComplete;
 
+    expect(opened).not.undefined;
+
     const datePicker = el.query<AppDatePicker>(elementSelectors.datePicker);
     const monthCalendar = datePicker?.query<AppMonthCalendar>(elementSelectors.monthCalendar);
 
@@ -466,8 +482,10 @@ describe(appDatePickerInputName, () => {
     newSelectedDate?.focus();
     newSelectedDate?.click();
 
-    await closedTask;
+    const closed = await closedTask;
     await el.updateComplete;
+
+    expect(closed).not.undefined;
   });
 
 });
diff --git a/src/date-picker-dialog/app-date-picker-dialog-dialog.ts b/src/date-picker-dialog/app-date-picker-dialog-dialog.ts
@@ -0,0 +1,13 @@
+import { customElement } from 'lit/decorators.js';
+
+import { appDatePickerDialogDialogName } from './constants.js';
+import { DatePickerDialogDialog } from './date-picker-dialog-dialog.js';
+
+@customElement(appDatePickerDialogDialogName)
+export class AppDatePickerDialogDialog extends DatePickerDialogDialog {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [appDatePickerDialogDialogName]: AppDatePickerDialogDialog;
+  }
+}
diff --git a/src/date-picker-dialog/constants.ts b/src/date-picker-dialog/constants.ts
@@ -1,2 +1,3 @@
 export const appDatePickerDialogBaseName = 'app-date-picker-dialog-base' as const;
+export const appDatePickerDialogDialogName = 'app-date-picker-dialog-dialog' as const;
 export const appDatePickerDialogName = 'app-date-picker-dialog' as const;