npm - @duetds/components - Versions diffs - 8.6.8 → 8.7.0 - Mend

@duetds/components 8.6.8 → 8.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (959) hide show

package/lib/collection/components/duet-date-picker/duet-date-picker.e2e.js DELETED Viewed

@@ -1,693 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { createPage } from "../../utils/test-utils";
-import i18n from "./date-i18n";
-async function getFocusedElement(page) {
-    return page.evaluateHandle(() => document.activeElement);
-}
-async function getChooseDateButton(page) {
-    return page.find(".duet-date-button");
-}
-async function getInput(page) {
-    return page.find("duet-input");
-}
-async function getDialog(page) {
-    return page.find(`[role="dialog"]`);
-}
-async function getGrid(page) {
-    const dialog = await getDialog(page);
-    return dialog.find("table");
-}
-async function getPicker(page) {
-    return page.find("duet-date-picker");
-}
-async function setMonthDropdown(page, month) {
-    await page.select(".duet-date-month-select", month);
-    await page.waitForChanges();
-}
-async function setYearDropdown(page, year) {
-    await page.select(".duet-date-year-select", year);
-    await page.waitForChanges();
-}
-async function getPrevMonthButton(page) {
-    const dialog = await getDialog(page);
-    return dialog.find(`.duet-date-dialog-prev >>> button`);
-}
-async function getNextMonthButton(page) {
-    const dialog = await getDialog(page);
-    return dialog.find(`.duet-date-dialog-next >>> button`);
-}
-async function findByText(context, selector, text) {
-    const elements = await context.findAll(selector);
-    return elements.find(element => element.innerText.includes(text));
-}
-async function clickDay(page, date) {
-    const grid = await getGrid(page);
-    const button = await findByText(grid, "button", date);
-    await button.click();
-    await page.waitForChanges();
-}
-async function openCalendar(page) {
-    const button = await getChooseDateButton(page);
-    await button.click();
-    await page.waitForChanges();
-    const dialog = await getDialog(page);
-    await dialog.waitForVisible();
-}
-async function clickOutside(page) {
-    const input = await getInput(page);
-    await input.click();
-    await page.waitForChanges();
-    const dialog = await getDialog(page);
-    await dialog.waitForNotVisible();
-}
-async function isCalendarOpen(page) {
-    const dialog = await getDialog(page);
-    return dialog.isVisible();
-}
-const generatePage = (props) => {
-    const attrs = Object.entries(Object.assign({ label: "Valitse paiva", expand: true }, props))
-        .map(([attr, value]) => `${attr}="${value}"`)
-        .join(" ");
-    return createPage(`
-    <body style="min-height: 400px">
-      <duet-date-picker ${attrs}></duet-date-picker>
-    </body>
-  `);
-};
-const ANIMATION_DELAY = 600;
-describe("duet-date-picker", () => {
-    it("should render a date picker", async () => {
-        const page = await createPage(`<duet-date-picker value="2020-06-16"></duet-date-picker>`);
-        const component = await getPicker(page);
-        expect(component).not.toBeNull();
-    });
-    describe("user input", () => {
-        it("does not reformat input if date doesn't have leading zeroes", async () => {
-            const page = await generatePage();
-            const picker = await getPicker(page);
-            const input = await page.find("duet-input input");
-            const spy = await picker.spyOnEvent("duetChange");
-            await input.type("1.2.2021", { delay: 50 });
-            await page.waitForChanges();
-            // the input's value should not get formatted with leading zeroes
-            expect(await input.getProperty("value")).toBe("1.2.2021");
-            // but we should still emit correctly formatted ISO dates
-            expect(await picker.getProperty("value")).toBe("2021-02-01");
-            expect(spy).toHaveReceivedEventTimes(1);
-            expect(spy.lastEvent.detail.value).toBe("2021-02-01");
-        });
-        it("allows input to be cleared by setting value to empty string", async () => {
-            const page = await generatePage();
-            const picker = await getPicker(page);
-            const input = await page.find("duet-input input");
-            await input.type("1.2.2021", { delay: 50 });
-            await page.waitForChanges();
-            picker.setProperty("value", "");
-            await page.waitForChanges();
-            expect(await input.getProperty("value")).toBe("");
-        });
-        it("supports dashes and slashes as separators", async () => {
-            const page = await generatePage();
-            const picker = await getPicker(page);
-            const input = await page.find("duet-input input");
-            const spy = await picker.spyOnEvent("duetChange");
-            // slashes
-            await input.type("1/1/2021", { delay: 50 });
-            await page.waitForChanges();
-            expect(await picker.getProperty("value")).toBe("2021-01-01");
-            expect(spy.lastEvent.detail.value).toBe("2021-01-01");
-            // clear input
-            picker.setProperty("value", "");
-            await page.waitForChanges();
-            // dashes
-            await input.type("2-1-2021", { delay: 50 });
-            await page.waitForChanges();
-            expect(await picker.getProperty("value")).toBe("2021-01-02");
-            expect(spy.lastEvent.detail.value).toBe("2021-01-02");
-        });
-    });
-    describe("mouse interaction", () => {
-        it("should open on button click", async () => {
-            const page = await generatePage();
-            expect(await isCalendarOpen(page)).toBe(false);
-            await openCalendar(page);
-            expect(await isCalendarOpen(page)).toBe(true);
-        });
-        it("should close on click outside", async () => {
-            const page = await generatePage();
-            await openCalendar(page);
-            expect(await isCalendarOpen(page)).toBe(true);
-            await clickOutside(page);
-            expect(await isCalendarOpen(page)).toBe(false);
-        });
-        it("supports selecting a date in the future", async () => {
-            const page = await generatePage({ value: "2020-01-01" });
-            await openCalendar(page);
-            const picker = await getPicker(page);
-            const nextMonth = await getNextMonthButton(page);
-            const spy = await picker.spyOnEvent("duetChange");
-            await nextMonth.click();
-            await nextMonth.click();
-            await nextMonth.click();
-            await clickDay(page, "19. huhtikuuta");
-            expect(spy).toHaveReceivedEventTimes(1);
-            expect(spy.lastEvent.detail).toEqual({
-                component: "duet-date-picker",
-                value: "2020-04-19",
-                valueAsDate: new Date(2020, 3, 19).toISOString(),
-            });
-        });
-        it("supports selecting a date in the past", async () => {
-            const page = await generatePage({ value: "2020-01-01" });
-            await openCalendar(page);
-            const picker = await getPicker(page);
-            const spy = await picker.spyOnEvent("duetChange");
-            await setMonthDropdown(page, "3");
-            await setYearDropdown(page, "2019");
-            await page.waitForTimeout(ANIMATION_DELAY);
-            await clickDay(page, "19. huhtikuuta");
-            expect(spy).toHaveReceivedEventTimes(1);
-            expect(spy.lastEvent.detail).toEqual({
-                component: "duet-date-picker",
-                value: "2019-04-19",
-                valueAsDate: new Date(2019, 3, 19).toISOString(),
-            });
-        });
-    });
-    // see: https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html
-    describe("a11y/ARIA requirements", () => {
-        describe("input", () => {
-            it("has accessible label", async () => {
-                const page = await generatePage({ label: "pick date" });
-                const input = await page.find("input");
-                const id = input.getAttribute("id");
-                expect(id).toBeDefined();
-                const label = await page.find(`label[for="${id}"]`);
-                expect(label).toEqualText("pick date");
-            });
-        });
-        describe("button", () => {
-            it("has an accessible label", async () => {
-                const page = await generatePage();
-                const button = await getChooseDateButton(page);
-                const element = await button.find("duet-visually-hidden");
-                expect(element).toEqualText(i18n.fi.buttonLabel);
-            });
-        });
-        describe("dialog", () => {
-            it("meets a11y requirements", async () => {
-                const page = await generatePage();
-                const dialog = await getDialog(page);
-                // has aria-modal attr
-                expect(dialog).toBeDefined();
-                expect(dialog).toEqualAttribute("aria-modal", "true");
-                // has accessible label
-                const labelledById = dialog.getAttribute("aria-labelledby");
-                const title = await page.find(`#${labelledById}`);
-                expect(title).toBeDefined();
-                // announces keyboard support
-                const instructionText = await dialog.find("duet-visually-hidden[aria-live]");
-                expect(instructionText).toEqualText(i18n.fi.keyboardInstruction);
-            });
-        });
-        describe("grid", () => {
-            it("meets a11y requirements", async () => {
-                const page = await generatePage({ value: "2020-01-01" });
-                const grid = await getGrid(page);
-                // has accessible label
-                const labelledById = await grid.getAttribute("aria-labelledby");
-                const title = await page.find(`#${labelledById}`);
-                expect(title).toBeDefined();
-                await openCalendar(page);
-                // should be single selected element, and it should have role="gridcell"
-                const selected = await grid.findAll(`[aria-pressed="true"]`);
-                expect(selected.length).toBe(1);
-                // only one button is in focus order, has accessible label, and correct text content
-                expect(selected[0]).toEqualAttribute("tabindex", "0");
-                expect(selected[0].innerText).toContain("1. tammikuuta");
-            });
-            it.todo("correctly abbreviates the shortened day names");
-        });
-    });
-    describe("keyboard a11y", () => {
-        it("closes on ESC press", async () => {
-            const page = await generatePage();
-            await openCalendar(page);
-            await page.waitForTimeout(ANIMATION_DELAY);
-            expect(await isCalendarOpen(page)).toBe(true);
-            await page.keyboard.press("Escape");
-            await page.waitForChanges();
-            await page.waitForTimeout(ANIMATION_DELAY);
-            expect(await isCalendarOpen(page)).toBe(false);
-        });
-        it("supports selecting a date in the future", async () => {
-            const page = await generatePage({ value: "2020-01-01" });
-            const picker = await getPicker(page);
-            const spy = await picker.spyOnEvent("duetChange");
-            // open calendar
-            await page.keyboard.press("Tab");
-            await page.waitForChanges();
-            await page.keyboard.press("Tab");
-            await page.waitForChanges();
-            await page.keyboard.press("Enter");
-            await page.waitForChanges();
-            // wait for calendar to open
-            await page.waitForTimeout(ANIMATION_DELAY);
-            // set month to april
-            await setMonthDropdown(page, "3");
-            // tab to grid
-            await page.keyboard.press("Tab");
-            await page.waitForChanges();
-            await page.keyboard.press("Tab");
-            await page.waitForChanges();
-            await page.keyboard.press("Tab");
-            await page.waitForChanges();
-            await page.keyboard.press("Tab");
-            await page.waitForChanges();
-            // select 19th of month
-            await page.keyboard.press("ArrowDown");
-            await page.waitForChanges();
-            await page.keyboard.press("ArrowDown");
-            await page.waitForChanges();
-            await page.keyboard.press("ArrowRight");
-            await page.waitForChanges();
-            await page.keyboard.press("ArrowRight");
-            await page.waitForChanges();
-            await page.keyboard.press("ArrowRight");
-            await page.waitForChanges();
-            await page.keyboard.press("ArrowRight");
-            await page.waitForChanges();
-            await page.keyboard.press("Enter");
-            await page.waitForChanges();
-            expect(spy).toHaveReceivedEventTimes(1);
-            expect(spy.lastEvent.detail).toEqual({
-                component: "duet-date-picker",
-                value: "2020-04-19",
-                valueAsDate: new Date(2020, 3, 19).toISOString(),
-            });
-        });
-        it("supports selecting a date in the past", async () => {
-            const page = await generatePage({ value: "2020-01-01" });
-            const picker = await getPicker(page);
-            const spy = await picker.spyOnEvent("duetChange");
-            // open calendar
-            await page.keyboard.press("Tab");
-            await page.waitForChanges();
-            await page.keyboard.press("Tab");
-            await page.waitForChanges();
-            await page.keyboard.press("Enter");
-            await page.waitForChanges();
-            // wait for calendar to open
-            await page.waitForTimeout(ANIMATION_DELAY);
-            // select april from month dropdown
-            await setMonthDropdown(page, "3");
-            // tab to year dropdown, select 2019
-            await setYearDropdown(page, "2019");
-            // tab to grid
-            await page.keyboard.press("Tab");
-            await page.waitForChanges();
-            await page.keyboard.press("Tab");
-            await page.waitForChanges();
-            await page.keyboard.press("Tab");
-            await page.waitForChanges();
-            await page.keyboard.press("Tab");
-            await page.waitForChanges();
-            // select date 19th of month
-            await page.keyboard.press("ArrowDown");
-            await page.waitForChanges();
-            await page.keyboard.press("ArrowDown");
-            await page.waitForChanges();
-            await page.keyboard.press("ArrowRight");
-            await page.waitForChanges();
-            await page.keyboard.press("ArrowRight");
-            await page.waitForChanges();
-            await page.keyboard.press("ArrowRight");
-            await page.waitForChanges();
-            await page.keyboard.press("ArrowRight");
-            await page.waitForChanges();
-            await page.keyboard.press("Enter");
-            await page.waitForChanges();
-            expect(spy).toHaveReceivedEventTimes(1);
-            expect(spy.lastEvent.detail).toEqual({
-                component: "duet-date-picker",
-                value: "2019-04-19",
-                valueAsDate: new Date(2019, 3, 19).toISOString(),
-            });
-        });
-        it.todo("moves focus to start of week on home press");
-        it.todo("moves focus to end of week end press");
-        it.todo("moves focus to previous month on page up press");
-        it.todo("moves focus to next month on page down press");
-        it.todo("moves focus to previous year on shift + page down press");
-        it.todo("moves focus to next year on shift + page down press");
-    });
-    describe("events", () => {
-        it("raises a duetBlur event when the input is blurred", async () => {
-            const page = await generatePage();
-            const picker = await page.find("duet-date-picker");
-            const spy = await picker.spyOnEvent("duetBlur");
-            await page.keyboard.press("Tab");
-            await page.keyboard.press("Tab");
-            expect(spy).toHaveReceivedEventTimes(1);
-        });
-        it("raises a duetFocus event when the input is focused", async () => {
-            const page = await generatePage();
-            const picker = await page.find("duet-date-picker");
-            const spy = await picker.spyOnEvent("duetFocus");
-            await page.keyboard.press("Tab");
-            expect(spy).toHaveReceivedEventTimes(1);
-        });
-    });
-    describe("focus management", () => {
-        async function assertDayButtonFocused(page) {
-            const focused = await getFocusedElement(page);
-            const tag = await page.evaluate((element) => element.tagName.toLowerCase(), focused);
-            const tabIndex = await page.evaluate((element) => element.tabIndex, focused);
-            expect(tabIndex).toBe(0);
-            expect(tag).toEqual("button");
-        }
-        async function assertCloseButtonFocused(page) {
-            const focused = await getFocusedElement(page);
-            const tag = await page.evaluate((element) => element.tagName.toLowerCase(), focused);
-            const text = await page.evaluate((element) => element.innerText, focused);
-            expect(text).toBe(i18n.fi.closeLabel);
-            expect(tag).toEqual("button");
-        }
-        async function assertMonthDropdownFocused(page) {
-            const focused = await getFocusedElement(page);
-            const tag = await page.evaluate(element => element.tagName.toLowerCase(), focused);
-            const id = await page.evaluate(element => element.id, focused);
-            const label = await page.find(`label[for="${id}"]`);
-            expect(label).toEqualText(i18n.fi.monthSelectLabel);
-            expect(tag).toEqual("select");
-        }
-        async function assertYearDropdownFocused(page) {
-            const focused = await getFocusedElement(page);
-            const tag = await page.evaluate(element => element.tagName.toLowerCase(), focused);
-            const id = await page.evaluate(element => element.id, focused);
-            const label = await page.find(`label[for="${id}"]`);
-            expect(label).toEqualText(i18n.fi.yearSelectLabel);
-            expect(tag).toEqual("select");
-        }
-        async function assertPrevMonthFocused(page) {
-            const focused = await getFocusedElement(page);
-            const tag = await page.evaluate((element) => element.tagName.toLowerCase(), focused);
-            const text = await page.evaluate((element) => element.innerText, focused);
-            expect(text).toBe(i18n.fi.prevMonthLabel);
-            expect(tag).toEqual("duet-action-button");
-        }
-        async function assertNextMonthFocused(page) {
-            const focused = await getFocusedElement(page);
-            const tag = await page.evaluate((element) => element.tagName.toLowerCase(), focused);
-            const text = await page.evaluate((element) => element.innerText, focused);
-            expect(text).toBe(i18n.fi.nextMonthLabel);
-            expect(tag).toEqual("duet-action-button");
-        }
-        async function assertToggleButtonFocused(page, negate = false) {
-            const focused = await getFocusedElement(page);
-            const tag = await page.evaluate((element) => element.tagName.toLowerCase(), focused);
-            const text = await page.evaluate((element) => element.innerText, focused);
-            if (negate) {
-                expect(tag).not.toEqual("button");
-                expect(text).not.toContain(`${i18n.fi.buttonLabel}, ${i18n.fi.selected}`);
-            }
-            else {
-                expect(tag).toEqual("button");
-                expect(text).toContain(`${i18n.fi.buttonLabel}, ${i18n.fi.selected}`);
-            }
-        }
-        it("traps focus in calendar", async () => {
-            const page = await generatePage();
-            await openCalendar(page);
-            await page.waitForTimeout(ANIMATION_DELAY);
-            const focusOrder = [
-                assertMonthDropdownFocused,
-                assertYearDropdownFocused,
-                assertPrevMonthFocused,
-                assertNextMonthFocused,
-                assertDayButtonFocused,
-                assertCloseButtonFocused,
-            ];
-            for (const assertion of focusOrder) {
-                await assertion(page);
-                await page.keyboard.press("Tab");
-            }
-            // should arrive back at the start
-            const assertion = focusOrder[0];
-            await assertion(page);
-        });
-        it.todo("doesn't shift focus when interacting with calendar navigation controls");
-        it("shifts focus back to button on date select", async () => {
-            const page = await generatePage({ value: "2020-01-01" });
-            await openCalendar(page);
-            await page.waitForTimeout(ANIMATION_DELAY);
-            await clickDay(page, "10. tammikuuta");
-            await page.waitForChanges();
-            await assertToggleButtonFocused(page);
-        });
-        it("shifts focus back to button on ESC press", async () => {
-            const page = await generatePage({ value: "2020-01-01" });
-            await openCalendar(page);
-            await page.waitForTimeout(ANIMATION_DELAY);
-            await page.keyboard.press("Escape");
-            await page.waitForChanges();
-            await assertToggleButtonFocused(page);
-        });
-        it("doesn't shift focus to button on click outside", async () => {
-            const page = await generatePage({ value: "2020-01-01" });
-            await openCalendar(page);
-            await page.waitForTimeout(ANIMATION_DELAY);
-            await clickOutside(page);
-            await assertToggleButtonFocused(page, true);
-        });
-    });
-    describe("min/max support", () => {
-        it("supports a min date", async () => {
-            const page = await generatePage({ value: "2020-01-15", min: "2020-01-02" });
-            const picker = await getPicker(page);
-            const spy = await picker.spyOnEvent("duetChange");
-            await openCalendar(page);
-            // wait for calendar to open
-            await page.waitForTimeout(ANIMATION_DELAY);
-            // try clicking a day outside the range
-            await clickDay(page, "1. tammikuuta");
-            expect(spy).toHaveReceivedEventTimes(0);
-            // click a day inside the range
-            await clickDay(page, "2. tammikuuta");
-            expect(spy).toHaveReceivedEventTimes(1);
-            expect(spy.lastEvent.detail).toEqual({
-                component: "duet-date-picker",
-                value: "2020-01-02",
-                valueAsDate: new Date(2020, 0, 2).toISOString(),
-            });
-        });
-        it("supports a max date", async () => {
-            const page = await generatePage({ value: "2020-01-15", max: "2020-01-30" });
-            const picker = await getPicker(page);
-            const spy = await picker.spyOnEvent("duetChange");
-            await openCalendar(page);
-            // wait for calendar to open
-            await page.waitForTimeout(ANIMATION_DELAY);
-            // try clicking a day outside the range
-            await clickDay(page, "31. tammikuuta");
-            expect(spy).toHaveReceivedEventTimes(0);
-            // click a day inside the range
-            await clickDay(page, "30. tammikuuta");
-            expect(spy).toHaveReceivedEventTimes(1);
-            expect(spy.lastEvent.detail).toEqual({
-                component: "duet-date-picker",
-                value: "2020-01-30",
-                valueAsDate: new Date(2020, 0, 30).toISOString(),
-            });
-        });
-        it("supports min and max dates", async () => {
-            const page = await generatePage({ value: "2020-01-15", min: "2020-01-02", max: "2020-01-30" });
-            const picker = await getPicker(page);
-            const spy = await picker.spyOnEvent("duetChange");
-            await openCalendar(page);
-            // wait for calendar to open
-            await page.waitForTimeout(ANIMATION_DELAY);
-            // try clicking a day less than min
-            await clickDay(page, "1. tammikuuta");
-            expect(spy).toHaveReceivedEventTimes(0);
-            // try clicking a day greater than max
-            await clickDay(page, "31. tammikuuta");
-            expect(spy).toHaveReceivedEventTimes(0);
-            // click a day inside the range
-            await clickDay(page, "30. tammikuuta");
-            expect(spy).toHaveReceivedEventTimes(1);
-            expect(spy.lastEvent.detail).toEqual({
-                component: "duet-date-picker",
-                value: "2020-01-30",
-                valueAsDate: new Date(2020, 0, 30).toISOString(),
-            });
-        });
-        it("disables prev month button if same month and year as min", async () => {
-            const page = await generatePage({ value: "2020-04-19", min: "2020-04-01" });
-            await openCalendar(page);
-            const prevMonthButton = await getPrevMonthButton(page);
-            expect(prevMonthButton).toHaveAttribute("disabled");
-        });
-        it("disables next month button if same month and year as max", async () => {
-            const page = await generatePage({ value: "2020-04-19", max: "2020-04-30" });
-            await openCalendar(page);
-            const nextMonthButton = await getNextMonthButton(page);
-            expect(nextMonthButton).toHaveAttribute("disabled");
-        });
-        it("does not disable prev/next buttons when only month value (but not year) is same as min and max", async () => {
-            // there was a bug whereby both buttons would be disabled if the min/max/selected date
-            // had the same month (here: 4), but different years. this tests ensures no regression
-            const page = await generatePage({ value: "2020-04-19", min: "2019-04-19", max: "2021-04-19" });
-            await openCalendar(page);
-            const prevMonthButton = await getPrevMonthButton(page);
-            const nextMonthButton = await getNextMonthButton(page);
-            expect(prevMonthButton).not.toHaveAttribute("disabled");
-            expect(nextMonthButton).not.toHaveAttribute("disabled");
-        });
-        it("respects min/max dates when generating year dropdown", async () => {
-            const page = await generatePage({ value: "2020-04-19", min: "2019-04-19", max: "2021-04-19" });
-            const allowedYears = await page.$eval(".duet-date-year-select", (select) => {
-                return Array.from(select.options).map(option => option.value);
-            });
-            expect(allowedYears).toEqual(["2019", "2020", "2021"]);
-        });
-        it("respects min/max dates when generating month dropdown", async () => {
-            const page = await generatePage({ value: "2020-04-19", min: "2019-04-01", max: "2020-05-31" });
-            await openCalendar(page);
-            function getAllowedMonths() {
-                return page.$eval(".duet-date-month-select", (select) => {
-                    return Array.from(select.options)
-                        .filter(option => !option.disabled)
-                        .map(option => option.value);
-                });
-            }
-            // in 2020, January - May is allowed
-            let allowedMonths = await getAllowedMonths();
-            expect(allowedMonths).toEqual(["0", "1", "2", "3", "4"]);
-            await setYearDropdown(page, "2019");
-            // in 2019, April - December is allowed
-            allowedMonths = await getAllowedMonths();
-            expect(allowedMonths).toEqual(["3", "4", "5", "6", "7", "8", "9", "10", "11"]);
-        });
-    });
-    describe("methods", () => {
-        it("should open calendar on show()", async () => {
-            const page = await generatePage();
-            const picker = await page.find("duet-date-picker");
-            expect(await isCalendarOpen(page)).toBe(false);
-            await picker.callMethod("show");
-            await page.waitForChanges();
-            expect(await isCalendarOpen(page)).toBe(true);
-        });
-        it("should close calendar on hide()", async () => {
-            const page = await generatePage();
-            const picker = await page.find("duet-date-picker");
-            await picker.callMethod("show");
-            await page.waitForChanges();
-            expect(await isCalendarOpen(page)).toBe(true);
-            await picker.callMethod("hide");
-            await page.waitForChanges();
-            const dialog = await getDialog(page);
-            await dialog.waitForNotVisible();
-            expect(await isCalendarOpen(page)).toBe(false);
-        });
-        it("should focus input on setFocus()", async () => {
-            const page = await generatePage({ label: "test label" });
-            const picker = await page.find("duet-date-picker");
-            await picker.callMethod("setFocus");
-            await page.waitForChanges();
-            const focused = await getFocusedElement(page);
-            const id = await page.evaluate(element => element.id, focused);
-            const label = await page.find(`label[for="${id}"]`);
-            expect(label).toEqualText("test label");
-        });
-    });
-    describe("form interaction", () => {
-        it("supports required attribute", async () => {
-            const page = await createPage(`
-        <form>
-          <duet-date-picker required></duet-date-picker>
-          <button type="submit">submit</button>
-        </form>
-      `);
-            const picker = await getPicker(page);
-            const button = await page.find("button[type='submit']");
-            const form = await page.find("form");
-            const spy = await form.spyOnEvent("submit");
-            await button.click();
-            await page.waitForChanges();
-            expect(spy).toHaveReceivedEventTimes(0);
-            picker.setProperty("value", "2020-01-01");
-            await page.waitForChanges();
-            await button.click();
-            expect(spy).toHaveReceivedEventTimes(1);
-        });
-        it("always submits value as ISO date", async () => {
-            const page = await createPage(`
-        <form>
-          <duet-date-picker name="test"></duet-date-picker>
-          <button type="submit">submit</button>
-        </form>
-      `);
-            const picker = await getPicker(page);
-            const input = await getInput(page);
-            picker.setProperty("value", "2020-01-01");
-            await page.waitForChanges();
-            // submitted value should be ISO format
-            const submittedValue = await page.$eval("form", (form) => new FormData(form).get("test"));
-            expect(submittedValue).toEqual("2020-01-01");
-            // whilst the displayed value should be Finnish format
-            expect(await input.getProperty("value")).toEqual("01.01.2020");
-        });
-    });
-    describe("constraint validation", () => {
-        test.each `
-      input           | required | min             | max             | valueMissing | badInput | rangeUnderflow | rangeOverflow
-      ${""}           | ${false} | ${""}           | ${""}           | ${false}     | ${false} | ${false}       | ${false}
-      ${""}           | ${true}  | ${""}           | ${""}           | ${true}      | ${false} | ${false}       | ${false}
-      ${"11"}         | ${false} | ${""}           | ${""}           | ${false}     | ${true}  | ${false}       | ${false}
-      ${"11"}         | ${true}  | ${""}           | ${""}           | ${true}      | ${true}  | ${false}       | ${false}
-      ${"01.01.2020"} | ${true}  | ${"2021-01-01"} | ${""}           | ${false}     | ${false} | ${true}        | ${false}
-      ${"01.01.2023"} | ${true}  | ${"2021-01-01"} | ${"2022-01-01"} | ${false}     | ${false} | ${false}       | ${true}
-      ${"01.01.2021"} | ${true}  | ${"2021-01-01"} | ${"2022-01-01"} | ${false}     | ${false} | ${false}       | ${false}
-    `("when '$input' is entered, required is '$required', min is '$min', max is '$max', then valueMissing is $valueMissing, badInput is $badInput, rangerOverflow is $rangeOverflow, rangeUnderflow is $rangeUnderflow", async ({ input, required, min, max, valueMissing, badInput, rangeUnderflow, rangeOverflow }) => {
-            const attrs = Object.entries({ min, max, required })
-                .filter(([, value]) => value)
-                .map(([attr, value]) => `${attr}="${value}"`)
-                .join(" ");
-            const page = await createPage(`
-          <duet-date-picker ${attrs}></duet-date-picker>
-          <input type="date" ${attrs} />
-        `);
-            await page.type(`duet-date-picker input[type="text"]`, input, { delay: 20 });
-            const duetValidity = await page.$eval(`duet-date-picker`, ({ validity }) => validity);
-            await page.type(`input[type="date"]`, input.replace(".", ""), { delay: 20 });
-            // have to manually copy properties into new object,
-            // since native ValidityState doesn't support JSON serialization
-            const nativeValidity = await page.$eval(`input[type="date"]`, ({ validity }) => {
-                const result = {};
-                for (const prop in validity) {
-                    result[prop] = validity[prop];
-                }
-                return result;
-            });
-            const expected = {
-                patternMismatch: false,
-                customError: false,
-                stepMismatch: false,
-                tooLong: false,
-                tooShort: false,
-                typeMismatch: false,
-                valueMissing,
-                badInput,
-                rangeUnderflow,
-                rangeOverflow,
-                valid: !valueMissing && !badInput && !rangeUnderflow && !rangeOverflow,
-            };
-            expect(duetValidity).toEqual(expected);
-            expect(nativeValidity).toEqual(expected);
-        });
-    });
-});