@duetds/components 8.6.9 → 8.7.1

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

@@ -1,34 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { formatViolations, mergeRules, options as axeRunOptions, testWithAxe } from "../../utils/axe-core-utils";
-const disabledRules = {
-    // The component has a dedicated focus trap element
-    "aria-hidden-focus": { enabled: false },
-    // ShadowDOM isolates identifiers (needed for aria-controls) https://github.com/w3c/aria/issues/864
-    "aria-valid-attr-value": { enabled: false },
-};
-describe("[a11y] duet-tooltip", () => {
-    it("should render an accessible component", async () => {
-        const result = await testWithAxe(`
-       <duet-tooltip active>
-          Hello, I’m a tooltip! To close me you can hit ESC key, click the close button, or click the X button.
-        </duet-tooltip>
-      `, mergeRules(axeRunOptions, disabledRules));
-        expect(result).not.toBeNull();
-        expect(formatViolations(result.violations)).toEqual([]);
-    });
-    it("should render an accessible component in the input", async () => {
-        const result = await testWithAxe(`
-       <duet-input
-          label="Katuosoite"
-          placeholder="Kadunnimi 1 A 2"
-          tooltip="Hello, I’m a tooltip! To close me, you can click outside of the tooltip, hit ESC key or click the X button."
-          required
-          expand
-        ></duet-input>
-      `, axeRunOptions);
-        expect(result).not.toBeNull();
-        expect(formatViolations(result.violations)).toEqual([]);
-    });
-});

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

@@ -1,104 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { createPage, isFocused } from "../../utils/test-utils";
-function getTrigger(page) {
-    return page.find(`duet-tooltip-button >>> button[aria-expanded]`);
-}
-async function getPopup(page) {
-    const button = await getTrigger(page);
-    return page.find(`duet-tooltip-popup >>> #${button.getAttribute("aria-controls")}`);
-}
-async function openWithClick(page) {
-    const trigger = await getTrigger(page);
-    const popup = await getPopup(page);
-    await trigger.click();
-    await popup.waitForVisible();
-    await page.waitForChanges();
-}
-async function closeWithClick(page) {
-    const trigger = await getTrigger(page);
-    const popup = await getPopup(page);
-    await trigger.click();
-    await popup.waitForNotVisible();
-    await page.waitForChanges();
-}
-async function clickOutside(page) {
-    const popup = await getPopup(page);
-    await page.mouse.click(0, 0);
-    await page.waitForChanges();
-    await popup.waitForNotVisible();
-    await page.waitForChanges();
-}
-async function clickCloseButton(page) {
-    const popup = await getPopup(page);
-    const closeButton = await page.find(`duet-tooltip-popup >>> .duet-tooltip-close`);
-    await closeButton.click();
-    await popup.waitForNotVisible();
-    await page.waitForChanges();
-}
-async function closeWithEsc(page) {
-    const popup = await getPopup(page);
-    await page.keyboard.press("Escape");
-    await page.waitForChanges();
-    await popup.waitForNotVisible();
-    await page.waitForChanges();
-}
-describe("duet-tooltip", () => {
-    it("should render a tooltip", async () => {
-        const page = await createPage(`<duet-tooltip></duet-tooltip>`);
-        const component = await page.find("duet-tooltip");
-        expect(component).not.toBeNull();
-        expect(component).toHaveClass("hydrated");
-    });
-    describe("behavior", () => {
-        it("can be toggled open and closed via the trigger", async () => {
-            const page = await createPage(`<duet-tooltip label="Example label">Example content</duet-tooltip>`);
-            const trigger = await getTrigger(page);
-            const popup = await getPopup(page);
-            await openWithClick(page);
-            // focus *should* be moved to popup on open
-            expect(trigger).toEqualAttribute("aria-expanded", "true");
-            expect(await isFocused(popup)).toBe(true);
-            await closeWithClick(page);
-            // focus *should* be moved to trigger on close
-            expect(trigger).toEqualAttribute("aria-expanded", "false");
-            expect(await isFocused(trigger)).toBe(true);
-        });
-        it("closes on click of close button", async () => {
-            const page = await createPage(`<duet-tooltip label="Example label">Example content</duet-tooltip>`);
-            const trigger = await getTrigger(page);
-            await openWithClick(page);
-            expect(trigger).toEqualAttribute("aria-expanded", "true");
-            await clickCloseButton(page);
-            // focus *should* be moved to trigger on close button click
-            expect(trigger).toEqualAttribute("aria-expanded", "false");
-            expect(await isFocused(trigger)).toBe(true);
-        });
-        it("closes on click outside", async () => {
-            const page = await createPage(`<duet-tooltip label="Example label">Example content</duet-tooltip>`);
-            const trigger = await getTrigger(page);
-            await openWithClick(page);
-            expect(trigger).toEqualAttribute("aria-expanded", "true");
-            await clickOutside(page);
-            // focus *should not* be moved anywhere on click outside
-            expect(trigger).toEqualAttribute("aria-expanded", "false");
-            expect(await isFocused(trigger)).toBe(false);
-        });
-        it("closes on Escape key", async () => {
-            const page = await createPage(`<duet-tooltip label="Example label">Example content</duet-tooltip>`);
-            const trigger = await getTrigger(page);
-            await openWithClick(page);
-            expect(trigger).toEqualAttribute("aria-expanded", "true");
-            await closeWithEsc(page);
-            // focus *should* be moved to trigger if closing with escape
-            expect(trigger).toEqualAttribute("aria-expanded", "false");
-            expect(await isFocused(trigger)).toBe(true);
-        });
-    });
-    it("supports passing a prefix to accessible label", async () => {
-        const page = await createPage(`<duet-tooltip accessible-label="Tooltip label" accessible-input-label="Input name">Example content</duet-tooltip>`);
-        const trigger = await getTrigger(page);
-        expect(trigger).toEqualText("Input name, Tooltip label");
-    });
-});

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

