From f449d2ad517df4a083333d304cb62d98ef10d34f Mon Sep 17 00:00:00 2001
From: "Rong Sen Ng (motss)" <wes.ngrongsen@gmail.com>
Date: Mon, 6 Dec 2021 01:39:02 +0800
Subject: [PATCH] test: fix tests after updating DatePickerDialogBase to use
 ShadowDOM

---
 src/__demo__/demo-app.ts                      | 18 ++++-
 .../app-date-picker-dialog.test.ts            | 74 ++++++++++++-------
 .../app-datepicker-dialog-base.test.ts        | 53 +++++++++++++
 .../date-picker-dialog-base.ts                | 22 +++---
 src/date-picker-dialog/date-picker-dialog.ts  |  2 -
 src/date-picker-input/date-picker-input.ts    |  2 -
 src/helpers/date-picker-slot.ts               |  4 +
 7 files changed, 130 insertions(+), 45 deletions(-)
 create mode 100644 src/__tests__/date-picker-dialog/app-datepicker-dialog-base.test.ts

diff --git a/src/__demo__/demo-app.ts b/src/__demo__/demo-app.ts
index 0e4c11a1..57c2fbfa 100644
--- a/src/__demo__/demo-app.ts
+++ b/src/__demo__/demo-app.ts
@@ -1,6 +1,7 @@
+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';
@@ -8,7 +9,8 @@ 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';
@@ -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 = [
@@ -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> -->
@@ -95,6 +103,12 @@ export class DemoApp extends RootElement {
     dialog?.show();
   }
 
+  async #showDialogBase() {
+    const dialog = await this.dialogBase;
+
+    dialog?.show();
+  }
+
   #dateUpdated({
     detail,
     currentTarget,
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
index 29abb941..f1f49313 100644
--- a/src/__tests__/date-picker-dialog/app-date-picker-dialog.test.ts
+++ b/src/__tests__/date-picker-dialog/app-date-picker-dialog.test.ts
@@ -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;
@@ -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;
@@ -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<
@@ -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;
   });
 
@@ -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);
@@ -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);
@@ -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') {
diff --git a/src/__tests__/date-picker-dialog/app-datepicker-dialog-base.test.ts b/src/__tests__/date-picker-dialog/app-datepicker-dialog-base.test.ts
new file mode 100644
index 00000000..10e7a896
--- /dev/null
+++ b/src/__tests__/date-picker-dialog/app-datepicker-dialog-base.test.ts
@@ -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);
+      }
+    )
+  });
+});
diff --git a/src/date-picker-dialog/date-picker-dialog-base.ts b/src/date-picker-dialog/date-picker-dialog-base.ts
index d8ad72d2..57973758 100644
--- a/src/date-picker-dialog/date-picker-dialog-base.ts
+++ b/src/date-picker-dialog/date-picker-dialog-base.ts
@@ -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';
@@ -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;
@@ -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 {
@@ -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>
@@ -81,6 +80,7 @@ export class DatePickerDialogBase extends DatePickerMixin(DatePickerMinMaxMixin(
         dialogAction=set
         slot=primaryAction
       >${this.confirmLabel}</mwc-button>
+      ` : nothing}
     </app-date-picker-dialog-dialog>
     `;
   }
diff --git a/src/date-picker-dialog/date-picker-dialog.ts b/src/date-picker-dialog/date-picker-dialog.ts
index 431c8fcb..df16bbc7 100644
--- a/src/date-picker-dialog/date-picker-dialog.ts
+++ b/src/date-picker-dialog/date-picker-dialog.ts
@@ -1,5 +1,3 @@
-import '../date-picker/app-date-picker.js';
-
 import type { TemplateResult } from 'lit';
 
 import { datePickerSlot } from '../helpers/date-picker-slot.js';
diff --git a/src/date-picker-input/date-picker-input.ts b/src/date-picker-input/date-picker-input.ts
index 91070fa5..60a3ea74 100644
--- a/src/date-picker-input/date-picker-input.ts
+++ b/src/date-picker-input/date-picker-input.ts
@@ -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';
diff --git a/src/helpers/date-picker-slot.ts b/src/helpers/date-picker-slot.ts
index a1fa3e8a..e7165e67 100644
--- a/src/helpers/date-picker-slot.ts
+++ b/src/helpers/date-picker-slot.ts
@@ -1,3 +1,5 @@
+import '../date-picker/app-date-picker.js';
+
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
@@ -48,3 +50,5 @@ export function datePickerSlot({
     @first-updated=${onDatePickerFirstUpdated}
   ></app-date-picker>`;
 }
+
+// FIXME: Make this a mixin instead