@duetds/components 8.6.9 → 8.7.0

package/lib/collection/components/duet-choice-group/duet-choice-group.e2e.js

@@ -1,102 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { createPage } from "../../utils/test-utils";
-describe("duet-choice-group", () => {
-    it("should render a choice group", async () => {
-        const page = await createPage("<duet-choice-group></duet-choice-group>");
-        const component = await page.find("duet-choice-group");
-        expect(component).not.toBeNull();
-    });
-    it("should provide a property that removes the margin of the component", async () => {
-        const page = await createPage(`<duet-choice-group margin="none"></duet-choice-group>`);
-        const element = await page.find(".duet-m-0");
-        expect(element).not.toBeNull();
-    });
-    it("should prevent stacking in non-responsive mode", async () => {
-        const page = await createPage(`<duet-choice-group></duet-choice-group>`);
-        const element = await page.find(".duet-choice-group");
-        expect(element).toHaveClass("duet-no-stacking");
-    });
-    it("should provide a property that toggles on a responsive mode", async () => {
-        const page = await createPage(`<duet-choice-group responsive></duet-choice-group>`);
-        const component = await page.find("duet-choice-group");
-        const element = await page.find(".duet-choice-group");
-        expect(component).toHaveClass("duet-choice-group-breakpoint-small");
-        expect(element).not.toHaveClass("duet-no-stacking");
-    });
-    it("should provide a property that changes the default breakpoint in a responsive mode", async () => {
-        const page = await createPage(`<duet-choice-group responsive breakpoint="medium"></duet-choice-group>`);
-        const component = await page.find("duet-choice-group");
-        expect(component).toHaveClass("duet-choice-group-breakpoint-medium");
-    });
-    it("should support using arrow keys to navigate through choices", async () => {
-        const page = await createPage(`
-      <duet-choice-group value="one" label="Test" direction="horizontal" name="group">
-        <duet-choice type="radio" label="1" value="1" expand></duet-choice>
-        <duet-choice type="radio" label="2" value="2" expand></duet-choice>
-        <duet-choice type="radio" label="3" value="3" expand></duet-choice>
-      </duet-choice-group>
-    `);
-        const choiceGroup = await page.find("duet-choice-group");
-        const duetChangeEvent = await choiceGroup.spyOnEvent("duetChange");
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("ArrowDown");
-        await page.waitForChanges();
-        expect(duetChangeEvent).toHaveReceivedEventTimes(1);
-        expect(duetChangeEvent.lastEvent.detail).toEqual({
-            checked: true,
-            value: "2",
-            component: "duet-choice",
-        });
-    });
-    it("should associate the tooltip with the legend", async () => {
-        const page = await createPage(`
-      <duet-choice-group value="one" label="This choice group has a tooltip" tooltip="Hello, I'm a tooltip!.">
-        <duet-choice label="Elainvakuutus" type="radio" value="one" expand></duet-choice>
-        <duet-choice label="Autovakuutus" type="radio" value="two" expand></duet-choice>
-      </duet-choice-group>
-    `);
-        const legend = await page.find("duet-fieldset >>> legend");
-        const tooltip = await page.find("duet-tooltip");
-        const tooltipInputLabel = await tooltip.getProperty("accessibleInputLabel");
-        expect(tooltipInputLabel).not.toBeNull();
-        expect(legend.textContent).toBe(tooltipInputLabel);
-    });
-    it("ignores duetChange events from all components other than duet-choice", async () => {
-        const page = await createPage(`
-      <duet-choice-group value="svenska" label="Asiointikieli" name="group" responsive>
-        <duet-choice label="Svenska" type="radio" value="svenska" collapsible expand>
-          <duet-textarea></duet-textarea>
-        </duet-choice>
-      </duet-choice-group>
-    `);
-        const choiceGroup = await page.find("duet-choice-group");
-        // tab to textarea
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("Tab");
-        // enter some text to trigger duetChange event from textarea
-        await page.keyboard.type("hello");
-        // tab out
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        // value should not have changed
-        const value = await choiceGroup.getProperty("value");
-        expect(value).toBe("svenska");
-    });
-    it("Should correctly update initial value if it's undefined", async () => {
-        const page = await createPage(`
-      <duet-choice-group label="This choice group has a tooltip" tooltip="Hello, I'm a tooltip!.">
-        <duet-choice label="Elainvakuutus" type="radio" value="one" expand></duet-choice>
-        <duet-choice label="Autovakuutus" type="radio" value="two" expand></duet-choice>
-      </duet-choice-group>
-    `);
-        const component = await page.find("duet-choice-group");
-        const initialValue = await component.callMethod("getInitialValue");
-        expect(initialValue).toBeUndefined();
-        component.setProperty("value", "one");
-        await page.waitForTimeout(100);
-        const initialValueAfterSet = await component.callMethod("getInitialValue");
-        expect(initialValueAfterSet).toBe("one");
-    });
-});

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