@@ -1,22 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { formatViolations, options as axeRunOptions, testWithAxe } from "../../utils/axe-core-utils";
-describe("[a11y] duet-tray", () => {
-    it("should render an accessible component", async () => {
-        const result = await testWithAxe(`
-       <duet-tray responsive="false" active>
-        <duet-grid alignment="center">
-          <duet-grid-item margin="none" fill>
-            <duet-paragraph size="small" margin="none">Hinta yhteensä</duet-paragraph>
-          </duet-grid-item>
-          <duet-grid-item margin="none">
-            <span class="duet-font-size-m duet-font-weight-semi-bold">189,90&nbsp;€</span>
-          </duet-grid-item>
-        </duet-grid>
-      </duet-tray>
-      `, axeRunOptions);
-        expect(result).not.toBeNull();
-        expect(formatViolations(result.violations)).toEqual([]);
-    });
-});

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

@@ -1,103 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { createPage } from "../../utils/test-utils";
-const ANIMATION_DELAY = 600;
-describe("duet-tray", () => {
-    it("should render a tray", async () => {
-        const page = await createPage(`<duet-tray></duet-tray>`);
-        const component = await page.find("duet-tray");
-        expect(component).not.toBeNull();
-        expect(component).toHaveClass("hydrated");
-    });
-    it("should provide a property that switches the theme", async () => {
-        const page = await createPage(`<duet-tray theme="turva"></duet-tray>`);
-        const element = await page.find("duet-tray >>> .duet-tray");
-        expect(element).toHaveClass("duet-theme-turva");
-    });
-    it("should provide a property that makes the tray active", async () => {
-        const page = await createPage(`<duet-tray active></duet-tray>`);
-        const element = await page.find("duet-tray >>> .duet-tray");
-        expect(element).toHaveClass("duet-tray-is-active");
-    });
-    it("should provide a property that disables responsive behaviour", async () => {
-        const page = await createPage(`<duet-tray responsive="false"></duet-tray>`);
-        const element = await page.find("duet-tray >>> .duet-tray");
-        expect(element).not.toHaveClass("duet-tray-is-responsive");
-    });
-    it("should not have hidden state enabled by default", async () => {
-        const page = await createPage(`<duet-tray>content</duet-tray>`);
-        const element = await page.find("duet-tray >>> .duet-tray");
-        expect(element).not.toHaveClass("duet-tray-is-hidden");
-    });
-    it("should not be active by default", async () => {
-        const page = await createPage(`<duet-tray>content</duet-tray>`);
-        const element = await page.find("duet-tray >>> .duet-tray");
-        expect(element).not.toHaveClass("duet-tray-is-active");
-    });
-    it("allows for additional content in an expandable region", async () => {
-        const page = await createPage(`
-      <meta charset="utf-8" />
-      <duet-tray response="false" active>
-        <duet-grid alignment="center">
-          <duet-grid-item margin="none" fill>
-            <duet-paragraph size="small" margin="none"> Total price </duet-paragraph>
-          </duet-grid-item>
-          <duet-grid-item margin="none">
-            <span class="duet-font-size-m duet-font-weight-semi-bold">189,90 €</span>
-          </duet-grid-item>
-        </duet-grid>
-        <div slot="additional">
-          <duet-list>
-            <duet-list-item>
-              <span slot="label">Label 1</span>
-              <span slot="value">Value 1</span>
-            </duet-list-item>
-            <duet-list-item>
-              <span slot="label">Label 2</span>
-              <span slot="value">Value 2</span>
-            </duet-list-item>
-            <duet-list-item>
-              <span slot="label">Label 3</span>
-              <span slot="value">Value 3</span>
-            </duet-list-item>
-          </duet-list>
-        </div>
-      </duet-tray>
-      <duet-paragraph class="outside">Something outside to click on</duet-paragraph>
-    `);
-        // ensure everything is correct from an a11y perspective
-        const button = await page.find("duet-tray >>> .duet-tray-button");
-        expect(button).toEqualAttribute("aria-expanded", "false");
-        expect(button).toHaveAttribute("aria-controls");
-        // initially, expandable area should not be visible
-        const expandable = await page.find(`duet-tray >>> #${button.getAttribute("aria-controls")}`);
-        expect(await expandable.isVisible()).toBe(false);
-        // click to open
-        await button.click();
-        await page.waitForChanges();
-        // then expandable area *should* be visible
-        expect(button).toEqualAttribute("aria-expanded", "true");
-        expect(await expandable.isVisible()).toBe(true);
-        // click to close
-        await button.click();
-        await page.waitForChanges();
-        await page.waitForTimeout(ANIMATION_DELAY);
-        // then expandable area *should not* be visible
-        expect(button).toEqualAttribute("aria-expanded", "false");
-        expect(await expandable.isVisible()).toBe(false);
-        // click to open (again)
-        await button.click();
-        await page.waitForChanges();
-        expect(button).toEqualAttribute("aria-expanded", "true");
-        expect(await expandable.isVisible()).toBe(true);
-        // click on something outside of tray
-        const outsideElement = await page.find(".outside");
-        await outsideElement.click();
-        await page.waitForChanges();
-        await page.waitForTimeout(ANIMATION_DELAY);
-        // then expandable area *should not* be visible
-        expect(button).toEqualAttribute("aria-expanded", "false");
-        expect(await expandable.isVisible()).toBe(false);
-    });
-});

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

