@duetds/components 8.6.9 → 8.7.0

package/lib/collection/components/duet-multiselect/duet-multiselect.e2e.js

@@ -1,157 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { createPage } from "../../utils/test-utils";
-describe("duet-multiselect", () => {
-    it("should render a multiselect", async () => {
-        const page = await createPage(`<duet-multiselect></duet-multiselect>`);
-        const component = await page.find("duet-multiselect");
-        expect(component).not.toBeNull();
-    });
-    it("should provide a property that renders label", async () => {
-        const page = await createPage(`<duet-multiselect label="test"></duet-multiselect>`);
-        const element = await page.find("duet-multiselect >>> label");
-        expect(element.innerText).toEqual("test");
-    });
-    it("should provide a property that removes the margin of the component", async () => {
-        const page = await createPage(`<duet-multiselect margin="none"></duet-multiselect>`);
-        const element = await page.find(".duet-m-0");
-        expect(element).not.toBeNull();
-    });
-    it("should provide a property that switches the theme", async () => {
-        const page = await createPage(`<duet-multiselect theme="turva"></duet-multiselect>`);
-        const element = await page.find("duet-multiselect >>> .duet-multiselect-container");
-        expect(element).toHaveClass("duet-theme-turva");
-    });
-    it("should provide a property that makes the  disabled", async () => {
-        const page = await createPage(`<duet-multiselect disabled></duet-multiselect>`);
-        const element = await page.find("duet-multiselect >>> .duet-multiselect");
-        expect(element.getAttribute("disabled")).not.toBeNull();
-    });
-    it("should provide a property that adds an ID", async () => {
-        const page = await createPage(`<duet-multiselect identifier="test"></duet-multiselect>`);
-        const element = await page.find("duet-multiselect >>> .duet-multiselect");
-        expect(element.getAttribute("id")).toEqual("test");
-    });
-    it("should provide a property that renders select all and and clear all buttons", async () => {
-        const page = await createPage(`<duet-multiselect all-controls items='[{"label": "11100", "value": "11100"}, {"label": "22200", "value": "22200"}]'></duet-multiselect>`);
-        const selectAll = await page.find("duet-multiselect >>> button.duet-multiselect-select-all");
-        const clearAll = await page.find("duet-multiselect >>> button.duet-multiselect-clear-all");
-        expect(selectAll).not.toBeNull();
-        expect(clearAll).not.toBeNull();
-    });
-    it("should not render select all and and clear all buttons if there are no items", async () => {
-        const page = await createPage(`<duet-multiselect all-controls></duet-multiselect>`);
-        const selectAll = await page.find("duet-multiselect >>> button.duet-multiselect-select-all");
-        const clearAll = await page.find("duet-multiselect >>> button.duet-multiselect-clear-all");
-        expect(selectAll).toBeNull();
-        expect(clearAll).toBeNull();
-    });
-    it("should select and clear all when clicking the corresponding buttons", async () => {
-        const page = await createPage(`<duet-multiselect all-controls items='[{"label": "11100", "value": "11100"}, {"label": "22200", "value": "22200"}]'></duet-multiselect>`);
-        const multiselect = await page.find("duet-multiselect");
-        const multiselectTrigger = await page.find("duet-multiselect >>> .duet-multiselect");
-        const selectAll = await page.find("duet-multiselect >>> button.duet-multiselect-select-all");
-        const clearAll = await page.find("duet-multiselect >>> button.duet-multiselect-clear-all");
-        await multiselectTrigger.click();
-        expect(await multiselect.getProperty("value")).toHaveLength(0);
-        await selectAll.click();
-        expect(await multiselect.getProperty("value")).toHaveLength(2);
-        await clearAll.click();
-        expect(await multiselect.getProperty("value")).toHaveLength(0);
-    });
-    it("should only raise an event on user interaction, not when changing checked property programmatically", async () => {
-        const page = await createPage(`<duet-multiselect label="Checked" items='[{"label": "11100", "value": "11100"}, {"label": "22200", "value": "22200"}]'></duet-multiselect>`);
-        const multiselect = await page.find("duet-multiselect >>> .duet-multiselect");
-        await multiselect.click();
-        const checkbox = await page.find("duet-multiselect >>> duet-checkbox");
-        const changeEventSpy = await checkbox.spyOnEvent("duetChange");
-        checkbox.setProperty("checked", true);
-        await page.waitForChanges();
-        expect(changeEventSpy).not.toHaveReceivedEvent();
-        await checkbox.click();
-        expect(changeEventSpy).toHaveReceivedEvent();
-    });
-    it("should raise an event on focus", async () => {
-        const page = await createPage(`<duet-multiselect label="Checked" value="test"></duet-multiselect>`);
-        const multiselect = await page.find("duet-multiselect");
-        const focusEventSpy = await multiselect.spyOnEvent("duetFocus");
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        expect(focusEventSpy).toHaveReceivedEvent();
-    });
-    it("should raise an event on blur", async () => {
-        const page = await createPage(`
-      <duet-multiselect label="Checked" value="test"></duet-multiselect>
-      <button>another focusable element</button>
-    `);
-        const multiselect = await page.find("duet-multiselect");
-        const blurEventSpy = await multiselect.spyOnEvent("duetFocus");
-        // focus then blur the checkbox
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        expect(blurEventSpy).toHaveReceivedEvent();
-    });
-    it("should provide a method for setting the selected options", async () => {
-        const page = await createPage(`<duet-multiselect items='[{"label": "One", "value": "1"}, {"label": "Two", "value": "2"}, {"label": "Three", "value": "3"}]'></duet-multiselect>`);
-        const multiselect = await page.find("duet-multiselect");
-        expect(await multiselect.getProperty("value")).toHaveLength(0);
-        await multiselect.callMethod("selectWithValues", ["2", "3"]);
-        expect(await multiselect.getProperty("value")).toEqual([
-            { label: "Two", value: "2" },
-            { label: "Three", value: "3" },
-        ]);
-    });
-    it("should provide property to specify labelled groups of items", async () => {
-        const page = await createPage(`<duet-multiselect></duet-multiselect>`);
-        const multiselect = await page.find("duet-multiselect");
-        const items = [
-            {
-                label: "Group one",
-                items: [
-                    { label: "One", value: "1" },
-                    { label: "Two", value: "2" },
-                ],
-            },
-            {
-                label: "Group two",
-                items: [
-                    { label: "Three", value: "3" },
-                    { label: "Four", value: "4" },
-                ],
-            },
-        ];
-        await multiselect.setProperty("items", items);
-        const multiselectBtn = await page.find("duet-multiselect >>> .duet-multiselect");
-        await multiselectBtn.click();
-        const fieldsets = await page.findAll("duet-multiselect >>> fieldset");
-        expect(fieldsets.length).toEqual(items.length);
-        for (let i = 0; i < items.length; i++) {
-            const legend = await fieldsets[i].find("legend");
-            expect(legend.textContent).toEqual(items[i].label);
-        }
-    });
-    it("should render a badge with number of selected items", async () => {
-        const page = await createPage(`<duet-multiselect></duet-multiselect>`);
-        const multiselect = await page.find("duet-multiselect");
-        const multiselectTrigger = await page.find("duet-multiselect >>> .duet-multiselect");
-        const badgeSelector = "duet-multiselect >>> .duet-multiselect-badge";
-        const items = [
-            { label: "One", value: "1" },
-            { label: "Two", value: "2" },
-            { label: "Three", value: "3" },
-            { label: "Four", value: "4" },
-        ];
-        await multiselect.setProperty("items", items);
-        expect(await page.find(badgeSelector)).toBeNull();
-        await multiselectTrigger.click();
-        const checkbox = await page.find("duet-multiselect >>> duet-checkbox");
-        await checkbox.click();
-        // note: checking match to starting with number as textContent also has <duet-visually-hidden> text
-        expect((await page.find(badgeSelector)).innerText).toMatch(/^1/);
-        await multiselectTrigger.click();
-        await multiselect.callMethod("selectWithValues", ["2", "3"]);
-        expect((await page.find(badgeSelector)).innerText).toMatch(/^3/);
-    });
-});

