@duetds/components 8.6.8 → 8.7.0

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

@@ -1,470 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { createPage } from "../../utils/test-utils";
-describe("duet-header", () => {
-    it("should render a header", async () => {
-        const page = await createPage(`<duet-header></duet-header>`);
-        const component = await page.find("duet-header");
-        expect(component).not.toBeNull();
-        expect(component).toHaveClass("hydrated");
-    });
-    it("should shouldn’t render mobile dropdown if no items are passed", async () => {
-        const page = await createPage(`<duet-header language="fi"></duet-header>`);
-        const element = await page.find("duet-header >>> .duet-header-toggle");
-        expect(element).toBeNull();
-    });
-    it("should should render mobile dropdown if items are passed", async () => {
-        const page = await createPage(`<duet-header></duet-header>`);
-        await page.$eval("duet-header", (el) => {
-            el.contact = "demo";
-            el.contactItems = [
-                { label: "Viestit", href: "/viestit/" },
-                { label: "Avaa chat", href: "/chat/" },
-                { label: "Yhteystiedot", href: "/yhteystiedot/" },
-            ];
-        });
-        await page.waitForChanges();
-        const element = await page.find("duet-header >>> .duet-header-toggle");
-        expect(element).not.toBeNull();
-    });
-    it("should shouldn’t render contact menu when prop isn’t passed", async () => {
-        const page = await createPage(`<duet-header language="fi"></duet-header>`);
-        const element = await page.find("duet-header >>> .duet-header-contact");
-        expect(element).toBeNull();
-    });
-    it("shouldn’t render language menu when prop isn’t passed", async () => {
-        const page = await createPage(`<duet-header language="fi"></duet-header>`);
-        const element = await page.find("duet-header >>> .duet-header-language");
-        expect(element).toBeNull();
-    });
-    it("shouldn’t render region when prop isn’t passed", async () => {
-        const page = await createPage(`<duet-header language="fi"></duet-header>`);
-        const element = await page.find("duet-header >>> .duet-header-region");
-        expect(element).toBeNull();
-    });
-    it("shouldn’t render user when prop isn’t passed", async () => {
-        const page = await createPage(`<duet-header language="fi"></duet-header>`);
-        const element = await page.find("duet-header >>> .duet-header-user");
-        expect(element).toBeNull();
-    });
-    it("should provide a property that sets language", async () => {
-        const page = await createPage(`<duet-header language="en"></duet-header>`);
-        const element = await page.find("duet-header >>> duet-logo");
-        expect(element.getAttribute("language")).toEqual("en");
-    });
-    it("should provide a property that sets language items", async () => {
-        const page = await createPage(`<duet-header></duet-header>`);
-        await page.$eval("duet-header", (el) => {
-            el.language = "en";
-            el.languageItems = [
-                { label: "Suomeksi", country: "fi", href: "/?lang=fi" },
-                { label: "På Svenska", country: "sv", href: "/?lang=sv" },
-                { label: "In English", country: "en", href: "/?lang=en" },
-            ];
-        });
-        await page.waitForChanges();
-        const element = await page.find("duet-header >>> .duet-header-language-items a:first-child");
-        expect(element.getAttribute("href")).toEqual("/?lang=fi");
-    });
-    it("should provide a property that switches the theme", async () => {
-        const page = await createPage(`<duet-header theme="turva"></duet-header>`);
-        const element = await page.find("duet-header >>> .duet-header");
-        expect(element).toHaveClass("duet-theme-turva");
-    });
-    it("should provide a property that gives accessible label to nav toggle", async () => {
-        const page = await createPage(`<duet-header></duet-header>`);
-        await page.$eval("duet-header", (el) => {
-            el.accessibleLabel = "demo";
-            el.items = [
-                { label: "Etusivu", href: "/" },
-                { label: "Vakuutukset", href: "/vakuutukset/", id: "test" },
-            ];
-            el.user = { label: "Test", href: "/" };
-        });
-        await page.waitForChanges();
-        const element = await page.find("duet-header >>> .duet-header-toggle duet-visually-hidden");
-        expect(element.textContent).toEqual("demo");
-    });
-    it("should provide a property that changes logo’s href", async () => {
-        const page = await createPage(`<duet-header logo-href="demo"></duet-header>`);
-        const element = await page.find("duet-header >>> duet-logo");
-        expect(element.getAttribute("href")).toEqual("demo");
-    });
-    it("should provide a property that highlights the currently active href", async () => {
-        const page = await createPage(`<duet-header></duet-header>`);
-        await page.$eval("duet-header", (el) => {
-            el.currentHref = "/vakuutukset/";
-            el.items = [
-                { label: "Etusivu", href: "/" },
-                { label: "Vakuutukset", href: "/vakuutukset/", id: "test" },
-            ];
-        });
-        await page.waitForChanges();
-        const element = await page.find("duet-header >>> .duet-header-items #test");
-        expect(element).toHaveClass("active");
-    });
-    it("should provide a property that renders main navigation", async () => {
-        const page = await createPage(`<duet-header></duet-header>`);
-        await page.$eval("duet-header", (el) => {
-            el.items = [
-                { label: "Etusivu", href: "/" },
-                { label: "Vakuutukset", href: "/vakuutukset/" },
-            ];
-        });
-        await page.waitForChanges();
-        const element = await page.find("duet-header >>> .duet-header-items a:first-child");
-        expect(element).not.toBeNull();
-    });
-    it("should provide a property that sets the current region", async () => {
-        const page = await createPage(`
-      <meta charset="UTF-8">
-      <duet-header region="Pääkaupunkiseutu"></duet-header>
-    `);
-        const element = await page.find("duet-header >>> .duet-header-region");
-        expect(element.textContent).toEqual("Pääkaupunkiseutu");
-    });
-    it("should provide a property that renders contact menu label", async () => {
-        const page = await createPage(`<duet-header></duet-header>`);
-        await page.$eval("duet-header", (el) => {
-            el.contact = "demo";
-            el.contactItems = [
-                { label: "Viestit", href: "/viestit/" },
-                { label: "Avaa chat", href: "/chat/" },
-                { label: "Yhteystiedot", href: "/yhteystiedot/" },
-            ];
-        });
-        await page.waitForChanges();
-        const element = await page.find("duet-header >>> .duet-header-contact");
-        expect(element).not.toBeNull();
-    });
-    it("should provide a property that renders contact menu items", async () => {
-        const page = await createPage(`<duet-header></duet-header>`);
-        await page.$eval("duet-header", (el) => {
-            el.contact = "demo";
-            el.contactItems = [
-                { label: "Viestit", href: "/viestit/" },
-                { label: "Avaa chat", href: "/chat/" },
-                { label: "Yhteystiedot", href: "/yhteystiedot/" },
-            ];
-        });
-        await page.waitForChanges();
-        const element = await page.find("duet-header >>> .duet-header-contact-items a:first-child");
-        expect(element.textContent).toEqual("Viestit");
-    });
-    it("should provide a property that renders user menu link", async () => {
-        const page = await createPage(`<duet-header></duet-header>`);
-        await page.$eval("duet-header", (el) => {
-            el.user = { label: "Foo bar", href: "/demo/", id: "test" };
-        });
-        await page.waitForChanges();
-        const element = await page.find("duet-header >>> #test");
-        expect(element.textContent).toEqual("Foo bar");
-    });
-    it("should provide a property that renders session menu link", async () => {
-        const page = await createPage(`<duet-header></duet-header>`);
-        await page.$eval("duet-header", (el) => {
-            el.session = { label: "Log out", href: "/?logout=true", id: "test", type: "logout" };
-        });
-        await page.waitForChanges();
-        const element = await page.find("duet-header >>> #test");
-        expect(element.textContent).toEqual("Log out");
-    });
-    it("should be possible to render login link as well", async () => {
-        const page = await createPage(`<duet-header></duet-header>`);
-        await page.$eval("duet-header", (el) => {
-            el.session = { label: "Log in", href: "/?login", id: "test", type: "login" };
-        });
-        await page.waitForChanges();
-        const element = await page.find("duet-header >>> #test");
-        expect(element.textContent).toEqual("Log in");
-    });
-    it("should provide a property that renders back link", async () => {
-        const page = await createPage(`<duet-header></duet-header>`);
-        await page.$eval("duet-header", (el) => {
-            el.back = { label: "Takaisin", href: "/", id: "test" };
-        });
-        await page.waitForChanges();
-        const element = await page.find("duet-header >>> #test");
-        expect(element.textContent).toEqual("Takaisin");
-    });
-    it("shouldn’t render skip to content link if no ID is passed", async () => {
-        const page = await createPage(`<duet-header language="fi"></duet-header>`);
-        const element = await page.find("duet-header >>> .duet-header-skip");
-        expect(element).toBeNull();
-    });
-    it("should render skip to content link", async () => {
-        const page = await createPage(`<duet-header skip-to-id="#content"></duet-header>`);
-        const element = await page.find("duet-header >>> .duet-header-skip");
-        expect(element.textContent).toEqual("Siirry pääsisältöön");
-    });
-    it("should automatically refresh itself when content changes", async () => {
-        const page = await createPage(`<duet-header></duet-header>`);
-        await page.$eval("duet-header", (el) => {
-            el.items = [
-                { label: "Etusivu", href: "/" },
-                { label: "Vakuutukset", href: "#" },
-                { label: "Vahinkoasiat", href: "#" },
-                { label: "Säästöt ja sijoitukset", href: "#" },
-                { label: "Laskut", href: "#", badge: true },
-                { label: "Viestit", href: "#" },
-            ];
-        });
-        const element = await page.find("duet-header");
-        // should be updated when setting the *attribute*
-        element.setAttribute("items", '[{ "label": "test", "href": "#" }]');
-        await page.waitForChanges();
-        const test = await page.find("duet-header >>> .duet-header-items a:first-child");
-        expect(test).toEqualText("test");
-        // should also be updated when setting the label *property*
-        element.setProperty("items", [{ label: "test 2", href: "#" }]);
-        await page.waitForChanges();
-        expect(test).toEqualText("test 2");
-    });
-    it("should not error when unmounting", async () => {
-        const back = { label: "back", href: "#" };
-        const page = await createPage(`<duet-header back='${JSON.stringify(back)}'></duet-header>`);
-        let error = null;
-        page.on("console", err => {
-            if (err.type() === "error") {
-                error = err.text();
-            }
-        });
-        await page.$eval("duet-header", header => header.remove());
-        expect(error).toBeNull();
-    });
-    describe("events", () => {
-        let page;
-        let header;
-        const props = {
-            items: [
-                { id: "item-1", label: "Etusivu", href: "/" },
-                { id: "item-2", label: "Vakuutukset", href: "#" },
-                { id: "item-3", label: "Vahinkoasiat", href: "#" },
-                { id: "item-4", label: "Säästöt ja sijoitukset", href: "#" },
-                { id: "item-5", label: "Laskut", href: "#", badge: true },
-                { id: "item-6", label: "Viestit", href: "#" },
-            ],
-            contactItems: [
-                { id: "contact-1", label: "Lähetä viesti", href: "/viestit/laheta" },
-                { id: "contact-2", label: "Avaa chat", href: "/chat/" },
-                { id: "contact-3", label: "Yhteystiedot", href: "/yhteystiedot/" },
-            ],
-            languageItems: [
-                { id: "language-1", label: "Suomeksi", country: "fi", href: "/?lang=fi" },
-                { id: "language-2", label: "På Svenska", country: "sv", href: "/?lang=sv" },
-                { id: "language-3", label: "In English", country: "en", href: "/?lang=en" },
-            ],
-            session: {
-                label: "Kirjaudu ulos",
-                href: "/?logout",
-                type: "logout",
-                id: "session",
-            },
-            user: {
-                label: "Elina",
-                href: "/?userId=elina",
-                id: "user",
-            },
-            logoHref: "/logo",
-            skipToId: "#content",
-        };
-        async function openMenu(page) {
-            const menuToggle = await page.find("duet-header >>> .duet-header-toggle");
-            await menuToggle.click();
-            await page.waitForChanges();
-        }
-        beforeEach(async () => {
-            page = await createPage(`
-        <meta charset="utf-8" />
-        <duet-header
-          language="fi"
-          region="Pääkaupunkiseutu"
-          contact="Ota yhteyttä"
-          current-href="/"
-        >
-        </duet-header>
-      `);
-            header = await page.find("duet-header");
-            await page.$eval("duet-header", (header, props) => Object.assign(header, props), props);
-            await page.waitForChanges();
-        });
-        // TODO: broken test as the browser tries to enter the logo url
-        it.skip("raises events when logo is clicked", async () => {
-            const logo = await page.find("duet-header >>> duet-logo");
-            const changeSpy = await header.spyOnEvent("duetChange");
-            const logoSpy = await header.spyOnEvent("duetLogoClick");
-            await logo.click();
-            const expected = {
-                component: "duet-header",
-                data: { href: props.logoHref, label: "logo" },
-                originalEvent: expect.anything(),
-            };
-            expect(changeSpy.firstEvent.detail).toEqual(expected);
-            expect(logoSpy.firstEvent.detail).toEqual(expected);
-        });
-        it("raises events when a menu item is clicked", async () => {
-            const menuItem = await page.find("duet-header >>> #item-1");
-            const changeSpy = await header.spyOnEvent("duetChange");
-            const itemSpy = await header.spyOnEvent("duetItemClick");
-            await openMenu(page);
-            await page.waitForChanges();
-            await menuItem.click();
-            const expected = {
-                component: "duet-header",
-                data: props.items[0],
-                originalEvent: expect.anything(),
-            };
-            expect(changeSpy.firstEvent.detail).toEqual(expected);
-            expect(itemSpy.firstEvent.detail).toEqual(expected);
-        });
-        it("raises events when a language is selected", async () => {
-            const languageSelect = await page.find("duet-header >>> #duet-header-language-button");
-            const language = await page.find("duet-header >>> #language-3");
-            const changeSpy = await header.spyOnEvent("duetChange");
-            const languageSpy = await header.spyOnEvent("duetLanguageSelect");
-            await openMenu(page);
-            await languageSelect.click();
-            await page.waitForChanges();
-            await language.click();
-            const expected = {
-                component: "duet-header",
-                data: props.languageItems[2],
-                originalEvent: expect.anything(),
-            };
-            expect(changeSpy.firstEvent.detail).toEqual(expected);
-            expect(languageSpy.firstEvent.detail).toEqual(expected);
-        });
-        // TODO: broken test as the browser tries to enter the clicked page
-        it.skip("raises events when contact item is clicked", async () => {
-            const contactDropdown = await page.find("duet-header >>> #duet-header-contact-button");
-            const contact = await page.find("duet-header >>> #contact-3");
-            const changeSpy = await header.spyOnEvent("duetChange");
-            const contactSpy = await header.spyOnEvent("duetContactClick");
-            await openMenu(page);
-            await contactDropdown.click();
-            await page.waitForChanges();
-            await contact.click();
-            const expected = {
-                component: "duet-header",
-                data: props.contactItems[2],
-                originalEvent: expect.anything(),
-            };
-            expect(changeSpy.firstEvent.detail).toEqual(expected);
-            expect(contactSpy.firstEvent.detail).toEqual(expected);
-        });
-        it("raises events when session is clicked", async () => {
-            const session = await page.find("duet-header >>> #session");
-            const changeSpy = await header.spyOnEvent("duetChange");
-            const sessionSpy = await header.spyOnEvent("duetSessionClick");
-            await openMenu(page);
-            await page.waitForChanges();
-            await session.click();
-            const expected = {
-                component: "duet-header",
-                data: props.session,
-                originalEvent: expect.anything(),
-            };
-            expect(changeSpy.firstEvent.detail).toEqual(expected);
-            expect(sessionSpy.firstEvent.detail).toEqual(expected);
-        });
-        it("raises events when user is clicked", async () => {
-            const user = await page.find("duet-header >>> #user");
-            const changeSpy = await header.spyOnEvent("duetChange");
-            const userSpy = await header.spyOnEvent("duetUserClick");
-            await openMenu(page);
-            await page.waitForChanges();
-            await user.click();
-            const expected = {
-                component: "duet-header",
-                data: props.user,
-                originalEvent: expect.anything(),
-            };
-            expect(changeSpy.firstEvent.detail).toEqual(expected);
-            expect(userSpy.firstEvent.detail).toEqual(expected);
-        });
-        it("raises events when skip link is clicked", async () => {
-            await page.keyboard.press("Tab");
-            await page.waitForChanges();
-            const changeSpy = await header.spyOnEvent("duetChange");
-            const skipSpy = await header.spyOnEvent("duetSkipClick");
-            await page.keyboard.press("Enter");
-            const expected = {
-                component: "duet-header",
-                data: { href: props.skipToId, label: expect.any(String) },
-                originalEvent: expect.anything(),
-            };
-            expect(changeSpy.firstEvent.detail).toEqual(expected);
-            expect(skipSpy.firstEvent.detail).toEqual(expected);
-        });
-        it("raises events when back button is clicked", async () => {
-            const backData = { id: "back-btn", href: "#", label: "back" };
-            await page.$eval("duet-header", (header, back) => {
-                header.back = back;
-            }, backData);
-            await page.waitForChanges();
-            const back = await page.find(`duet-header >>> #${backData.id}`);
-            const changeSpy = await header.spyOnEvent("duetChange");
-            const backSpy = await header.spyOnEvent("duetBackClick");
-            await back.click();
-            const expected = {
-                component: "duet-header",
-                data: backData,
-                originalEvent: expect.anything(),
-            };
-            expect(changeSpy.firstEvent.detail).toEqual(expected);
-            expect(backSpy.firstEvent.detail).toEqual(expected);
-        });
-    });
-    describe("analytics", () => {
-        let page;
-        const openMenu = async () => {
-            const menuToggle = await page.find("duet-header >>> .duet-header-toggle");
-            await menuToggle.click();
-        };
-        beforeEach(async () => {
-            page = await createPage(`
-        <duet-header
-          items='[
-            { "label": "item 1", "id": "item-1", "analyticsId": "item analytics" } ,
-            { "label": "item 2", "id": "item-2" }
-          ]'
-        ></duet-header>
-      `);
-        });
-        it("allows analytics to be set for header items", async () => {
-            await openMenu();
-            const analyticsSpy = await page.spyOnEvent("duetAnalytics");
-            const item1 = await page.find("duet-header >>> #item-1");
-            await item1.click();
-            expect(analyticsSpy).toHaveReceivedEventDetail({
-                analyticsId: "item analytics",
-                component: "duet-header",
-            });
-        });
-        it("does nothing when items without analytics are clicked", async () => {
-            await openMenu();
-            const analyticsSpy = await page.spyOnEvent("duetAnalytics");
-            const item2 = await page.find("duet-header >>> #item-2");
-            await item2.click();
-            expect(analyticsSpy).toHaveReceivedEventTimes(0);
-        });
-        it("allows analytics to be set for user item", async () => {
-            await page.$eval("duet-header", (header) => {
-                header.user = {
-                    label: "Nick",
-                    href: "#",
-                    analyticsId: "user analytics",
-                };
-            });
-            await openMenu();
-            const analyticsSpy = await page.spyOnEvent("duetAnalytics");
-            const userButton = await page.find("duet-header >>> .duet-header-user");
-            await userButton.click();
-            expect(analyticsSpy).toHaveReceivedEventDetail({
-                analyticsId: "user analytics",
-                component: "duet-header",
-            });
-        });
-    });
-});

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