@@ -1,48 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { createPage } from "../../utils/test-utils";
-import { getBrowsedFiles } from "./mock.helpers";
-const fileList = getBrowsedFiles();
-describe("duet-upload", () => {
-    it("should render an upload component", async () => {
-        const page = await createPage(`<duet-upload></duet-upload>`);
-        const component = await page.find("duet-upload");
-        expect(component).not.toBeNull();
-        expect(component).toHaveClass("hydrated");
-    });
-    it("should render an upload component & populate the file list", async () => {
-        const page = await createPage(`<duet-upload files=${fileList}></duet-upload>`);
-        const component = await page.find("duet-upload");
-        expect(component).not.toBeNull();
-        expect(component).toHaveClass("hydrated");
-    });
-    it("should provide a way to retrieve errorCodes", async () => {
-        const page = await createPage(`<duet-upload files=${fileList}></duet-upload>`);
-        const component = await page.find("duet-upload");
-        expect(component).not.toBeNull();
-        const errorCodes = (await component.getProperty("errorCodes")) || null;
-        expect(errorCodes).not.toBeNull();
-        expect(errorCodes[0].type).toBe("default");
-    });
-    // TODO: gives js not found error
-    it.skip("should provide a way to change errorCodes", async () => {
-        const page = await createPage(`<duet-upload files=${fileList}></duet-upload>`);
-        const component = await page.find("duet-upload");
-        const errorCodes = (await component.getProperty("errorCodes")) || null;
-        expect(errorCodes).not.toBeNull();
-        errorCodes[0] = {
-            type: "default",
-            system_message: "unknown error",
-            message: {
-                fi: "test",
-                sv: "test",
-                en: "test",
-            },
-        };
-        component.setProperty("errorCodes", errorCodes);
-        component.setProperty("files", fileList);
-        await page.waitForChanges();
-        expect(component.getAttribute("files").length).toBe(7);
-    });
-});

