Skip to content

Commit

Permalink
test: fix tests after updating DatePickerDialogBase to use ShadowDOM
Browse files Browse the repository at this point in the history
  • Loading branch information
@motss
motss committed Dec 5, 2021
1 parent 6685f4a commit f449d2a
Show file tree
Hide file tree
Showing 7 changed files with 130 additions and 45 deletions.
18 changes: 16 additions & 2 deletions src/__demo__/demo-app.ts
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
import '../date-picker-dialog/app-date-picker-dialog-base.js';
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-input/app-date-picker-input.js';
import '../date-picker/app-date-picker.js';

import { css, html } from 'lit';
import { customElement, queryAsync } from 'lit/decorators.js';

import type { AppDatePicker } from '../date-picker/app-date-picker.js';
import type { AppDatePickerDialog } from '../date-picker-dialog/app-date-picker-dialog.js';
import { appDatePickerDialogName } from '../date-picker-dialog/constants.js';
import type { AppDatePickerDialogBase } from '../date-picker-dialog/app-date-picker-dialog-base.js';
import { appDatePickerDialogBaseName, appDatePickerDialogName } from '../date-picker-dialog/constants.js';
import type { AppDatePickerInput } from '../date-picker-input/app-date-picker-input.js';
import { appDatePickerInputName } from '../date-picker-input/constants.js';
import { RootElement } from '../root-element/root-element.js';
Expand All @@ -17,6 +19,7 @@ import type { CustomEventDetail } from '../typings.js';
@customElement('demo-app')
export class DemoApp extends RootElement {
@queryAsync(appDatePickerDialogName) dialog!: Promise<AppDatePickerDialog>;
@queryAsync(appDatePickerDialogBaseName) dialogBase!: Promise<AppDatePickerDialogBase>;
@queryAsync(appDatePickerInputName) input!: Promise<AppDatePickerInput>;

public static override styles = [
Expand Down Expand Up @@ -83,6 +86,11 @@ export class DemoApp extends RootElement {
<button @click=${this.#showDialog}>Open</button>
<app-date-picker-dialog id="datePickerDialog1"></app-date-picker-dialog>
<button @click=${this.#showDialogBase}>Open Base</button>
<app-date-picker-dialog-base id="datePickerDialogBase1">
<div class=test slot=test>Test</div>
</app-date-picker-dialog-base>
<!-- <app-date-picker-input></app-date-picker-input> -->
<!-- <app-datepicker-dialog class="datepicker-dialog"></app-datepicker-dialog> -->
<!-- <button class="open-btn" type="button">Open datepicker</button> -->
Expand All @@ -95,6 +103,12 @@ export class DemoApp extends RootElement {
dialog?.show();
}

async #showDialogBase() {
const dialog = await this.dialogBase;

dialog?.show();
}

#dateUpdated({
detail,
currentTarget,
Expand Down
74 changes: 46 additions & 28 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 @@ -54,8 +54,8 @@ describe(appDatePickerDialogName, () => {
});

const datePickerDialogDialog =
el.querySelector<AppDatePickerDialogDialog>(elementSelectors.datePickerDialogDialog);
const datePicker = el.querySelector(elementSelectors.datePicker);
el.query<AppDatePickerDialogDialog>(elementSelectors.datePickerDialogDialog);
const datePicker = el.query<AppDatePicker>(elementSelectors.datePicker);

await datePicker?.updateComplete;
await datePickerDialogDialog?.updateComplete;
Expand All @@ -66,9 +66,9 @@ describe(appDatePickerDialogName, () => {
expect(el.valueAsDate).deep.equal(new Date(value));
expect(el.valueAsNumber).equal(+new Date(value));

const dialogActionReset = el.querySelector(elementSelectors.dialogActionReset);
const dialogActionCancel = el.querySelector(elementSelectors.dialogActionCancel);
const dialogActionSet = el.querySelector(elementSelectors.dialogActionSet);
const dialogActionReset = el.query(elementSelectors.dialogActionReset);
const dialogActionCancel = el.query(elementSelectors.dialogActionCancel);
const dialogActionSet = el.query(elementSelectors.dialogActionSet);

expect(dialogActionReset).exist;
expect(dialogActionCancel).exist;
Expand All @@ -87,21 +87,22 @@ describe(appDatePickerDialogName, () => {
>(el, 'opened');

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

expect(datePickerDialogDialog).exist;
expect(datePicker).exist;
expect(datePicker).not.exist;
expect(datePickerDialogDialog?.hasAttribute('open')).false;

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

expect(opened).not.undefined;

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

expect(opened).not.undefined;
expect(datePickerDialogDialog?.hasAttribute('open')).true;

const closedTask = eventOnce<
Expand All @@ -112,12 +113,13 @@ describe(appDatePickerDialogName, () => {

el.hide();
const closed = await closedTask;
await datePicker?.updateComplete;
await datePickerDialogDialog?.updateComplete;
await el.updateComplete;

expect(closed).not.undefined;

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

expect(closed).not.undefined;
expect(datePickerDialogDialog?.hasAttribute('open')).false;
});

Expand Down Expand Up @@ -154,26 +156,39 @@ describe(appDatePickerDialogName, () => {
CustomEvent
>(el, 'opened');

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

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

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

expect(opened).not.undefined;
expect(datePickerDialogDialog).exist;
expect(monthCalendar).exist;
expect(datePicker).exist;
expect(datePickerDialogDialog).exist;
expect(dialogActionReset).exist;
expect(dialogActionCancel).exist;
expect(dialogActionSet).exist;
expect(datePickerDialogDialog?.hasAttribute('open')).true;
expect(el.value).equal(value);
Expand All @@ -186,14 +201,15 @@ describe(appDatePickerDialogName, () => {
AppDatePicker,
'date-updated',
CustomEvent<CustomEventDetail['date-updated']>

>(datePicker as AppDatePicker, 'date-updated');
>(datePicker as AppDatePicker, 'date-updated');

expect(newSelectedDate).exist;

newSelectedDate?.click();
await dateUpdatedTask;
await monthCalendar?.updateComplete;
await datePicker?.updateComplete;
await datePickerDialogDialog?.updateComplete;
await el.updateComplete;

expect(el.value).equal(value);
Expand Down Expand Up @@ -224,7 +240,9 @@ describe(appDatePickerDialogName, () => {
}

const closed = await closedTask;
await monthCalendar?.updateComplete;
await datePicker?.updateComplete;
await datePickerDialogDialog?.updateComplete;
await el.updateComplete;

if (testDialogAction === 'reset') {
Expand Down
53 changes: 53 additions & 0 deletions src/__tests__/date-picker-dialog/app-datepicker-dialog-base.test.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import '../../date-picker-dialog/app-date-picker-dialog-base';

import { expect, fixture, html } from '@open-wc/testing';
import type { TemplateResult } from 'lit';

import type { AppDatePickerDialogBase } from '../../date-picker-dialog/app-date-picker-dialog-base';
import type { AppDatePickerDialogDialog } from '../../date-picker-dialog/app-date-picker-dialog-dialog';
import { appDatePickerDialogBaseName, appDatePickerDialogDialogName } from '../../date-picker-dialog/constants';
import { messageFormatter } from '../test-utils/message-formatter';

describe(appDatePickerDialogBaseName, () => {
const elementSelectors = {
datePickerDialogDialog: appDatePickerDialogDialogName,
testSlot: '.test',
} as const;
const renderTestSlot = (): TemplateResult => html`<div class=test>Test</div>`;

type CaseRenders = [boolean, boolean];
const casesRenders: CaseRenders[] = [
[false, false],
[true, true],
];
casesRenders.forEach((a) => {
const [testOpen, expectedHasAssignedElements] = a;

it(
messageFormatter('renders (open=%s)', a),
async () => {
const el = await fixture<AppDatePickerDialogBase>(
html`<app-date-picker-dialog-base
.open=${testOpen}
>${renderTestSlot()}</app-date-picker-dialog-base>`
);

const datePickerDialogDialog = el.query<AppDatePickerDialogDialog>(
elementSelectors.datePickerDialogDialog
);
const lightTestSlot = el.querySelector(elementSelectors.testSlot);
const slot = datePickerDialogDialog?.query<HTMLSlotElement>('slot');

expect(datePickerDialogDialog).exist;
expect(lightTestSlot).exist;
expect(slot).exist;

const hasTestSlot =
slot?.assignedElements({ flatten: true })
.some(n => n.isEqualNode(lightTestSlot));

expect(hasTestSlot).equal(expectedHasAssignedElements);
}
)
});
});
22 changes: 11 additions & 11 deletions src/date-picker-dialog/date-picker-dialog-base.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@ import '@material/mwc-button';
import '@material/mwc-dialog';
import './app-date-picker-dialog-dialog.js';

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

import { toDateString } from '../helpers/to-date-string.js';
import { toResolvedDate } from '../helpers/to-resolved-date.js';
Expand All @@ -28,6 +28,7 @@ export class DatePickerDialogBase extends DatePickerMixin(DatePickerMinMaxMixin(
@property({ type: String }) public dismissLabel = 'cancel';
@property({ type: String }) public resetLabel = 'reset';
@property({ type: Boolean }) public open = false;
@state() private _rendered = false;

#isResetAction = false;
#selectedDate: Date;
Expand All @@ -43,15 +44,12 @@ export class DatePickerDialogBase extends DatePickerMixin(DatePickerMinMaxMixin(
this.#selectedDate = this.#valueAsDate = toResolvedDate();
}

protected override createRenderRoot(): Element | ShadowRoot {
const renderRoot = this as unknown as ShadowRoot;
override willUpdate(changedProperties: Map<string | number | symbol, unknown>): void {
super.willUpdate(changedProperties);

adoptStyles(
renderRoot,
(this.constructor as typeof ReactiveElement).elementStyles
);

return renderRoot;
if (!this._rendered && this.open) {
this._rendered = true;
}
}

protected override render(): TemplateResult {
Expand All @@ -65,6 +63,7 @@ export class DatePickerDialogBase extends DatePickerMixin(DatePickerMinMaxMixin(
@opened=${this.#onOpened}
@opening=${this.#onOpening}
>
${this._rendered ? html`
${this.$renderSlot()}
<div class=secondary-actions slot=secondaryAction>
Expand All @@ -81,6 +80,7 @@ export class DatePickerDialogBase extends DatePickerMixin(DatePickerMinMaxMixin(
dialogAction=set
slot=primaryAction
>${this.confirmLabel}</mwc-button>
` : nothing}
</app-date-picker-dialog-dialog>
`;
}
Expand Down
2 changes: 0 additions & 2 deletions src/date-picker-dialog/date-picker-dialog.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
import '../date-picker/app-date-picker.js';

import type { TemplateResult } from 'lit';

import { datePickerSlot } from '../helpers/date-picker-slot.js';
Expand Down
2 changes: 0 additions & 2 deletions src/date-picker-input/date-picker-input.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
import '../date-picker/app-date-picker.js';

import { TextField } from '@material/mwc-textfield';
import type { TemplateResult } from 'lit';
import { html, nothing } from 'lit';
Expand Down
4 changes: 4 additions & 0 deletions src/helpers/date-picker-slot.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import '../date-picker/app-date-picker.js';

import type { TemplateResult } from 'lit';
import { html } from 'lit';

Expand Down Expand Up @@ -48,3 +50,5 @@ export function datePickerSlot({
@first-updated=${onDatePickerFirstUpdated}
></app-date-picker>`;
}

// FIXME: Make this a mixin instead

0 comments on commit f449d2a

Please sign in to comment.