@@ -1,24 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { formatViolations, options as axeRunOptions, testWithAxe } from "../../utils/axe-core-utils";
-describe("[a11y] duet-collapsible", () => {
-    it("should render an accessible component", async () => {
-        const result = await testWithAxe(`
-        <duet-collapsible heading="Click to open details">
-          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam impedit, possimus minima repudiandae.
-        </duet-collapsible>
-      `, axeRunOptions);
-        expect(result).not.toBeNull();
-        expect(formatViolations(result.violations)).toEqual([]);
-    });
-    it("should render an accessible component which is initially open", async () => {
-        const result = await testWithAxe(`
-        <duet-collapsible heading="Click to open details" open>
-          Lorem ipsum dolor sit, amet consectetur adipisicing elit.
-        </duet-collapsible>
-      `, axeRunOptions);
-        expect(result).not.toBeNull();
-        expect(formatViolations(result.violations)).toEqual([]);
-    });
-});

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

@@ -1,123 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { createPage } from "../../utils/test-utils";
-describe("duet-collapsible", () => {
-    // taken from here: https://github.com/puppeteer/puppeteer/issues/545#issuecomment-489338078
-    function isElementVisible(page, selector) {
-        return page.$eval(selector, (element) => {
-            if (!element) {
-                return false;
-            }
-            return !!(element.offsetWidth || element.offsetHeight || element.getClientRects().length);
-        });
-    }
-    const generatePage = async (open = false) => {
-        return createPage(`
-      <duet-collapsible heading="First collapsible" ${open ? "open" : ""} accessible-label="Accessible First collapsible">
-        <duet-paragraph>
-          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam impedit, possimus minima repudiandae
-        </duet-paragraph>
-        <duet-paragraph>
-          Laudantium consectetur iusto fugiat hic porro vero ex, non atque saepe maiores. Consectetur tempore
-        </duet-paragraph>
-      </duet-collapsible>
-      <duet-collapsible heading="Second collapsible" heading-weight="normal" ${open ? "open" : ""}>
-        <duet-paragraph>
-          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam impedit, possimus minima repudiandae
-        </duet-paragraph>
-        <duet-paragraph>
-          Laudantium consectetur iusto fugiat hic porro vero ex, non atque saepe maiores. Consectetur tempore
-        </duet-paragraph>
-        <duet-collapsible class="inner" heading="Inner collapsible" heading-weight="normal">
-          <duet-paragraph class="inner">
-            Laudantium consectetur iusto fugiat hic porro vero ex, non atque saepe maiores. Consectetur tempore
-          </duet-paragraph>
-        </duet-collapsible>
-      </duet-collapsible>
-      <duet-collapsible heading="Third collapsible">
-        <div slot="after-heading">
-          <duet-badge>Badge</duet-badge>
-        </div>
-        <duet-paragraph>
-          Laudantium consectetur iusto fugiat hic porro vero ex, non atque saepe maiores. Consectetur tempore
-        </duet-paragraph>
-      </duet-collapsible>
-    `);
-    };
-    it("renders", async () => {
-        const page = await generatePage();
-        const collapsible = await page.find("duet-collapsible");
-        expect(collapsible).toHaveClass("hydrated");
-    });
-    it("can be initially open", async () => {
-        const page = await generatePage(true);
-        expect(await isElementVisible(page, "duet-paragraph")).toBe(true);
-    });
-    it("can be initially closed", async () => {
-        const page = await generatePage();
-        expect(await isElementVisible(page, "duet-paragraph")).toBe(false);
-    });
-    it("can have initially closed duet-collapsible nested inside initially open one", async () => {
-        const page = await generatePage(true);
-        expect(await isElementVisible(page, "duet-paragraph.inner")).toBe(false);
-    });
-    it("can open initially closed nested on click", async () => {
-        const page = await generatePage(true);
-        expect(await isElementVisible(page, "duet-paragraph.inner")).toBe(false);
-        const button = await page.find("duet-collapsible.inner >>> button");
-        await button.click();
-        expect(await isElementVisible(page, "duet-paragraph.inner")).toBe(true);
-    });
-    it("closes on click", async () => {
-        const page = await generatePage(true);
-        expect(await isElementVisible(page, "duet-paragraph")).toBe(true);
-        const button = await page.find("duet-collapsible >>> button");
-        await button.click();
-        expect(await isElementVisible(page, "duet-paragraph")).toBe(false);
-    });
-    it("opens on click", async () => {
-        const page = await generatePage();
-        expect(await isElementVisible(page, "duet-paragraph")).toBe(false);
-        const button = await page.find("duet-collapsible >>> button");
-        await button.click();
-        expect(await isElementVisible(page, "duet-paragraph")).toBe(true);
-    });
-    it("closes on space key", async () => {
-        const page = await generatePage(true);
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("Space");
-        await page.waitForChanges();
-        expect(await isElementVisible(page, "duet-paragraph")).toBe(false);
-    });
-    it("closes on return key", async () => {
-        const page = await generatePage(true);
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        expect(await isElementVisible(page, "duet-paragraph")).toBe(false);
-    });
-    it("raises a toggle event", async () => {
-        const page = await generatePage(true);
-        const collapsible = await page.find("duet-collapsible");
-        const duetToggle = await collapsible.spyOnEvent("duetToggle");
-        const button = await page.find("duet-collapsible >>> button");
-        await button.click();
-        expect(duetToggle).toHaveReceivedEventTimes(1);
-    });
-    it("renders the necessary aria attributes", async () => {
-        const page = await generatePage();
-        const content = await page.find("duet-collapsible >>> [id]");
-        const button = await page.find("duet-collapsible >>> button");
-        // button and content should be associated via aria-controls/id attributes
-        expect(button.getAttribute("aria-controls")).toEqual(content.id);
-        expect(button.getAttribute("aria-label")).toBe("Accessible First collapsible");
-        expect(button.getAttribute("aria-expanded")).toBe("false");
-        await button.click();
-        expect(button.getAttribute("aria-expanded")).toBe("true");
-    });
-    it("renders the after-heading slot", async () => {
-        const page = await generatePage();
-        expect(await isElementVisible(page, "duet-badge")).toBe(true);
-    });
-});

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

