Skip to content

Commit

Permalink
feat: datePickerDialog now re-opens in calendar view
Browse files Browse the repository at this point in the history
  • Loading branch information
@motss
motss committed Jan 25, 2022
1 parent 376c98b commit a462fbe
Show file tree
Hide file tree
Showing 3 changed files with 83 additions and 47 deletions.
92 changes: 63 additions & 29 deletions src/__tests__/date-picker-dialog/app-date-picker-dialog.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ import { toResolvedDate } from '../../helpers/to-resolved-date';
import type { AppMonthCalendar } from '../../month-calendar/app-month-calendar';
import { appMonthCalendarName } from '../../month-calendar/constants';
import type { CustomEventDetail } from '../../typings';
import type { AppYearGrid } from '../../year-grid/app-year-grid';
import { appYearGridName } from '../../year-grid/constants';
import { promiseTimeout } from '../constants';
import { eventOnce } from '../test-utils/event-once';
import { messageFormatter } from '../test-utils/message-formatter';
Expand All @@ -28,6 +30,7 @@ describe(appDatePickerDialogName, () => {
dialogActionReset: `mwc-button[data-dialog-action="reset"]`,
dialogActionSet: `mwc-button[dialogaction="set"]`,
monthCalendar: appMonthCalendarName,
yearGrid: appYearGridName,
} as const;
const formatter = DateTimeFormat('en-US', {
year: 'numeric',
Expand All @@ -53,16 +56,16 @@ describe(appDatePickerDialogName, () => {
globalThis.setTimeout(() => resolve(element), promiseTimeout);
});

const datePickerDialogDialog =
const datePickerDialogBase =
el.query<AppDatePickerDialogBase>(elementSelectors.datePickerDialogBase);
const datePicker = el.query<AppDatePicker>(elementSelectors.datePicker);

await datePicker?.updateComplete;
await datePickerDialogDialog?.updateComplete;
await datePickerDialogBase?.updateComplete;

expect(datePickerDialogDialog).exist;
expect(datePickerDialogBase).exist;
expect(datePicker).exist;
expect(datePickerDialogDialog?.hasAttribute('open')).true;
expect(datePickerDialogBase?.hasAttribute('open')).true;
expect(el.valueAsDate).deep.equal(new Date(value));
expect(el.valueAsNumber).equal(+new Date(value));

Expand All @@ -75,35 +78,42 @@ describe(appDatePickerDialogName, () => {
expect(dialogActionSet).exist;
});

it('opens and closes date picker dialog', async () => {
it('always re-opens in calendar view', async () => {
const el = await fixture<AppDatePickerDialog>(
html`<app-date-picker-dialog></app-date-picker-dialog>`
html`<app-date-picker-dialog
.startView=${'yearGrid'}
></app-date-picker-dialog>`
);

const openedTask = eventOnce<
let openedTask = eventOnce<
typeof el,
'opened',
CustomEvent
>(el, 'opened');

const datePickerDialogDialog =
const datePickerDialogBase =
el.query<AppDatePickerDialogBase>(elementSelectors.datePickerDialogBase);
let datePicker = datePickerDialogDialog?.query<AppDatePicker>(elementSelectors.datePicker);
let datePicker = datePickerDialogBase?.query<AppDatePicker>(elementSelectors.datePicker);

expect(datePickerDialogDialog).exist;
// initially no date picker is rendered
expect(datePickerDialogBase).exist;
expect(datePicker).not.exist;
expect(datePickerDialogDialog?.hasAttribute('open')).false;
expect(datePickerDialogBase?.hasAttribute('open')).false;

el.show();
const opened = await openedTask;
let opened = await openedTask;
await datePicker?.updateComplete;
await datePickerDialogDialog?.updateComplete;
await datePickerDialogBase?.updateComplete;
await el.updateComplete;

datePicker = el.query<AppDatePicker>(elementSelectors.datePicker);
let yearGrid = datePicker?.query<AppYearGrid>(elementSelectors.yearGrid);

// ensure dialog opens with date picker rendered in year grid view
expect(opened).not.undefined;
expect(datePickerDialogDialog?.hasAttribute('open')).true;
expect(datePicker).exist;
expect(datePickerDialogBase?.hasAttribute('open')).true;
expect(yearGrid).exist;

const closedTask = eventOnce<
typeof el,
Expand All @@ -114,13 +124,37 @@ describe(appDatePickerDialogName, () => {
el.hide();
const closed = await closedTask;
await datePicker?.updateComplete;
await datePickerDialogDialog?.updateComplete;
await datePickerDialogBase?.updateComplete;
await el.updateComplete;

datePicker = el.query<AppDatePicker>(elementSelectors.datePicker);

// ensure date picker still in the down after closing
expect(closed).not.undefined;
expect(datePickerDialogDialog?.hasAttribute('open')).false;
expect(datePicker).exist;
expect(datePickerDialogBase?.hasAttribute('open')).false;

openedTask = eventOnce<
typeof el,
'opened',
CustomEvent
>(el, 'opened');

el.show();
opened = await openedTask;
await datePicker?.updateComplete;
await datePickerDialogBase?.updateComplete;
await el.updateComplete;

datePicker = el.query<AppDatePicker>(elementSelectors.datePicker);
const monthCalendar = datePicker?.query<AppMonthCalendar>(elementSelectors.monthCalendar);
yearGrid = datePicker?.query<AppYearGrid>(elementSelectors.yearGrid);

// ensure dialog re-opens with date picker rendered in calendar view
expect(opened).not.undefined;
expect(monthCalendar).exist;
expect(yearGrid).not.exist;
expect(datePickerDialogBase?.hasAttribute('open')).true;
});

type CaseSelectsAndConfirmsNewDate = [string, string, DialogClosingEventDetailAction, boolean, string];
Expand Down Expand Up @@ -156,41 +190,41 @@ describe(appDatePickerDialogName, () => {
CustomEvent
>(el, 'opened');

let datePickerDialogDialog =
let datePickerDialogBase =
el.query<AppDatePickerDialogBase>(elementSelectors.datePickerDialogBase);
let datePicker =
datePickerDialogDialog?.query<AppDatePicker>(elementSelectors.datePicker);
datePickerDialogBase?.query<AppDatePicker>(elementSelectors.datePicker);
let monthCalendar =
datePicker?.query<AppMonthCalendar>(elementSelectors.monthCalendar);

el.show();
const opened = await openedTask;
await monthCalendar?.updateComplete;
await datePicker?.updateComplete;
await datePickerDialogDialog?.updateComplete;
await datePickerDialogBase?.updateComplete;
await el.updateComplete;

datePickerDialogDialog =
datePickerDialogBase =
el.query<AppDatePickerDialogBase>(elementSelectors.datePickerDialogBase);
datePicker =
datePickerDialogDialog?.querySelector<AppDatePicker>(elementSelectors.datePicker);
datePickerDialogBase?.querySelector<AppDatePicker>(elementSelectors.datePicker);
monthCalendar =
datePicker?.query<AppMonthCalendar>(elementSelectors.monthCalendar);
const dialogActionReset =
datePickerDialogDialog?.querySelector<Button>(elementSelectors.dialogActionReset);
datePickerDialogBase?.querySelector<Button>(elementSelectors.dialogActionReset);
const dialogActionCancel =
datePickerDialogDialog?.querySelector<Button>(elementSelectors.dialogActionCancel);
datePickerDialogBase?.querySelector<Button>(elementSelectors.dialogActionCancel);
const dialogActionSet =
datePickerDialogDialog?.querySelector<Button>(elementSelectors.dialogActionSet);
datePickerDialogBase?.querySelector<Button>(elementSelectors.dialogActionSet);

expect(opened).not.undefined;
expect(monthCalendar).exist;
expect(datePicker).exist;
expect(datePickerDialogDialog).exist;
expect(datePickerDialogBase).exist;
expect(dialogActionReset).exist;
expect(dialogActionCancel).exist;
expect(dialogActionSet).exist;
expect(datePickerDialogDialog?.hasAttribute('open')).true;
expect(datePickerDialogBase?.hasAttribute('open')).true;
expect(el.value).equal(value);

const newValueDate = new Date(testNewValue);
Expand All @@ -209,7 +243,7 @@ describe(appDatePickerDialogName, () => {
await dateUpdatedTask;
await monthCalendar?.updateComplete;
await datePicker?.updateComplete;
await datePickerDialogDialog?.updateComplete;
await datePickerDialogBase?.updateComplete;
await el.updateComplete;

expect(el.value).equal(value);
Expand Down Expand Up @@ -242,7 +276,7 @@ describe(appDatePickerDialogName, () => {
const closed = await closedTask;
await monthCalendar?.updateComplete;
await datePicker?.updateComplete;
await datePickerDialogDialog?.updateComplete;
await datePickerDialogBase?.updateComplete;
await el.updateComplete;

if (testDialogAction === 'reset') {
Expand All @@ -252,7 +286,7 @@ describe(appDatePickerDialogName, () => {
}

expect(
datePickerDialogDialog?.hasAttribute('open')
datePickerDialogBase?.hasAttribute('open')
).equal(expectedDatePickerDialogHasAttributeOpen);
expect(el.value).equal(expectedDatePickerDialogValue);
expect(el.valueAsDate).deep.equal(new Date(expectedDatePickerDialogValue));
Expand Down
26 changes: 11 additions & 15 deletions src/__tests__/date-picker-input/app-date-picker-input.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -492,7 +492,7 @@ describe(appDatePickerInputName, () => {
expect(closed).not.undefined;
});

it('always opens date picker with startView=calendar', async () => {
it('always re-opens in calendar view', async () => {
const el = await fixture<AppDatePickerInput>(
html`<app-date-picker-input
.label=${label}
Expand All @@ -505,24 +505,22 @@ describe(appDatePickerInputName, () => {
);

// show picker
const openedTask = eventOnce<
let openedTask = eventOnce<
typeof el,
'opened',
CustomEvent<unknown>>(el, 'opened');

el.showPicker();
const opened = await openedTask;
let 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);
let datePicker = el.query<AppDatePicker>(elementSelectors.datePicker);
let yearGrid = datePicker?.query<AppYearGrid>(elementSelectors.yearGrid);

// ensure year grid view when it first opens
expect(yearGrid).exist;
expect(yearGridButton).exist;

const closedTask = eventOnce<
typeof el,
Expand All @@ -536,24 +534,22 @@ describe(appDatePickerInputName, () => {
expect(closed).not.undefined;

// show picker again
const openedTask2 = eventOnce<
openedTask = eventOnce<
typeof el,
'opened',
CustomEvent<unknown>>(el, 'opened');

el.showPicker();
const opened2 = await openedTask2;
opened = await openedTask;
await el.updateComplete;

expect(opened2).not.undefined;
expect(opened).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);
datePicker = el.query<AppDatePicker>(elementSelectors.datePicker);
yearGrid = datePicker?.query<AppYearGrid>(elementSelectors.yearGrid);
const monthCalendar = datePicker?.query<AppMonthCalendar>(elementSelectors.monthCalendar);

// ensure calendar view when it re-opens
expect(yearGridButton2).not.exist;
expect(monthCalendar).exist;
});

Expand Down
12 changes: 9 additions & 3 deletions src/date-picker-dialog/date-picker-dialog.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,10 @@ import './app-date-picker-dialog-base.js';

import type { TemplateResult } from 'lit';
import { html, nothing } from 'lit';
import { property, state } from 'lit/decorators.js';
import { property, queryAsync, state } from 'lit/decorators.js';

import type { AppDatePicker } from '../date-picker/app-date-picker.js';
import { appDatePickerName } from '../date-picker/constants.js';
import { slotDatePicker } from '../helpers/slot-date-picker.js';
import { toDateString } from '../helpers/to-date-string.js';
import { toResolvedDate } from '../helpers/to-resolved-date.js';
Expand All @@ -28,8 +30,9 @@ export class DatePickerDialog extends DatePickerMixin(DatePickerMinMaxMixin(Root

@property({ type: String }) public confirmLabel = 'set';
@property({ type: String }) public dismissLabel = 'cancel';
@property({ type: String }) public resetLabel = 'reset';
@property({ type: Boolean }) public open = false;
@property({ type: String }) public resetLabel = 'reset';
@queryAsync(appDatePickerName) private _datePicker!: Promise<AppDatePicker>;
@state() private _rendered = false;

#isResetAction = false;
Expand Down Expand Up @@ -165,8 +168,11 @@ export class DatePickerDialog extends DatePickerMixin(DatePickerMinMaxMixin(Root
});
}

#onClosed = (ev: CustomEvent<DialogClosedEventDetail>) => {
#onClosed = async (ev: CustomEvent<DialogClosedEventDetail>) => {
const datePicker = await this._datePicker;

this.hide();
datePicker && (datePicker.startView = 'calendar');
this.fire({ detail: ev.detail, type: 'closed' });
};

Expand Down

0 comments on commit a462fbe

Please sign in to comment.