@@ -1,13 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { formatViolations, options as axeRunOptions, testWithAxe } from "../../utils/axe-core-utils";
-describe("[a11y] duet-heading", () => {
-    it("should render an accessible component", async () => {
-        const result = await testWithAxe(`
-        <duet-heading level="h1" visual-level="h0">Quick brown fox jumps</duet-heading>
-      `, axeRunOptions);
-        expect(result).not.toBeNull();
-        expect(formatViolations(result.violations)).toEqual([]);
-    });
-});

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

@@ -1,27 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { createPage } from "../../utils/test-utils";
-describe("duet-heading", () => {
-    it("should render a heading", async () => {
-        const page = await createPage(`<duet-heading></duet-heading>`);
-        const component = await page.find("duet-heading");
-        expect(component).not.toBeNull();
-        expect(component).toHaveClass("hydrated");
-    });
-    it("should provide a property that switches the theme", async () => {
-        const page = await createPage(`<duet-heading theme="turva"></duet-heading>`);
-        const element = await page.find("duet-heading >>> .duet-heading");
-        expect(element).toHaveClass("duet-theme-turva");
-    });
-    it("should provide a property that removes the margin of the component", async () => {
-        const page = await createPage(`<duet-heading margin="none"></duet-heading>`);
-        const element = await page.find("duet-heading >>> .duet-m-0");
-        expect(element).not.toBeNull();
-    });
-    it("should provide a property that renders different heading levels", async () => {
-        const page = await createPage(`<duet-heading level="h4"></duet-heading>`);
-        const element = await page.find("duet-heading >>> h4");
-        expect(element).not.toBeNull();
-    });
-});

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

