@duetds/components 8.6.9 → 8.7.0

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

@@ -1,108 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { createPage } from "../../utils/test-utils";
-describe("duet-tab-group", () => {
-    it("should render a tab", async () => {
-        const page = await createPage(`
-      <duet-tab-group>
-        <duet-tab label="test"></duet-tab>
-      </duet-tab-group>
-    `);
-        const component = await page.find("duet-tab-group");
-        expect(component).not.toBeNull();
-        expect(component).toHaveClass("hydrated");
-    });
-    it("should provide a property that switches the theme", async () => {
-        const page = await createPage(`
-      <duet-tab-group theme="turva">
-        <duet-tab label="test"></duet-tab>
-      </duet-tab-group>
-    `);
-        const element = await page.find("duet-tab-group >>> .duet-tab-group");
-        expect(element).toHaveClass("duet-theme-turva");
-    });
-    it("should provide a property that removes the margin of the component", async () => {
-        const page = await createPage(`
-      <duet-tab-group margin="none">
-        <duet-tab label="test"></duet-tab>
-        <duet-tab label="test2"></duet-tab>
-      </duet-tab-group>
-    `);
-        const element = await page.find("duet-tab-group >>> .duet-m-0");
-        expect(element).not.toBeNull();
-    });
-    it("should provide a property that removes the padding of the component", async () => {
-        const page = await createPage(`
-      <duet-tab-group padding="none">
-        <duet-tab label="test"></duet-tab>
-        <duet-tab label="test2"></duet-tab>
-      </duet-tab-group>
-    `);
-        const element = await page.find("duet-tab-group >>> .duet-p-0");
-        expect(element).not.toBeNull();
-    });
-    it("creates unique IDs for for all buttons and panels", async () => {
-        const page = await createPage(`
-      <duet-tab-group>
-        <duet-tab label="Outer 1" selected>Outer tab 1</duet-tab>
-        <duet-tab label="Outer 2">
-          Outer tab 2
-          <duet-tab-group>
-            <duet-tab label="Inner 1" selected>Inner tab 1</duet-tab>
-            <duet-tab label="Inner 2">Inner tab 2</duet-tab>
-            <duet-tab label="Inner 3">Inner tab 3</duet-tab>
-          </duet-tab-group>
-        </duet-tab>
-        <duet-tab label="Outer 3">Outer tab 3</duet-tab>
-      </duet-tab-group>
-    `);
-        const buttons = await page.findAll(`duet-tab-group >>> [role="tablist"] button`);
-        const panels = await page.findAll(`duet-tab-group >>> duet-tab`);
-        for (const button of buttons) {
-            const matches = await page.findAll(`duet-tab-group >>> #${button.id}`);
-            expect(matches.length).toBe(1);
-        }
-        for (const panel of panels) {
-            const matches = await page.findAll(`duet-tab-group >>> #${panel.id}`);
-            expect(matches.length).toBe(1);
-        }
-    });
-    it("should propagate accessible-description to internal button element", async () => {
-        const ariaString = "accessible-description-test";
-        const page = await createPage(`
-      <duet-tab-group variation="plain">
-        <duet-tab label="test2" class="test" accessible-description="${ariaString}">Outer tab 1 content</duet-tab>
-      </duet-tab-group>
-    `);
-        await page.waitForChanges();
-        const testString = await page.evaluate(() => {
-            const element = document
-                .querySelector("duet-tab-group")
-                .shadowRoot.querySelector("button")
-                .getAttribute("aria-description");
-            return element;
-        });
-        expect(testString).toEqualText(ariaString);
-    });
-    describe("events", () => {
-        it("should raise events on tab change", async () => {
-            const page = await createPage(`
-        <duet-tab-group padding="none">
-          <duet-tab label="test" class="test1"></duet-tab>
-          <duet-tab label="test2"></duet-tab>
-        </duet-tab-group>
-      `);
-            const tabGroup = await page.find("duet-tab-group");
-            const tabs = await page.findAll("duet-tab-group >>> button");
-            const tab = tabs.find(t => t.innerText === "test2");
-            const changeSpy = await tabGroup.spyOnEvent("duetChange");
-            const tabChangeSpy = await tabGroup.spyOnEvent("duetTabChange");
-            await tab.click();
-            await page.waitForChanges();
-            const expectedEvent = { value: 1, component: "duet-tab-group" };
-            expect(changeSpy).toHaveReceivedEventDetail(expectedEvent);
-            expect(tabChangeSpy).toHaveReceivedEventDetail(expectedEvent);
-        });
-    });
-});

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

