@lion/ui 0.24.0 → 0.26.0

package/components/input-datepicker/test-suites/LionInputDatepicker.suite.js

@@ -1,13 +1,67 @@
-import { expect, html, fixture, waitUntil, unsafeStatic } from '@open-wc/testing';
-import { sendKeys } from '@web/test-runner-commands';
-
-/** @typedef {import('@lion/ui/input-datepicker.js').LionInputDatepicker} LionInputDatepicker */
+import { html } from 'lit/static-html.js';
+// The suite templates need `html` from static-html for `${tag}`; these two overrides are compared
+// against Lion's own `() => TemplateResult<1>` signature, so they use plain lit-html's `html`.
+import {
+  aTimeout,
+  defineCE,
+  expect,
+  fixture,
+  fixture as _fixture,
+  nextFrame,
+  unsafeStatic,
+  waitUntil,
+} from '@open-wc/testing';
+import { sendKeys, setViewport } from '@web/test-runner-commands';
+import { LionCalendar, isSameDate } from '@lion/ui/calendar.js';
+import { html as htmlNonStatic, LitElement } from 'lit';
+import { IsDateDisabled, MaxDate, MinDate, MinMaxDate } from '@lion/ui/form-core.js';
+import { mimicClick } from '@lion/ui/overlays-test-helpers.js';
+import { parseDate } from '@lion/ui/localize.js';
+import { AlwaysInvalid } from '@lion/ui/form-core-test-helpers.js';
+import { DatepickerInputObject as DefaultInputObject } from '@lion/ui/input-datepicker-test-helpers.js';
+import { LionInputDatepicker } from '@lion/ui/input-datepicker.js';
+import '@lion/ui/define/lion-input-datepicker.js';
+import sinon from 'sinon';
+import { resolveSuiteTag } from '../../core/test-helpers/resolveSuiteTag.js';
 