package/lib/collection/components/duet-notification/duet-notification.a11y.e2e.js

@@ -1,20 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { formatViolations, options as axeRunOptions, testWithAxe } from "../../utils/axe-core-utils";
-describe("[a11y] duet-notification", () => {
-    it("should render an accessible component", async () => {
-        const result = await testWithAxe(`
-        <div role="list">
-          <duet-notification highlight url="https://www.duetds.com" date="23.11.2020">
-            <duet-heading level="h2" visual-level="h6"> Uusi vakuutus </duet-heading>
-            <duet-paragraph size="small" margin="none">
-              Uuden kotivakuutuksesi tiedot ja asiakirjat löydät klikkaamalla tästä.
-            </duet-paragraph>
-          </duet-notification>
-        </div>
-      `, axeRunOptions);
-        expect(result).not.toBeNull();
-        expect(formatViolations(result.violations)).toEqual([]);
-    });
-});

package/lib/collection/components/duet-notification/duet-notification.e2e.js

@@ -1,12 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { createPage } from "../../utils/test-utils";
-describe("duet-notification", () => {
-    it("should render a notification", async () => {
-        const page = await createPage(`<duet-notification></duet-notification>`);
-        const component = await page.find("duet-notification");
-        expect(component).not.toBeNull();
-        expect(component).toHaveClass("hydrated");
-    });
-});