@@ -1,35 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { formatViolations, options as axeRunOptions, testWithAxe } from "../../utils/axe-core-utils";
-describe("[a11y] duet-table", () => {
-    it("should render an accessible component", async () => {
-        const result = await testWithAxe(`
-        <duet-table>
-          <table>
-            <thead>
-              <tr>
-                <th>Eläkeaika, v</th>
-                <th>Tavoite-eläke/kk</th>
-                <th>Eläkearvio/kk</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>55–65</td>
-                <td>1&nbsp;660,24&nbsp;€</td>
-                <td>1&nbsp;433,95&nbsp;€</td>
-              </tr>
-              <tr>
-                <td>65–75</td>
-                <td>553,42&nbsp;€</td>
-                <td>477,99&nbsp;€</td>
-              </tr>
-            </tbody>
-          </table>
-        </duet-table>
-      `, axeRunOptions);
-        expect(result).not.toBeNull();
-        expect(formatViolations(result.violations)).toEqual([]);
-    });
-});

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

@@ -1,95 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { createPage } from "../../utils/test-utils";
-describe("duet-table", () => {
-    let page;
-    let table;
-    const HEADING_1 = "Valtuutettu";
-    const HEADING_2 = "Salkun nimi";
-    beforeEach(async () => {
-        page = await createPage(`
-      <meta charset="utf-8" />
-      <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/@duetds/fonts@1.3.12/lib/localtapiola.css' />
-      <duet-table breakpoint="large">
-        <table>
-          <thead>
-            <tr>
-              <th>${HEADING_1}</th>
-              <th>${HEADING_2}</th>
-              <th></th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>
-                Hermanni Mikkola<br />
-                10.10.1999
-              </td>
-              <td class="foo">
-                Antin salkku<br />
-                <duet-link url="/">Siirry salkkuun ›</duet-link>
-              </td>
-              <td>
-                <duet-button margin="none" padding="none" icon="action-delete" variation="plain">
-                  Delete
-                </duet-button>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                Jukka-Pekka Routakorpi-Salomaa<br />
-                10.11.1988
-              </td>
-              <td>
-                Justiinan ja Jukka-Pekan yhteinen salkku 1234<br />
-                <duet-link url="/">Siirry salkkuun ›</duet-link>
-              </td>
-              <td>
-                <duet-button margin="none" padding="none" icon="action-delete" variation="plain">
-                  Delete
-                </duet-button>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                Veera Mikkola<br />
-                01.01.2001
-              </td>
-              <td>
-                Vapun rahastot<br />
-                <duet-link url="/">Siirry salkkuun ›</duet-link>
-              </td>
-              <td>
-                <duet-button margin="none" padding="none" icon="action-delete" variation="plain">
-                  Delete
-                </duet-button>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </duet-table>
-    `);
-        table = await page.find("duet-table");
-    });
-    it("renders", async () => {
-        expect(table).toHaveClass("hydrated");
-    });
-    it("adds column heading span to each cell", async () => {
-        let cells = await table.findAll("tbody td:nth-child(1)");
-        cells.forEach(async (td) => {
-            const span = await td.find("span.duet-table-cell-heading");
-            expect(span.textContent).toEqual(HEADING_1);
-        });
-        cells = await table.findAll("tbody td:nth-child(2)");
-        cells.forEach(async (td) => {
-            const span = await td.find("span.duet-table-cell-heading");
-            expect(span.textContent).toEqual(HEADING_2);
-        });
-        cells = await table.findAll("tbody td:nth-child(3)");
-        cells.forEach(async (td) => {
-            const span = await td.find("span.duet-table-cell-heading");
-            expect(span).toBeNull();
-        });
-    });
-});

