@duetds/components 8.6.8 → 8.7.0

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

@@ -1,135 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { createPage } from "../../utils/test-utils";
-describe("duet-radio", () => {
-    it("should render a radio", async () => {
-        const page = await createPage(`<duet-radio></duet-radio>`);
-        const component = await page.find("duet-radio");
-        expect(component).not.toBeNull();
-        expect(component).toHaveClass("hydrated");
-    });
-    it("should provide a property that renders label", async () => {
-        const page = await createPage(`<duet-radio label="test"></duet-radio>`);
-        const element = await page.find("duet-radio label");
-        expect(element.innerText).toEqual("test");
-    });
-    it("should provide a slot that renders label", async () => {
-        const page = await createPage(`<duet-radio><span slot="label">test</span></duet-radio>`);
-        const element = await page.find("duet-radio label");
-        expect(element.innerText).toEqual("test");
-    });
-    it("should render HTML in the label when provided as a slotted content", async () => {
-        const page = await createPage(`<duet-radio><span slot="label">test <strong>HTML!</strong></span></duet-radio>`);
-        const element = await page.find("duet-radio label strong");
-        expect(element).not.toBeNull();
-    });
-    it("should prioritize the content from the label slot when both the slot and the attribute are present", async () => {
-        const page = await createPage(`<duet-radio label="Label wins"><span slot="label">Slot wins</span></duet-radio>`);
-        const element = await page.find("duet-radio label");
-        expect(element.innerText).toEqual("Slot wins");
-    });
-    it("should provide a property that removes the margin of the component", async () => {
-        const page = await createPage(`<duet-radio margin="none"></duet-radio>`);
-        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-radio accessible-controls="test"></duet-radio>`);
-        const element = await page.find("duet-radio .duet-radio");
-        expect(element.getAttribute("aria-controls")).toEqual("test");
-    });
-    it("should provide a property that renders aria-activedescendant", async () => {
-        const page = await createPage(`<duet-radio accessible-active-descendant="test"></duet-radio>`);
-        const element = await page.find("duet-radio .duet-radio");
-        expect(element.getAttribute("aria-activedescendant")).not.toBeNull();
-    });
-    it("should provide a property that renders aria-owns", async () => {
-        const page = await createPage(`<duet-radio accessible-owns="test"></duet-radio>`);
-        const element = await page.find("duet-radio .duet-radio");
-        expect(element.getAttribute("aria-owns")).not.toBeNull();
-    });
-    it("should provide a property that switches the theme", async () => {
-        const page = await createPage(`<duet-radio theme="turva"></duet-radio>`);
-        const element = await page.find("duet-radio .duet-radio-container");
-        expect(element).toHaveClass("duet-theme-turva");
-    });
-    it("should provide a property that makes the radio disabled", async () => {
-        const page = await createPage(`<duet-radio disabled></duet-radio>`);
-        const element = await page.find("duet-radio .duet-radio");
-        expect(element.getAttribute("disabled")).not.toBeNull();
-    });
-    it("should provide a property that adds an ID for the radio", async () => {
-        const page = await createPage(`<duet-radio identifier="test"></duet-radio>`);
-        const element = await page.find("duet-radio .duet-radio");
-        expect(element.getAttribute("id")).toEqual("test");
-    });
-    it("should provide a property that adds name for the radio", async () => {
-        const page = await createPage(`<duet-radio name="test"></duet-radio>`);
-        const element = await page.find("duet-radio .duet-radio");
-        expect(element.getAttribute("name")).not.toBeNull();
-    });
-    it("should provide a property that adds role for the radio", async () => {
-        const page = await createPage(`<duet-radio role="test"></duet-radio>`);
-        const element = await page.find("duet-radio .duet-radio");
-        expect(element.getAttribute("role")).not.toBeNull();
-    });
-    it("should provide a property that checks the radio", async () => {
-        const page = await createPage(`<duet-radio checked></duet-radio>`);
-        const element = (await page.find("duet-radio .duet-radio"));
-        expect(element.checked).not.toBeNull();
-    });
-    it("should provide a property that adds value for the radio", async () => {
-        const page = await createPage(`<duet-radio value="test"></duet-radio>`);
-        const element = await page.find("duet-radio .duet-radio");
-        expect(element.getAttribute("value")).not.toBeNull();
-    });
-    it("should provide a property that adds group direction", async () => {
-        const page = await createPage(`<duet-radio group-direction="horizontal"></duet-radio>`);
-        const element = await page.find("duet-radio");
-        expect(element).toHaveClass("horizontal");
-    });
-    it("should provide a property that adds group disabled", async () => {
-        const page = await createPage(`<duet-radio group-disabled></duet-radio>`);
-        const element = await page.find("duet-radio .duet-radio");
-        expect(element.getAttribute("disabled")).not.toBeNull();
-    });
-    it("should provide a property that changes tabindex of checkbox", async () => {
-        const page = await createPage(`<duet-radio accessible-index="-1"></duet-radio>`);
-        const element = await page.find("duet-radio .duet-radio");
-        expect(element.getAttribute("tabindex")).not.toBeNull();
-    });
-    it("should only raise an event on user interaction, not when changing checked property programmatically", async () => {
-        const page = await createPage(`<duet-radio label="Checked" value="test"></duet-radio>`);
-        const choice = await page.find("duet-radio");
-        const changeEventSpy = await choice.spyOnEvent("duetChange");
-        choice.setProperty("checked", true);
-        await page.waitForChanges();
-        expect(changeEventSpy).not.toHaveReceivedEvent();
-        choice.setProperty("checked", false);
-        await page.waitForChanges();
-        await choice.click();
-        expect(changeEventSpy).toHaveReceivedEvent();
-    });
-    it("should raise an event on focus", async () => {
-        const page = await createPage(`<duet-radio label="Checked" value="test"></duet-radio>`);
-        const radio = await page.find("duet-radio");
-        const focusEventSpy = await radio.spyOnEvent("duetFocus");
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        expect(focusEventSpy).toHaveReceivedEvent();
-    });
-    it("should raise an event on blur", async () => {
-        const page = await createPage(`
-      <duet-radio label="Checked" value="test"></duet-radio>
-      <button>another focusable element</button>
-    `);
-        const radio = await page.find("duet-radio");
-        const blurEventSpy = await radio.spyOnEvent("duetFocus");
-        // focus then blur the checkbox
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        expect(blurEventSpy).toHaveReceivedEvent();
-    });
-});

package/lib/collection/components/duet-radio-group/duet-radio-group.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-radio-group", () => {
-    it("should render an accessible component", async () => {
-        const result = await testWithAxe(`
-        <duet-radio-group label="Choose" value="one" name="group">
-          <duet-radio value="one" label="Option one"></duet-radio>
-          <duet-radio value="two" label="Option two"></duet-radio>
-          <duet-radio value="three" label="Option three"></duet-radio>
-        </duet-radio-group>
-      `, axeRunOptions);
-        expect(result).not.toBeNull();
-        expect(formatViolations(result.violations)).toEqual([]);
-    });
-    it("should render an accessible component with label, tooltip and caption", async () => {
-        const result = await testWithAxe(`
-        <duet-radio-group
-          responsive
-          label="This choice group has a tooltip"
-          tooltip="Hello, I’m a tooltip! To close me, you can click outside of the tooltip, hit ESC key or click the X button."
-          caption="This is a caption lorem ipsum dolor sit amet consectetuer adipiscing elit."
-          direction="horizontal"
-          value="one"
-          name="group2"
-        >
-          <duet-radio value="one" label="Option one"></duet-radio>
-          <duet-radio value="two" label="Option two"></duet-radio>
-          <duet-radio value="three" label="Option three"></duet-radio>
-        </duet-radio-group>
-      `, axeRunOptions);
-        expect(result).not.toBeNull();
-        expect(formatViolations(result.violations)).toEqual([]);
-    });
-});

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

@@ -1,57 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { createPage } from "../../utils/test-utils";
-describe("duet-radio-group", () => {
-    it("should render a radio group", async () => {
-        const page = await createPage(`<duet-radio-group></duet-radio-group>`);
-        const component = await page.find("duet-radio-group");
-        expect(component).not.toBeNull();
-        expect(component).toHaveClass("hydrated");
-    });
-    it("should associate the tooltip with the legend", async () => {
-        const page = await createPage(`<duet-radio-group label="test label" tooltip="some tooltip"></duet-radio-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("should provide a property that removes the margin of the component", async () => {
-        const page = await createPage(`<duet-radio-group margin="none"></duet-radio-group>`);
-        const element = await page.find(".duet-m-0");
-        expect(element).not.toBeNull();
-    });
-    it("should raise a change event on user interaction, as long as the value is provided", async () => {
-        const page = await createPage(`<duet-radio-group>
-      <duet-radio value="foo" label="Foo"></duet-radio>
-      <duet-radio value="true" label="True"></duet-radio>
-      <duet-radio value="false" label="False"></duet-radio>
-      <duet-radio value="123" label="Number"></duet-radio>
-      <duet-radio value="" label="[empty]"></duet-radio>
-    </duet-radio-group>`);
-        const component = await page.find("duet-radio-group");
-        const radios = await page.findAll("duet-radio-group duet-radio");
-        const changeEventSpy = await component.spyOnEvent("duetChange");
-        for (const radio of radios) {
-            await radio.click();
-        }
-        expect(changeEventSpy).toHaveReceivedEventTimes(radios.length);
-    });
-    it("should not raise a change event when the value doesn't change", async () => {
-        const page = await createPage(`<duet-radio-group>
-      <duet-radio value="foo" label="Foo"></duet-radio>
-      <duet-radio value="true" label="True"></duet-radio>
-      <duet-radio value="false" label="False"></duet-radio>
-      <duet-radio value="123" label="Number"></duet-radio>
-      <duet-radio value="" label="[empty]"></duet-radio>
-    </duet-radio-group>`);
-        const component = await page.find("duet-radio-group");
-        const radio = await page.find("duet-radio-group duet-radio");
-        const changeEventSpy = await component.spyOnEvent("duetChange");
-        await radio.click();
-        await radio.click();
-        await radio.click();
-        expect(changeEventSpy).toHaveReceivedEventTimes(1);
-    });
-});

package/lib/collection/components/duet-range-slider/duet-range-slider.a11y.e2e.js

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

package/lib/collection/components/duet-range-slider/duet-range-slider.e2e.js

@@ -1,57 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { createPage } from "../../utils/test-utils";
-describe("duet-range-slider", () => {
-    it("should render a range-slider", async () => {
-        const page = await createPage(`<duet-range-slider></duet-range-slider>`);
-        const component = await page.find("duet-range-slider");
-        expect(component).not.toBeNull();
-        expect(component).toHaveClass("hydrated");
-    });
-    it("should provide a property that switches the theme", async () => {
-        const page = await createPage(`<duet-range-slider theme="turva"></duet-range-slider>`);
-        const element = await page.find("duet-range-slider .duet-range-container");
-        expect(element).toHaveClass("duet-theme-turva");
-    });
-    it("should provide a property that removes the margin of the component", async () => {
-        const page = await createPage(`<duet-range-slider margin="none"></duet-range-slider>`);
-        const element = await page.find(".duet-m-0");
-        expect(element).not.toBeNull();
-    });
-    it("should provide a property that expands the input to fill 100% width", async () => {
-        const page = await createPage(`<duet-range-slider expand></duet-range-slider>`);
-        const element = await page.find("duet-range-slider");
-        expect(element).toHaveClass("duet-expand");
-    });
-    it("should provide a property that adds an ID for the input", async () => {
-        const page = await createPage(`<duet-range-slider identifier="test"></duet-range-slider>`);
-        const element = await page.find("duet-range-slider input");
-        expect(element.getAttribute("id")).toEqual("test");
-    });
-    it("should provide a property that renders label", async () => {
-        const page = await createPage(`<duet-range-slider label="test"></duet-range-slider>`);
-        const element = await page.find("duet-range-slider duet-label label");
-        expect(element.innerText).toEqual("test");
-    });
-    it("should provide a property that sets the step amount", async () => {
-        const page = await createPage(`<duet-range-slider step="10"></duet-range-slider>`);
-        const element = await page.find("duet-range-slider input");
-        expect(element.getAttribute("step")).toEqual("10");
-    });
-    it("should provide a property that sets the max amount", async () => {
-        const page = await createPage(`<duet-range-slider max="10"></duet-range-slider>`);
-        const element = await page.find("duet-range-slider input");
-        expect(element.getAttribute("max")).toEqual("10");
-    });
-    it("should provide a property that sets the min amount", async () => {
-        const page = await createPage(`<duet-range-slider min="1"></duet-range-slider>`);
-        const element = await page.find("duet-range-slider input");
-        expect(element.getAttribute("min")).toEqual("1");
-    });
-    it("should provide a property that sets the unit", async () => {
-        const page = await createPage(`<duet-range-slider unit=" test"></duet-range-slider>`);
-        const element = await page.find("duet-range-slider input");
-        expect(element).toEqualAttribute("aria-valuetext", "0  test");
-    });
-});

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

package/lib/collection/components/duet-range-stepper/duet-range-stepper.e2e.js

@@ -1,52 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { createPage } from "../../utils/test-utils";
-describe("duet-range-stepper", () => {
-    it("should render a logo", async () => {
-        const page = await createPage(`<duet-range-stepper total="20" step-size="10" step-index="1"></duet-range-stepper>`);
-        const component = await page.find("duet-range-stepper");
-        expect(component).not.toBeNull();
-        expect(component).toHaveClass("hydrated");
-    });
-    it("should display range", async () => {
-        const page = await createPage(`<duet-range-stepper total="20" step-size="10" step-index="1"></duet-range-stepper>`);
-        const counter = await page.find("duet-range-stepper >>> .duet-range-step-counter");
-        expect(counter.textContent).toBe("1–10 / 20");
-    });
-    it("should update range on next button click", async () => {
-        const page = await createPage(`<duet-range-stepper total="20" step-size="10" step-index="1"></duet-range-stepper>`);
-        const nextButton = await page.find("duet-range-stepper >>> .duet-range-step-plus");
-        nextButton.click();
-        await page.waitForEvent("click");
-        await page.waitForChanges();
-        //after mutation, stepIndex should be clamped
-        const counter = await page.find("duet-range-stepper >>> .duet-range-step-counter");
-        expect(counter.textContent).toBe("11–20 / 20");
-    });
-    it("should not go beyond last page", async () => {
-        const page = await createPage(`<duet-range-stepper total="20" step-size="10" step-index="2"></duet-range-stepper>`);
-        const nextButton = await page.find("duet-range-stepper >>> .duet-range-step-plus");
-        nextButton.click();
-        await page.waitForChanges();
-        //after mutation, stepIndex should be clamped
-        const counter = await page.find("duet-range-stepper >>> .duet-range-step-counter");
-        expect(counter.textContent).toBe("11–20 / 20");
-    });
-    it("should clamp stepIndex when increasing stepSize would result out of bounds stepIndex", async () => {
-        const page = await createPage(`<duet-range-stepper total="33" step-size="10" step-index="3"></duet-range-stepper>`);
-        const nextButton = await page.find("duet-range-stepper >>> .duet-range-step-plus");
-        nextButton.click();
-        await page.waitForChanges();
-        const counter = await page.find("duet-range-stepper >>> .duet-range-step-counter");
-        expect(counter.textContent).toBe("31–33 / 33");
-        const stepper = await page.find("duet-range-stepper");
-        stepper.setProperty("stepSize", 20);
-        await page.waitForChanges();
-        //after mutation, stepIndex should be clamped
-        const stepperPostChange = await page.find("duet-range-stepper");
-        const counterPostChange = await page.find("duet-range-stepper >>> .duet-range-step-counter");
-        expect(await stepperPostChange.getProperty("stepIndex")).toBe(2);
-        expect(counterPostChange.textContent).toBe("21–33 / 33");
-    });
-});

package/lib/collection/components/duet-range-stepper/duet-range-stepper.spec.js

@@ -1,23 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { DuetRangeStepper } from "./duet-range-stepper";
-describe("duet-range-stepper", () => {
-    it("should not allow non-integer stepIndex when growing stepSize beyond last page", () => {
-        const component = new DuetRangeStepper();
-        component.stepSize = 10;
-        component.total = 33;
-        component.stepIndex = 3;
-        expect(component.stepIndex).toEqual(3);
-        component.watchStepSizeStateHandler(30, 10);
-        expect(component.stepIndex).toEqual(2);
-    });
-    it("should clamp initially out of bounds stepIndex to last page", () => {
-        const component = new DuetRangeStepper();
-        component.stepSize = 10;
-        component.total = 33;
-        component.stepIndex = 5;
-        component.componentWillLoad();
-        expect(component.stepIndex).toEqual(4);
-    });
-});

package/lib/collection/components/duet-scrollable/duet-scrollable.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-scrollable", () => {
-    it("should render an accessible component", async () => {
-        const result = await testWithAxe(`
-       <duet-scrollable>
-          <button class="duet-dummy-placeholder" aria-label="Click to open image 1">1</button>
-          <button class="duet-dummy-placeholder" aria-label="Click to open image 2">2</button>
-          <button class="duet-dummy-placeholder" aria-label="Click to open image 3">3</button>
-        </duet-scrollable>
-      `, axeRunOptions);
-        expect(result).not.toBeNull();
-        expect(formatViolations(result.violations)).toEqual([]);
-    });
-});

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

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