package/lib/collection/components/duet-notification-drawer/duet-notification-drawer.a11y.e2e.js

@@ -1,28 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { formatViolations, options as axeRunOptions, testWithAxe } from "../../utils/axe-core-utils";
-describe("[a11y] duet-notification-drawer", () => {
-    it("should render an accessible component", async () => {
-        const result = await testWithAxe(`
-      <duet-notification-drawer direction="right" label="Ilmoitukset (1)" icon="messaging-notification" badge>
-        <duet-notification highlight url="https://www.duetds.com" date="23.11.2020">
-          <duet-heading level="h2" visual-level="h6"> Uusi vakuutus </duet-heading>
-          <duet-paragraph size="small" margin="none">
-            Uuden kotivakuutuksesi tiedot ja asiakirjat löydät klikkaamalla tästä.
-          </duet-paragraph>
-        </duet-notification>
-      </duet-notification-drawer>
-      `, axeRunOptions);
-        expect(result).not.toBeNull();
-        expect(formatViolations(result.violations)).toEqual([]);
-    });
-    it("should render an accessible component in an empty state", async () => {
-        const result = await testWithAxe(`
-        <duet-notification-drawer direction="right" label="Ilmoitukset" icon="messaging-notification">
-        </duet-notification-drawer>
-      `, axeRunOptions);
-        expect(result).not.toBeNull();
-        expect(formatViolations(result.violations)).toEqual([]);
-    });
-});

package/lib/collection/components/duet-notification-drawer/duet-notification-drawer.e2e.js

