@duetds/components 8.0.6 → 8.1.0

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

@@ -3,199 +3,199 @@
  */
 import { createPage } from "../../utils/test-utils";
 describe("duet-input", () => {
-  it("should render an input", async () => {
-    const page = await createPage(`<duet-input></duet-input>`);
-    const component = await page.find("duet-input");
-    expect(component).not.toBeNull();
-    expect(component).toHaveClass("hydrated");
-  });
-  it("should provide a property that renders label", async () => {
-    const page = await createPage(`<duet-input label="test"></duet-input>`);
-    const element = await page.find("duet-input 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-input margin="none"></duet-input>`);
-    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-input accessible-controls="test"></duet-input>`);
-    const element = await page.find("duet-input .duet-input");
-    expect(element.getAttribute("aria-controls")).toEqual("test");
-  });
-  it("should associate the tooltip with the label", async () => {
-    const page = await createPage(`<duet-input tooltip="tooltip" />`);
-    const label = await page.find("duet-input 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 provide a property that renders aria-activedescendant", async () => {
-    const page = await createPage(`<duet-input accessible-active-descendant="test"></duet-input>`);
-    const element = await page.find("duet-input .duet-input");
-    expect(element.getAttribute("aria-activedescendant")).not.toBeNull();
-  });
-  it("should provide a property that renders aria-autocomplete", async () => {
-    const page = await createPage(`<duet-input accessible-autocomplete="test"></duet-input>`);
-    const element = await page.find("duet-input .duet-input");
-    expect(element.getAttribute("aria-autocomplete")).not.toBeNull();
-  });
-  it("should provide a property that renders aria-owns", async () => {
-    const page = await createPage(`<duet-input accessible-owns="test"></duet-input>`);
-    const element = await page.find("duet-input .duet-input");
-    expect(element.getAttribute("aria-owns")).not.toBeNull();
-  });
-  it("should provide a property that renders input in different types", async () => {
-    const page = await createPage(`<duet-input type="email"></duet-input>`);
-    const element = await page.find("duet-input .duet-input");
-    expect(element.getAttribute("type")).toEqual("email");
-  });
-  it("should provide a property that switches the theme", async () => {
-    const page = await createPage(`<duet-input theme="turva"></duet-input>`);
-    const element = await page.find("duet-input .duet-input-container");
-    expect(element).toHaveClass("duet-theme-turva");
-  });
-  it("should provide a property that expands the input to fill 100% width", async () => {
-    const page = await createPage(`<duet-input expand></duet-input>`);
-    const element = await page.find("duet-input");
-    expect(element).toHaveClass("duet-expand");
-  });
-  it("should provide a property that makes the input disabled", async () => {
-    const page = await createPage(`<duet-input disabled></duet-input>`);
-    const element = await page.find("duet-input .duet-input");
-    expect(element.getAttribute("disabled")).not.toBeNull();
-  });
-  it("should provide a property that adds an ID for the input", async () => {
-    const page = await createPage(`<duet-input identifier="test"></duet-input>`);
-    const element = await page.find("duet-input .duet-input");
-    expect(element.getAttribute("id")).toEqual("test");
-  });
-  it("should provide a property that makes input required", async () => {
-    const page = await createPage(`<duet-input required></duet-input>`);
-    const element = await page.find("duet-input .duet-input");
-    expect(element.getAttribute("required")).not.toBeNull();
-  });
-  it("should provide a property that makes the label hidden", async () => {
-    const page = await createPage(`<duet-input label-hidden></duet-input>`);
-    const element = await page.find("duet-input .duet-input-container");
-    expect(element).toHaveClass("duet-label-hidden");
-  });
-  it("should provide a property that adds name for the input", async () => {
-    const page = await createPage(`<duet-input name="test"></duet-input>`);
-    const element = await page.find("duet-input .duet-input");
-    expect(element.getAttribute("name")).not.toBeNull();
-  });
-  it("should provide a property that adds pattern regex for the input", async () => {
-    const page = await createPage(`<duet-input pattern="test"></duet-input>`);
-    const element = await page.find("duet-input .duet-input");
-    expect(element.getAttribute("pattern")).not.toBeNull();
-  });
-  it("should provide a property that adds placeholder for the input", async () => {
-    const page = await createPage(`<duet-input placeholder="test"></duet-input>`);
-    const element = await page.find("duet-input .duet-input");
-    expect(element.getAttribute("placeholder")).not.toBeNull();
-  });
-  it("should provide a property that adds role for the input", async () => {
-    const page = await createPage(`<duet-input role="test"></duet-input>`);
-    const element = await page.find("duet-input .duet-input");
-    expect(element.getAttribute("role")).not.toBeNull();
-  });
-  it("should provide a property that modifies autocomplete attribute", async () => {
-    const page = await createPage(`<duet-input auto-complete="test"></duet-input>`);
-    const element = await page.find("duet-input .duet-input");
-    expect(element.getAttribute("autocomplete")).toEqual("test");
-  });
-  it("should provide a property that adds an error", async () => {
-    const page = await createPage(`<duet-input error="test"></duet-input>`);
-    const element = await page.find("duet-input .duet-input-help");
-    expect(element).not.toBeNull();
-  });
-  it("should provide a property that sets tooltip", async () => {
-    const page = await createPage(`<duet-input tooltip="test"></duet-input>`);
-    const element = await page.find("duet-input duet-tooltip");
-    expect(element).not.toBeNull();
-  });
-  it("should not render tooltip if the property isn’t used", async () => {
-    const page = await createPage(`<duet-input id="test"></duet-input>`);
-    const element = await page.find("duet-input duet-tooltip");
-    expect(element).toBeNull();
-  });
-  it("should provide a property that sets custom icon", async () => {
-    const page = await createPage(`<duet-input icon="form-location"></duet-input>`);
-    const element = await page.find("duet-input .duet-input-icon");
-    expect(element).not.toBeNull();
-  });
-  it("should not render custom icon if the option is not used", async () => {
-    const page = await createPage(`<duet-input label="test"></duet-input>`);
-    const element = await page.find("duet-input .duet-input-icon");
-    expect(element).toBeNull();
-  });
-  it("raises duetChange event when value has changed", async () => {
-    const page = await createPage(`<duet-input></duet-input>`);
-    const element = await page.find("duet-input");
-    const changeSpy = await element.spyOnEvent("duetChange");
-    await page.keyboard.press("Tab");
-    await page.keyboard.type("hello");
-    await page.waitForChanges();
-    expect(changeSpy.lastEvent.detail).toMatchObject({
-      value: "hello",
-      component: "duet-input",
-    });
-  });
-  it("raises a duetInput even on input", async () => {
-    const page = await createPage(`<duet-input></duet-input>`);
-    const element = await page.find("duet-input");
-    const inputSpy = await element.spyOnEvent("duetInput");
-    await page.keyboard.press("Tab");
-    await page.keyboard.type("hello");
-    await page.waitForChanges();
-    expect(inputSpy.lastEvent.detail).toMatchObject({
-      value: "hello",
-      component: "duet-input",
-    });
-  });
-  it("raises duetFocus event when input is focused", async () => {
-    const page = await createPage(`<duet-input></duet-input>`);
-    const element = await page.find("duet-input");
-    const focusSpy = await element.spyOnEvent("duetFocus");
-    await page.keyboard.press("Tab");
-    await page.waitForChanges();
-    expect(focusSpy).toHaveReceivedEvent();
-  });
-  it("raises a duetBlur event when input is blurred", async () => {
-    const page = await createPage(`<duet-input></duet-input>`);
-    const element = await page.find("duet-input");
-    const focusSpy = await element.spyOnEvent("duetBlur");
-    // tab in...
-    await page.keyboard.press("Tab");
-    await page.waitForChanges();
-    // tab out...
-    await page.keyboard.press("Tab");
-    await page.waitForChanges();
-    expect(focusSpy).toHaveReceivedEvent();
-  });
-  it("allows characters to be disallowed", async () => {
-    const page = await createPage(`<duet-input label="numbers only" disallow-pattern="[^0-9]"></duet-input>`);
-    const element = await page.find("duet-input");
-    const input = await page.find("duet-input .duet-input");
-    // 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");
-  });
+    it("should render an input", async () => {
+        const page = await createPage(`<duet-input></duet-input>`);
+        const component = await page.find("duet-input");
+        expect(component).not.toBeNull();
+        expect(component).toHaveClass("hydrated");
+    });
+    it("should provide a property that renders label", async () => {
+        const page = await createPage(`<duet-input label="test"></duet-input>`);
+        const element = await page.find("duet-input 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-input margin="none"></duet-input>`);
+        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-input accessible-controls="test"></duet-input>`);
+        const element = await page.find("duet-input .duet-input");
+        expect(element.getAttribute("aria-controls")).toEqual("test");
+    });
+    it("should associate the tooltip with the label", async () => {
+        const page = await createPage(`<duet-input tooltip="tooltip" />`);
+        const label = await page.find("duet-input 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 provide a property that renders aria-activedescendant", async () => {
+        const page = await createPage(`<duet-input accessible-active-descendant="test"></duet-input>`);
+        const element = await page.find("duet-input .duet-input");
+        expect(element.getAttribute("aria-activedescendant")).not.toBeNull();
+    });
+    it("should provide a property that renders aria-autocomplete", async () => {
+        const page = await createPage(`<duet-input accessible-autocomplete="test"></duet-input>`);
+        const element = await page.find("duet-input .duet-input");
+        expect(element.getAttribute("aria-autocomplete")).not.toBeNull();
+    });
+    it("should provide a property that renders aria-owns", async () => {
+        const page = await createPage(`<duet-input accessible-owns="test"></duet-input>`);
+        const element = await page.find("duet-input .duet-input");
+        expect(element.getAttribute("aria-owns")).not.toBeNull();
+    });
+    it("should provide a property that renders input in different types", async () => {
+        const page = await createPage(`<duet-input type="email"></duet-input>`);
+        const element = await page.find("duet-input .duet-input");
+        expect(element.getAttribute("type")).toEqual("email");
+    });
+    it("should provide a property that switches the theme", async () => {
+        const page = await createPage(`<duet-input theme="turva"></duet-input>`);
+        const element = await page.find("duet-input .duet-input-container");
+        expect(element).toHaveClass("duet-theme-turva");
+    });
+    it("should provide a property that expands the input to fill 100% width", async () => {
+        const page = await createPage(`<duet-input expand></duet-input>`);
+        const element = await page.find("duet-input");
+        expect(element).toHaveClass("duet-expand");
+    });
+    it("should provide a property that makes the input disabled", async () => {
+        const page = await createPage(`<duet-input disabled></duet-input>`);
+        const element = await page.find("duet-input .duet-input");
+        expect(element.getAttribute("disabled")).not.toBeNull();
+    });
+    it("should provide a property that adds an ID for the input", async () => {
+        const page = await createPage(`<duet-input identifier="test"></duet-input>`);
+        const element = await page.find("duet-input .duet-input");
+        expect(element.getAttribute("id")).toEqual("test");
+    });
+    it("should provide a property that makes input required", async () => {
+        const page = await createPage(`<duet-input required></duet-input>`);
+        const element = await page.find("duet-input .duet-input");
+        expect(element.getAttribute("required")).not.toBeNull();
+    });
+    it("should provide a property that makes the label hidden", async () => {
+        const page = await createPage(`<duet-input label-hidden></duet-input>`);
+        const element = await page.find("duet-input .duet-input-container");
+        expect(element).toHaveClass("duet-label-hidden");
+    });
+    it("should provide a property that adds name for the input", async () => {
+        const page = await createPage(`<duet-input name="test"></duet-input>`);
+        const element = await page.find("duet-input .duet-input");
+        expect(element.getAttribute("name")).not.toBeNull();
+    });
+    it("should provide a property that adds pattern regex for the input", async () => {
+        const page = await createPage(`<duet-input pattern="test"></duet-input>`);
+        const element = await page.find("duet-input .duet-input");
+        expect(element.getAttribute("pattern")).not.toBeNull();
+    });
+    it("should provide a property that adds placeholder for the input", async () => {
+        const page = await createPage(`<duet-input placeholder="test"></duet-input>`);
+        const element = await page.find("duet-input .duet-input");
+        expect(element.getAttribute("placeholder")).not.toBeNull();
+    });
+    it("should provide a property that adds role for the input", async () => {
+        const page = await createPage(`<duet-input role="test"></duet-input>`);
+        const element = await page.find("duet-input .duet-input");
+        expect(element.getAttribute("role")).not.toBeNull();
+    });
+    it("should provide a property that modifies autocomplete attribute", async () => {
+        const page = await createPage(`<duet-input auto-complete="test"></duet-input>`);
+        const element = await page.find("duet-input .duet-input");
+        expect(element.getAttribute("autocomplete")).toEqual("test");
+    });
+    it("should provide a property that adds an error", async () => {
+        const page = await createPage(`<duet-input error="test"></duet-input>`);
+        const element = await page.find("duet-input .duet-input-help");
+        expect(element).not.toBeNull();
+    });
+    it("should provide a property that sets tooltip", async () => {
+        const page = await createPage(`<duet-input tooltip="test"></duet-input>`);
+        const element = await page.find("duet-input duet-tooltip");
+        expect(element).not.toBeNull();
+    });
+    it("should not render tooltip if the property isn’t used", async () => {
+        const page = await createPage(`<duet-input id="test"></duet-input>`);
+        const element = await page.find("duet-input duet-tooltip");
+        expect(element).toBeNull();
+    });
+    it("should provide a property that sets custom icon", async () => {
+        const page = await createPage(`<duet-input icon="form-location"></duet-input>`);
+        const element = await page.find("duet-input .duet-input-icon");
+        expect(element).not.toBeNull();
+    });
+    it("should not render custom icon if the option is not used", async () => {
+        const page = await createPage(`<duet-input label="test"></duet-input>`);
+        const element = await page.find("duet-input .duet-input-icon");
+        expect(element).toBeNull();
+    });
+    it("raises duetChange event when value has changed", async () => {
+        const page = await createPage(`<duet-input></duet-input>`);
+        const element = await page.find("duet-input");
+        const changeSpy = await element.spyOnEvent("duetChange");
+        await page.keyboard.press("Tab");
+        await page.keyboard.type("hello");
+        await page.waitForChanges();
+        expect(changeSpy.lastEvent.detail).toMatchObject({
+            value: "hello",
+            component: "duet-input",
+        });
+    });
+    it("raises a duetInput even on input", async () => {
+        const page = await createPage(`<duet-input></duet-input>`);
+        const element = await page.find("duet-input");
+        const inputSpy = await element.spyOnEvent("duetInput");
+        await page.keyboard.press("Tab");
+        await page.keyboard.type("hello");
+        await page.waitForChanges();
+        expect(inputSpy.lastEvent.detail).toMatchObject({
+            value: "hello",
+            component: "duet-input",
+        });
+    });
+    it("raises duetFocus event when input is focused", async () => {
+        const page = await createPage(`<duet-input></duet-input>`);
+        const element = await page.find("duet-input");
+        const focusSpy = await element.spyOnEvent("duetFocus");
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        expect(focusSpy).toHaveReceivedEvent();
+    });
+    it("raises a duetBlur event when input is blurred", async () => {
+        const page = await createPage(`<duet-input></duet-input>`);
+        const element = await page.find("duet-input");
+        const focusSpy = await element.spyOnEvent("duetBlur");
+        // tab in...
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        // tab out...
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        expect(focusSpy).toHaveReceivedEvent();
+    });
+    it("allows characters to be disallowed", async () => {
+        const page = await createPage(`<duet-input label="numbers only" disallow-pattern="[^0-9]"></duet-input>`);
+        const element = await page.find("duet-input");
+        const input = await page.find("duet-input .duet-input");
+        // 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");
+    });
 });