@@ -1,17 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { formatViolations, options as axeRunOptions, testWithAxe } from "../../utils/axe-core-utils";
-describe("[a11y] duet-combobox", () => {
-    it("should render an accessible component", async () => {
-        const result = await testWithAxe(`
-        <duet-combobox
-          items='[{"id":"0", "value": "49200", "name": "Heinlahti"},{"id":"1", "value": "49210", "name": "Huutjärvi"}]'
-        >
-          <duet-input label="Anna postinumerosi" label-hidden icon="form-location"></duet-input>
-        </duet-combobox>
-      `, axeRunOptions);
-        expect(result).not.toBeNull();
-        expect(formatViolations(result.violations)).toEqual([]);
-    });
-});

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

@@ -1,153 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { createPage } from "../../utils/test-utils";
-const items = [
-    { id: 0, value: "49200", name: "Heinlahti" },
-    { id: 1, value: "49210", name: "Huutjarvi" },
-    { id: 2, value: "49220", name: "Siltakyla" },
-    { id: 3, value: "49240", name: "Purola" },
-    { id: 4, value: "49270", name: "Something" },
-    { id: 5, value: "49290", name: "Vastila" },
-];
-const createPageWithCombobox = async () => {
-    const combobox = `<duet-combobox><duet-input label="Example" expand></duet-input></duet-combobox>`;
-    const page = await createPage(combobox);
-    await page.$eval("duet-combobox", (combobox, props) => Object.assign(combobox, props), {
-        items,
-    });
-    return page;
-};
-const createPageWithMultiCombobox = async () => {
-    const combobox = `<duet-combobox multiple></duet-combobox>`;
-    const page = await createPage(combobox);
-    await page.$eval("duet-combobox", (combobox, props) => Object.assign(combobox, props), {
-        items,
-    });
-    return page;
-};
-describe("duet-combobox", () => {
-    it("should render a combobox", async () => {
-        const page = await createPageWithCombobox();
-        const component = await page.find("duet-combobox");
-        expect(component).not.toBeNull();
-    });
-    it("allows typing in input", async () => {
-        const page = await createPageWithCombobox();
-        const element = await page.find("duet-combobox");
-        const input = await element.find("duet-input .duet-input");
-        await input.click();
-        await page.keyboard.type("Loremipsum", { delay: 150 });
-        expect(await input.getProperty("value")).toBe("Loremipsum");
-        expect(await element.getProperty("value")).toBeFalsy();
-    });
-    it("allows selecting item with keyboard", async () => {
-        const page = await createPageWithCombobox();
-        const element = await page.find("duet-combobox");
-        const input = await element.find("duet-input .duet-input");
-        await input.click();
-        await page.keyboard.type("H", { delay: 150 });
-        await page.keyboard.press("ArrowDown", { delay: 150 });
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        expect(await input.getProperty("value")).toBe("Heinlahti");
-        expect(await element.getProperty("value")).toBe("49200");
-    });
-    it("keeps independent combobox and input values on blur", async () => {
-        const page = await createPageWithCombobox();
-        const element = await page.find("duet-combobox");
-        const input = await element.find("duet-input .duet-input");
-        await input.click();
-        await page.keyboard.type("H", { delay: 150 });
-        await page.keyboard.press("ArrowDown", { delay: 150 });
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        await page.keyboard.type("Loremipsum", { delay: 50 });
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        expect(await input.getProperty("value")).toBe("HeinlahtiLoremipsum");
-        expect(await element.getProperty("value")).toBe("49200");
-    });
-    it("clears input on blur if forced and no selection made", async () => {
-        const page = await createPageWithCombobox();
-        const element = await page.find("duet-combobox");
-        const input = await element.find("duet-input .duet-input");
-        element.setProperty("force", true);
-        await page.waitForChanges();
-        await page.keyboard.press("Tab");
-        await page.keyboard.type("Heinlah", { delay: 50 });
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        expect(await input.getProperty("value")).toBe("");
-        expect(await element.getProperty("value")).toBeFalsy();
-    });
-    it("reverts input value to the selected item on blur if forced", async () => {
-        const page = await createPageWithCombobox();
-        const element = await page.find("duet-combobox");
-        const input = await element.find("duet-input .duet-input");
-        element.setProperty("force", true);
-        await page.waitForChanges();
-        await page.keyboard.press("Tab");
-        await page.keyboard.type("Heinlah", { delay: 50 });
-        await page.keyboard.press("ArrowDown");
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        await page.keyboard.type("Loremipsum", { delay: 50 });
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        expect(await input.getProperty("value")).toBe("Heinlahti");
-        expect(await element.getProperty("value")).toBe("49200");
-    });
-    it("shows dropdown navigable via keys", async () => {
-        const page = await createPageWithCombobox();
-        const element = await page.find("duet-combobox");
-        const input = await element.find("duet-input .duet-input");
-        await input.click();
-        await page.keyboard.type("H", { delay: 150 });
-        await page.keyboard.press("ArrowDown", { delay: 150 });
-        await page.keyboard.press("ArrowDown", { delay: 150 });
-        await page.keyboard.press("Enter", { delay: 50 });
-        await page.keyboard.press("Tab", { delay: 500 });
-        await page.waitForChanges();
-        expect(await input.getProperty("value")).toBe("Huutjarvi");
-        expect(await element.getProperty("value")).toBe("49210");
-    });
-    it("allows filtering middle of string", async () => {
-        const page = await createPageWithCombobox();
-        const element = await page.find("duet-combobox");
-        const input = await element.find("duet-input .duet-input");
-        element.setProperty("filterType", "includes");
-        await page.waitForChanges();
-        await input.click();
-        await page.keyboard.type("uu", { delay: 150 });
-        await page.keyboard.press("ArrowDown", { delay: 150 });
-        await page.keyboard.press("Enter", { delay: 50 });
-        await page.keyboard.press("Tab", { delay: 500 });
-        await page.waitForChanges();
-        expect(await input.getProperty("value")).toBe("Huutjarvi");
-        expect(await element.getProperty("value")).toBe("49210");
-    });
-    it("will add input if not provided in slot", async () => {
-        const page = await createPageWithMultiCombobox();
-        const element = await page.find("duet-combobox");
-        const input = await element.find("duet-input .duet-input");
-        expect(input).not.toBeNull();
-    });
-    it("allows selection of multiple items", async () => {
-        const page = await createPageWithMultiCombobox();
-        const element = await page.find("duet-combobox");
-        const input = await element.find("duet-input .duet-input");
-        await input.click();
-        // Select { id: 3, value: "49240", name: "Purola" }
-        await page.keyboard.type("pu", { delay: 150 });
-        await page.keyboard.press("ArrowDown", { delay: 150 });
-        await page.keyboard.press("Enter", { delay: 50 });
-        // Select { id: 5, value: "49290", name: "Vastila" }
-        await page.keyboard.type("va", { delay: 150 });
-        await page.keyboard.press("ArrowDown", { delay: 150 });
-        await page.keyboard.press("Enter", { delay: 50 });
-        expect(await input.getProperty("value")).toBe("");
-        expect(await element.find("duet-chip")).not.toBeNull();
-        expect(await element.getProperty("value")).toEqual(["49240", "49290"]);
-    });
-});