@@ -1,177 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { createPage } from "../../utils/test-utils";
-function camelToKebab(str) {
-    return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
-}
-function isChildren(propsOrChildren) {
-    return Array.isArray(propsOrChildren) || typeof propsOrChildren === "string";
-}
-function dom(tag, propsOrChildren, children) {
-    if (propsOrChildren == null) {
-        propsOrChildren = {};
-    }
-    if (isChildren(propsOrChildren)) {
-        children = propsOrChildren;
-        propsOrChildren = {};
-    }
-    if (children == null) {
-        children = "";
-    }
-    const attrs = Object.entries(propsOrChildren)
-        .map(([attr, value]) => `${camelToKebab(attr)}="${value}"`)
-        .join(" ");
-    children = Array.isArray(children) ? children : [children];
-    return `<${tag} ${attrs}>${children.join("")}</${tag}>`;
-}
-function paragraph(props, children) {
-    return dom("duet-paragraph", props, children);
-}
-function heading(props, children) {
-    return dom("duet-heading", props, children);
-}
-function drawer(props, children) {
-    return dom("duet-notification-drawer", props, children);
-}
-function notification(props, children) {
-    return dom("duet-notification", props, children);
-}
-function appendFocusableElement(page) {
-    return page.evaluate(() => {
-        const a = document.createElement("a");
-        a.href = "#";
-        a.innerText = "some focusable element";
-        document.body.appendChild(a);
-    });
-}
-function generatePage(options = { theme: "default" }) {
-    return createPage(dom("html", { class: `duet-theme-${options.theme}` }, [
-        `<link rel="stylesheet" href="https://cdn.duetds.com/api/css/1.4.16/lib/duet.min.css" />`,
-        drawer({ label: "Notifications (3)", badge: true, icon: "messaging-notification" }, [
-            notification({ date: "today", url: "#", highlight: true }, [
-                heading({ level: "h2", visualLevel: "h6", margin: "none" }, "First notification"),
-            ]),
-            notification({ date: "today", url: "#" }, [
-                paragraph({ size: "small", margin: "none" }, "Second notification"),
-            ]),
-            notification({ date: "today", url: "#" }, [
-                heading({ level: "h2", visualLevel: "h6" }, "Third notification"),
-                paragraph({ size: "small", margin: "none" }, "Some text which would serve as the body of the notification"),
-            ]),
-        ]),
-    ]));
-}
-function getFocusedElement(page) {
-    return page.evaluateHandle(() => document.activeElement);
-}
-function getButton(page) {
-    return page.find("duet-notification-drawer >>> button[aria-expanded]");
-}
-function getContent(page) {
-    return page.find("duet-notification-drawer >>> .duet-drawer-content");
-}
-async function openDrawer(page) {
-    const button = await getButton(page);
-    await button.click();
-    await page.waitForChanges();
-}
-describe("duet-notification-drawer", () => {
-    it("should render a notification drawer", async () => {
-        const page = await createPage(drawer({ label: "Notifications" }));
-        const component = await page.find("duet-notification-drawer");
-        expect(component).not.toBeNull();
-        expect(component).toHaveClass("hydrated");
-    });
-    it("closes on click outside", async () => {
-        const page = await generatePage();
-        await appendFocusableElement(page); // we need another focusable element for the purpose of test
-        await openDrawer(page);
-        const link = await page.find("a");
-        await link.click();
-        await page.waitForChanges();
-        const button = await getButton(page);
-        const content = await getContent(page);
-        expect(await content.isVisible()).toBe(false);
-        expect(button).toEqualAttribute("aria-expanded", "false");
-    });
-    it("closes when focus moves outside", async () => {
-        const page = await generatePage();
-        await appendFocusableElement(page); // we need another focusable element for the purpose of test
-        await openDrawer(page);
-        const link = await page.find("a");
-        await link.focus();
-        await page.waitForChanges();
-        const button = await getButton(page);
-        const content = await getContent(page);
-        expect(await content.isVisible()).toBe(false);
-        expect(button).toEqualAttribute("aria-expanded", "false");
-    });
-    describe("keyboard a11y", () => {
-        it("can be opened with keyboard", async () => {
-            const page = await generatePage();
-            let button = await getButton(page);
-            let content = await getContent(page);
-            expect(button).toEqualAttribute("aria-expanded", "false");
-            expect(await content.isVisible()).toBe(false);
-            await page.keyboard.press("Tab");
-            await page.keyboard.press("Enter");
-            await page.waitForChanges();
-            button = await getButton(page);
-            content = await getContent(page);
-            expect(button).toEqualAttribute("aria-expanded", "true");
-            expect(await content.isVisible()).toBe(true);
-        });
-        it("closes on ESC press", async () => {
-            const page = await generatePage();
-            await openDrawer(page);
-            let content = await getContent(page);
-            expect(await content.isVisible()).toBe(true);
-            await page.keyboard.press("Escape");
-            await page.waitForChanges();
-            const button = await getButton(page);
-            content = await getContent(page);
-            expect(button).toEqualAttribute("aria-expanded", "false");
-            expect(await content.isVisible()).toBe(false);
-        });
-        it("allows for tabbing through notifications", async () => {
-            const page = await generatePage();
-            await page.keyboard.press("Tab");
-            await page.keyboard.press("Enter");
-            await page.waitForChanges();
-            await page.keyboard.press("Tab");
-            let focused = await getFocusedElement(page);
-            let text = await page.evaluate((element) => element.innerText, focused);
-            expect(text).toContain("First notification");
-            await page.keyboard.press("Tab");
-            focused = await getFocusedElement(page);
-            text = await page.evaluate((element) => element.innerText, focused);
-            expect(text).toContain("Second notification");
-            await page.keyboard.press("Tab");
-            focused = await getFocusedElement(page);
-            text = await page.evaluate((element) => element.innerText, focused);
-            expect(text).toContain("Third notification");
-        });
-        it("closes once focus moves out of drawer", async () => {
-            const page = await generatePage();
-            await appendFocusableElement(page); // we need another focusable element for the test
-            await page.keyboard.press("Tab");
-            await page.keyboard.press("Enter");
-            await page.waitForChanges();
-            let button = await getButton(page);
-            expect(button).toEqualAttribute("aria-expanded", "true");
-            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();
-            button = await getButton(page);
-            const content = await getContent(page);
-            expect(button).toEqualAttribute("aria-expanded", "false");
-            expect(await content.isVisible()).toBe(false);
-        });
-    });
-});

