@duetds/components 7.0.13 → 7.1.1

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

@@ -0,0 +1,16 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+describe("duet-tab", () => {
+  it("should render a tab", async () => {
+    const page = await createPage("<duet-tab></duet-tab>");
+    const component = await page.find("duet-tab");
+    expect(component).not.toBeNull();
+  });
+  it("should provide a property that makes the tab selected", async () => {
+    const page = await createPage(`<duet-tab selected></duet-tab>`);
+    const element = await page.find("duet-tab .duet-tab");
+    expect(element).toHaveClass("selected");
+  });
+});

package/lib/collection/components/duet-tab/duet-tab.js

@@ -3,6 +3,7 @@
  */
 import { Build, h } from "@stencil/core";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLocaleString, } from "../../utils/language-utils";
+import { nudge } from "../../utils/nudge";
 export class DuetTab {
   constructor() {
     this.label = undefined;
@@ -17,6 +18,9 @@ export class DuetTab {
   /**
    * Component lifecycle events.
    */
+  componentDidLoad() {
+    nudge(this);
+  }
   connectedCallback() {
     connectLanguageChangeObserver(this, { prop: "accessibleDescription", defaults: "accessibleDescriptionDefault" });
   }
@@ -106,7 +110,8 @@ export class DuetTab {
           "references": {
             "DuetLangObject": {
               "location": "import",
-              "path": "../../utils/language-utils"
+              "path": "../../utils/language-utils",
+              "id": "src/utils/language-utils.ts::DuetLangObject"
             }
           }
         },
@@ -146,4 +151,5 @@ export class DuetTab {
       }
     };
   }
+  static get elementRef() { return "element"; }
 }

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

@@ -0,0 +1,108 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+describe("duet-tab-group", () => {
+  it("should render a tab", async () => {
+    const page = await createPage(`
+      <duet-tab-group>
+        <duet-tab label="test"></duet-tab>
+      </duet-tab-group>
+    `);
+    const component = await page.find("duet-tab-group");
+    expect(component).not.toBeNull();
+    expect(component).toHaveClass("hydrated");
+  });
+  it("should provide a property that switches the theme", async () => {
+    const page = await createPage(`
+      <duet-tab-group theme="turva">
+        <duet-tab label="test"></duet-tab>
+      </duet-tab-group>
+    `);
+    const element = await page.find("duet-tab-group >>> .duet-tab-group");
+    expect(element).toHaveClass("duet-theme-turva");
+  });
+  it("should provide a property that removes the margin of the component", async () => {
+    const page = await createPage(`
+      <duet-tab-group margin="none">
+        <duet-tab label="test"></duet-tab>
+        <duet-tab label="test2"></duet-tab>
+      </duet-tab-group>
+    `);
+    const element = await page.find("duet-tab-group >>> .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-tab-group padding="none">
+        <duet-tab label="test"></duet-tab>
+        <duet-tab label="test2"></duet-tab>
+      </duet-tab-group>
+    `);
+    const element = await page.find("duet-tab-group >>> .duet-p-0");
+    expect(element).not.toBeNull();
+  });
+  it("creates unique IDs for for all buttons and panels", async () => {
+    const page = await createPage(`
+      <duet-tab-group>
+        <duet-tab label="Outer 1" selected>Outer tab 1</duet-tab>
+        <duet-tab label="Outer 2">
+          Outer tab 2
+          <duet-tab-group>
+            <duet-tab label="Inner 1" selected>Inner tab 1</duet-tab>
+            <duet-tab label="Inner 2">Inner tab 2</duet-tab>
+            <duet-tab label="Inner 3">Inner tab 3</duet-tab>
+          </duet-tab-group>
+        </duet-tab>
+        <duet-tab label="Outer 3">Outer tab 3</duet-tab>
+      </duet-tab-group>
+    `);
+    const buttons = await page.findAll(`duet-tab-group >>> [role="tablist"] button`);
+    const panels = await page.findAll(`duet-tab-group >>> duet-tab`);
+    for (const button of buttons) {
+      const matches = await page.findAll(`duet-tab-group >>> #${button.id}`);
+      expect(matches.length).toBe(1);
+    }
+    for (const panel of panels) {
+      const matches = await page.findAll(`duet-tab-group >>> #${panel.id}`);
+      expect(matches.length).toBe(1);
+    }
+  });
+  it("should propagate accessible-description to internal button element", async () => {
+    const ariaString = "accessible-description-test";
+    const page = await createPage(`
+      <duet-tab-group variation="plain">
+        <duet-tab label="test2" class="test" accessible-description="${ariaString}">Outer tab 1 content</duet-tab>
+      </duet-tab-group>
+    `);
+    await page.waitForChanges();
+    const testString = await page.evaluate(() => {
+      const element = document
+        .querySelector("duet-tab-group")
+        .shadowRoot.querySelector("button")
+        .getAttribute("aria-description");
+      return element;
+    });
+    expect(testString).toEqualText(ariaString);
+  });
+  describe("events", () => {
+    it("should raise events on tab change", async () => {
+      const page = await createPage(`
+        <duet-tab-group padding="none">
+          <duet-tab label="test" class="test1"></duet-tab>
+          <duet-tab label="test2"></duet-tab>
+        </duet-tab-group>
+      `);
+      const tabGroup = await page.find("duet-tab-group");
+      const tabs = await page.findAll("duet-tab-group >>> button");
+      const tab = tabs.find(t => t.innerText === "test2");
+      const changeSpy = await tabGroup.spyOnEvent("duetChange");
+      const tabChangeSpy = await tabGroup.spyOnEvent("duetTabChange");
+      await tab.click();
+      await page.waitForChanges();
+      const expectedEvent = { value: 1, component: "duet-tab-group" };
+      expect(changeSpy).toHaveReceivedEventDetail(expectedEvent);
+      expect(tabChangeSpy).toHaveReceivedEventDetail(expectedEvent);
+    });
+  });
+});