package/lib/collection/components/duet-contact-card/duet-contact-card.a11y.e2e.js

@@ -1,36 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { formatViolations, options as axeRunOptions, testWithAxe } from "../../utils/axe-core-utils";
-describe("[a11y] duet-contact-card", () => {
-    it("should render an accessible component", async () => {
-        const result = await testWithAxe(`
-        <duet-contact-card
-          image="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIYAAACGCAMAAAAvpwKjAAAAA1BMVEUAAACnej3aAAAAKElEQVR4nO3BgQAAAADDoPlT3+AEVQEAAAAAAAAAAAAAAAAAAAAAwDNGqgABX6KNlwAAAABJRU5ErkJggg=="
-          name="Etunimi Sukunimi"
-          description="Titteli"
-          email="etunimi.sukunimi@lahitapiola.fi"
-          phone="050 123 4567"
-          button-url="#"
-          button-text="Varaa aika"
-          button-icon="form-date"
-        >
-          <duet-collapsible heading="Matrikkelitiedot" margin="none">
-            <duet-list>
-              <duet-list-item>
-                <span slot="label">Example</span>
-                <span slot="value">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam impedit, possimus minima repudiandae.
-                </span>
-              </duet-list-item>
-              <duet-list-item>
-                <span slot="label">Example</span>
-                <span slot="value">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam impedit, possimus minima repudiandae.        </span>
-              </duet-list-item>
-            </duet-list>
-          </duet-collapsible>
-        </duet-contact-card>
-      `, axeRunOptions);
-        expect(result).not.toBeNull();
-        expect(formatViolations(result.violations)).toEqual([]);
-    });
-});

