@duetds/components 7.1.0 → 7.1.2

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

@@ -56,6 +56,8 @@ export class DuetHero {
     this.textCenter = false;
     this.leftAlign = false;
     this.image = "";
+    this.imageSize = "auto";
+    this.imagePosition = "auto";
     this.variation = "default";
     this.back = undefined;
     this.listItems = undefined;
@@ -113,8 +115,12 @@ export class DuetHero {
    */
   render() {
     const campaignOrSection = this.variation === "campaign" || this.variation === "section";
+    const imageSizeIsCover = this.imageSize === "cover";
+    const imagePositionIsCenter = this.imagePosition === "center";
     const styles = {
       backgroundImage: `url(${this.image})`,
+      backgroundSize: imageSizeIsCover ? "cover" : null,
+      backgroundPosition: imagePositionIsCenter ? "center" : null,
     };
     const buttonStyles = {
       transform: "translateX(-8px)",
@@ -170,7 +176,7 @@ export class DuetHero {
         "duet-hero-text-center": (this.textCenter && !this.leftAlign) || campaignOrSection,
         "duet-hero-left-align": this.leftAlign && !campaignOrSection,
         "duet-hero-narrow": this.layout === "narrow",
-      }, part: "duet-hero" }, campaignOrSection && this.image && (h("div", { class: "background-area" }, h("div", { class: "background-container" }, h("div", { class: "background" }, h("img", { src: this.image, alt: "", role: "presentation" })), h("div", { class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { class: { "background-area": true, [this.layout]: true } }, h("div", { class: { "background-container": true, [this.layout]: true } }, h("div", { class: { background: true, [this.layout]: true } }, h("div", { class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { class: { "brand-shape": true, [this.layout]: true } }), h("div", { class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", { class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }))), this.categoryIcon && (h("div", { class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { class: "background-area" }, h("div", { class: "background" }, h("div", { class: "background-mask" }), this.theme !== "turva" && h("div", { class: "brand-shape" }), h("div", { class: "brand-shaped-image" }, h("div", { class: "brand-shaped-image-wrapper" }, h("div", { class: "brand-shaped-image-bg", style: styles })))))), h("div", { class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { class: "duet-hero-image-mask" }, h("div", { class: "duet-hero-image-wrapper" }, h("div", { class: "duet-hero-image", style: styles })))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
+      }, part: "duet-hero" }, campaignOrSection && this.image && (h("div", { class: "background-area" }, h("div", { class: "background-container" }, h("div", { class: "background" }, h("img", { class: `${imageSizeIsCover ? "cover" : ""} ${imagePositionIsCenter ? "center" : ""}`, src: this.image, alt: "", role: "presentation" })), h("div", { class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { class: { "background-area": true, [this.layout]: true } }, h("div", { class: { "background-container": true, [this.layout]: true } }, h("div", { class: { background: true, [this.layout]: true } }, h("div", { class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { class: { "brand-shape": true, [this.layout]: true } }), h("div", { class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", { class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }))), this.categoryIcon && (h("div", { class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { class: "background-area" }, h("div", { class: "background" }, h("div", { class: "background-mask" }), this.theme !== "turva" && h("div", { class: "brand-shape" }), h("div", { class: "brand-shaped-image" }, h("div", { class: "brand-shaped-image-wrapper" }, h("div", { class: "brand-shaped-image-bg", style: styles })))))), h("div", { class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { class: "duet-hero-image-mask" }, h("div", { class: "duet-hero-image-wrapper" }, h("div", { class: "duet-hero-image", style: styles })))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
       this.processedBack && (h("div", { class: "duet-hero-back" }, h("duet-button", { style: buttonStyles, variation: "plain", icon: "action-arrow-left-small", theme: this.theme, iconSize: "small", color: buttonColor, padding: "none", margin: "none", fixed: true, url: this.processedBack.href, identifier: this.processedBack.id, onClick: event => this.handleClick(event, {
         label: this.processedBack.label,
         href: this.processedBack.href,
@@ -205,7 +211,8 @@ export class DuetHero {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -267,7 +274,8 @@ export class DuetHero {
           "references": {
             "DuetHeadingLevel": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetHeadingLevel"
             }
           }
         },
@@ -290,7 +298,8 @@ export class DuetHero {
           "references": {
             "DuetHeadingLevel": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetHeadingLevel"
             }
           }
         },
@@ -331,7 +340,8 @@ export class DuetHero {
           "references": {
             "DuetIconName": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetIconName"
             }
           }
         },
@@ -354,7 +364,8 @@ export class DuetHero {
           "references": {
             "DuetHeroIconSize": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-hero/duet-hero.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-hero/duet-hero.tsx",
+              "id": "src/components/duet-hero/duet-hero.tsx::DuetHeroIconSize"
             }
           }
         },
@@ -395,7 +406,8 @@ export class DuetHero {
           "references": {
             "DuetIconName": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetIconName"
             }
           }
         },
@@ -418,7 +430,8 @@ export class DuetHero {
           "references": {
             "DuetColor": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetColor"
             }
           }
         },
@@ -459,7 +472,8 @@ export class DuetHero {
           "references": {
             "DuetLanguage": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetLanguage"
             }
           }
         },
@@ -488,7 +502,8 @@ export class DuetHero {
           "references": {
             "DuetLangObject": {
               "location": "import",
-              "path": "../../utils/language-utils"
+              "path": "../../utils/language-utils",
+              "id": "src/utils/language-utils.ts::DuetLangObject"
             }
           }
         },
@@ -571,7 +586,8 @@ export class DuetHero {
           "references": {
             "DuetHeroButtonData": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-hero/duet-hero.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-hero/duet-hero.tsx",
+              "id": "src/components/duet-hero/duet-hero.tsx::DuetHeroButtonData"
             }
           }
         },
@@ -636,6 +652,42 @@ export class DuetHero {
         "reflect": false,
         "defaultValue": "\"\""
       },
+      "imageSize": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"auto\" | \"cover\"",
+          "resolved": "\"auto\" | \"cover\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Image sizing."
+        },
+        "attribute": "image-size",
+        "reflect": false,
+        "defaultValue": "\"auto\""
+      },
+      "imagePosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"auto\" | \"center\"",
+          "resolved": "\"auto\" | \"center\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Image position."
+        },
+        "attribute": "image-position",
+        "reflect": false,
+        "defaultValue": "\"auto\""
+      },
       "variation": {
         "type": "string",
         "mutable": false,
@@ -645,7 +697,8 @@ export class DuetHero {
           "references": {
             "DuetHeroVariation": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-hero/duet-hero.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-hero/duet-hero.tsx",
+              "id": "src/components/duet-hero/duet-hero.tsx::DuetHeroVariation"
             }
           }
         },
@@ -754,7 +807,8 @@ export class DuetHero {
           "references": {
             "DuetHeroClickEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-hero/duet-hero.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-hero/duet-hero.tsx",
+              "id": "src/components/duet-hero/duet-hero.tsx::DuetHeroClickEvent"
             }
           }
         }
@@ -774,7 +828,8 @@ export class DuetHero {
           "references": {
             "DuetHeroAnalyticsEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-hero/duet-hero.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-hero/duet-hero.tsx",
+              "id": "src/components/duet-hero/duet-hero.tsx::DuetHeroAnalyticsEvent"
             }
           }
         }

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

@@ -0,0 +1,32 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+describe("duet-icon", () => {
+  it("should render an icon", async () => {
+    const page = await createPage(`<duet-icon></duet-icon>`);
+    const component = await page.find("duet-icon");
+    expect(component).not.toBeNull();
+    expect(component).toHaveClass("hydrated");
+  });
+  it("should provide a property that switches the theme", async () => {
+    const page = await createPage(`<duet-icon theme="turva"></duet-icon>`);
+    const element = await page.find("duet-icon >>> .duet-icon");
+    expect(element).toHaveClass("duet-theme-turva");
+  });
+  it("should provide a property that changes the icon", async () => {
+    const page = await createPage(`<duet-icon name="action-arrow-right"></duet-icon>`);
+    const element = await page.find("duet-icon >>> svg");
+    expect(element).not.toBeNull();
+  });
+  it("should provide a property that changes the icon background", async () => {
+    const page = await createPage(`<duet-icon background="color-primary"></duet-icon>`);
+    const element = await page.find("duet-icon >>> .duet-icon-has-background");
+    expect(element).not.toBeNull();
+  });
+  it("should provide a property that changes the icon size", async () => {
+    const page = await createPage(`<duet-icon size="xx-large"></duet-icon>`);
+    const element = await page.find("duet-icon >>> .xx-large");
+    expect(element).not.toBeNull();
+  });
+});

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

@@ -117,7 +117,8 @@ export class DuetIcon {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -174,7 +175,8 @@ export class DuetIcon {
           "references": {
             "DuetIconName": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetIconName"
             }
           }
         },
@@ -197,7 +199,8 @@ export class DuetIcon {
           "references": {
             "DuetMargin": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetMargin"
             }
           }
         },
@@ -238,7 +241,8 @@ export class DuetIcon {
           "references": {
             "DuetColor": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetColor"
             }
           }
         },
@@ -261,7 +265,8 @@ export class DuetIcon {
           "references": {
             "DuetColor": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetColor"
             }
           }
         },
@@ -326,7 +331,8 @@ export class DuetIcon {
           "references": {
             "DuetIconSize": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-icon/duet-icon.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-icon/duet-icon.tsx",
+              "id": "src/components/duet-icon/duet-icon.tsx::DuetIconSize"
             }
           }
         },
@@ -349,7 +355,8 @@ export class DuetIcon {
           "references": {
             "DuetColor": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetColor"
             }
           }
         },

package/lib/collection/components/duet-icon/icon-utils.spec.js

@@ -0,0 +1,84 @@
+/*!
+ * Built with Duet Design System
+ */
+import { fetchIconByUrl } from "./icon-utils";
+describe("duet-icon/icon-utils", () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+  describe("fetchIconByUrl", () => {
+    const stubFetchResponse = (response) => {
+      jest.spyOn(global, "fetch").mockImplementation(() => Promise.resolve({
+        ok: response.ok,
+        text: () => Promise.resolve(response.text),
+      }));
+    };
+    it("should return svg text when validation passes", async () => {
+      expect.assertions(1);
+      stubFetchResponse({
+        ok: true,
+        text: "<svg></svg>",
+      });
+      const result = await fetchIconByUrl("valid.svg");
+      expect(result).toEqual("<svg></svg>");
+    });
+    it("should not request the same SVG twice", async () => {
+      expect.assertions(3);
+      stubFetchResponse({
+        ok: true,
+        text: "<svg></svg>",
+      });
+      const result1 = await fetchIconByUrl("double-request.svg");
+      const result2 = await fetchIconByUrl("double-request.svg");
+      expect(global.fetch).toHaveBeenCalledTimes(1);
+      expect(result1).toBe("<svg></svg>");
+      expect(result1).toBe(result2);
+    });
+    it("should strip any non-SVG tags", async () => {
+      expect.assertions(1);
+      stubFetchResponse({
+        ok: true,
+        text: `<div></div><svg></svg>`,
+      });
+      const result = await fetchIconByUrl("strip-non-svg-tags.svg");
+      expect(result).toEqual(`<svg></svg>`);
+    });
+    it("should return only the first child element", async () => {
+      expect.assertions(1);
+      stubFetchResponse({
+        ok: true,
+        text: `<svg id="first"></svg><svg id="second"></svg>`,
+      });
+      const result = await fetchIconByUrl("returns-first-element.svg");
+      expect(result).toEqual(`<svg id="first"></svg>`);
+    });
+    it("should throw an error if request failed", async () => {
+      expect.assertions(1);
+      stubFetchResponse({
+        ok: false,
+        text: "",
+      });
+      await expect(fetchIconByUrl("failed-request.svg")).rejects.toBeInstanceOf(Error);
+    });
+    it("should fail validation for SVGs with inline event handlers", async () => {
+      expect.assertions(1);
+      stubFetchResponse({
+        ok: true,
+        text: `<svg><path onclick="alert('pwned')" d="" /></svg>`,
+      });
+      await expect(fetchIconByUrl("inline-event-handler.svg")).rejects.toMatchObject({
+        message: "SVG validation failed",
+      });
+    });
+    it("should fail validation for SVGs with script tags", async () => {
+      expect.assertions(1);
+      stubFetchResponse({
+        ok: true,
+        text: `<svg><script>alert("pwned")</script><path d="" /></svg>`,
+      });
+      await expect(fetchIconByUrl("script-tag.svg")).rejects.toMatchObject({
+        message: "SVG validation failed",
+      });
+    });
+  });
+});

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

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