package/lib/collection/components/duet-textarea/duet-textarea.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-textarea", () => {
-    it("should render an accessible component", async () => {
-        const result = await testWithAxe(`
-       <duet-textarea expand label="Textarea label" placeholder="Placeholder text"> </duet-textarea>
-      `, axeRunOptions);
-        expect(result).not.toBeNull();
-        expect(formatViolations(result.violations)).toEqual([]);
-    });
-    it("should render an accessible component with input characters counter", async () => {
-        const result = await testWithAxe(`
-          <duet-textarea
-            expand
-            label="Textarea label"
-            placeholder="Placeholder text"
-            maxlength="100"
-            counter-label="Merkkejä jäljellä"
-            counter
-          >
-          </duet-textarea>
-          `, axeRunOptions);
-        expect(result).not.toBeNull();
-        expect(formatViolations(result.violations)).toEqual([]);
-    });
-});

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

@@ -1,199 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { createPage } from "../../utils/test-utils";
-describe("duet-textarea", () => {
-    it("should render a textarea", async () => {
-        const page = await createPage(`<duet-textarea></duet-textarea>`);
-        const component = await page.find("duet-textarea");
-        expect(component).not.toBeNull();
-        expect(component).toHaveClass("hydrated");
-    });
-    it("should provide a property that renders label", async () => {
-        const page = await createPage(`<duet-textarea label="test"></duet-textarea>`);
-        const element = await page.find("duet-textarea duet-label label");
-        expect(element.innerText).toEqual("test");
-    });
-    it("should provide a property that removes the margin of the component", async () => {
-        const page = await createPage(`<duet-textarea margin="none"></duet-textarea>`);
-        const element = await page.find(".duet-m-0");
-        expect(element).not.toBeNull();
-    });
-    it("should provide a property that renders aria-controls", async () => {
-        const page = await createPage(`<duet-textarea accessible-controls="test"></duet-textarea>`);
-        const element = await page.find("duet-textarea .duet-textarea");
-        expect(element.getAttribute("aria-controls")).toEqual("test");
-    });
-    it("should provide a property that renders aria-activedescendant", async () => {
-        const page = await createPage(`<duet-textarea accessible-active-descendant="test"></duet-textarea>`);
-        const element = await page.find("duet-textarea .duet-textarea");
-        expect(element.getAttribute("aria-activedescendant")).not.toBeNull();
-    });
-    it("should provide a property that renders aria-autocomplete", async () => {
-        const page = await createPage(`<duet-textarea accessible-autocomplete="test"></duet-textarea>`);
-        const element = await page.find("duet-textarea .duet-textarea");
-        expect(element.getAttribute("aria-autocomplete")).not.toBeNull();
-    });
-    it("should provide a property that renders aria-owns", async () => {
-        const page = await createPage(`<duet-textarea accessible-owns="test"></duet-textarea>`);
-        const element = await page.find("duet-textarea .duet-textarea");
-        expect(element.getAttribute("aria-owns")).not.toBeNull();
-    });
-    it("should provide a property that switches the theme", async () => {
-        const page = await createPage(`<duet-textarea theme="turva"></duet-textarea>`);
-        const element = await page.find("duet-textarea .duet-textarea-container");
-        expect(element).toHaveClass("duet-theme-turva");
-    });
-    it("should provide a property that expands the textarea to fill 100% width", async () => {
-        const page = await createPage(`<duet-textarea expand></duet-textarea>`);
-        const element = await page.find("duet-textarea");
-        expect(element).toHaveClass("duet-expand");
-    });
-    it("should provide a property that makes the textarea disabled", async () => {
-        const page = await createPage(`<duet-textarea disabled></duet-textarea>`);
-        const element = await page.find("duet-textarea .duet-textarea");
-        expect(element.getAttribute("disabled")).not.toBeNull();
-    });
-    it("should provide a property that adds an ID for the textarea", async () => {
-        const page = await createPage(`<duet-textarea identifier="test"></duet-textarea>`);
-        const element = await page.find("duet-textarea .duet-textarea");
-        expect(element.getAttribute("id")).toEqual("test");
-    });
-    it("should provide a property that makes textarea required", async () => {
-        const page = await createPage(`<duet-textarea required></duet-textarea>`);
-        const element = await page.find("duet-textarea .duet-textarea");
-        expect(element.getAttribute("required")).not.toBeNull();
-    });
-    it("should provide a property that makes the label hidden", async () => {
-        const page = await createPage(`<duet-textarea label-hidden></duet-textarea>`);
-        const element = await page.find("duet-textarea .duet-textarea-container");
-        expect(element).toHaveClass("duet-label-hidden");
-    });
-    it("should provide a property that adds name for the textarea", async () => {
-        const page = await createPage(`<duet-textarea name="test"></duet-textarea>`);
-        const element = await page.find("duet-textarea .duet-textarea");
-        expect(element.getAttribute("name")).not.toBeNull();
-    });
-    it("should provide a property that adds placeholder for the textarea", async () => {
-        const page = await createPage(`<duet-textarea placeholder="test"></duet-textarea>`);
-        const element = await page.find("duet-textarea .duet-textarea");
-        expect(element.getAttribute("placeholder")).not.toBeNull();
-    });
-    it("should provide a property that adds role for the textarea", async () => {
-        const page = await createPage(`<duet-textarea role="test"></duet-textarea>`);
-        const element = await page.find("duet-textarea .duet-textarea");
-        expect(element.getAttribute("role")).not.toBeNull();
-    });
-    it("should provide a property that adds an error", async () => {
-        const page = await createPage(`<duet-textarea error="test"></duet-textarea>`);
-        const element = await page.find("duet-textarea .duet-textarea-help");
-        expect(element).not.toBeNull();
-    });
-    it("should provide a property that sets tooltip", async () => {
-        const page = await createPage(`<duet-textarea tooltip="test"></duet-textarea>`);
-        const element = await page.find("duet-textarea duet-tooltip");
-        expect(element).not.toBeNull();
-    });
-    it("should associate the tooltip with the label", async () => {
-        const page = await createPage(`<duet-textarea label="test label" tooltip="test"></duet-textarea>`);
-        const label = await page.find("label");
-        const tooltip = await page.find("duet-tooltip");
-        const tooltipInputLabel = await tooltip.getProperty("accessibleInputLabel");
-        expect(tooltipInputLabel).not.toBeNull();
-        expect(label.textContent).toBe(tooltipInputLabel);
-    });
-    it("should not render tooltip if the property isn’t used", async () => {
-        const page = await createPage(`<duet-textarea id="test"></duet-textarea>`);
-        const element = await page.find("duet-textarea duet-tooltip");
-        expect(element).toBeNull();
-    });
-    it("should provide a property that renders a character counter", async () => {
-        const page = await createPage("<duet-textarea maxlength='10' counter counter-label='characters remaining'></duet-textarea>");
-        const textarea = await page.find("duet-textarea");
-        const caption = await page.find(".duet-character-count duet-caption");
-        const totalCharacters = await caption.find(`[aria-hidden="true"]`);
-        const remainingCharacter = await caption.find(".duet-textarea-counter-remaining");
-        expect(totalCharacters.innerText).toEqual("0/10");
-        expect(remainingCharacter.innerText).toEqual("");
-        textarea.setProperty("value", "test");
-        await page.waitForChanges();
-        expect(totalCharacters.innerText).toEqual("4/10");
-        expect(remainingCharacter.innerText).toEqual("");
-        textarea.setProperty("value", "test test");
-        await page.waitForChanges();
-        expect(totalCharacters.innerText).toEqual("9/10");
-        expect(remainingCharacter.innerText).toEqual("1 characters remaining");
-    });
-    it("ensures remaining characters are always >= 0", async () => {
-        const page = await createPage("<duet-textarea maxlength='10' counter counter-label='characters remaining'></duet-textarea>");
-        const textarea = await page.find("duet-textarea");
-        const caption = await page.find(".duet-character-count duet-caption");
-        const totalCharacters = await caption.find(`[aria-hidden="true"]`);
-        const remainingCharacter = await caption.find(".duet-textarea-counter-remaining");
-        expect(totalCharacters.innerText).toEqual("0/10");
-        expect(remainingCharacter.innerText).toEqual("");
-        textarea.setProperty("value", "test test test"); // greater than maxlength
-        await page.waitForChanges();
-        expect(totalCharacters.innerText).toEqual("14/10");
-        expect(remainingCharacter.innerText).toEqual("0 characters remaining");
-    });
-    it("should emit a focus event", async () => {
-        const page = await createPage("<duet-textarea></duet-textarea>");
-        const textarea = await page.find("duet-textarea");
-        const spy = await textarea.spyOnEvent("duetFocus");
-        await textarea.callMethod("setFocus");
-        expect(spy).toHaveReceivedEvent();
-    });
-    it("should emit a blur event", async () => {
-        const page = await createPage("<duet-textarea></duet-textarea>");
-        const textarea = await page.find("duet-textarea");
-        const spy = await textarea.spyOnEvent("duetBlur");
-        await textarea.callMethod("setFocus");
-        await page.keyboard.press("Tab");
-        expect(spy).toHaveReceivedEvent();
-    });
-    it("should emit an input event", async () => {
-        const page = await createPage("<duet-textarea></duet-textarea>");
-        const textarea = await page.find("duet-textarea");
-        const spy = await textarea.spyOnEvent("duetInput");
-        await textarea.callMethod("setFocus");
-        await page.keyboard.type("A");
-        await page.waitForChanges();
-        expect(spy).toHaveReceivedEvent();
-    });
-    it("should emit a change event", async () => {
-        const page = await createPage("<duet-textarea></duet-textarea>");
-        const textarea = await page.find("duet-textarea");
-        const spy = await textarea.spyOnEvent("duetChange");
-        await textarea.callMethod("setFocus");
-        await page.keyboard.type("A");
-        await page.waitForChanges();
-        // should not raise change event until input gets blurred
-        expect(spy).not.toHaveReceivedEvent();
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        expect(spy).toHaveReceivedEvent();
-    });
-    it("allows characters to be disallowed", async () => {
-        const page = await createPage(`<duet-textarea label="numbers only" disallow-pattern="[^0-9]"></duet-textarea>`);
-        const element = await page.find("duet-textarea");
-        const input = await page.find("duet-textarea .duet-textarea");
-        // tab to input
-        await page.keyboard.press("Tab");
-        // type some _allowed_ chars
-        await page.keyboard.type("123", { delay: 50 });
-        // move cursor so we can test maintaining position
-        await page.keyboard.press("ArrowLeft");
-        // store cursor position
-        const cursorBefore = await input.getProperty("selectionStart");
-        expect(cursorBefore).toBe(2);
-        // attempt to enter _disallowed_ character
-        await page.keyboard.press("a");
-        const cursorAfter = await input.getProperty("selectionStart");
-        const value = await element.getProperty("value");
-        // we should see cursor hasn't changed
-        expect(cursorAfter).toBe(cursorBefore);
-        // and value contains no disallowed chars
-        expect(value).toBe("123");
-    });
-});