package/lib/collection/components/duet-number-input/duet-number-input-negative.e2e.js

@@ -1,32 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { createComponent } from "./duet-number-input.e2e";
-describe("duet-number-input - negative values", () => {
-    it("supports negative min and max values", async () => {
-        const page = await createComponent({ value: "-2 C", step: 1, min: -3, max: -1, unit: "C" });
-        const numberInput = await page.find("duet-number-input");
-        const input = await numberInput.find("duet-input");
-        const subtract = await numberInput.find(".duet-number-button-subtract");
-        const add = await numberInput.find(".duet-number-button-add");
-        await page.$eval("duet-number-input", (el) => el.setFocus());
-        expect(await input.getProperty("value")).toBe("−2 C");
-        await add.click();
-        await page.waitForChanges();
-        expect(await input.getProperty("value")).toBe("−1 C");
-        // we've hit the max, so should still be 3
-        await add.click();
-        await page.waitForChanges();
-        expect(await input.getProperty("value")).toBe("−1 C");
-        await subtract.click();
-        await page.waitForChanges();
-        expect(await input.getProperty("value")).toBe("−2 C");
-        await subtract.click();
-        await page.waitForChanges();
-        expect(await input.getProperty("value")).toBe("−3 C");
-        // we've hit the min, so should be still be 1
-        await subtract.click();
-        await page.waitForChanges();
-        expect(await input.getProperty("value")).toBe("−3 C");
-    });
-});

package/lib/collection/components/duet-number-input/duet-number-input.a11y.e2e.js

@@ -1,14 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { formatViolations, options as axeRunOptions, testWithAxe } from "../../utils/axe-core-utils";
-describe("[a11y] duet-number-input", () => {
-    it("should render an accessible component", async () => {
-        const result = await testWithAxe(`
-      <duet-number-input label="Sijoitettava pääoma" value="100000" min="50000" max="500000" step="5000" unit="€">
-      </duet-number-input>
-      `, axeRunOptions);
-        expect(result).not.toBeNull();
-        expect(formatViolations(result.violations)).toEqual([]);
-    });
-});