feat: datePicker now always opens in calendar view in DatePickerInput

motss · Jan 25, 2022 · 376c98b · 376c98b
1 parent 081c8f7
commit 376c98b
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 7 deletions.
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,5 +1,5 @@
-import '../../date-picker-input/app-date-picker-input';
 import '../../date-picker-input-surface/app-date-picker-input-surface';
+import '../../date-picker-input/app-date-picker-input';
 
 import type { Button } from '@material/mwc-button';
 import { expect, fixture, html } from '@open-wc/testing';
@@ -17,6 +17,8 @@ import { iconClear } from '../../icons';
 import { keyEnter, keyEscape, keySpace, keyTab } from '../../key-values';
 import type { AppMonthCalendar } from '../../month-calendar/app-month-calendar';
 import { appMonthCalendarName } from '../../month-calendar/constants';
+import type { AppYearGrid } from '../../year-grid/app-year-grid';
+import { appYearGridName } from '../../year-grid/constants';
 import { eventOnce } from '../test-utils/event-once';
 import { messageFormatter } from '../test-utils/message-formatter';
 import { queryDeepActiveElement } from '../test-utils/query-deep-active-element';
@@ -32,6 +34,8 @@ describe(appDatePickerInputName, () => {
     mdcTextFieldInput: '.mdc-text-field__input',
     monthCalendar: appMonthCalendarName,
     yearDropdown: '.year-dropdown',
+    yearGridButton: '.year-grid-button',
+    yearGrid: appYearGridName,
   } as const;
   const formatter = DateTimeFormat('en-US', {
     year: 'numeric',
@@ -488,4 +492,69 @@ describe(appDatePickerInputName, () => {
     expect(closed).not.undefined;
   });
 
+  it('always opens date picker with startView=calendar', async () => {
+    const el = await fixture<AppDatePickerInput>(
+      html`<app-date-picker-input
+        .label=${label}
+        .max=${max}
+        .min=${min}
+        .placeholder=${placeholder}
+        .startView=${'yearGrid'}
+        .value=${value}
+      ></app-date-picker-input>`
+    );
+
+    // show picker
+    const openedTask = eventOnce<
+      typeof el,
+      'opened',
+      CustomEvent<unknown>>(el, 'opened');
+
+    el.showPicker();
+    const opened = await openedTask;
+    await el.updateComplete;
+
+    expect(opened).not.undefined;
+
+    const datePicker = el.query<AppDatePicker>(elementSelectors.datePicker);
+    const yearGrid = datePicker?.query<AppYearGrid>(elementSelectors.yearGrid);
+    const yearGridButton = yearGrid?.query(elementSelectors.yearGridButton);
+
+    // ensure year grid view when it first opens
+    expect(yearGrid).exist;
+    expect(yearGridButton).exist;
+
+    const closedTask = eventOnce<
+      typeof el,
+      'closed',
+      CustomEvent<DialogClosedEventDetail>>(el, 'closed');
+
+    // close picker
+    el.closePicker();
+    const closed = await closedTask;
+
+    expect(closed).not.undefined;
+
+    // show picker again
+    const openedTask2 = eventOnce<
+      typeof el,
+      'opened',
+      CustomEvent<unknown>>(el, 'opened');
+
+    el.showPicker();
+    const opened2 = await openedTask2;
+    await el.updateComplete;
+
+    expect(opened2).not.undefined;
+
+    const datePicker2 = el.query<AppDatePicker>(elementSelectors.datePicker);
+    const yearGrid2 = datePicker2?.query<AppYearGrid>(elementSelectors.yearGrid);
+    const yearGridButton2 = yearGrid2?.query<HTMLButtonElement>(elementSelectors.yearGridButton);
+    const monthCalendar = datePicker2?.query<AppMonthCalendar>(elementSelectors.monthCalendar);
+
+    // ensure calendar view when it re-opens
+    expect(yearGridButton2).not.exist;
+    expect(monthCalendar).exist;
+  });
+
 });
diff --git a/src/__tests__/year-grid-button/app-year-grid-button.test.ts b/src/__tests__/year-grid-button/app-year-grid-button.test.ts
@@ -3,9 +3,9 @@ import '../../year-grid-button/app-year-grid-button';
 import { expect, fixture, html } from '@open-wc/testing';
 
 import type { AppYearGridButton } from '../../year-grid-button/app-year-grid-button';
-import { appYearGridName } from '../../year-grid-button/constants';
+import { appYearGridButtonName } from '../../year-grid-button/constants';
 
-describe(appYearGridName, () => {
+describe(appYearGridButtonName, () => {
   it('renders', async () => {
     const el = await fixture<AppYearGridButton>(
       html`<app-year-grid-button label="test"></app-year-grid-button>`

diff --git a/src/date-picker-input/date-picker-input.ts b/src/date-picker-input/date-picker-input.ts
@@ -263,6 +263,7 @@ export class DatePickerInput extends ElementMixin(DatePickerMixin(DatePickerMinM
 
   #onClosed({ detail }: CustomEvent): void {
     this._open = false;
+    this.#picker && (this.#picker.startView = 'calendar');
     this.fire({ detail, type: 'closed' });
   }
 

diff --git a/src/year-grid-button/app-year-grid-button.ts b/src/year-grid-button/app-year-grid-button.ts
@@ -1,14 +1,14 @@
 import { customElement } from 'lit/decorators.js';
 
-import { appYearGridName } from './constants.js';
+import { appYearGridButtonName } from './constants.js';
 import { YearGridButton } from './year-grid-button.js';
 
 
-@customElement(appYearGridName)
+@customElement(appYearGridButtonName)
 export class AppYearGridButton extends YearGridButton {}
 
 declare global {
   interface HTMLElementTagNameMap {
-    [appYearGridName]: AppYearGridButton;
+    [appYearGridButtonName]: AppYearGridButton;
   }
 }
diff --git a/src/year-grid-button/constants.ts b/src/year-grid-button/constants.ts
@@ -1 +1 @@
-export const appYearGridName = 'app-year-grid-button' as const;
+export const appYearGridButtonName = 'app-year-grid-button' as const;