package/lib/collection/components/duet-tab-group/duet-tab-group.js

@@ -6,6 +6,7 @@ import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { isArrowDownKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey } from "../../utils/keyboard-utils";
 import { getLanguage, getLocaleString } from "../../utils/language-utils";
+import { nudge } from "../../utils/nudge";
 /**
  * @part ${identifier}-button - piercing selector for styling tab buttons
  * @part ${identifier}-button--selected - piercing selector for styling selected tab button
@@ -118,6 +119,7 @@ export class DuetTabGroup {
   }
   componentDidLoad() {
     this.scrollToActive();
+    nudge(this);
   }
   /**
    * This method allows you to open any of the tabs by calling the method and
@@ -242,7 +244,8 @@ export class DuetTabGroup {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -319,7 +322,8 @@ export class DuetTabGroup {
           "references": {
             "DuetTabVariation": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
+              "id": "src/components/duet-tab-group/duet-tab-group.tsx::DuetTabVariation"
             }
           }
         },
@@ -342,7 +346,8 @@ export class DuetTabGroup {
           "references": {
             "DuetLanguage": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetLanguage"
             }
           }
         },
@@ -371,7 +376,8 @@ export class DuetTabGroup {
           "references": {
             "DuetLangObject": {
               "location": "import",
-              "path": "../../utils/language-utils"
+              "path": "../../utils/language-utils",
+              "id": "src/utils/language-utils.ts::DuetLangObject"
             }
           }
         },
@@ -454,7 +460,8 @@ export class DuetTabGroup {
           "references": {
             "DuetMargin": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetMargin"
             }
           }
         },
@@ -477,7 +484,8 @@ export class DuetTabGroup {
           "references": {
             "DuetPadding": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetPadding"
             }
           }
         },
@@ -555,7 +563,8 @@ export class DuetTabGroup {
           "references": {
             "DuetTabGroupEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
+              "id": "src/components/duet-tab-group/duet-tab-group.tsx::DuetTabGroupEvent"
             }
           }
         }
@@ -575,7 +584,8 @@ export class DuetTabGroup {
           "references": {
             "DuetTabGroupEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
+              "id": "src/components/duet-tab-group/duet-tab-group.tsx::DuetTabGroupEvent"
             }
           }
         }
@@ -595,7 +605,8 @@ export class DuetTabGroup {
           "references": {
             "DuetTabGroupEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
+              "id": "src/components/duet-tab-group/duet-tab-group.tsx::DuetTabGroupEvent"
             }
           }
         }
@@ -612,11 +623,13 @@ export class DuetTabGroup {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "DuetTabGroupEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
+              "id": "src/components/duet-tab-group/duet-tab-group.tsx::DuetTabGroupEvent"
             }
           },
           "return": "Promise<void>"
@@ -632,7 +645,8 @@ export class DuetTabGroup {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"

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

@@ -0,0 +1,95 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+describe("duet-table", () => {
+  let page;
+  let table;
+  const HEADING_1 = "Valtuutettu";
+  const HEADING_2 = "Salkun nimi";
+  beforeEach(async () => {
+    page = await createPage(`
+      <meta charset="utf-8" />
+      <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/@duetds/fonts@1.3.12/lib/localtapiola.css' />
+      <duet-table breakpoint="large">
+        <table>
+          <thead>
+            <tr>
+              <th>${HEADING_1}</th>
+              <th>${HEADING_2}</th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>
+                Hermanni Mikkola<br />
+                10.10.1999
+              </td>
+              <td class="foo">
+                Antin salkku<br />
+                <duet-link url="/">Siirry salkkuun ›</duet-link>
+              </td>
+              <td>
+                <duet-button margin="none" padding="none" icon="action-delete" variation="plain">
+                  Delete
+                </duet-button>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                Jukka-Pekka Routakorpi-Salomaa<br />
+                10.11.1988
+              </td>
+              <td>
+                Justiinan ja Jukka-Pekan yhteinen salkku 1234<br />
+                <duet-link url="/">Siirry salkkuun ›</duet-link>
+              </td>
+              <td>
+                <duet-button margin="none" padding="none" icon="action-delete" variation="plain">
+                  Delete
+                </duet-button>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                Veera Mikkola<br />
+                01.01.2001
+              </td>
+              <td>
+                Vapun rahastot<br />
+                <duet-link url="/">Siirry salkkuun ›</duet-link>
+              </td>
+              <td>
+                <duet-button margin="none" padding="none" icon="action-delete" variation="plain">
+                  Delete
+                </duet-button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </duet-table>
+    `);
+    table = await page.find("duet-table");
+  });
+  it("renders", async () => {
+    expect(table).toHaveClass("hydrated");
+  });
+  it("adds column heading span to each cell", async () => {
+    let cells = await table.findAll("tbody td:nth-child(1)");
+    cells.forEach(async (td) => {
+      const span = await td.find("span.duet-table-cell-heading");
+      expect(span.textContent).toEqual(HEADING_1);
+    });
+    cells = await table.findAll("tbody td:nth-child(2)");
+    cells.forEach(async (td) => {
+      const span = await td.find("span.duet-table-cell-heading");
+      expect(span.textContent).toEqual(HEADING_2);
+    });
+    cells = await table.findAll("tbody td:nth-child(3)");
+    cells.forEach(async (td) => {
+      const span = await td.find("span.duet-table-cell-heading");
+      expect(span).toBeNull();
+    });
+  });
+});

package/lib/collection/components/duet-table/duet-table.js

@@ -143,7 +143,8 @@ export class DuetTable {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -165,7 +166,8 @@ export class DuetTable {
           "references": {
             "DuetMargin": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetMargin"
             }
           }
         },
@@ -188,7 +190,8 @@ export class DuetTable {
           "references": {
             "DuetTableVariant": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTableVariant"
             }
           }
         },
@@ -229,7 +232,8 @@ export class DuetTable {
           "references": {
             "DuetTableStickyDistance": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTableStickyDistance"
             }
           }
         },
@@ -252,7 +256,8 @@ export class DuetTable {
           "references": {
             "DuetTableBreakpoint": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTableBreakpoint"
             }
           }
         },

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

@@ -0,0 +1,199 @@
+/*!
+ * Built with Duet Design System
+ */
+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");
+  });
+});