@duetds/components 8.0.6 → 8.1.0

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

@@ -3,182 +3,182 @@
  */
 import { createPage } from "../../utils/test-utils";
 describe("duet-choice", () => {
-  function isElementVisible(page, selector) {
-    return page.$eval(selector, (element) => {
-      if (!element) {
-        return false;
-      }
-      return !!(element.offsetWidth || element.offsetHeight || element.getClientRects().length);
-    });
-  }
-  it("has the correct tabbing order", async () => {
-    const page = await createPage(`
+    function isElementVisible(page, selector) {
+        return page.$eval(selector, (element) => {
+            if (!element) {
+                return false;
+            }
+            return !!(element.offsetWidth || element.offsetHeight || element.getClientRects().length);
+        });
+    }
+    it("has the correct tabbing order", async () => {
+        const page = await createPage(`
       <duet-choice theme="turva">
           <duet-paragraph slot="info">some text <a href="http://www.google.com">google</a></duet-paragraph>
       </duet-choice>
       `);
-    expect(await isElementVisible(page, "duet-paragraph")).toBe(false);
-    await page.keyboard.press("Tab");
-    await page.keyboard.press("Tab");
-    await page.keyboard.press("Space");
-    await page.waitForChanges();
-    expect(await isElementVisible(page, "duet-paragraph")).toBe(true);
-    await page.keyboard.down("Shift");
-    await page.keyboard.press("Tab");
-    await page.keyboard.up("Shift");
-    await page.keyboard.press("Space");
-    await page.waitForChanges();
-    expect(await isElementVisible(page, "duet-paragraph")).toBe(false);
-  });
-  it("should render a choice button", async () => {
-    const page = await createPage(`<duet-choice></duet-choice>`);
-    const component = await page.find("duet-choice");
-    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-choice margin="none"></duet-choice>`);
-    const element = await page.find(".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-choice padding="none"></duet-choice>`);
-    const element = await page.find(".duet-p-0");
-    expect(element).not.toBeNull();
-  });
-  it("should provide a property that renders label", async () => {
-    const page = await createPage(`<duet-choice label="test"></duet-choice>`);
-    const element = await page.find("duet-choice label");
-    expect(element.innerText).toEqual("test");
-  });
-  it("should provide a property that switches the theme", async () => {
-    const page = await createPage(`<duet-choice theme="turva"><div slot="info">some text</div></duet-choice>`);
-    const element = await page.find("duet-choice");
-    expect(element).toHaveClass("duet-theme-turva");
-    const elementFlex = await page.find("duet-choice .duet-choice-card-flextainer");
-    expect(elementFlex).toHaveClass("duet-theme-turva");
-    const elementButton = await page.find("duet-choice button");
-    expect(elementButton).toHaveClass("duet-theme-turva");
-  });
-  it("should provide a property that makes the choice disabled", async () => {
-    const page = await createPage(`<duet-choice disabled></duet-choice>`);
-    const element = await page.find("duet-choice input");
-    expect(element.getAttribute("disabled")).not.toBeNull();
-  });
-  it("should provide a property that adds an ID for the choice", async () => {
-    const page = await createPage(`<duet-choice identifier="test"></duet-choice>`);
-    const element = await page.find("duet-choice input");
-    expect(element.getAttribute("id")).toEqual("test");
-  });
-  it("should provide a property that checks the choice", async () => {
-    const page = await createPage(`<duet-choice checked></duet-choice>`);
-    const element = (await page.find("duet-choice input"));
-    expect(element.checked).not.toBeNull();
-  });
-  it("should provide a property that adds value for the choice", async () => {
-    const page = await createPage(`<duet-choice value="test"></duet-choice>`);
-    const element = await page.find("duet-choice input");
-    expect(element.getAttribute("value")).not.toBeNull();
-  });
-  it("should provide a property that adds name for the choice", async () => {
-    const page = await createPage(`<duet-choice name="test"></duet-choice>`);
-    const element = await page.find("duet-choice input");
-    expect(element.getAttribute("name")).not.toBeNull();
-  });
-  it("should provide a property that changes the type of the choice", async () => {
-    const page = await createPage(`<duet-choice type="radio"></duet-choice>`);
-    const element = await page.find("duet-choice input[type=radio]");
-    expect(element).not.toBeNull();
-  });
-  it("should provide a property that makes the choice collapsible", async () => {
-    const page = await createPage(`<duet-choice collapsible></duet-choice>`);
-    const element = await page.find("duet-choice .duet-choice-card-collapsible");
-    expect(element).not.toBeNull();
-  });
-  it("should provide a property that makes the collapsible choice always open", async () => {
-    const page = await createPage(`<duet-choice collapsible collapsible-force-expanded>Content</duet-choice>`);
-    const elementHeight = await page.evaluate(() => {
-      const content = document.querySelector(".duet-choice-card-collapsible");
-      return content.getBoundingClientRect().height;
-    });
-    expect(elementHeight).toBeGreaterThan(0);
-  });
-  it.skip("should add expanded to label text, when checked and collapsible", async () => {
-    // changes in the a11y has invalidated this test - revisit later
-    const strLabel = "Kissa";
-    const page = await createPage(`<duet-choice label="${strLabel}" checked collapsible></duet-choice>`);
-    const choice = await page.find("duet-choice");
-    await page.waitForChanges();
-    expect(choice.textContent).toBe(`${strLabel}, Expanded`);
-  });
-  it.skip("should add collapsed to label text, when unchecked and collapsible", async () => {
-    // changes in the a11y has invalidated this test - revisit later
-    const strLabel = "Kissa";
-    const page = await createPage(`<duet-choice label="${strLabel}" collapsible></duet-choice>`);
-    const choice = await page.find("duet-choice");
-    await page.waitForChanges();
-    expect(choice.textContent).toBe(`${strLabel}, Collapsed`);
-  });
-  it("should shortcircuit describedBy behaviour when accessibleDescribedBy is empty string", async () => {
-    const strLabel = "Kissa";
-    const page = await createPage(`<duet-choice label="${strLabel}" collapsible accessible-described-by=" "></duet-choice>`);
-    const choice = await page.find("duet-choice");
-    const input = await choice.find("input");
-    await page.waitForChanges();
-    expect(input.getAttribute("aria-describedby")).toBe(" ");
-  });
-  it("should shortcircuit describedBy behaviour when accessibleDescribedBy is 'false' string", async () => {
-    const strLabel = "Kissa";
-    const page = await createPage(`<duet-choice label="${strLabel}" collapsible accessible-described-by="false"></duet-choice>`);
-    const choice = await page.find("duet-choice");
-    const input = await choice.find("input");
-    await page.waitForChanges();
-    expect(input.getAttribute("aria-describedby")).toBe("false");
-  });
-  it("should provide a property that expands the choice to fill 100% width", async () => {
-    const page = await createPage(`<duet-choice expand></duet-choice>`);
-    const element = await page.find("duet-choice");
-    expect(element).toHaveClass("duet-expand");
-  });
-  it("should provide a property that adds icon to label", async () => {
-    const page = await createPage(`<duet-choice icon="category-pet-cat"></duet-choice>`);
-    const element = await page.find("duet-choice .duet-choice-card-icon");
-    expect(element).not.toBeNull();
-  });
-  it("should provide a property that adds caption", async () => {
-    const page = await createPage(`<duet-choice caption="foo"></duet-choice>`);
-    const element = await page.find("duet-choice duet-caption");
-    expect(element).not.toBeNull();
-  });
-  it("should only raise an event on user interaction, not when changing checked property programmatically", async () => {
-    const page = await createPage(`<duet-choice caption="foo"></duet-choice>`);
-    const choice = await page.find("duet-choice");
-    const changeEventSpy = await choice.spyOnEvent("duetChange");
-    choice.setProperty("checked", true);
-    await page.waitForChanges();
-    expect(changeEventSpy).not.toHaveReceivedEvent();
-    await choice.click();
-    expect(changeEventSpy).toHaveReceivedEvent();
-  });
-  it("should raise an event on focus", async () => {
-    const page = await createPage(`<duet-choice caption="foo"></duet-choice>`);
-    const choice = await page.find("duet-choice");
-    const focusEventSpy = await choice.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(`
+        expect(await isElementVisible(page, "duet-paragraph")).toBe(false);
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Space");
+        await page.waitForChanges();
+        expect(await isElementVisible(page, "duet-paragraph")).toBe(true);
+        await page.keyboard.down("Shift");
+        await page.keyboard.press("Tab");
+        await page.keyboard.up("Shift");
+        await page.keyboard.press("Space");
+        await page.waitForChanges();
+        expect(await isElementVisible(page, "duet-paragraph")).toBe(false);
+    });
+    it("should render a choice button", async () => {
+        const page = await createPage(`<duet-choice></duet-choice>`);
+        const component = await page.find("duet-choice");
+        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-choice margin="none"></duet-choice>`);
+        const element = await page.find(".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-choice padding="none"></duet-choice>`);
+        const element = await page.find(".duet-p-0");
+        expect(element).not.toBeNull();
+    });
+    it("should provide a property that renders label", async () => {
+        const page = await createPage(`<duet-choice label="test"></duet-choice>`);
+        const element = await page.find("duet-choice label");
+        expect(element.innerText).toEqual("test");
+    });
+    it("should provide a property that switches the theme", async () => {
+        const page = await createPage(`<duet-choice theme="turva"><div slot="info">some text</div></duet-choice>`);
+        const element = await page.find("duet-choice");
+        expect(element).toHaveClass("duet-theme-turva");
+        const elementFlex = await page.find("duet-choice .duet-choice-card-flextainer");
+        expect(elementFlex).toHaveClass("duet-theme-turva");
+        const elementButton = await page.find("duet-choice button");
+        expect(elementButton).toHaveClass("duet-theme-turva");
+    });
+    it("should provide a property that makes the choice disabled", async () => {
+        const page = await createPage(`<duet-choice disabled></duet-choice>`);
+        const element = await page.find("duet-choice input");
+        expect(element.getAttribute("disabled")).not.toBeNull();
+    });
+    it("should provide a property that adds an ID for the choice", async () => {
+        const page = await createPage(`<duet-choice identifier="test"></duet-choice>`);
+        const element = await page.find("duet-choice input");
+        expect(element.getAttribute("id")).toEqual("test");
+    });
+    it("should provide a property that checks the choice", async () => {
+        const page = await createPage(`<duet-choice checked></duet-choice>`);
+        const element = (await page.find("duet-choice input"));
+        expect(element.checked).not.toBeNull();
+    });
+    it("should provide a property that adds value for the choice", async () => {
+        const page = await createPage(`<duet-choice value="test"></duet-choice>`);
+        const element = await page.find("duet-choice input");
+        expect(element.getAttribute("value")).not.toBeNull();
+    });
+    it("should provide a property that adds name for the choice", async () => {
+        const page = await createPage(`<duet-choice name="test"></duet-choice>`);
+        const element = await page.find("duet-choice input");
+        expect(element.getAttribute("name")).not.toBeNull();
+    });
+    it("should provide a property that changes the type of the choice", async () => {
+        const page = await createPage(`<duet-choice type="radio"></duet-choice>`);
+        const element = await page.find("duet-choice input[type=radio]");
+        expect(element).not.toBeNull();
+    });
+    it("should provide a property that makes the choice collapsible", async () => {
+        const page = await createPage(`<duet-choice collapsible></duet-choice>`);
+        const element = await page.find("duet-choice .duet-choice-card-collapsible");
+        expect(element).not.toBeNull();
+    });
+    it("should provide a property that makes the collapsible choice always open", async () => {
+        const page = await createPage(`<duet-choice collapsible collapsible-force-expanded>Content</duet-choice>`);
+        const elementHeight = await page.evaluate(() => {
+            const content = document.querySelector(".duet-choice-card-collapsible");
+            return content.getBoundingClientRect().height;
+        });
+        expect(elementHeight).toBeGreaterThan(0);
+    });
+    it.skip("should add expanded to label text, when checked and collapsible", async () => {
+        // changes in the a11y has invalidated this test - revisit later
+        const strLabel = "Kissa";
+        const page = await createPage(`<duet-choice label="${strLabel}" checked collapsible></duet-choice>`);
+        const choice = await page.find("duet-choice");
+        await page.waitForChanges();
+        expect(choice.textContent).toBe(`${strLabel}, Expanded`);
+    });
+    it.skip("should add collapsed to label text, when unchecked and collapsible", async () => {
+        // changes in the a11y has invalidated this test - revisit later
+        const strLabel = "Kissa";
+        const page = await createPage(`<duet-choice label="${strLabel}" collapsible></duet-choice>`);
+        const choice = await page.find("duet-choice");
+        await page.waitForChanges();
+        expect(choice.textContent).toBe(`${strLabel}, Collapsed`);
+    });
+    it("should shortcircuit describedBy behaviour when accessibleDescribedBy is empty string", async () => {
+        const strLabel = "Kissa";
+        const page = await createPage(`<duet-choice label="${strLabel}" collapsible accessible-described-by=" "></duet-choice>`);
+        const choice = await page.find("duet-choice");
+        const input = await choice.find("input");
+        await page.waitForChanges();
+        expect(input.getAttribute("aria-describedby")).toBe(" ");
+    });
+    it("should shortcircuit describedBy behaviour when accessibleDescribedBy is 'false' string", async () => {
+        const strLabel = "Kissa";
+        const page = await createPage(`<duet-choice label="${strLabel}" collapsible accessible-described-by="false"></duet-choice>`);
+        const choice = await page.find("duet-choice");
+        const input = await choice.find("input");
+        await page.waitForChanges();
+        expect(input.getAttribute("aria-describedby")).toBe("false");
+    });
+    it("should provide a property that expands the choice to fill 100% width", async () => {
+        const page = await createPage(`<duet-choice expand></duet-choice>`);
+        const element = await page.find("duet-choice");
+        expect(element).toHaveClass("duet-expand");
+    });
+    it("should provide a property that adds icon to label", async () => {
+        const page = await createPage(`<duet-choice icon="category-pet-cat"></duet-choice>`);
+        const element = await page.find("duet-choice .duet-choice-card-icon");
+        expect(element).not.toBeNull();
+    });
+    it("should provide a property that adds caption", async () => {
+        const page = await createPage(`<duet-choice caption="foo"></duet-choice>`);
+        const element = await page.find("duet-choice duet-caption");
+        expect(element).not.toBeNull();
+    });
+    it("should only raise an event on user interaction, not when changing checked property programmatically", async () => {
+        const page = await createPage(`<duet-choice caption="foo"></duet-choice>`);
+        const choice = await page.find("duet-choice");
+        const changeEventSpy = await choice.spyOnEvent("duetChange");
+        choice.setProperty("checked", true);
+        await page.waitForChanges();
+        expect(changeEventSpy).not.toHaveReceivedEvent();
+        await choice.click();
+        expect(changeEventSpy).toHaveReceivedEvent();
+    });
+    it("should raise an event on focus", async () => {
+        const page = await createPage(`<duet-choice caption="foo"></duet-choice>`);
+        const choice = await page.find("duet-choice");
+        const focusEventSpy = await choice.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-choice caption="foo"></duet-choice>
       <button>another focusable element</button>
     `);
-    const choice = await page.find("duet-choice");
-    const blurEventSpy = await choice.spyOnEvent("duetFocus");
-    // focus then blur the checkbox
-    await page.keyboard.press("Tab");
-    await page.keyboard.press("Tab");
-    await page.waitForChanges();
-    expect(blurEventSpy).toHaveReceivedEvent();
-  });
+        const choice = await page.find("duet-choice");
+        const blurEventSpy = await choice.spyOnEvent("duetFocus");
+        // focus then blur the checkbox
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        expect(blurEventSpy).toHaveReceivedEvent();
+    });
 });