package/lib/collection/components/duet-section-layout/duet-section-layout.a11y.e2e.js

@@ -1,18 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { formatViolations, options as axeRunOptions, testWithAxe } from "../../utils/axe-core-utils";
-describe("[a11y] duet-section-layout", () => {
-    it("should render an accessible component", async () => {
-        const result = await testWithAxe(`
-        <duet-section-layout margin="none">
-          <div>
-            <duet-card heading="Section">Content</duet-card>
-            <duet-card heading="More section content">More content</duet-card>
-          </div>
-        </duet-section-layout>
-      `, axeRunOptions);
-        expect(result).not.toBeNull();
-        expect(formatViolations(result.violations)).toEqual([]);
-    });
-});

package/lib/collection/components/duet-section-layout/duet-section-layout.e2e.js

@@ -1,22 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { createPage } from "../../utils/test-utils";
-describe("duet-layout", () => {
-    it("should render a section layout", async () => {
-        const page = await createPage(`<duet-section-layout><div>content</div></duet-section-layout>`);
-        const component = await page.find("duet-section-layout");
-        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-section-layout margin="none"><div>content</div></duet-section-layout>`);
-        const element = await page.find("duet-section-layout >>> .duet-m-0");
-        expect(element).not.toBeNull();
-    });
-    it("should provide a property that middle aligns the layout", async () => {
-        const page = await createPage(`<duet-section-layout middle><div>content</div></duet-section-layout>`);
-        const element = await page.find("duet-section-layout");
-        expect(element).toHaveClass("duet-middle");
-    });
-});

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

@@ -1,45 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { formatViolations, options as axeRunOptions, testWithAxe } from "../../utils/axe-core-utils";
-describe("[a11y] duet-select", () => {
-    it("should render an accessible component", async () => {
-        const result = await testWithAxe(`
-        <duet-select
-          label="Kaupunki"
-          placeholder="Valitse"
-          items='[
-            { "label": "Helsinki", "value": "1" },
-            { "label": "Tampere", "value": "2" },
-            { "label": "Vantaa", "value": "3" },
-            { "label": "Espoo", "value": "4" }
-          ]'
-        >
-        </duet-select>
-      `, axeRunOptions);
-        expect(result).not.toBeNull();
-        expect(formatViolations(result.violations)).toEqual([]);
-    });
-    it("should render an accessible component with grouped options", async () => {
-        const result = await testWithAxe(`
-        <duet-select
-          label="Kaupunki"
-          placeholder="Valitse"
-          items='[
-            { label: "Helsinki", value: "1" },
-            {
-              label: "Grouped options",
-              options: [
-                { label: "Tampere", value: "2" },
-                { label: "Vantaa", value: "3" },
-              ],
-            },
-            { label: "Espoo", value: "4" },
-          ]'
-        >
-        </duet-select>
-      `, axeRunOptions);
-        expect(result).not.toBeNull();
-        expect(formatViolations(result.violations)).toEqual([]);
-    });
-});