@lion/ui 0.23.0 → 0.25.0

package/components/input-datepicker/test/lion-input-datepicker.test.js

@@ -9,7 +9,6 @@ import { sendKeys, setViewport } from '@web/test-runner-commands';
 import { AlwaysInvalid } from '@lion/ui/form-core-test-helpers.js';
 import { DatepickerInputObject } 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 { runDatepickerSuite } from '../test-suites/LionInputDatepicker.suite.js';
 
@@ -38,30 +37,26 @@ function getProtectedMembersCalendar(calendarEl) {
     dateSelectedByUser: (...args) => calendarEl.__dateSelectedByUser(...args),
   };
 }
-
-const fixture = /** @type {(arg: TemplateResult) => Promise<LionInputDatepicker>} */ (_fixture);
-
+const fixture = /** @type {(arg: TemplateResult) => Promise<LionInputDatepicker>} */ _fixture;
 describe('<lion-input-datepicker>', () => {
   describe('Calendar Overlay', () => {
     it('implements calendar-overlay Style component', async () => {
       const el = await fixture(html`<lion-input-datepicker></lion-input-datepicker>`);
       const elObj = new DatepickerInputObject(el);
       await elObj.openCalendar();
-
       expect(
-        /** @type {ShadowRoot} */ (el.shadowRoot).querySelector('.calendar-overlay'),
+        /** @type {ShadowRoot} */ el.shadowRoot.querySelector('.calendar-overlay'),
       ).not.to.equal(null);
       expect(
-        /** @type {ShadowRoot} */ (el.shadowRoot).querySelector('.calendar-overlay__header'),
+        /** @type {ShadowRoot} */ el.shadowRoot.querySelector('.calendar-overlay__header'),
       ).not.to.equal(null);
       expect(
-        /** @type {ShadowRoot} */ (el.shadowRoot).querySelector('.calendar-overlay__heading'),
+        /** @type {ShadowRoot} */ el.shadowRoot.querySelector('.calendar-overlay__heading'),
       ).not.to.equal(null);
       expect(
-        /** @type {ShadowRoot} */ (el.shadowRoot).querySelector('.calendar-overlay__close-button'),
+        /** @type {ShadowRoot} */ el.shadowRoot.querySelector('.calendar-overlay__close-button'),
       ).not.to.equal(null);
     });
-
     it('has a close button, with a tooltip "Close"', async () => {
       const el = await fixture(html`<lion-input-datepicker></lion-input-datepicker>`);
       const elObj = new DatepickerInputObject(el);
@@ -70,7 +65,6 @@ describe('<lion-input-datepicker>', () => {
       expect(elObj.overlayCloseButtonEl.getAttribute('title')).to.equal('Close');
       expect(elObj.overlayCloseButtonEl.getAttribute('aria-label')).to.equal('Close');
     });
-
     it('has a default title based on input label', async () => {
       const el = await fixture(html`
         <lion-input-datepicker
@@ -82,7 +76,6 @@ describe('<lion-input-datepicker>', () => {
       await elObj.openCalendar();
       expect(elObj.overlayHeadingEl.textContent).to.equal('Pick your date');
     });
-
     it('can have a custom heading', async () => {
       const el = await fixture(html`
         <lion-input-datepicker
@@ -94,37 +87,33 @@ describe('<lion-input-datepicker>', () => {
       await elObj.openCalendar();
       expect(elObj.overlayHeadingEl.innerText).to.equal('foo');
     });
-
     it('closes the calendar on [esc] key', async () => {
       const el = await fixture(html`<lion-input-datepicker></lion-input-datepicker>`);
       const elObj = new DatepickerInputObject(el);
       await elObj.openCalendar();
       expect(elObj.overlayController.isShown).to.equal(true);
-
       elObj.overlayController.contentNode.dispatchEvent(
-        new KeyboardEvent('keyup', { key: 'Escape' }),
+        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 fixture(html`<lion-input-datepicker></lion-input-datepicker>`);
       const elObj = new DatepickerInputObject(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 fixture(html`<lion-input-datepicker></lion-input-datepicker>`);
       const elObj = new DatepickerInputObject(el);
       await elObj.openCalendar();
       expect(elObj.overlayController.isShown).to.equal(true);
-
       mimicClick(document.body);
       await aTimeout(0);
       expect(elObj.overlayController.isShown).to.be.false;
@@ -135,7 +124,6 @@ describe('<lion-input-datepicker>', () => {
      * - centralDate can be overridden
      */
   });
-
   describe('Calendar Invoker', () => {
     it('adds invoker button that toggles the overlay on click in suffix slot ', async () => {
       const el = await fixture(html`<lion-input-datepicker></lion-input-datepicker>`);
@@ -145,30 +133,35 @@ describe('<lion-input-datepicker>', () => {
       await elObj.openCalendar();
       expect(elObj.overlayController.isShown).to.equal(true);
     });
-
     it('delegates disabled state of host input', async () => {
       const el = await fixture(html`<lion-input-datepicker disabled></lion-input-datepicker>`);
       const elObj = new DatepickerInputObject(el);
       expect(elObj.overlayController.isShown).to.equal(false);
-      await elObj.openCalendar({ click: true });
+      await elObj.openCalendar({
+        click: true,
+      });
       expect(elObj.overlayController.isShown).to.equal(false);
       el.disabled = false;
-      await elObj.openCalendar({ click: true });
+      await elObj.openCalendar({
+        click: true,
+      });
       expect(elObj.overlayController.isShown).to.equal(true);
     });
-
     it('disables invoker when host input is readonly', async () => {
       const el = await fixture(html`<lion-input-datepicker readonly></lion-input-datepicker>`);
       const elObj = new DatepickerInputObject(el);
       expect(elObj.overlayController.isShown).to.equal(false);
-      await elObj.openCalendar({ click: true });
+      await elObj.openCalendar({
+        click: true,
+      });
       expect(elObj.overlayController.isShown).to.equal(false);
       el.readOnly = false;
-      await elObj.openCalendar({ click: true });
+      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');
@@ -180,28 +173,23 @@ describe('<lion-input-datepicker>', () => {
       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;
+      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 fixture(html` <lion-input-datepicker></lion-input-datepicker> `);
       const elObj = new DatepickerInputObject(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 fixture(html`<lion-input-datepicker></lion-input-datepicker>`);
       const elObj = new DatepickerInputObject(el);
@@ -213,7 +201,6 @@ describe('<lion-input-datepicker>', () => {
       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 fixture(html`
         <lion-input-datepicker .modelValue="${new Date()}"></lion-input-datepicker>
@@ -223,25 +210,20 @@ describe('<lion-input-datepicker>', () => {
       await aTimeout(0);
       expect(
         isSameDate(
-          /** @type {Date} */ (elObj.calendarEl.focusedDate),
-          /** @type {Date} */ (elObj.calendarEl.selectedDate),
+          /** @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 fixture(html`<lion-input-datepicker></lion-input-datepicker>`);
       const elObj = new DatepickerInputObject(el);
       await elObj.openCalendar();
       await aTimeout(0);
       expect(
-        isSameDate(
-          /** @type {Date} */ (elObj.calendarEl.focusedDate),
-          elObj.calendarEl.centralDate,
-        ),
+        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');
@@ -255,7 +237,6 @@ describe('<lion-input-datepicker>', () => {
         >
         </lion-input-datepicker>
       `);
-
       const elObj = new DatepickerInputObject(el);
       // Make sure the calendar overlay is opened
       await elObj.openCalendar();
@@ -266,34 +247,26 @@ describe('<lion-input-datepicker>', () => {
       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 fixture(html`
           <lion-input-datepicker .modelValue="${new Date('2022/12/30')}"></lion-input-datepicker>
         `);
-
         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 <lion-input-datepicker>:
@@ -302,19 +275,17 @@ describe('<lion-input-datepicker>', () => {
        *   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 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 fixture(html`
           <lion-input-datepicker .validators="${[new IsDateDisabled(no15thOr16th)]}">
           </lion-input-datepicker>
         `);
         const elObj = new DatepickerInputObject(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 fixture(
@@ -323,10 +294,8 @@ describe('<lion-input-datepicker>', () => {
         );
         const elObj = new DatepickerInputObject(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 fixture(html`
@@ -334,26 +303,27 @@ describe('<lion-input-datepicker>', () => {
         `);
         const elObj = new DatepickerInputObject(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 fixture(html`
           <lion-input-datepicker
-            .validators=${[new MinMaxDate({ min: myMinDate, max: myMaxDate })]}
+            .validators=${[
+              new MinMaxDate({
+                min: myMinDate,
+                max: myMaxDate,
+              }),
+            ]}
           >
           </lion-input-datepicker>
         `);
         const elObj = new DatepickerInputObject(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';
@@ -369,75 +339,70 @@ describe('<lion-input-datepicker>', () => {
           );
         }
         const el = await fixture(html`
-          <custom-input-datepicker .validators=${[new MaxDate(myMaxDate, { type: 'warning' })]}>
+          <custom-input-datepicker
+            .validators=${[
+              new MaxDate(myMaxDate, {
+                type: 'warning',
+              }),
+            ]}
+          >
           </custom-input-datepicker>
         `);
         const elObj = new DatepickerInputObject(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 fixture(html`
           <lion-input-datepicker .validators="${[myMinDateValidator]}"> </lion-input-datepicker>
         `);
         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 fixture(html`
           <lion-input-datepicker .validators="${[myMaxDateValidator]}"> </lion-input-datepicker>
         `);
         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 myMinMaxDateValidator = new MinMaxDate({
+          min: myMinDate,
+          max: myMaxDate,
+        });
         const el = await fixture(html`
           <lion-input-datepicker .validators=${[myMinMaxDateValidator]}> </lion-input-datepicker>
         `);
-
         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 fixture(html`
           <lion-input-datepicker .validators="${initialValidators}"></lion-input-datepicker>
         `);
         const obj = new DatepickerInputObject(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 fixture(html`
@@ -447,7 +412,6 @@ describe('<lion-input-datepicker>', () => {
         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 fixture(html`
@@ -457,12 +421,10 @@ describe('<lion-input-datepicker>', () => {
         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 fixture(html`
           <lion-input-datepicker .validators=${[new AlwaysInvalid()]}></lion-input-datepicker>
         `);
-
         const elObj = new DatepickerInputObject(el);
         await elObj.openCalendar();
         await elObj.selectMonthDay(12);
@@ -473,19 +435,19 @@ describe('<lion-input-datepicker>', () => {
         expect(el.validationStates.error).to.have.property('AlwaysInvalid');
         expect(
           isSameDate(
-            /** @type {Date} */ (parseDate(el.value)),
-            /** @type {Date} */ (elObj.calendarEl.selectedDate),
+            /** @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),
+            /** @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 fixture(html`
@@ -494,8 +456,7 @@ describe('<lion-input-datepicker>', () => {
             .validators=${[new AlwaysInvalid()]}
           ></lion-input-datepicker>
         `);
-        expect(isSameDate(/** @type {Date} */ (parseDate(el.value)), modelValue)).to.be.true;
-
+        expect(isSameDate(/** @type {Date} */ parseDate(el.value), modelValue)).to.be.true;
         const elObj = new DatepickerInputObject(el);
         await elObj.openCalendar();
         await elObj.selectMonthDay(12);
@@ -506,15 +467,16 @@ describe('<lion-input-datepicker>', () => {
         expect(el.validationStates.error).to.have.property('AlwaysInvalid');
         expect(
           isSameDate(
-            /** @type {Date} */ (parseDate(el.value)),
-            /** @type {Date} */ (elObj.calendarEl.selectedDate),
+            /** @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),
+            /** @type {Date} */
+            parseDate(el._inputNode.value),
+            /** @type {Date} */ elObj.calendarEl.selectedDate,
           ),
         ).to.be.true;
       });
@@ -525,25 +487,20 @@ describe('<lion-input-datepicker>', () => {
        */
     });
   });
-
   describe('Calendar smoke tests', () => {
     it('responds properly to keyboard events', async () => {
       const el = await fixture(html`
         <lion-input-datepicker calendar-heading="foo"></lion-input-datepicker>
       `);
-      const calendarEl = /** @type {LionCalendar} */ (
-        el.shadowRoot?.querySelector('lion-calendar')
-      );
+      const calendarEl = /** @type {LionCalendar} */ el.shadowRoot?.querySelector('lion-calendar');
       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 DatepickerInputObject(el);
 
       // Open the calendar
       await elObj.openCalendar();
-
       const selectedDateEl = calendarEl?.shadowRoot?.querySelector(
         '.calendar__day-button[selected]',
       );
@@ -551,20 +508,18 @@ describe('<lion-input-datepicker>', () => {
       selectedDateEl?.focus();
 
       // Move focus to 18th of December
-      await sendKeys({ press: 'ArrowRight' });
-
-      expect(/** @type {Date} */ (calendarEl.focusedDate).getTime()).to.equal(
+      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 fixture(html`
         <lion-input-datepicker calendar-heading="foo"></lion-input-datepicker>
       `);
-      const calendarEl = /** @type {LionCalendar} */ (
-        el.shadowRoot?.querySelector('lion-calendar')
-      );
+      const calendarEl = /** @type {LionCalendar} */ el.shadowRoot?.querySelector('lion-calendar');
       const { dateSelectedByUser } = getProtectedMembersCalendar(calendarEl);
 
       // First set a fixed date as if selected by a user
@@ -576,17 +531,15 @@ describe('<lion-input-datepicker>', () => {
       await elObj.openCalendar();
 
       // Select the first date button, which is 29th of previous month (November)
-      const firstDateBtn = /** @type {HTMLButtonElement} */ (
-        calendarEl?.shadowRoot?.querySelector('.calendar__day-button')
-      );
+      const firstDateBtn =
+        /** @type {HTMLButtonElement} */
+        calendarEl?.shadowRoot?.querySelector('.calendar__day-button');
       firstDateBtn.click();
-
-      expect(/** @type {Date} */ (el.modelValue).getTime()).to.equal(
+      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 fixture(html`
@@ -594,72 +547,58 @@ describe('<lion-input-datepicker>', () => {
       `);
       const elObj = new DatepickerInputObject(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 () => {
       const el = await fixture(html`<lion-input-datepicker></lion-input-datepicker>`);
       const elObj = new DatepickerInputObject(el);
       await elObj.openCalendar();
-
       expect(elObj.invokerEl.getAttribute('title')).to.equal('Open "date" picker');
       expect(elObj.invokerEl.getAttribute('aria-label')).to.equal('Open "date" picker');
     });
-
     it('adds [aria-expanded] to invoker button', async () => {
       const el = await fixture(html`<lion-input-datepicker></lion-input-datepicker>`);
       const elObj = new DatepickerInputObject(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 fixture(html`<lion-input-datepicker></lion-input-datepicker>`);
       const elObj = new DatepickerInputObject(el);
-
       await expect(elObj.invokerEl).to.be.accessible();
       await expect(elObj.calendarEl).to.be.accessible();
     });
-
     it('is accessible when open', async () => {
       const el = await fixture(html`<lion-input-datepicker></lion-input-datepicker>`);
       const elObj = new DatepickerInputObject(el);
       await elObj.openCalendar();
-
       await expect(elObj.calendarEl).to.be.accessible();
       elObj.overlayCloseButtonEl.click();
     });
-
     it('has accessible invoker when open', async () => {
       const el = await fixture(html`<lion-input-datepicker></lion-input-datepicker>`);
       const elObj = new DatepickerInputObject(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 no15th = /** @param {Date} d */ (d) => d.getDate() !== 15;
       const el = await fixture(html`
         <lion-input-datepicker .validators=${[new IsDateDisabled(no15th)]}> </lion-input-datepicker>
       `);
       const elObj = new DatepickerInputObject(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 fixture(html`
         <lion-input-datepicker label="Start date" name="startDate"></lion-input-datepicker>
@@ -672,11 +611,9 @@ describe('<lion-input-datepicker>', () => {
       const startLabel = elements.startDate.querySelector('button').ariaLabel;
       // @ts-expect-error
       const endLabel = elements.endDate.querySelector('button').ariaLabel;
-
       expect(startLabel).to.not.equal(endLabel);
     });
   });
-
   describe.skip('Subclassers', () => {
     describe('Providing a custom invoker', () => {
       it('can override the invoker template', async () => {
@@ -688,7 +625,6 @@ describe('<lion-input-datepicker>', () => {
             }
           },
         );
-
         const myEl = await fixture(html`<${myTag}></${myTag}>`);
         const myElObj = new DatepickerInputObject(myEl);
         const { invokerId } = getProtectedMembersDatepicker(myEl);
@@ -704,7 +640,6 @@ describe('<lion-input-datepicker>', () => {
         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.
@@ -719,13 +654,11 @@ describe('<lion-input-datepicker>', () => {
             }
           },
         );
-
         const myEl = await fixture(html`<${myTag}></${myTag}>`);
         const myElObj = new DatepickerInputObject(myEl);
         expect(myElObj.invokerEl.getAttribute('slot')).to.equal('prefix');
       });
     });
-
     describe('Providing a custom calendar', () => {
       it('can override the calendar template', async () => {
         customElements.define(
@@ -739,7 +672,6 @@ describe('<lion-input-datepicker>', () => {
             }
           },
         );
-
         const myTag = defineCE(
           class extends LionInputDatepicker {
             _calendarTemplate() {
@@ -747,7 +679,6 @@ describe('<lion-input-datepicker>', () => {
             }
           },
         );
-
         const myEl = await fixture(html`<${myTag}></${myTag}>`);
         const myElObj = new DatepickerInputObject(myEl);
 
@@ -756,7 +687,6 @@ describe('<lion-input-datepicker>', () => {
         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.
@@ -780,10 +710,8 @@ describe('<lion-input-datepicker>', () => {
             }
           },
         );
-
         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
@@ -807,12 +735,15 @@ describe('<lion-input-datepicker>', () => {
              * @param {{ target: { selectedDate: Date }}} opts
              */
             _onCalendarUserSelectedChanged({ target: { selectedDate } }) {
-              super._onCalendarUserSelectedChanged({ target: { selectedDate } });
+              super._onCalendarUserSelectedChanged({
+                target: {
+                  selectedDate,
+                },
+              });
               myUserSelectedChangedCbHandled = true;
             }
           },
         );
-
         const myEl = await fixture(html`<${myTag}></${myTag}>`);
         const myElObj = new DatepickerInputObject(myEl);
 
@@ -823,11 +754,9 @@ describe('<lion-input-datepicker>', () => {
         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();
@@ -836,7 +765,7 @@ describe('<lion-input-datepicker>', () => {
           <lion-input-datepicker></lion-input-datepicker>
         </form>
       `);
-      const el = /** @type {LionInputDatepicker} */ (form.children[0]);
+      const el = /** @type {LionInputDatepicker} */ form.children[0];
       await el.updateComplete;
       const elObj = new DatepickerInputObject(el);
       await elObj.openCalendar();
@@ -846,7 +775,6 @@ describe('<lion-input-datepicker>', () => {
     // TODO: remove: became irrelevant after we don't need dialog-frame
     it.skip('is hidden when attribute hidden is true', async () => {
       const el = await fixture(html`<lion-input-datepicker></lion-input-datepicker>`);
-
       await el.updateComplete;
       const myElObj = new DatepickerInputObject(el);
       await myElObj.openCalendar();
@@ -855,10 +783,12 @@ describe('<lion-input-datepicker>', () => {
       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 });
+      await setViewport({
+        width: 360,
+        height: 640,
+      });
       const el = await fixture(html`<lion-input-datepicker></lion-input-datepicker>`);
       const myElObj = new DatepickerInputObject(el);
       await myElObj.openCalendar();
@@ -868,9 +798,11 @@ describe('<lion-input-datepicker>', () => {
         'Datepicker does not get rendered as bottom sheet',
       ).to.be.false;
     });
-
     it('opens as popover on desktop', async () => {
-      await setViewport({ width: 1200, height: 640 });
+      await setViewport({
+        width: 1200,
+        height: 640,
+      });
       const el = await fixture(html`<lion-input-datepicker></lion-input-datepicker>`);
       const myElObj = new DatepickerInputObject(el);
       await myElObj.openCalendar();
@@ -886,16 +818,20 @@ describe('<lion-input-datepicker>', () => {
       const el = await fixture(html`<lion-input-datepicker></lion-input-datepicker>`);
       await el.updateComplete;
       const myElObj = new DatepickerInputObject(el);
-
-      await setViewport({ width: 360, height: 640 });
+      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 setViewport({
+        width: 1200,
+        height: 640,
+      });
       await myElObj.openCalendar();
       expect(
         el?.shadowRoot?.contains(myElObj.overlayController.contentNode),
@@ -903,7 +839,6 @@ describe('<lion-input-datepicker>', () => {
       ).to.be.true;
     });
   });
-
   describe('Run suite', () => {
     runDatepickerSuite();
   });