@duetds/components 8.0.5 → 8.1.0

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

@@ -3,197 +3,197 @@
  */
 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");
-  });
+    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");
+    });
 });