package/lib/collection/components/duet-toggle/duet-toggle.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-toggle", () => {
-    it("should render an accessible component", async () => {
-        const result = await testWithAxe(`
-       <duet-toggle label="Checked toggle" value="Some value" checked></duet-toggle>
-      `, axeRunOptions);
-        expect(result).not.toBeNull();
-        expect(formatViolations(result.violations)).toEqual([]);
-    });
-});

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

@@ -1,73 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { createPage } from "../../utils/test-utils";
-describe("duet-toggle", () => {
-    it("should render a toggle", async () => {
-        const page = await createPage(`<duet-toggle></duet-toggle>`);
-        const component = await page.find("duet-toggle");
-        expect(component).not.toBeNull();
-        expect(component).toHaveClass("hydrated");
-    });
-    it("should provide a property that removes the margin of the component", async () => {
-        const page = await createPage(`<duet-toggle margin="none"></duet-toggle>`);
-        const element = await page.find(".duet-m-0");
-        expect(element).not.toBeNull();
-    });
-    it("should provide a property that renders aria-controls", async () => {
-        const page = await createPage(`<duet-toggle accessible-controls="test"></duet-toggle>`);
-        const element = await page.find("duet-toggle input");
-        expect(element.getAttribute("aria-controls")).toEqual("test");
-    });
-    it("should provide a property that renders aria-activedescendant", async () => {
-        const page = await createPage(`<duet-toggle accessible-active-descendant="test"></duet-toggle>`);
-        const element = await page.find("duet-toggle input");
-        expect(element.getAttribute("aria-activedescendant")).not.toBeNull();
-    });
-    it("should provide a property that renders aria-owns", async () => {
-        const page = await createPage(`<duet-toggle accessible-owns="test"></duet-toggle>`);
-        const element = await page.find("duet-toggle input");
-        expect(element.getAttribute("aria-owns")).not.toBeNull();
-    });
-    it("should provide a property that switches the theme", async () => {
-        const page = await createPage(`<duet-toggle theme="turva"></duet-toggle>`);
-        const element = await page.find("duet-toggle .duet-toggle");
-        expect(element).toHaveClass("duet-theme-turva");
-    });
-    it("should provide a property that adds an ID for the toggle", async () => {
-        const page = await createPage(`<duet-toggle identifier="test"></duet-toggle>`);
-        const element = await page.find("duet-toggle input");
-        expect(element.getAttribute("id")).toEqual("test");
-    });
-    it("should provide a property that adds name for the toggle", async () => {
-        const page = await createPage(`<duet-toggle name="test"></duet-toggle>`);
-        const element = await page.find("duet-toggle input");
-        expect(element.getAttribute("name")).not.toBeNull();
-    });
-    it("should provide a property that adds role for the toggle", async () => {
-        const page = await createPage(`<duet-toggle role="test"></duet-toggle>`);
-        const element = await page.find("duet-toggle input");
-        expect(element.getAttribute("role")).not.toBeNull();
-    });
-    it("should provide a property that checks the toggle", async () => {
-        const page = await createPage(`<duet-toggle checked></duet-toggle>`);
-        const element = (await page.find("duet-toggle input"));
-        expect(element.checked).not.toBeNull();
-    });
-    it("should provide a property that adds value for the toggle", async () => {
-        const page = await createPage(`<duet-toggle value="test"></duet-toggle>`);
-        const element = await page.find("duet-toggle input");
-        expect(element.getAttribute("value")).not.toBeNull();
-    });
-    it("should raise a duetChange event when user changes value", async () => {
-        const page = await createPage(`<duet-toggle value="test"></duet-toggle>`);
-        const element = await page.find("duet-toggle");
-        const spy = await element.spyOnEvent("duetChange");
-        await element.click();
-        expect(spy).toHaveReceivedEventDetail({
-            component: "duet-toggle",
-            value: "test",
-            checked: true,
-        });
-    });
-});

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