package/lib/collection/components/duet-upload/upload-validators.spec.js

@@ -1,41 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { validateTotalSizeIsAboveMax } from "./upload-validators";
-describe("validateTotalSizeIsAboveMax", () => {
-    it("file list size is above max", () => {
-        const fileList = [
-            { valid: true, size: 100 },
-            { valid: true, size: 200 },
-            { valid: true, size: 300 },
-        ];
-        expect(validateTotalSizeIsAboveMax(fileList, 599)).toBe(true);
-    });
-    it("file list size is same as max", () => {
-        const fileList = [
-            { valid: true, size: 100 },
-            { valid: true, size: 200 },
-            { valid: true, size: 300 },
-        ];
-        expect(validateTotalSizeIsAboveMax(fileList, 600)).toBe(true);
-        expect(validateTotalSizeIsAboveMax(fileList, 601)).toBe(false);
-    });
-    it("file list size is lower than max", () => {
-        const fileList = [
-            { valid: true, size: 100 },
-            { valid: true, size: 200 },
-            { valid: true, size: 300 },
-        ];
-        expect(validateTotalSizeIsAboveMax(fileList, 599)).toBe(true);
-        expect(validateTotalSizeIsAboveMax(fileList, 601)).toBe(false);
-    });
-    it("file list size is calculated based on valid files", () => {
-        const fileList = [
-            { valid: true, size: 100 },
-            { valid: false, size: 200 },
-            { valid: true, size: 300 },
-        ];
-        expect(validateTotalSizeIsAboveMax(fileList, 599)).toBe(false);
-        expect(validateTotalSizeIsAboveMax(fileList, 399)).toBe(true);
-    });
-});

package/lib/collection/components/duet-visually-hidden/duet-visually-hidden.a11y.e2e.js

@@ -1,15 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { formatViolations, options as axeRunOptions, testWithAxe } from "../../utils/axe-core-utils";
-describe("[a11y] duet-visually-hidden", () => {
-    it("should render an accessible component", async () => {
-        const result = await testWithAxe(`
-        <duet-visually-hidden>
-          <duet-label>Visually hidden label</duet-label>
-        </duet-visually-hidden>
-      `, axeRunOptions);
-        expect(result).not.toBeNull();
-        expect(formatViolations(result.violations)).toEqual([]);
-    });
-});

package/lib/collection/components/duet-visually-hidden/duet-visually-hidden.e2e.js

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

package/lib/collection/utils/create-id.spec.js

@@ -1,12 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { createID } from "./create-id";
-describe("create-id", () => {
-    it("creates IDs starting with given prefix followed by hexademical numbers and dashes", () => {
-        expect(createID("MyPrefix")).toMatch(/^MyPrefix-[\-0-9a-f]+/);
-    });
-    it("returns unique IDs for each call", () => {
-        expect(createID("MyPrefix")).not.toEqual(createID("MyPrefix"));
-    });
-});

