@duetds/components 8.0.6 → 8.1.1

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

@@ -3,46 +3,46 @@
  */
 import { formatViolations, options as axeRunOptions, testWithAxe } from "../../utils/axe-core-utils";
 describe("[a11y] duet-button", () => {
-  it("should render an accessible component", async () => {
-    const result = await testWithAxe(`
+    it("should render an accessible component", async () => {
+        const result = await testWithAxe(`
         <duet-button variation="primary">Primary button</duet-button>
       `, axeRunOptions);
-    expect(result).not.toBeNull();
-    expect(formatViolations(result.violations)).toEqual([]);
-  });
-  it("should render an accessible component with icon", async () => {
-    const result = await testWithAxe(`
+        expect(result).not.toBeNull();
+        expect(formatViolations(result.violations)).toEqual([]);
+    });
+    it("should render an accessible component with icon", async () => {
+        const result = await testWithAxe(`
         <duet-button variation="primary" icon="navigation-arrow-left" fixed> With icon on left </duet-button>
       `, axeRunOptions);
-    expect(result).not.toBeNull();
-    expect(formatViolations(result.violations)).toEqual([]);
-  });
-  it("should render an accessible component in loading state", async () => {
-    const result = await testWithAxe(`
+        expect(result).not.toBeNull();
+        expect(formatViolations(result.violations)).toEqual([]);
+    });
+    it("should render an accessible component in loading state", async () => {
+        const result = await testWithAxe(`
         <duet-button variation="primary" loading> Button in loading state </duet-button>
       `, axeRunOptions);
-    expect(result).not.toBeNull();
-    expect(formatViolations(result.violations)).toEqual([]);
-  });
-  it("should render an accessible component in destructive variant", async () => {
-    const result = await testWithAxe(`
+        expect(result).not.toBeNull();
+        expect(formatViolations(result.violations)).toEqual([]);
+    });
+    it("should render an accessible component in destructive variant", async () => {
+        const result = await testWithAxe(`
         <duet-button variation="destructive-primary">Destructive primary button</duet-button>
       `, axeRunOptions);
-    expect(result).not.toBeNull();
-    expect(formatViolations(result.violations)).toEqual([]);
-  });
-  it("should render an accessible component as a link", async () => {
-    const result = await testWithAxe(`
+        expect(result).not.toBeNull();
+        expect(formatViolations(result.violations)).toEqual([]);
+    });
+    it("should render an accessible component as a link", async () => {
+        const result = await testWithAxe(`
           <duet-button variation="primary" url="https://www.duetds.com">Button as link</duet-button>
       `, axeRunOptions);
-    expect(result).not.toBeNull();
-    expect(formatViolations(result.violations)).toEqual([]);
-  });
-  it("should render an accessible, icon-only component", async () => {
-    const result = await testWithAxe(`
+        expect(result).not.toBeNull();
+        expect(formatViolations(result.violations)).toEqual([]);
+    });
+    it("should render an accessible, icon-only component", async () => {
+        const result = await testWithAxe(`
         <duet-button accessible-label="Search" fixed icon-only id="icon" icon="form-search"></duet-button>
       `, axeRunOptions);
-    expect(result).not.toBeNull();
-    expect(formatViolations(result.violations)).toEqual([]);
-  });
+        expect(result).not.toBeNull();
+        expect(formatViolations(result.violations)).toEqual([]);
+    });
 });

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

@@ -3,137 +3,137 @@
  */
 import { createPage } from "../../utils/test-utils";
 describe("duet-button", () => {
-  it("should render a button", async () => {
-    const page = await createPage(`<duet-button></duet-button>`);
-    const component = await page.find("duet-button");
-    expect(component).not.toBeNull();
-    expect(component).toHaveClass("hydrated");
-  });
-  it("should provide a property that renders aria-label", async () => {
-    const page = await createPage(`<duet-button accessible-label="test">Button</duet-button>`);
-    const element = await page.find("duet-button >>> .duet-button");
-    expect(element.getAttribute("aria-label")).toEqual("test");
-  });
-  it("should provide a property that renders aria-controls", async () => {
-    const page = await createPage(`<duet-button accessible-controls="test">Button</duet-button>`);
-    const element = await page.find("duet-button >>> .duet-button");
-    expect(element.getAttribute("aria-controls")).toEqual("test");
-  });
-  it("should provide a property that renders aria-expanded", async () => {
-    const page = await createPage(`<duet-button accessible-expanded="true">Button</duet-button>`);
-    const element = await page.find("duet-button >>> .duet-button");
-    expect(element.getAttribute("aria-expanded")).not.toBeNull();
-  });
-  it("should provide a property that renders aria-pressed", async () => {
-    const page = await createPage(`<duet-button accessible-pressed="true">Button</duet-button>`);
-    const element = await page.find("duet-button >>> .duet-button");
-    expect(element.getAttribute("aria-pressed")).not.toBeNull();
-  });
-  it("should provide a property that renders button in different style variations", async () => {
-    const page = await createPage(`<duet-button variation="secondary">Button</duet-button>`);
-    const element = await page.find("duet-button >>> .duet-button");
-    expect(element).toHaveClass("secondary");
-  });
-  it("should provide a property that switches the theme", async () => {
-    const page = await createPage(`<duet-button theme="turva">Button</duet-button>`);
-    const element = await page.find("duet-button >>> .duet-button-container");
-    expect(element).toHaveClass("duet-theme-turva");
-  });
-  it("should provide a property that expands the button to fill 100% width", async () => {
-    const page = await createPage(`<duet-button expand="true">Button</duet-button>`);
-    const element = await page.find("duet-button");
-    expect(element).toHaveClass("duet-expand");
-  });
-  it("should provide a property that makes the button fixed width even on mobile", async () => {
-    const page = await createPage(`<duet-button fixed>Button</duet-button>`);
-    const element = await page.find("duet-button");
-    expect(element).toHaveClass("duet-fixed");
-  });
-  it("should provide a property that makes the button disabled", async () => {
-    const page = await createPage(`<duet-button disabled>Button</duet-button>`);
-    const element = await page.find("duet-button >>> .duet-button");
-    expect(element.getAttribute("disabled")).not.toBeNull();
-  });
-  it("should provide a property that adds an ID for the button", async () => {
-    const page = await createPage(`<duet-button identifier="test">Button</duet-button>`);
-    const element = await page.find("duet-button >>> .duet-button");
-    expect(element.getAttribute("id")).toEqual("test");
-  });
-  it("should provide a property that converts the button to a submit", async () => {
-    const page = await createPage(`<duet-button submit>Button</duet-button>`);
-    const element = await page.find("duet-button >>> .duet-button");
-    expect(element.getAttribute("type")).toEqual("submit");
-  });
-  it("should provide a property that adds renders a target attribute", async () => {
-    const page = await createPage(`<duet-button url="#" external>Button</duet-button>`);
-    const element = await page.find("duet-button >>> .duet-button");
-    expect(element.getAttribute("target")).toEqual("_blank");
-    expect(element.getAttribute("rel")).toEqual("noopener");
-  });
-  it("should provide a property that adds renders anchor href", async () => {
-    const page = await createPage(`<duet-button url="#">Button</duet-button>`);
-    const element = await page.find("duet-button >>> .duet-button");
-    expect(element.getAttribute("href")).toEqual("#");
-  });
-  it("should provide a property that removes the margin of the component", async () => {
-    const page = await createPage(`<duet-button margin="none">Button</duet-button>`);
-    const element = await page.find("duet-button >>> .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-button padding="none"></duet-button>`);
-    const element = await page.find("duet-button >>> .duet-button");
-    expect(element).toHaveClass("duet-p-0");
-  });
-  it("should not add anchor-specific attributes to button", async () => {
-    const page = await createPage(`<duet-button>Button</duet-button>`);
-    const element = await page.find("duet-button >>> .duet-button");
-    expect(element).not.toHaveAttribute("target");
-    expect(element).not.toHaveAttribute("href");
-  });
-  it("should not add button-specific attributes to link", async () => {
-    const page = await createPage(`<duet-button url="#">Button</duet-button>`);
-    const element = await page.find("duet-button >>> .duet-button");
-    expect(element).not.toHaveAttribute("type");
-    expect(element).not.toHaveAttribute("disabled");
-    expect(element).not.toHaveAttribute("name");
-    expect(element).not.toHaveAttribute("value");
-    expect(element).not.toHaveAttribute("aria-pressed");
-  });
-  it("should not add aria-* attributes unless explicitly set", async () => {
-    const page = await createPage(`<duet-button>Button</duet-button>`);
-    const component = await page.find("duet-button");
-    const button = await page.find("duet-button >>> .duet-button");
-    expect(button).not.toHaveAttribute("aria-expanded");
-    expect(button).not.toHaveAttribute("aria-pressed");
-    component.setAttribute("accessible-expanded", "true");
-    component.setAttribute("accessible-pressed", "true");
-    await page.waitForChanges();
-    expect(button).toEqualAttribute("aria-expanded", "true");
-    expect(button).toEqualAttribute("aria-pressed", "true");
-  });
-  it("supports opening links in a new window", async () => {
-    const page = await createPage(`
+    it("should render a button", async () => {
+        const page = await createPage(`<duet-button></duet-button>`);
+        const component = await page.find("duet-button");
+        expect(component).not.toBeNull();
+        expect(component).toHaveClass("hydrated");
+    });
+    it("should provide a property that renders aria-label", async () => {
+        const page = await createPage(`<duet-button accessible-label="test">Button</duet-button>`);
+        const element = await page.find("duet-button >>> .duet-button");
+        expect(element.getAttribute("aria-label")).toEqual("test");
+    });
+    it("should provide a property that renders aria-controls", async () => {
+        const page = await createPage(`<duet-button accessible-controls="test">Button</duet-button>`);
+        const element = await page.find("duet-button >>> .duet-button");
+        expect(element.getAttribute("aria-controls")).toEqual("test");
+    });
+    it("should provide a property that renders aria-expanded", async () => {
+        const page = await createPage(`<duet-button accessible-expanded="true">Button</duet-button>`);
+        const element = await page.find("duet-button >>> .duet-button");
+        expect(element.getAttribute("aria-expanded")).not.toBeNull();
+    });
+    it("should provide a property that renders aria-pressed", async () => {
+        const page = await createPage(`<duet-button accessible-pressed="true">Button</duet-button>`);
+        const element = await page.find("duet-button >>> .duet-button");
+        expect(element.getAttribute("aria-pressed")).not.toBeNull();
+    });
+    it("should provide a property that renders button in different style variations", async () => {
+        const page = await createPage(`<duet-button variation="secondary">Button</duet-button>`);
+        const element = await page.find("duet-button >>> .duet-button");
+        expect(element).toHaveClass("secondary");
+    });
+    it("should provide a property that switches the theme", async () => {
+        const page = await createPage(`<duet-button theme="turva">Button</duet-button>`);
+        const element = await page.find("duet-button >>> .duet-button-container");
+        expect(element).toHaveClass("duet-theme-turva");
+    });
+    it("should provide a property that expands the button to fill 100% width", async () => {
+        const page = await createPage(`<duet-button expand="true">Button</duet-button>`);
+        const element = await page.find("duet-button");
+        expect(element).toHaveClass("duet-expand");
+    });
+    it("should provide a property that makes the button fixed width even on mobile", async () => {
+        const page = await createPage(`<duet-button fixed>Button</duet-button>`);
+        const element = await page.find("duet-button");
+        expect(element).toHaveClass("duet-fixed");
+    });
+    it("should provide a property that makes the button disabled", async () => {
+        const page = await createPage(`<duet-button disabled>Button</duet-button>`);
+        const element = await page.find("duet-button >>> .duet-button");
+        expect(element.getAttribute("disabled")).not.toBeNull();
+    });
+    it("should provide a property that adds an ID for the button", async () => {
+        const page = await createPage(`<duet-button identifier="test">Button</duet-button>`);
+        const element = await page.find("duet-button >>> .duet-button");
+        expect(element.getAttribute("id")).toEqual("test");
+    });
+    it("should provide a property that converts the button to a submit", async () => {
+        const page = await createPage(`<duet-button submit>Button</duet-button>`);
+        const element = await page.find("duet-button >>> .duet-button");
+        expect(element.getAttribute("type")).toEqual("submit");
+    });
+    it("should provide a property that adds renders a target attribute", async () => {
+        const page = await createPage(`<duet-button url="#" external>Button</duet-button>`);
+        const element = await page.find("duet-button >>> .duet-button");
+        expect(element.getAttribute("target")).toEqual("_blank");
+        expect(element.getAttribute("rel")).toEqual("noopener");
+    });
+    it("should provide a property that adds renders anchor href", async () => {
+        const page = await createPage(`<duet-button url="#">Button</duet-button>`);
+        const element = await page.find("duet-button >>> .duet-button");
+        expect(element.getAttribute("href")).toEqual("#");
+    });
+    it("should provide a property that removes the margin of the component", async () => {
+        const page = await createPage(`<duet-button margin="none">Button</duet-button>`);
+        const element = await page.find("duet-button >>> .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-button padding="none"></duet-button>`);
+        const element = await page.find("duet-button >>> .duet-button");
+        expect(element).toHaveClass("duet-p-0");
+    });
+    it("should not add anchor-specific attributes to button", async () => {
+        const page = await createPage(`<duet-button>Button</duet-button>`);
+        const element = await page.find("duet-button >>> .duet-button");
+        expect(element).not.toHaveAttribute("target");
+        expect(element).not.toHaveAttribute("href");
+    });
+    it("should not add button-specific attributes to link", async () => {
+        const page = await createPage(`<duet-button url="#">Button</duet-button>`);
+        const element = await page.find("duet-button >>> .duet-button");
+        expect(element).not.toHaveAttribute("type");
+        expect(element).not.toHaveAttribute("disabled");
+        expect(element).not.toHaveAttribute("name");
+        expect(element).not.toHaveAttribute("value");
+        expect(element).not.toHaveAttribute("aria-pressed");
+    });
+    it("should not add aria-* attributes unless explicitly set", async () => {
+        const page = await createPage(`<duet-button>Button</duet-button>`);
+        const component = await page.find("duet-button");
+        const button = await page.find("duet-button >>> .duet-button");
+        expect(button).not.toHaveAttribute("aria-expanded");
+        expect(button).not.toHaveAttribute("aria-pressed");
+        component.setAttribute("accessible-expanded", "true");
+        component.setAttribute("accessible-pressed", "true");
+        await page.waitForChanges();
+        expect(button).toEqualAttribute("aria-expanded", "true");
+        expect(button).toEqualAttribute("aria-pressed", "true");
+    });
+    it("supports opening links in a new window", async () => {
+        const page = await createPage(`
       <duet-button language="en" url="#" external>Link button</duet-button>
     `);
-    const hiddenMessage = await page.find("duet-button >>> a duet-visually-hidden");
-    expect(hiddenMessage).not.toBe(null);
-    expect(hiddenMessage.innerText).toContain(", Avautuu uuteen ikkunaan");
-  });
-  describe("form interactions", () => {
-    async function implicitSubmission(fixture) {
-      const input = await fixture.form.find("input");
-      await input.focus();
-      await fixture.page.keyboard.press("Enter");
-    }
-    async function explicitSubmission(fixture) {
-      await fixture.button.click();
-    }
-    async function createFixture(props) {
-      const attrs = Object.entries(props)
-        .map(([attr, value]) => `${attr}="${value}"`)
-        .join(" ");
-      const page = await createPage(`
+        const hiddenMessage = await page.find("duet-button >>> a duet-visually-hidden");
+        expect(hiddenMessage).not.toBe(null);
+        expect(hiddenMessage.innerText).toContain(", Avautuu uuteen ikkunaan");
+    });
+    describe("form interactions", () => {
+        async function implicitSubmission(fixture) {
+            const input = await fixture.form.find("input");
+            await input.focus();
+            await fixture.page.keyboard.press("Enter");
+        }
+        async function explicitSubmission(fixture) {
+            await fixture.button.click();
+        }
+        async function createFixture(props) {
+            const attrs = Object.entries(props)
+                .map(([attr, value]) => `${attr}="${value}"`)
+                .join(" ");
+            const page = await createPage(`
         <form>
           <label>
             Name: <input name="name" type="text" />
@@ -144,69 +144,69 @@ describe("duet-button", () => {
           <duet-button ${attrs}>Submit</duet-button>
         </form>
       `);
-      const form = await page.find("form");
-      const button = await page.find("duet-button");
-      const spy = await form.spyOnEvent("submit");
-      return { page, form, spy, button };
-    }
-    describe.each([
-      ["implicit", implicitSubmission],
-      ["explicit", explicitSubmission],
-    ])(`%s form submission`, (_type, doSubmit) => {
-      // TODO: broken test as the browser tries to enter the clicked page
-      it.skip("should submit form", async () => {
-        const fixture = await createFixture({ submit: true });
-        await doSubmit(fixture);
-        expect(fixture.spy).toHaveReceivedEventTimes(1);
-      });
-      it("should only submit form if `submit` attr is `true`", async () => {
-        const fixture = await createFixture({ submit: false });
-        await doSubmit(fixture);
-        expect(fixture.spy).toHaveReceivedEventTimes(0);
-      });
-      it("should not submit form when `disabled`", async () => {
-        const fixture = await createFixture({ submit: true, disabled: true });
-        await doSubmit(fixture);
-        expect(fixture.spy).toHaveReceivedEventTimes(0);
-        fixture.button.removeAttribute("disabled");
-        await fixture.page.waitForChanges();
-        await doSubmit(fixture);
-        expect(fixture.spy).toHaveReceivedEventTimes(1);
-      });
-      // TODO: broken test as the browser tries to enter the clicked page
-      it.skip("should not not submit if rendered as a link", async () => {
-        const fixture = await createFixture({ submit: true, url: "test.html" });
-        await doSubmit(fixture);
-        expect(fixture.spy).toHaveReceivedEventTimes(0);
-      });
-    });
-    // TODO: broken test as the browser tries to enter the submit url
-    it.skip("supports supplying name and value", async () => {
-      const page = await createPage(`
+            const form = await page.find("form");
+            const button = await page.find("duet-button");
+            const spy = await form.spyOnEvent("submit");
+            return { page, form, spy, button };
+        }
+        describe.each([
+            ["implicit", implicitSubmission],
+            ["explicit", explicitSubmission],
+        ])(`%s form submission`, (_type, doSubmit) => {
+            // TODO: broken test as the browser tries to enter the clicked page
+            it.skip("should submit form", async () => {
+                const fixture = await createFixture({ submit: true });
+                await doSubmit(fixture);
+                expect(fixture.spy).toHaveReceivedEventTimes(1);
+            });
+            it("should only submit form if `submit` attr is `true`", async () => {
+                const fixture = await createFixture({ submit: false });
+                await doSubmit(fixture);
+                expect(fixture.spy).toHaveReceivedEventTimes(0);
+            });
+            it("should not submit form when `disabled`", async () => {
+                const fixture = await createFixture({ submit: true, disabled: true });
+                await doSubmit(fixture);
+                expect(fixture.spy).toHaveReceivedEventTimes(0);
+                fixture.button.removeAttribute("disabled");
+                await fixture.page.waitForChanges();
+                await doSubmit(fixture);
+                expect(fixture.spy).toHaveReceivedEventTimes(1);
+            });
+            // TODO: broken test as the browser tries to enter the clicked page
+            it.skip("should not not submit if rendered as a link", async () => {
+                const fixture = await createFixture({ submit: true, url: "test.html" });
+                await doSubmit(fixture);
+                expect(fixture.spy).toHaveReceivedEventTimes(0);
+            });
+        });
+        // TODO: broken test as the browser tries to enter the submit url
+        it.skip("supports supplying name and value", async () => {
+            const page = await createPage(`
         <form method="GET">
           <duet-input name="name" label="name" value="nick"></duet-input>
           <duet-button submit name="button" value="1">Submit 1</duet-button>
           <duet-button id="click-me" submit name="button" value="2">Submit 2</duet-button>
         </form>
       `);
-      // funnel submitted form data through window object for later assertion
-      await page.$eval("form", (form) => {
-        form.addEventListener("submit", (e) => {
-          e.preventDefault();
-          const formData = new FormData(e.target);
-          formData.append(e.submitter.name, e.submitter.value);
-          // @ts-ignore
-          window.testData = Object.fromEntries(formData);
+            // funnel submitted form data through window object for later assertion
+            await page.$eval("form", (form) => {
+                form.addEventListener("submit", (e) => {
+                    e.preventDefault();
+                    const formData = new FormData(e.target);
+                    formData.append(e.submitter.name, e.submitter.value);
+                    // @ts-ignore
+                    window.testData = Object.fromEntries(formData);
+                });
+            });
+            const button = await page.find("duet-button#click-me");
+            await button.click();
+            await page.waitForChanges();
+            const data = await page.evaluate(() => window["testData"]);
+            expect(data).toEqual({
+                name: "nick",
+                button: "2",
+            });
         });
-      });
-      const button = await page.find("duet-button#click-me");
-      await button.click();
-      await page.waitForChanges();
-      const data = await page.evaluate(() => window["testData"]);
-      expect(data).toEqual({
-        name: "nick",
-        button: "2",
-      });
-    });
-  });
+    });
 });