@@ -1,82 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { formatViolations, options as axeRunOptions, testWithAxe } from "../../utils/axe-core-utils";
-describe("[a11y] duet-toolbar", () => {
-    it("should render an accessible component", async () => {
-        const result = await testWithAxe(`
-        <duet-toolbar accessible-label="Secondary">
-          <div slot="left">
-            <duet-toolbar-item url="#henkiloasiakkaat" active>Henkilöasiakkaat</duet-toolbar-item>
-            <duet-toolbar-item url="#yritysasiakkaat">Yritysasiakkaat</duet-toolbar-item>
-            <duet-toolbar-item url="#maatila-asiakkaat">Maatila-asiakkaat</duet-toolbar-item>
-            <duet-toolbar-item leading-icon="navigation-language" id="toolbar-item-yhtioryhma">Yhtiöryhmä</duet-toolbar-item>
-            <duet-popup-menu controller="toolbar-item-yhtioryhma" accessible-role="list" skip-teleport>
-              <duet-popup-menu-item accessible-role="listitem">Valinta</duet-popup-menu-item>
-              <duet-popup-menu-item accessible-role="listitem">Valinta</duet-popup-menu-item>
-              <duet-popup-menu-item accessible-role="listitem">Valinta</duet-popup-menu-item>
-            </duet-popup-menu>
-          </div>
-          <div slot="right">
-            <duet-toolbar-item id="desktop-search-opener" url="#search" icon="form-search">Hae</duet-toolbar-item>
-            <duet-slideout opener="desktop-search-opener" accessible-role="generic">
-              <div slot="sticky-header">
-                <duet-grid alignment="center" style="gap: var(--space-small)">
-                  <duet-icon name="form-search" size="medium" margin="none"></duet-icon>
-                  <duet-heading visual-level="h3" fixed-size margin="none">Haku</duet-heading>
-                </duet-grid>
-                <duet-spacer></duet-spacer>
-                <duet-input type="text" expand label="Haku" label-hidden clear="true"></duet-input>
-              </div>
-              <duet-spacer size="x-small"></duet-spacer>
-              <div>
-                <duet-heading level="h3" visual-level="h6">Usein haettua</duet-heading>
-                <div role="list">
-                  <duet-popup-menu-item leading-icon="navigation-arrow-right" leading-icon-color="primary" url="#" accessible-role="listitem">Autovakuutus</duet-popup-menu-item>
-                  <duet-popup-menu-item leading-icon="navigation-arrow-right" leading-icon-color="primary" url="#" accessible-role="listitem">Lapsiturva</duet-popup-menu-item>
-                  <duet-popup-menu-item leading-icon="navigation-arrow-right" leading-icon-color="primary" url="#" accessible-role="listitem">Rahastosäästäminen</duet-popup-menu-item>
-                  <duet-popup-menu-item leading-icon="navigation-arrow-right" leading-icon-color="primary" url="#" accessible-role="listitem">Henkivakuutus</duet-popup-menu-item>
-                  <duet-popup-menu-item leading-icon="navigation-arrow-right" leading-icon-color="primary" url="#" accessible-role="listitem">Varainhoito</duet-popup-menu-item>
-                </div>
-              </div>
-              <duet-divider></duet-divider>
-              <div>
-                <duet-heading level="h3" visual-level="h6" color="gray-darker">Ehdotetut haut</duet-heading>
-                <div role="list">
-                  <duet-popup-menu-item leading-icon="form-search" leading-icon-color="primary" accessible-role="listitem"><b>auto</b>vakuutus</duet-popup-menu-item>
-                  <duet-popup-menu-item leading-icon="form-search" leading-icon-color="primary" accessible-role="listitem">sähkö<b>auto</b>n vakuutus</duet-popup-menu-item>
-                  <duet-popup-menu-item leading-icon="form-search" leading-icon-color="primary" accessible-role="listitem"><b>auto</b>maattinen korvauskäsittely</duet-popup-menu-item>
-                  <duet-popup-menu-item leading-icon="form-search" leading-icon-color="primary" accessible-role="listitem"><b>auto</b>tie</duet-popup-menu-item>
-                </div>
-              </div>
-              <duet-spacer size="large"></duet-spacer>
-              <div>
-                <duet-heading level="h3" visual-level="h6" color="gray-darker">Hakutulokset termillä 'auto' (93)</duet-heading>
-                <ul style="list-style: none; padding: 0;">
-                  <li style="padding: var(--space-medium) 0;">
-                    <duet-button url="#" variation="plain" margin="none" padding="none" fixed>Autovakuutus</duet-button>
-                    <duet-paragraph margin="none">Halvin autovakuutus ei aina ole järkevin vaihtoehto. Suosittelemme vakuutusten sisällön vertailua ja huomioimaan erityisesti...</duet-paragraph>
-                    <duet-spacer size="xx-small"></duet-spacer>
-                    <duet-breadcrumbs variation="plain" color="gray-darker">
-                      <span><duet-breadcrumb icon="">Henkilöasiakas</duet-breadcrumb></span>
-                      <span><duet-breadcrumb >Vakuutukset</duet-breadcrumb></span>
-                      <span><duet-breadcrumb>Ajoneuvot</duet-breadcrumb></span>
-                      <span><duet-breadcrumb>Autovakuutus</duet-breadcrumb></span>
-                    </duet-breadcrumbs>
-                  </li>
-                </ul>
-              </div>
-            </duet-slideout>
-            <duet-toolbar-item accessible-label="Valitse kieli" leading-icon="navigation-language" id="toolbar-item-language">FI</duet-toolbar-item>
-            <duet-popup-menu controller="toolbar-item-language" accessible-role="list" skip-teleport>
-              <duet-popup-menu-item accessible-role="listitem" accessible-label="Vaihda kieli suomeksi" active>Suomeksi</duet-popup-menu-item>
-              <duet-popup-menu-item accessible-role="listitem" accessible-label="Byt språk till svenska" target-language="sv">På Svenska</duet-popup-menu-item>
-              <duet-popup-menu-item accessible-role="listitem" accessible-label="Change language to English" target-language="en">In English</duet-popup-menu-item>
-            </duet-popup-menu>
-          </div>
-        </duet-toolbar>
-      `, axeRunOptions);
-        expect(result).not.toBeNull();
-        expect(formatViolations(result.violations)).toEqual([]);
-    });
-});