package/lib/collection/utils/js-utils.spec.js

@@ -1,22 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { debounce } from "./js-utils";
-// Tell Jest to mock all timeout functions
-jest.useFakeTimers();
-describe("debounce", () => {
-    let func;
-    let debouncedFunc;
-    beforeEach(() => {
-        func = jest.fn();
-        debouncedFunc = debounce(func, 1000);
-    });
-    it("executes only once", () => {
-        for (let i = 0; i < 100; i++) {
-            debouncedFunc();
-        }
-        // Fast-forward time
-        jest.runAllTimers();
-        expect(func).toBeCalledTimes(1);
-    });
-});

package/lib/collection/utils/language-utils.spec.js

@@ -1,159 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { getCurrentLanguage, getLanguage, getLocale, getLocaleString, isOfTypeLanguage } from "./language-utils";
-import { convertHtmlQuotes } from "./string-utils";
-describe("language-utils", () => {
-    describe("isOfTypeLanguage", () => {
-        it("return true is language if part of default languages", () => {
-            expect(isOfTypeLanguage("fi")).toBe(true);
-            expect(isOfTypeLanguage("en")).toBe(true);
-            expect(isOfTypeLanguage("sv")).toBe(true);
-        });
-        it("return false is language if not part of default languages", () => {
-            expect(isOfTypeLanguage("su")).toBe(false);
-            expect(isOfTypeLanguage("uk")).toBe(false);
-            expect(isOfTypeLanguage("dk")).toBe(false);
-        });
-    });
-    describe("getLocaleString", () => {
-        it("return the correct string", () => {
-            const object = {
-                fi: "finnish",
-                sv: "swedish",
-                en: "english",
-            };
-            expect(getLocaleString(object)).toBe(object["fi"]);
-        });
-        it("return the correct string for wrong overrides", () => {
-            const object = {
-                fi: "finnish",
-                sv: "swedish",
-                en: "english",
-                dk: "denmark",
-            };
-            expect(getLocaleString(object, "dk")).toBe(object["fi"]);
-        });
-        it("works with urlencoded strings (passed from a html element)", () => {
-            const reference = {
-                fi: { error: "Tiedostot, joissa on virheitä", success: "Tiedostot" },
-                sv: { error: "Filer med fel", success: "Filer" },
-                en: { error: "Files with errors", success: "Files" },
-            };
-            const object = '{"fi":{"error":"Tiedostot, joissa on virheitä","success":"Tiedostot"},"sv":{"error":"Filer med fel","success":"Filer"},"en":{"error":"Files with errors","success":"Files"}}';
-            const objectWithQuotes = "{"fi":{"error":"Tiedostot, joissa on virheitä","success":"Tiedostot"},"sv":{"error":"Filer med fel","success":"Filer"},"en":{"error":"Files with errors","success":"Files"}}";
-            const objectWithApos = "{'fi':{'error':'Tiedostot, joissa on virheitä','success':'Tiedostot'},'sv':{'error':'Filer med fel','success':'Filer'},'en':{'error':'Files with errors','success':'Files'}}";
-            const parsedObject = JSON.parse(convertHtmlQuotes(object));
-            const parseObjectWithQuotes = JSON.parse(convertHtmlQuotes(objectWithQuotes));
-            const parseObjectWithApos = JSON.parse(convertHtmlQuotes(objectWithApos));
-            expect(JSON.stringify(parsedObject)).toEqual(JSON.stringify(parseObjectWithQuotes));
-            expect(getLocaleString(parsedObject, "fi")).toEqual(reference["fi"]);
-            expect(getLocaleString(parseObjectWithQuotes)).toEqual(reference["fi"]);
-            expect(getLocaleString(parseObjectWithApos)).toEqual(reference["fi"]);
-        });
-    });
-    describe("getLocale", () => {
-        it("return the correct locale for se", () => {
-            const object = {
-                locale: "sv-SE",
-                money: "€",
-            };
-            expect(getLocale("sv")).toMatchObject(object);
-        });
-        it("return the correct locale for en", () => {
-            const object = {
-                locale: "en-GB",
-                money: "£",
-            };
-            expect(getLocale("en")).toMatchObject(object);
-        });
-        it("return the correct locale for us", () => {
-            const object = {
-                locale: "en-US",
-                money: "$",
-            };
-            expect(getLocale("us")).toMatchObject(object);
-        });
-        it("return the correct locale for fi", () => {
-            const object = {
-                locale: "fi-FI",
-                money: "€",
-            };
-            expect(getLocale("fi")).toMatchObject(object);
-        });
-        it("throws error for unknown languages", () => {
-            expect(() => {
-                //@ts-ignore
-                getLocale("no");
-            }).toThrow();
-        });
-    });
-    describe("getLanguage", () => {
-        it("returns a valid language even when given a unsuitable string", () => {
-            expect(getLanguage("shouldFail")).toBe("fi");
-            expect(getLanguage("us")).toBe("fi");
-            expect(getLanguage("sv")).toBe("sv");
-            expect(getLanguage("en")).toBe("en");
-            expect(getLanguage("fi")).toBe("fi");
-            expect(getLanguage()).toBe("fi");
-        });
-        it("should return correct language when html Lang is NOT present", () => {
-            delete document.documentElement.lang;
-            expect(getCurrentLanguage()).toBe("fi");
-            expect(getLanguage()).toBe("fi");
-        });
-        it("should return correct language when html Lang is present and set to fi", () => {
-            Object.defineProperty(document.documentElement, "lang", { value: "fi", configurable: true });
-            expect(getCurrentLanguage()).toBe("fi");
-            expect(getLanguage()).toBe("fi");
-        });
-        it("should return correct language when html Lang is present and set to sv", () => {
-            Object.defineProperty(document.documentElement, "lang", { value: "sv", configurable: true });
-            expect(getCurrentLanguage()).toBe("sv");
-            expect(getLanguage()).toBe("sv");
-        });
-        it("should return correct language when html Lang is present and set to en", () => {
-            Object.defineProperty(document.documentElement, "lang", { value: "en", configurable: true });
-            expect(getCurrentLanguage()).toBe("en");
-            expect(getLanguage()).toBe("en");
-        });
-        it("should return correct language when html Lang is present and set to dk", () => {
-            Object.defineProperty(document.documentElement, "lang", { value: "dk", configurable: true });
-            expect(getCurrentLanguage()).toBe("dk");
-            expect(getLanguage()).toBe("fi");
-        });
-    });
-    describe("avoid introducing breaking changes where label as String mutates to Object", () => {
-        /**
-         * We want to make sure that no regressions or breaking changes are introduced when converting props such as
-          @Prop() accessibleLabel: string = "Sulje viesti"
-    
-         to
-    
-         @Prop() accessibleLabel: string = getLocaleString({
-                  fi: "default finnish",
-                  sv: "default swedish",
-                  en: "default english",
-                })
-         */
-        const somePresetObject = {
-            fi: "preset finnish",
-            sv: "preset swedish",
-            en: "preset english",
-        };
-        const mockStringAsProperty = (variable) => {
-            return variable ? variable : getLocaleString(somePresetObject);
-        };
-        it("should not fail when label is a string", () => {
-            const testString = "some thing that is a string";
-            const resultString = mockStringAsProperty(testString);
-            const resultStringUndef = mockStringAsProperty(undefined);
-            const resultStringEmpty = mockStringAsProperty();
-            const resultStringNull = mockStringAsProperty(null);
-            expect(resultString).toBe(testString);
-            expect(resultStringEmpty).toBe(somePresetObject.fi);
-            expect(resultStringNull).toBe(somePresetObject.fi);
-            expect(resultStringUndef).toBe(somePresetObject.fi);
-        });
-    });
-});