@@ -1,70 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { formatViolations, options as axeRunOptions, testWithAxe } from "../../utils/axe-core-utils";
-describe("[a11y] duet-hero", () => {
-    it("should render an accessible component", async () => {
-        const result = await testWithAxe(`
-        <duet-hero
-          description="Tällä sivulla näet vakuutuksiisi liittyvät laskut. Voit myös
-            vaihtaa e-laskutukseen klikkaamalla&nbsp;alta."
-          image="https://cdn.duetds.com/api/assets/illustrations/placeholder-light.svg"
-          button-label="Vaihda e-laskutukseen"
-          button-url="#"
-          >
-          <span slot="heading">Laskut</span>
-        </duet-hero>
-
-        <script>
-          // Select the above hero area component
-          var hero = document.querySelector("duet-hero")
-
-          // Set meta data that is passed when the CTA button is clicked
-          hero.buttonData = {
-            type: "action",
-            message: "Hello World!",
-          }
-        </script>
-      `, axeRunOptions);
-        expect(result).not.toBeNull();
-        expect(formatViolations(result.violations)).toEqual([]);
-    });
-    it("should render an accessible component in campaign variation", async () => {
-        const result = await testWithAxe(`
-        <duet-hero
-          description="Lorem ipsum dolor sit amet consectetur. Dignissim et arcu sed dolor a rhoncus."
-          image="https://www.duetds.com/assets/img/example-bg1.jpg"
-            variation="campaign"
-        >
-          <span slot="heading">Terveys ensin</span>
-          <span slot="subheading">Varmista oma ja perheesi toimeentulo vahingon varalta</span>
-          <duet-button variation="primary" margin="none">Tutustu terveysvakuutuksiin</duet-button>
-        </duet-hero>
-      `, axeRunOptions);
-        expect(result).not.toBeNull();
-        expect(formatViolations(result.violations)).toEqual([]);
-    });
-    it("should render an accessible component in content variation", async () => {
-        const result = await testWithAxe(`
-        <duet-hero
-          description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mauris integer non sed viverra. Ultricies in ut neque id proin justo interdum sed. Tortor id suspendisse quis a aliquet tempus parturient cursus pretium. At nisl volutpat diam habitant elementum."
-          image="https://www.duetds.com/assets/img/example-brand1.png"
-            variation="content"
-          left-align
-          layout="narrow"
-        >
-          <span slot="pre-heading" style="display: inline-flex; align-items: center; justify-content: center;">
-            Työelämä
-            <span
-              style="display: inline-block; width: 3px; height: 3px; border-radius: 100%; background: #0077B3; margin: 0 0.25rem;"
-            ></span>
-            21.3.2023
-          </span>
-          <span slot="heading">Lorem ipsum dolor sit</span>
-          <duet-button variation="plain"  icon="action-arrow-right" icon-right margin="none">Link to service</duet-button>
-        </duet-hero>
-      `, axeRunOptions);
-        expect(result).not.toBeNull();
-        expect(formatViolations(result.violations)).toEqual([]);
-    });
-});