package/lib/collection/components/duet-cookie-consent/duet-cookie-consent.a11y.e2e.js

@@ -1,16 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { formatViolations, options as axeRunOptions, testWithAxe } from "../../utils/axe-core-utils";
-describe("[a11y] duet-cookie-consent", () => {
-    it("should render an accessible component", async () => {
-        const result = await testWithAxe(`
-        <duet-cookie-consent accessible-label="Hyväksyn evästeiden käytön">
-          Käytämme evästeitä. Käyttämällä verkkosivujamme hyväksyt evästeiden käyton.
-          <a href="#" target="_blank">Lue lisää <duet-visually-hidden>evästeistä</duet-visually-hidden></a>
-        </duet-cookie-consent>
-      `, axeRunOptions);
-        expect(result).not.toBeNull();
-        expect(formatViolations(result.violations)).toEqual([]);
-    });
-});

package/lib/collection/components/duet-cookie-consent/duet-cookie-consent.e2e.js

@@ -1,27 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { createPage } from "../../utils/test-utils";
-describe("duet-cookie-consent", () => {
-    const generatePage = async (theme = "") => {
-        return createPage(`
-      <duet-cookie-consent accessible-label="Hyväksyn evästeiden käytön" theme=${theme}>
-        Käytämme evästeitä. Käyttämällä verkkosivujamme hyväksyt evästeiden käyton.
-        <a href="#" target="_blank" aria-label="Lue lisää evästeiden käytöstä sivustolla">Lue lisää</a>
-      </duet-cookie-consent>
-    `);
-    };
-    it("renders", async () => {
-        const page = await generatePage();
-        const cookieConsent = await page.find("duet-cookie-consent");
-        expect(cookieConsent).toHaveClass("hydrated");
-    });
-    it("raises an event on button click", async () => {
-        const page = await generatePage();
-        const cookieConsent = await page.find("duet-cookie-consent");
-        const eventSpy = await cookieConsent.spyOnEvent("duetCookieConsent");
-        const button = await page.find("duet-cookie-consent >>> duet-button");
-        await button.click();
-        expect(eventSpy).toHaveReceivedEventTimes(1);
-    });
-});