+/**
+ * @param {{
+ *   classes?: Record<string, CustomElementConstructor>,
+ *   datepickerTagName?: string,
+ *   calendarTagName?: string,
+ *   InputObject?: typeof DefaultInputObject,
+ * }} [customConfig]
+ */
 export function runDatepickerSuite({
+  classes = {},
   datepickerTagName = 'lion-input-datepicker',
   calendarTagName = 'lion-calendar',
+  // The tests drive the datepicker through a page object; an extension layer whose overlay markup
+  // differs (ING renders its own popover frame) passes its own subclass here instead of the suite
+  // learning about that markup. See docs/guides/principles/test-suites.md.
+  InputObject = DefaultInputObject,
 } = {}) {
-  const tag = unsafeStatic(datepickerTagName);
+  const datepickerTag = resolveSuiteTag(classes.host, datepickerTagName, 'lion-input-datepicker');
+  const calendarTag = resolveSuiteTag(classes.calendar, calendarTagName, 'lion-calendar');
+  const tag = unsafeStatic(datepickerTag);
+
+  /**
+   * The accessible name of a node, regardless of the mechanism an extension layer uses for it:
+   * Lion puts it on `title`/`aria-label`, a design system that delegates a11y to Lion but styles its
+   * own invoker exposes the same string as `label` on its own button element.
+   * @param {Element|null|undefined} node
+   * @returns {string|null}
+   */
+  function accessibleName(node) {
+    return (
+      node?.getAttribute('title') ||
+      node?.getAttribute('aria-label') ||
+      node?.getAttribute('label') ||
+      node?.querySelector?.('[label]')?.getAttribute('label') ||
+      node?.shadowRoot?.querySelector?.('[label]')?.getAttribute('label') ||
+      null
+    );
+  }
   it('should not reopen the datepicker popup when the date is selected by keyboard', async () => {
     /** @type {LionInputDatepicker} */
     const el = await fixture(html`<${tag} .modelValue="${new Date('2018/05/30')}"></${tag}>`);
@@ -17,15 +71,11 @@ export function runDatepickerSuite({
     const openDatepickerButton = el._invokerNode;
     openDatepickerButton?.focus();
     openDatepickerButton?.click();
-    /**
-     * @returns {HTMLElement | null | undefined}
-     */
-    const getSelectedDateEl = () =>
-      el?.shadowRoot
-        ?.querySelector(calendarTagName)
-        ?.shadowRoot?.querySelector('.calendar__day-button[selected]');
-    await waitUntil(getSelectedDateEl);
-    getSelectedDateEl()?.focus();
+    await waitUntil(() => el.opened === true);
+
+    // Opening through the invoker leaves the focus on the calendar, which is what the arrow key needs:
+    // measured on Firefox, a day button focused by hand does not receive it, the selection stays put,
+    // `Enter` reaches the invoker and the popup reopens.
     await sendKeys({
       press: 'ArrowLeft',
     });
@@ -34,4 +84,839 @@ export function runDatepickerSuite({
     });
     expect(el.opened).to.be.false;
   });
+  /**
+   * @typedef {import('lit').TemplateResult} TemplateResult
+   */
+
+  /**
+   * @param {LionInputDatepicker} datepickerEl
+   */
+  function getProtectedMembersDatepicker(datepickerEl) {
+    // @ts-ignore
+    const { __invokerId: invokerId, _calendarNode: calendarNode } = datepickerEl;
+    return {
+      invokerId,
+      calendarNode,
+    };
+  }
+
+  /**
+   * @param {LionCalendar} calendarEl
+   */
+  function getProtectedMembersCalendar(calendarEl) {
+    return {
+      // @ts-ignore
+      dateSelectedByUser: (...args) => calendarEl.__dateSelectedByUser(...args),
+    };
+  }
+  const fixtureForSuite =
+    /** @type {(arg: TemplateResult) => Promise<LionInputDatepicker>} */
+    _fixture;
+  describe('<lion-input-datepicker>', () => {
+    describe('Calendar Overlay', () => {
+      it('implements calendar-overlay Style component', async () => {
+        const el = await fixtureForSuite(html`<${tag}></${tag}>`);
+        const elObj = new InputObject(el);
+        await elObj.openCalendar();
+        expect(elObj.overlayRootEl).not.to.equal(null);
+        expect(elObj.overlayHeaderEl).not.to.equal(null);
+        expect(elObj.overlayHeadingEl).not.to.equal(null);
+        expect(elObj.overlayCloseButtonContainerEl).not.to.equal(null);
+      });
+      it('has a close button, with a tooltip "Close"', async () => {
+        const el = await fixtureForSuite(html`<${tag}></${tag}>`);
+        const elObj = new InputObject(el);
+        await elObj.openCalendar();
+        expect(accessibleName(elObj.overlayCloseButtonEl)).to.equal('Close');
+      });
+      it('has a default title based on input label', async () => {
+        const el = await fixtureForSuite(html`
+          <${tag}
+            .label="${'Pick your date'}"
+            .modelValue="${new Date('2020-02-15')}"
+          ></${tag}>
+        `);
+        const elObj = new InputObject(el);
+        await elObj.openCalendar();
+        expect(elObj.overlayHeadingEl.innerText.trim()).to.equal('Pick your date');
+      });
+      it('can have a custom heading', async () => {
+        const el = await fixtureForSuite(html`
+          <${tag}
+            label="Pick your date"
+            calendar-heading="foo"
+          ></${tag}>
+        `);
+        const elObj = new InputObject(el);
+        await elObj.openCalendar();
+        expect(elObj.overlayHeadingEl.innerText).to.equal('foo');
+      });
+      it('closes the calendar on [esc] key', async () => {
+        const el = await fixtureForSuite(html`<${tag}></${tag}>`);
+        const elObj = new InputObject(el);
+        await elObj.openCalendar();
+        expect(elObj.overlayController.isShown).to.equal(true);
+        elObj.overlayController.contentNode.dispatchEvent(
+          new KeyboardEvent('keyup', {
+            key: 'Escape',
+          }),
+        );
+        await nextFrame();
+        expect(elObj.overlayController.isShown).to.equal(false);
+      });
+      it('closes the calendar via close button', async () => {
+        const el = await fixtureForSuite(html`<${tag}></${tag}>`);
+        const elObj = new InputObject(el);
+        await elObj.openCalendar();
+        expect(elObj.overlayController.isShown).to.equal(true);
+        elObj.overlayCloseButtonEl.click();
+        await nextFrame();
+        expect(elObj.overlayController.isShown).to.equal(false);
+      });
+      it('closes the calendar via outside click event', async () => {
+        const el = await fixtureForSuite(html`<${tag}></${tag}>`);
+        const elObj = new InputObject(el);
+        await elObj.openCalendar();
+        expect(elObj.overlayController.isShown).to.equal(true);
+        mimicClick(document.body);
+        await aTimeout(0);
+        expect(elObj.overlayController.isShown).to.be.false;
+      });
+
+      /**
+       * Not in scope:
+       * - centralDate can be overridden
+       */
+    });
+    describe('Calendar Invoker', () => {
+      it('adds invoker button that toggles the overlay on click in suffix slot ', async () => {
+        const el = await fixtureForSuite(html`<${tag}></${tag}>`);
+        const elObj = new InputObject(el);
+        expect(elObj.invokerEl).not.to.equal(null);
+        expect(elObj.overlayController.isShown).to.be.false;
+        await elObj.openCalendar();
+        expect(elObj.overlayController.isShown).to.equal(true);
+      });
+      it('delegates disabled state of host input', async () => {
+        const el = await fixtureForSuite(html`<${tag} disabled></${tag}>`);
+        const elObj = new InputObject(el);
+        expect(elObj.overlayController.isShown).to.equal(false);
+        await elObj.openCalendar({
+          click: true,
+        });
+        expect(elObj.overlayController.isShown).to.equal(false);
+        el.disabled = false;
+        await elObj.openCalendar({
+          click: true,
+        });
+        expect(elObj.overlayController.isShown).to.equal(true);
+      });
+      it('disables invoker when host input is readonly', async () => {
+        const el = await fixtureForSuite(html`<${tag} readonly></${tag}>`);
+        const elObj = new InputObject(el);
+        expect(elObj.overlayController.isShown).to.equal(false);
+        await elObj.openCalendar({
+          click: true,
+        });
+        expect(elObj.overlayController.isShown).to.equal(false);
+        el.readOnly = false;
+        await elObj.openCalendar({
+          click: true,
+        });
+        expect(elObj.overlayController.isShown).to.equal(true);
+      });
+    });
+    describe('Input - calendar synchronization', () => {
+      it('syncs modelValue with lion-calendar', async () => {
+        const myDate = new Date('2019/06/15');
+        const myOtherDate = new Date('2019/06/28');
+        const el = await fixtureForSuite(html`
+          <${tag} .modelValue="${myDate}"></${tag}>
+        `);
+        const elObj = new InputObject(el);
+        await elObj.openCalendar();
+        expect(elObj.calendarEl.selectedDate).to.equal(myDate);
+        await elObj.selectMonthDay(myOtherDate.getDate());
+        expect(isSameDate(/** @type {Date} */ el.modelValue, myOtherDate)).to.be.true;
+      });
+      it('restores centralDate when modelValue is cleared', async () => {
+        const myDate = new Date('2019/06/15');
+        const el = await fixtureForSuite(html` <${tag}></${tag}> `);
+        const elObj = new InputObject(el);
+        const initialCentralDate = elObj.calendarEl.centralDate;
+        el.modelValue = myDate;
+        await elObj.openCalendar();
+        expect(elObj.calendarEl.selectedDate).to.equal(myDate);
+        expect(elObj.calendarEl.centralDate).to.equal(myDate);
+        el.modelValue = undefined;
+        expect(elObj.calendarEl.centralDate).to.equal(myDate);
+        await elObj.closeCalendar();
+        await elObj.openCalendar();
+        expect(elObj.calendarEl.centralDate).to.equal(initialCentralDate);
+      });
+      it('closes the calendar overlay on "user-selected-date-changed"', async () => {
+        const el = await fixtureForSuite(html`<${tag}></${tag}>`);
+        const elObj = new InputObject(el);
+        // Make sure the calendar overlay is opened
+        await elObj.openCalendar();
+        expect(elObj.overlayController.isShown).to.equal(true);
+        // Mimic user input: should fire the 'user-selected-date-changed' event
+        await elObj.selectMonthDay(12);
+        await el.updateComplete; // safari take a little longer
+        expect(elObj.overlayController.isShown).to.equal(false);
+      });
+      it('focuses selected date on opening of calendar', async () => {
+        const el = await fixtureForSuite(html`
+          <${tag} .modelValue="${new Date()}"></${tag}>
+        `);
+        const elObj = new InputObject(el);
+        await elObj.openCalendar();
+        await aTimeout(0);
+        expect(
+          isSameDate(
+            /** @type {Date} */ elObj.calendarEl.focusedDate,
+            /** @type {Date} */ elObj.calendarEl.selectedDate,
+          ),
+        ).to.be.true;
+      });
+      it('focuses central date on opening of calendar if no date selected', async () => {
+        const el = await fixtureForSuite(html`<${tag}></${tag}>`);
+        const elObj = new InputObject(el);
+        await elObj.openCalendar();
+        await aTimeout(0);
+        expect(
+          isSameDate(
+            /** @type {Date} */ elObj.calendarEl.focusedDate,
+            elObj.calendarEl.centralDate,
+          ),
+        ).to.be.true;
+      });
+      it('fires model-value-changed with isTriggeredByUser on click', async () => {
+        let isTriggeredByUser;
+        const myDate = new Date('2019/12/15');
+        const myOtherDate = new Date('2019/12/18');
+        const el = await fixtureForSuite(html`
+          <${tag}
+            .modelValue="${myDate}"
+            @model-value-changed="${(/** @type {CustomEvent} */ event) => {
+              isTriggeredByUser = event.detail.isTriggeredByUser;
+            }}"
+          >
+          </${tag}>
+        `);
+        const elObj = new InputObject(el);
+        // Make sure the calendar overlay is opened
+        await elObj.openCalendar();
+        expect(elObj.overlayController.isShown).to.equal(true);
+        // Mimic user input: should fire the 'user-selected-date-changed' event
+        await elObj.selectMonthDay(myOtherDate.getDate());
+        await el.updateComplete; // safari take a little longer
+        expect(isTriggeredByUser).to.be.true;
+        expect(el.value).to.equal('18/12/2019');
+      });
+      describe('localization', () => {
+        /** @type {import('@lion/ui/localize.js').LocalizeManager} */ let localizeManager;
+        before(async () => {
+          const { getLocalizeManager } = await import('@lion/ui/localize-no-side-effects.js');
+          localizeManager = getLocalizeManager();
+        });
+        it('should update formatted value and value in accordance of localization upon model value update', async () => {
+          localizeManager.locale = 'nl-NL';
+          const el = await fixtureForSuite(html`
+            <${tag} .modelValue="${new Date('2022/12/30')}"></${tag}>
+          `);
+          await el.updateComplete;
+          expect(el.formattedValue).to.equal('30-12-2022');
+          expect(el.value).to.equal('30-12-2022');
+        });
+        after(() => {
+          // @ts-ignore - using protected method to undo setting explict locale
+          localizeManager.locale = localizeManager._fallbackLocale;
+        });
+      });
+      describe('Validators', () => {
+        /**
+         * Validators are the Application Developer facing API in <${tag}>:
+         * - setting restrictions on min/max/disallowed dates will be done via validators
+         * - all validators will be translated under the hood to enabledDates and passed to
+         *   lion-calendar
+         */
+        it('converts IsDateDisabled validator to "disableDates" property', async () => {
+          const no15th = /** @param {Date} d */ (d) => d.getDate() !== 15;
+          const no16th = /** @param {Date} d */ (d) => d.getDate() !== 16;
+          const no15thOr16th = /** @param {Date} d */ (d) => no15th(d) && no16th(d);
+          const el = await fixtureForSuite(html`
+            <${tag} .validators="${[new IsDateDisabled(no15thOr16th)]}">
+            </${tag}>
+          `);
+          const elObj = new InputObject(el);
+          await elObj.openCalendar();
+          expect(elObj.calendarEl.disableDates).to.equal(no15thOr16th);
+        });
+        it('converts MinDate validator to "minDate" property', async () => {
+          const myMinDate = new Date('2019/06/15');
+          const el = await fixtureForSuite(html` <${tag} .validators="${[new MinDate(myMinDate)]}">
+            </${tag}>`);
+          const elObj = new InputObject(el);
+          await elObj.openCalendar();
+          expect(elObj.calendarEl.minDate).to.equal(myMinDate);
+        });
+        it('converts MaxDate validator to "maxDate" property', async () => {
+          const myMaxDate = new Date('2030/06/15');
+          const el = await fixtureForSuite(html`
+            <${tag} .validators=${[new MaxDate(myMaxDate)]}> </${tag}>
+          `);
+          const elObj = new InputObject(el);
+          await elObj.openCalendar();
+          expect(elObj.calendarEl.maxDate).to.equal(myMaxDate);
+        });
+        it('converts MinMaxDate validator to "minDate" and "maxDate" property', async () => {
+          const myMinDate = new Date('2019/06/15');
+          const myMaxDate = new Date('2030/06/15');
+          const el = await fixtureForSuite(html`
+            <${tag}
+              .validators=${[
+                new MinMaxDate({
+                  min: myMinDate,
+                  max: myMaxDate,
+                }),
+              ]}
+            >
+            </${tag}>
+          `);
+          const elObj = new InputObject(el);
+          await elObj.openCalendar();
+          expect(elObj.calendarEl.minDate).to.equal(myMinDate);
+          expect(elObj.calendarEl.maxDate).to.equal(myMaxDate);
+        });
+        it('does not converts MaxDate validator to "maxDate" property if validator type other then "error"', async () => {
+          const myMaxDate = new Date('2030/06/15');
+          const tagName = 'custom-input-datepicker';
+          if (!customElements.get(tagName)) {
+            customElements.define(
+              tagName,
+              class CustomInputDatepicker extends LionInputDatepicker {
+                static get validationTypes() {
+                  // @ts-ignore [ts7-2855] TS7 rejects field access via super (the parent declares this as a field). Dot form kept deliberately: bracket access is exempt from property mangling (terser keep_quoted), which could split this property into two names. Upstream fix: declare an accessor in the parent type
+                  return [...super.validationTypes, 'warning'];
+                }
+              },
+            );
+          }
+          const el = await fixtureForSuite(html`
+            <custom-input-datepicker
+              .validators=${[
+                new MaxDate(myMaxDate, {
+                  type: 'warning',
+                }),
+              ]}
+            >
+            </custom-input-datepicker>
+          `);
+          const elObj = new InputObject(el);
+          await elObj.openCalendar();
+          expect(elObj.calendarEl.maxDate).to.be.undefined;
+        });
+        it('should sync MinDate validator param with Calendar MinDate', async () => {
+          const myMinDateValidator = new MinDate(new Date('2020/02/02'));
+          const el = await fixtureForSuite(html`
+            <${tag} .validators="${[myMinDateValidator]}"> </${tag}>
+          `);
+          myMinDateValidator.param = new Date('2020/01/01');
+          expect(el.__calendarMinDate.toString()).to.equal(new Date('2020/01/01').toString());
+        });
+        it('should sync MaxDate validator param with Calendar MaxDate', async () => {
+          const myMaxDateValidator = new MaxDate(new Date('2020/02/02'));
+          const el = await fixtureForSuite(html`
+            <${tag} .validators="${[myMaxDateValidator]}"> </${tag}>
+          `);
+          myMaxDateValidator.param = new Date('2020/03/03');
+          expect(el.__calendarMaxDate.toString()).to.equal(new Date('2020/03/03').toString());
+        });
+        it('should sync MinMaxDate validator param with Calendar Min And Max Date', async () => {
+          const myMinDate = new Date('2019/06/15');
+          const myMaxDate = new Date('2030/06/15');
+          const myMinMaxDateValidator = new MinMaxDate({
+            min: myMinDate,
+            max: myMaxDate,
+          });
+          const el = await fixtureForSuite(html`
+            <${tag} .validators=${[myMinMaxDateValidator]}> </${tag}>
+          `);
+          myMinMaxDateValidator.param = {
+            min: new Date('2019/05/15'),
+            max: new Date('2019/07/15'),
+          };
+          expect(el.__calendarMinDate.toString()).to.equal(new Date('2019/05/15').toString());
+          expect(el.__calendarMaxDate.toString()).to.equal(new Date('2019/07/15').toString());
+        });
+        it('should update the central date of Calendar if updated validator made the current central date disabled', async () => {
+          const initialValidators = [new MaxDate(new Date('2000/01/01'))];
+          const updatedValidators = [new MaxDate(new Date('2020/01/01'))];
+          const el = await fixtureForSuite(html`
+            <${tag} .validators="${initialValidators}"></${tag}>
+          `);
+          const obj = new InputObject(el);
+          await obj.openCalendar();
+          expect(getProtectedMembersDatepicker(el).calendarNode.centralDate.toString()).to.equal(
+            new Date('2000/01/01').toString(),
+          );
+          await obj.closeCalendar();
+          el.validators = updatedValidators;
+          await obj.openCalendar();
+          expect(getProtectedMembersDatepicker(el).calendarNode.centralDate.toString()).to.equal(
+            new Date('2020/01/01').toString(),
+          );
+        });
+        it('should show error on invalid date passed to modelValue', async () => {
+          const myDate = new Date('foo');
+          const el = await fixtureForSuite(html`
+            <${tag} .modelValue="${myDate}"></${tag}>
+          `);
+          expect(el.hasFeedbackFor).to.include('error');
+          expect(el.validationStates).to.have.property('error');
+          expect(el.validationStates.error).to.have.property('IsDate');
+        });
+        it('should show error on date with invalid format passed to modelValue', async () => {
+          const myDate = new Date('30/01/2022');
+          const el = await fixtureForSuite(html`
+            <${tag} .modelValue="${myDate}"></${tag}>
+          `);
+          expect(el.hasFeedbackFor).to.include('error');
+          expect(el.validationStates).to.have.property('error');
+          expect(el.validationStates.error).to.have.property('IsDate');
+        });
+        it('syncs view value from calendar if custom validator is in error state', async () => {
+          const el = await fixtureForSuite(html`
+            <${tag} .validators=${[new AlwaysInvalid()]}></${tag}>
+          `);
+          const elObj = new InputObject(el);
+          await elObj.openCalendar();
+          await elObj.selectMonthDay(12);
+          await el.updateComplete; // safari take a little longer
+
+          expect(el.hasFeedbackFor).to.include('error');
+          expect(el.validationStates).to.have.property('error');
+          expect(el.validationStates.error).to.have.property('AlwaysInvalid');
+          expect(
+            isSameDate(
+              /** @type {Date} */ parseDate(el.value),
+              /** @type {Date} */ elObj.calendarEl.selectedDate,
+            ),
+          ).to.be.true;
+          expect(
+            isSameDate(
+              // @ts-ignore [allow-protected] in test
+              /** @type {Date} */
+              parseDate(el._inputNode.value),
+              /** @type {Date} */ elObj.calendarEl.selectedDate,
+            ),
+          ).to.be.true;
+        });
+        it('syncs view value from calendar if custom validator is in error state, when there was a previous modelValue', async () => {
+          const modelValue = new Date('2022/12/30');
+          const el = await fixtureForSuite(html`
+            <${tag}
+              .modelValue="${modelValue}"
+              .validators=${[new AlwaysInvalid()]}
+            ></${tag}>
+          `);
+          expect(isSameDate(/** @type {Date} */ parseDate(el.value), modelValue)).to.be.true;
+          const elObj = new InputObject(el);
+          await elObj.openCalendar();
+          await elObj.selectMonthDay(12);
+          await el.updateComplete; // safari take a little longer
+
+          expect(el.hasFeedbackFor).to.include('error');
+          expect(el.validationStates).to.have.property('error');
+          expect(el.validationStates.error).to.have.property('AlwaysInvalid');
+          expect(
+            isSameDate(
+              /** @type {Date} */ parseDate(el.value),
+              /** @type {Date} */ elObj.calendarEl.selectedDate,
+            ),
+          ).to.be.true;
+          expect(
+            isSameDate(
+              // @ts-ignore [allow-protected] in test
+              /** @type {Date} */
+              parseDate(el._inputNode.value),
+              /** @type {Date} */ elObj.calendarEl.selectedDate,
+            ),
+          ).to.be.true;
+        });
+
+        /**
+         * Not in scope:
+         * - min/max attr (like platform has): could be added in future if observers needed
+         */
+      });
+    });
+    describe('Calendar smoke tests', () => {
+      it('responds properly to keyboard events', async () => {
+        const el = await fixtureForSuite(html`
+          <${tag} calendar-heading="foo"></${tag}>
+        `);
+        const calendarEl =
+          /** @type {LionCalendar} */
+          new InputObject(el).calendarEl ?? el.shadowRoot?.querySelector(calendarTag);
+        const { dateSelectedByUser } = getProtectedMembersCalendar(calendarEl);
+        // First set a fixed date as if selected by a user
+        dateSelectedByUser(new Date('December 17, 2020 03:24:00 GMT+0000'));
+        await el.updateComplete;
+        const elObj = new InputObject(el);
+
+        // Open the calendar
+        await elObj.openCalendar();
+        const selectedDateEl = calendarEl?.shadowRoot?.querySelector(
+          '.calendar__day-button[selected]',
+        );
+        // @ts-ignore
+        selectedDateEl?.focus();
+
+        // Move focus to 18th of December
+        await sendKeys({
+          press: 'ArrowRight',
+        });
+        expect(/** @type {Date} */ calendarEl.focusedDate.getTime()).to.equal(
+          new Date('December 18, 2020 03:24:00 GMT+0000').getTime(),
+        );
+      });
+      it('responds properly to click events', async () => {
+        const el = await fixtureForSuite(html`
+          <${tag} calendar-heading="foo"></${tag}>
+        `);
+        const calendarEl =
+          /** @type {LionCalendar} */
+          new InputObject(el).calendarEl ?? el.shadowRoot?.querySelector(calendarTag);
+        const { dateSelectedByUser } = getProtectedMembersCalendar(calendarEl);
+
+        // First set a fixed date as if selected by a user
+        dateSelectedByUser(new Date('December 17, 2020 03:24:00 GMT+0000'));
+        await el.updateComplete;
+        const elObj = new InputObject(el);
+
+        // Open the calendar
+        await elObj.openCalendar();
+
+        // Pin the week start on the rendered grid: the first cell holds the previous month's last
+        // day only for a Sunday-first week. This assertion is about the click handler, not about the
+        // locale default a design system chose (my-ui starts the week on Monday).
+        const openedCalendarEl =
+          /** @type {LionCalendar} */
+          new InputObject(el).calendarEl ?? el.shadowRoot?.querySelector(calendarTag);
+        if (openedCalendarEl) {
+          openedCalendarEl.firstDayOfWeek = 0;
+          await openedCalendarEl.updateComplete;
+        }
+
+        // Select the first date button, which is 29th of previous month (November)
+        const firstDateBtn =
+          /** @type {HTMLButtonElement} */
+          openedCalendarEl?.shadowRoot?.querySelector('.calendar__day-button');
+        firstDateBtn.click();
+        expect(/** @type {Date} */ el.modelValue.getTime()).to.equal(
+          new Date('November 29, 2020 03:24:00 GMT+0000').getTime(),
+        );
+      });
+    });
+    describe('Accessibility', () => {
+      it('has a heading of level 1', async () => {
+        const el = await fixtureForSuite(html`
+          <${tag} calendar-heading="foo"></${tag}>
+        `);
+        const elObj = new InputObject(el);
+        await elObj.openCalendar();
+        const hNode = elObj.overlayHeadingEl;
+        const headingIsLevel1 =
+          hNode.tagName === 'H1' ||
+          (hNode.getAttribute('role') === 'heading' && hNode.getAttribute('aria-level') === '1');
+        expect(headingIsLevel1).to.be.true;
+      });
+      it('adds accessible label to invoker button', async () => {
+        // The fixture labels the field, because the point of the assertion is that the invoker's
+        // accessible name *names the field*: an unnamed field would test the fallback, not the label.
+        const el = await fixtureForSuite(html`<${tag} label="date"></${tag}>`);
+        const elObj = new InputObject(el);
+        await elObj.openCalendar();
+        expect(accessibleName(elObj.invokerEl)).to.equal('Open "date" picker');
+      });
+      it('adds [aria-expanded] to invoker button', async () => {
+        const el = await fixtureForSuite(html`<${tag}></${tag}>`);
+        const elObj = new InputObject(el);
+        expect(elObj.invokerEl.getAttribute('aria-expanded')).to.equal(null);
+        await elObj.openCalendar();
+        expect(elObj.invokerEl.getAttribute('aria-expanded')).to.equal(null);
+        await elObj.closeCalendar();
+        expect(elObj.invokerEl.getAttribute('aria-expanded')).to.equal(null);
+      });
+      it('is accessible when closed', async () => {
+        const el = await fixtureForSuite(html`<${tag}></${tag}>`);
+        const elObj = new InputObject(el);
+        await expect(elObj.invokerEl).to.be.accessible();
+        await expect(elObj.calendarEl).to.be.accessible();
+      });
+      it('is accessible when open', async () => {
+        const el = await fixtureForSuite(html`<${tag}></${tag}>`);
+        const elObj = new InputObject(el);
+        await elObj.openCalendar();
+        await expect(elObj.calendarEl).to.be.accessible();
+        elObj.overlayCloseButtonEl.click();
+      });
+      it('has accessible invoker when open', async () => {
+        const el = await fixtureForSuite(html`<${tag}></${tag}>`);
+        const elObj = new InputObject(el);
+        await elObj.openCalendar();
+        await expect(elObj.invokerEl).to.be.accessible();
+        elObj.overlayCloseButtonEl.click();
+      });
+      it('is accessible with a disabled date', async () => {
+        const no15th = /** @param {Date} d */ (d) => d.getDate() !== 15;
+        const el = await fixtureForSuite(html`
+          <${tag} .validators=${[new IsDateDisabled(no15th)]}> </${tag}>
+        `);
+        const elObj = new InputObject(el);
+        await elObj.openCalendar();
+        await expect(elObj.calendarEl).to.be.accessible();
+        elObj.overlayCloseButtonEl.click();
+      });
+      it('have different aria-label when multiple invoker', async () => {
+        const el = await fixtureForSuite(html`
+          <${tag} label="Start date" name="startDate"></${tag}>
+          <${tag} label="End date" name="endDate"></${tag}>
+        `);
+        const elements = /** @type {any} */ el.parentElement.children;
+        const startLabel = accessibleName(new InputObject(elements.startDate).invokerEl);
+        const endLabel = accessibleName(new InputObject(elements.endDate).invokerEl);
+        expect(startLabel).to.not.equal(endLabel);
+      });
+    });
+    describe.skip('Subclassers', () => {
+      describe('Providing a custom invoker', () => {
+        it('can override the invoker template', async () => {
+          const myTag = defineCE(
+            class extends LionInputDatepicker {
+              /** @override */
+              _invokerTemplate() {
+                return htmlNonStatic`<my-button>Pick my date</my-button>`;
+              }
+            },
+          );
+          const myEl = await fixtureForSuite(html`<${myTag}></${myTag}>`);
+          const myElObj = new InputObject(myEl);
+          const { invokerId } = getProtectedMembersDatepicker(myEl);
+          expect(myElObj.invokerEl.tagName.toLowerCase()).to.equal('my-button');
+
+          // All other tests will still pass. Small checkup:
+          expect(myElObj.invokerEl.getAttribute('title')).to.equal('Open date picker');
+          expect(myElObj.invokerEl.getAttribute('aria-label')).to.equal('Open date picker');
+          expect(myElObj.invokerEl.getAttribute('aria-expanded')).to.equal('false');
+          expect(myElObj.invokerEl.getAttribute('aria-haspopup')).to.equal('dialog');
+          expect(myElObj.invokerEl.getAttribute('slot')).to.equal('suffix');
+          expect(myElObj.invokerEl.getAttribute('id')).to.equal(invokerId);
+          await myElObj.openCalendar();
+          expect(myElObj.overlayController.isShown).to.equal(true);
+        });
+        it('can allocate the picker in a different slot supported by LionField', async () => {
+          /**
+           * It's important that this api is used instead of Subclassers providing a slot.
+           * When the input-datepicker knows where the calendar invoker is, it can attach
+           * the right logic, localization and accessibility functionality.
+           */
+          const myTag = defineCE(
+            class extends LionInputDatepicker {
+              constructor() {
+                super();
+                this._calendarInvokerSlot = 'prefix';
+              }
+            },
+          );
+          const myEl = await fixtureForSuite(html`<${myTag}></${myTag}>`);
+          const myElObj = new InputObject(myEl);
+          expect(myElObj.invokerEl.getAttribute('slot')).to.equal('prefix');
+        });
+      });
+      describe('Providing a custom calendar', () => {
+        it('can override the calendar template', async () => {
+          customElements.define(
+            'my-calendar',
+            class extends LionCalendar {
+              constructor() {
+                super();
+                // Change some defaults
+                this.firstDayOfWeek = 1; // Start on Mondays instead of Sundays
+                this.weekdayHeaderNotation = 'narrow'; // 'T' instead of 'Thu'
+              }
+            },
+          );
+          const myTag = defineCE(
+            class extends LionInputDatepicker {
+              _calendarTemplate() {
+                return htmlNonStatic`<my-calendar id="calendar"></my-calendar>`;
+              }
+            },
+          );
+          const myEl = await fixtureForSuite(html`<${myTag}></${myTag}>`);
+          const myElObj = new InputObject(myEl);
+
+          // All other tests will still pass. Small checkup:
+          await myElObj.openCalendar();
+          expect(myElObj.calendarEl.tagName.toLowerCase()).to.equal('my-calendar');
+        });
+      });
+      describe('Providing a custom overlay', () => {
+        it('can override the overlay template', async () => {
+          // Keep in mind there is no logic inside this overlay frame; it only handles visuals.
+          // All interaction should be delegated to parent, which interacts with the calendar
+          // component
+          customElements.define(
+            'my-calendar-overlay-frame',
+            class extends LitElement {
+              render() {
+                // eslint-disable-line class-methods-use-this
+                return html`
+                  <div class="c-calendar-overlay">
+                    <slot></slot>
+                    <div class="c-calendar-overlay__footer">
+                      <button id="cancel-button" class="c-calendar-overlay__cancel-button">
+                        Cancel
+                      </button>
+                    </div>
+                  </div>
+                `;
+              }
+            },
+          );
+          let myOverlayOpenedCbHandled = false;
+          let myUserSelectedChangedCbHandled = false;
+          const myTag = defineCE(
+            class extends LionInputDatepicker {
+              // TODO: this method doesn't exist on LionInputDatepicker, so if we re-enable these tests, they should be redone
+              // /** @override */
+              // _calendarOverlayTemplate() {
+              //   return html`
+              //     <my-calendar-overlay-frame id="calendar-overlay">
+              //       <span slot="heading">${this.calendarHeading}</span>
+              //     </my-calendar-overlay-frame>
+              //   `;
+              // }
+
+              /** @override */
+              _onCalendarOverlayOpened() {
+                super._onCalendarOverlayOpened();
+                myOverlayOpenedCbHandled = true;
+              }
+
+              /**
+               * @override
+               * @param {{ target: { selectedDate: Date }}} opts
+               */
+              _onCalendarUserSelectedChanged({ target: { selectedDate } }) {
+                super._onCalendarUserSelectedChanged({
+                  target: {
+                    selectedDate,
+                  },
+                });
+                myUserSelectedChangedCbHandled = true;
+              }
+            },
+          );
+          const myEl = await fixtureForSuite(html`<${myTag}></${myTag}>`);
+          const myElObj = new InputObject(myEl);
+
+          // All other tests will still pass. Small checkup:
+          await myElObj.openCalendar();
+          expect(myElObj.overlayEl.tagName.toLowerCase()).to.equal('my-calendar-overlay-frame');
+          expect(myOverlayOpenedCbHandled).to.be.true;
+          await myElObj.selectMonthDay(1);
+          expect(myUserSelectedChangedCbHandled).to.be.true;
+        });
+        it.skip('can configure the overlay presentation based on media query switch', async () => {});
+      });
+    });
+    describe('regression tests', async () => {
+      it('does not submit a form when datepicker is opened', async () => {
+        const submitSpy = sinon.spy();
+        const form = await fixtureForSuite(html`
+          <form @submit="${submitSpy}">
+            <${tag}></${tag}>
+          </form>
+        `);
+        const el = /** @type {LionInputDatepicker} */ form.children[0];
+        await el.updateComplete;
+        const elObj = new InputObject(el);
+        await elObj.openCalendar();
+        expect(submitSpy.callCount).to.equal(0);
+      });
+
+      // TODO: remove: became irrelevant after we don't need dialog-frame
+      it.skip('is hidden when attribute hidden is true', async () => {
+        const el = await fixtureForSuite(html`<${tag}></${tag}>`);
+        await el.updateComplete;
+        const myElObj = new InputObject(el);
+        await myElObj.openCalendar();
+        myElObj.overlayEl.hidden = true;
+        await el.updateComplete;
+        expect(getComputedStyle(myElObj.overlayEl).display).to.equal('none', 'Display is not none');
+      });
+    });
+    describe('responsive', async () => {
+      it('opens as bottom sheet on mobile', async () => {
+        await setViewport({
+          width: 360,
+          height: 640,
+        });
+        const el = await fixtureForSuite(html`<${tag}></${tag}>`);
+        const myElObj = new InputObject(el);
+        await myElObj.openCalendar();
+        expect(el.hasArrow).to.be.false;
+        expect(
+          myElObj.overlayController.contentNode.classList.contains(
+            'overlays__overlay--bottom-sheet',
+          ),
+          'Datepicker does not get rendered as bottom sheet',
+        ).to.be.false;
+      });
+      it('opens as popover on desktop', async () => {
+        await setViewport({
+          width: 1200,
+          height: 640,
+        });
+        const el = await fixtureForSuite(html`<${tag}></${tag}>`);
+        const myElObj = new InputObject(el);
+        await myElObj.openCalendar();
+        expect(el.hasArrow).to.be.true;
+        expect(
+          el?.shadowRoot?.contains(myElObj.overlayController.contentNode),
+          'Datepicker does not get rendered as a popover',
+        ).to.be.true;
+      });
+
+      // TODO: fix a bug in overlays which does not move global nodes back to the local dom
+      it.skip('can switch between bottom sheet and popover', async () => {
+        const el = await fixtureForSuite(html`<${tag}></${tag}>`);
+        await el.updateComplete;
+        const myElObj = new InputObject(el);
+        await setViewport({
+          width: 360,
+          height: 640,
+        });
+        await myElObj.openCalendar();
+        expect(
+          el?.shadowRoot?.contains(myElObj.overlayController.contentNode),
+          'Datepicker does not get rendered as bottom sheet',
+        ).to.be.false;
+        await myElObj.closeCalendar();
+        await setViewport({
+          width: 1200,
+          height: 640,
+        });
+        await myElObj.openCalendar();
+        expect(
+          el?.shadowRoot?.contains(myElObj.overlayController.contentNode),
+          'Datepicker does not get rendered as a popover',
+        ).to.be.true;
+      });
+    });
+  });
 }