@spectrum-web-components/textfield 0.13.0 → 0.13.2

package/test/textfield.test.js

@@ -1,45 +1,187 @@
-import{elementUpdated as a,expect as l,html as i,litFixture as n}from"@open-wc/testing";import{sendKeys as u}from"@web/test-runner-commands";import{sendMouse as p}from"../../../test/plugins/browser.js";import{findDescribedNode as r}from"../../../test/testing-helpers-a11y.js";import"@spectrum-web-components/help-text/sp-help-text.js";import"@spectrum-web-components/textfield/sp-textfield.js";import{testForLitDevWarnings as f}from"../../../test/testing-helpers.js";describe("Textfield",()=>{f(async()=>await n(i`
+"use strict";
+import { elementUpdated, expect, html, litFixture } from "@open-wc/testing";
+import { sendKeys } from "@web/test-runner-commands";
+import { sendMouse } from "../../../test/plugins/browser.js";
+import { findDescribedNode } from "../../../test/testing-helpers-a11y.js";
+import "@spectrum-web-components/help-text/sp-help-text.js";
+import "@spectrum-web-components/textfield/sp-textfield.js";
+import { testForLitDevWarnings } from "../../../test/testing-helpers.js";
+describe("Textfield", () => {
+  testForLitDevWarnings(
+    async () => await litFixture(
+      html`
                     <sp-textfield label="Enter Your Name"></sp-textfield>
-                `)),it("loads default textfield accessibly",async()=>{const e=await n(i`
+                `
+    )
+  );
+  it("loads default textfield accessibly", async () => {
+    const el = await litFixture(
+      html`
                 <sp-textfield label="Enter Your Name"></sp-textfield>
-            `);await a(e),await l(e).to.be.accessible()}),it("loads multiline textfield accessibly",async()=>{const e=await n(i`
+            `
+    );
+    await elementUpdated(el);
+    await expect(el).to.be.accessible();
+  });
+  it("loads multiline textfield accessibly", async () => {
+    const el = await litFixture(
+      html`
                 <sp-textfield label="Enter your name" multiline></sp-textfield>
-            `);await a(e),await l(e).to.be.accessible()}),it("manages tabIndex while disabled",async()=>{const e=await n(i`
+            `
+    );
+    await elementUpdated(el);
+    await expect(el).to.be.accessible();
+  });
+  it("manages tabIndex while disabled", async () => {
+    const el = await litFixture(
+      html`
                 <sp-textfield placeholder="Enter Your Name"></sp-textfield>
-            `);await a(e),l(e.tabIndex).to.equal(0),e.disabled=!0,await a(e),l(e.tabIndex).to.equal(-1),e.tabIndex=2,await a(e),l(e.tabIndex).to.equal(-1),e.disabled=!1,await a(e),l(e.tabIndex).to.equal(2)}),it("manages tabIndex before first render",async()=>{const e=document.createElement("sp-textfield");l(e.focusElement).to.be.null,l(e.tabIndex).to.equal(0),e.remove()}),it("loads",async()=>{const e="Enter your name",t=await n(i`
-                <sp-textfield placeholder=${e}></sp-textfield>
-            `);l(t).to.not.equal(void 0);const o=t.shadowRoot?t.shadowRoot.querySelector("input"):null;l(o).to.not.be.null;const s=o?o.placeholder:null;l(s).to.equal(e)}),it("multiline",async()=>{const e=await n(i`
+            `
+    );
+    await elementUpdated(el);
+    expect(el.tabIndex).to.equal(0);
+    el.disabled = true;
+    await elementUpdated(el);
+    expect(el.tabIndex).to.equal(-1);
+    el.tabIndex = 2;
+    await elementUpdated(el);
+    expect(el.tabIndex).to.equal(-1);
+    el.disabled = false;
+    await elementUpdated(el);
+    expect(el.tabIndex).to.equal(2);
+  });
+  it("manages tabIndex before first render", async () => {
+    const el = document.createElement("sp-textfield");
+    expect(el.focusElement).to.be.null;
+    expect(el.tabIndex).to.equal(0);
+    el.remove();
+  });
+  it("loads", async () => {
+    const testPlaceholder = "Enter your name";
+    const el = await litFixture(
+      html`
+                <sp-textfield placeholder=${testPlaceholder}></sp-textfield>
+            `
+    );
+    expect(el).to.not.equal(void 0);
+    const input = el.shadowRoot ? el.shadowRoot.querySelector("input") : null;
+    expect(input).to.not.be.null;
+    const placeholder = input ? input.placeholder : null;
+    expect(placeholder).to.equal(testPlaceholder);
+  });
+  it("multiline", async () => {
+    const el = await litFixture(
+      html`
                 <sp-textfield
                     placeholder="Enter your name"
                     multiline
                 ></sp-textfield>
-            `);l(e).to.not.equal(void 0);const t=e.shadowRoot?e.shadowRoot.querySelector("textarea"):null;l(t).to.not.be.null}),it("resizes by default",async()=>{const e=await n(i`
+            `
+    );
+    expect(el).to.not.equal(void 0);
+    const input = el.shadowRoot ? el.shadowRoot.querySelector("textarea") : null;
+    expect(input).to.not.be.null;
+  });
+  it("resizes by default", async () => {
+    const el = await litFixture(
+      html`
                 <sp-textfield
                     multiline
                     label="No resize control"
                     placeholder="No resize control"
                 ></sp-textfield>
-            `),t=e.getBoundingClientRect();await p({steps:[{type:"move",position:[t.right-2,t.bottom-2]},{type:"down"},{type:"move",position:[t.right+50,t.bottom+50]},{type:"up"}]});const o=e.getBoundingClientRect();l(o.width).to.be.greaterThan(t.width),l(o.height).to.be.greaterThan(t.height)}),it("accepts resize styling",async()=>{const e=await n(i`
+            `
+    );
+    const startBounds = el.getBoundingClientRect();
+    await sendMouse({
+      steps: [
+        {
+          type: "move",
+          position: [startBounds.right - 2, startBounds.bottom - 2]
+        },
+        {
+          type: "down"
+        },
+        {
+          type: "move",
+          position: [startBounds.right + 50, startBounds.bottom + 50]
+        },
+        {
+          type: "up"
+        }
+      ]
+    });
+    const endBounds = el.getBoundingClientRect();
+    expect(endBounds.width).to.be.greaterThan(startBounds.width);
+    expect(endBounds.height).to.be.greaterThan(startBounds.height);
+  });
+  it("accepts resize styling", async () => {
+    const el = await litFixture(
+      html`
                 <sp-textfield
                     multiline
                     style="resize: none;"
                     label="No resize control"
                     placeholder="No resize control"
                 ></sp-textfield>
-            `),t=e.getBoundingClientRect();await p({steps:[{type:"move",position:[t.right-2,t.bottom-2]},{type:"down"},{type:"move",position:[t.right+50,t.bottom+50]},{type:"up"}]});const o=e.getBoundingClientRect();l(o.width).equals(t.width),l(o.height).equals(t.height)}),it("grows",async()=>{const e=await n(i`
+            `
+    );
+    const startBounds = el.getBoundingClientRect();
+    await sendMouse({
+      steps: [
+        {
+          type: "move",
+          position: [startBounds.right - 2, startBounds.bottom - 2]
+        },
+        {
+          type: "down"
+        },
+        {
+          type: "move",
+          position: [startBounds.right + 50, startBounds.bottom + 50]
+        },
+        {
+          type: "up"
+        }
+      ]
+    });
+    const endBounds = el.getBoundingClientRect();
+    expect(endBounds.width).equals(startBounds.width);
+    expect(endBounds.height).equals(startBounds.height);
+  });
+  it("grows", async () => {
+    const el = await litFixture(
+      html`
                 <sp-textfield
                     placeholder="Enter your name"
                     multiline
                     grows
                 ></sp-textfield>
-            `);l(e).to.not.equal(void 0);const t=e.shadowRoot?e.shadowRoot.querySelector("#sizer"):null;l(t).to.not.be.null}),it("valid",async()=>{const e=await n(i`
+            `
+    );
+    expect(el).to.not.equal(void 0);
+    const sizer = el.shadowRoot ? el.shadowRoot.querySelector("#sizer") : null;
+    expect(sizer).to.not.be.null;
+  });
+  it("valid", async () => {
+    const el = await litFixture(
+      html`
                 <sp-textfield
                     placeholder="Enter your number"
                     pattern="[\\d]+"
                     value="123"
                     required
                 ></sp-textfield>
-            `);await a(e),l(e).to.not.equal(void 0);const t=e.shadowRoot?e.shadowRoot.querySelector("#valid"):null;l(t).to.not.be.null}),it("valid - multiline",async()=>{const e=await n(i`
+            `
+    );
+    await elementUpdated(el);
+    expect(el).to.not.equal(void 0);
+    const input = el.shadowRoot ? el.shadowRoot.querySelector("#valid") : null;
+    expect(input).to.not.be.null;
+  });
+  it("valid - multiline", async () => {
+    const el = await litFixture(
+      html`
                 <sp-textfield
                     placeholder="Enter your number"
                     pattern="[\\d]+"
@@ -47,27 +189,63 @@ import{elementUpdated as a,expect as l,html as i,litFixture as n}from"@open-wc/t
                     required
                     multiline
                 ></sp-textfield>
-            `);await a(e),l(e).to.not.equal(void 0);const t=e.shadowRoot?e.shadowRoot.querySelector("#valid"):null;l(t).to.not.be.null}),it("valid - required",async()=>{const e=await n(i`
+            `
+    );
+    await elementUpdated(el);
+    expect(el).to.not.equal(void 0);
+    const input = el.shadowRoot ? el.shadowRoot.querySelector("#valid") : null;
+    expect(input).to.not.be.null;
+  });
+  it("valid - required", async () => {
+    const el = await litFixture(
+      html`
                 <sp-textfield
                     placeholder="Enter your number"
                     value="123"
                     required
                 ></sp-textfield>
-            `);await a(e),l(e).to.not.equal(void 0);const t=e.shadowRoot?e.shadowRoot.querySelector("#valid"):null;l(t).to.not.be.null}),it("valid - multiline - required",async()=>{const e=await n(i`
+            `
+    );
+    await elementUpdated(el);
+    expect(el).to.not.equal(void 0);
+    const input = el.shadowRoot ? el.shadowRoot.querySelector("#valid") : null;
+    expect(input).to.not.be.null;
+  });
+  it("valid - multiline - required", async () => {
+    const el = await litFixture(
+      html`
                 <sp-textfield
                     placeholder="Enter your number"
                     value="123"
                     required
                     multiline
                 ></sp-textfield>
-            `);await a(e),l(e).to.not.equal(void 0);const t=e.shadowRoot?e.shadowRoot.querySelector("#valid"):null;l(t).to.not.be.null}),it("valid - boundary-type assertions",async()=>{const e=await n(i`
+            `
+    );
+    await elementUpdated(el);
+    expect(el).to.not.equal(void 0);
+    const input = el.shadowRoot ? el.shadowRoot.querySelector("#valid") : null;
+    expect(input).to.not.be.null;
+  });
+  it("valid - boundary-type assertions", async () => {
+    const el = await litFixture(
+      html`
                 <sp-textfield
                     placeholder="Enter your number"
                     pattern="^[\\d]+$"
                     value="123"
                     required
                 ></sp-textfield>
-            `);await a(e),l(e).to.not.equal(void 0);const t=e.shadowRoot?e.shadowRoot.querySelector("#valid"):null;l(t).to.not.be.null}),it("valid - multiline - boundary-type assertions",async()=>{const e=await n(i`
+            `
+    );
+    await elementUpdated(el);
+    expect(el).to.not.equal(void 0);
+    const input = el.shadowRoot ? el.shadowRoot.querySelector("#valid") : null;
+    expect(input).to.not.be.null;
+  });
+  it("valid - multiline - boundary-type assertions", async () => {
+    const el = await litFixture(
+      html`
                 <sp-textfield
                     placeholder="Enter your number"
                     pattern="^[\\d]+$"
@@ -75,14 +253,32 @@ import{elementUpdated as a,expect as l,html as i,litFixture as n}from"@open-wc/t
                     required
                     multiline
                 ></sp-textfield>
-            `);await a(e),l(e).to.not.equal(void 0);const t=e.shadowRoot?e.shadowRoot.querySelector("#valid"):null;l(t).to.not.be.null}),it("valid - unicode",async()=>{const e=await n(i`
+            `
+    );
+    await elementUpdated(el);
+    expect(el).to.not.equal(void 0);
+    const input = el.shadowRoot ? el.shadowRoot.querySelector("#valid") : null;
+    expect(input).to.not.be.null;
+  });
+  it("valid - unicode", async () => {
+    const el = await litFixture(
+      html`
                 <sp-textfield
                     placeholder="Enter your name"
                     pattern="\\p{L}{4,8}"
                     value="你的名字"
                     required
                 ></sp-textfield>
-            `);await a(e),l(e).to.not.equal(void 0);const t=e.shadowRoot?e.shadowRoot.querySelector("#valid"):null;l(t).to.not.be.null}),it("valid - multiline - unicode",async()=>{const e=await n(i`
+            `
+    );
+    await elementUpdated(el);
+    expect(el).to.not.equal(void 0);
+    const input = el.shadowRoot ? el.shadowRoot.querySelector("#valid") : null;
+    expect(input).to.not.be.null;
+  });
+  it("valid - multiline - unicode", async () => {
+    const el = await litFixture(
+      html`
                 <sp-textfield
                     placeholder="Enter your name"
                     pattern="\\p{L}{4,8}"
@@ -90,14 +286,32 @@ import{elementUpdated as a,expect as l,html as i,litFixture as n}from"@open-wc/t
                     required
                     multiline
                 ></sp-textfield>
-            `);await a(e),l(e).to.not.equal(void 0);const t=e.shadowRoot?e.shadowRoot.querySelector("#valid"):null;l(t).to.not.be.null}),it("invalid",async()=>{const e=await n(i`
+            `
+    );
+    await elementUpdated(el);
+    expect(el).to.not.equal(void 0);
+    const input = el.shadowRoot ? el.shadowRoot.querySelector("#valid") : null;
+    expect(input).to.not.be.null;
+  });
+  it("invalid", async () => {
+    const el = await litFixture(
+      html`
                 <sp-textfield
                     placeholder="Enter your number"
                     pattern="[\\d]+"
                     value="123 not valid"
                     required
                 ></sp-textfield>
-            `);await a(e),l(e).to.not.equal(void 0);const t=e.shadowRoot?e.shadowRoot.querySelector("#invalid"):null;l(t).to.not.be.null}),it("invalid - multiline",async()=>{const e=await n(i`
+            `
+    );
+    await elementUpdated(el);
+    expect(el).to.not.equal(void 0);
+    const input = el.shadowRoot ? el.shadowRoot.querySelector("#invalid") : null;
+    expect(input).to.not.be.null;
+  });
+  it("invalid - multiline", async () => {
+    const el = await litFixture(
+      html`
                 <sp-textfield
                     placeholder="Enter your number"
                     pattern="[\\d]+"
@@ -105,27 +319,63 @@ import{elementUpdated as a,expect as l,html as i,litFixture as n}from"@open-wc/t
                     required
                     multiline
                 ></sp-textfield>
-            `);await a(e),l(e).to.not.equal(void 0);const t=e.shadowRoot?e.shadowRoot.querySelector("#invalid"):null;l(t).to.not.be.null}),it("invalid - required",async()=>{const e=await n(i`
+            `
+    );
+    await elementUpdated(el);
+    expect(el).to.not.equal(void 0);
+    const input = el.shadowRoot ? el.shadowRoot.querySelector("#invalid") : null;
+    expect(input).to.not.be.null;
+  });
+  it("invalid - required", async () => {
+    const el = await litFixture(
+      html`
                 <sp-textfield
                     placeholder="Enter your number"
                     value=""
                     required
                 ></sp-textfield>
-            `);await a(e),l(e).to.not.equal(void 0);const t=e.shadowRoot?e.shadowRoot.querySelector("#invalid"):null;l(t).to.not.be.null}),it("invalid - multiline - required",async()=>{const e=await n(i`
+            `
+    );
+    await elementUpdated(el);
+    expect(el).to.not.equal(void 0);
+    const input = el.shadowRoot ? el.shadowRoot.querySelector("#invalid") : null;
+    expect(input).to.not.be.null;
+  });
+  it("invalid - multiline - required", async () => {
+    const el = await litFixture(
+      html`
                 <sp-textfield
                     placeholder="Enter your number"
                     value=""
                     required
                     multiline
                 ></sp-textfield>
-            `);await a(e),l(e).to.not.equal(void 0);const t=e.shadowRoot?e.shadowRoot.querySelector("#invalid"):null;l(t).to.not.be.null}),it("invalid - unicode",async()=>{const e=await n(i`
+            `
+    );
+    await elementUpdated(el);
+    expect(el).to.not.equal(void 0);
+    const input = el.shadowRoot ? el.shadowRoot.querySelector("#invalid") : null;
+    expect(input).to.not.be.null;
+  });
+  it("invalid - unicode", async () => {
+    const el = await litFixture(
+      html`
                 <sp-textfield
                     placeholder="Enter your number"
                     pattern="\\p{N}+"
                     value="123 not valid"
                     required
                 ></sp-textfield>
-            `);await a(e),l(e).to.not.equal(void 0);const t=e.shadowRoot?e.shadowRoot.querySelector("#invalid"):null;l(t).to.not.be.null}),it("invalid - multiline - unicode",async()=>{const e=await n(i`
+            `
+    );
+    await elementUpdated(el);
+    expect(el).to.not.equal(void 0);
+    const input = el.shadowRoot ? el.shadowRoot.querySelector("#invalid") : null;
+    expect(input).to.not.be.null;
+  });
+  it("invalid - multiline - unicode", async () => {
+    const el = await litFixture(
+      html`
                 <sp-textfield
                     placeholder="Enter your number"
                     pattern="\\p{N}+"
@@ -133,14 +383,32 @@ import{elementUpdated as a,expect as l,html as i,litFixture as n}from"@open-wc/t
                     required
                     multiline
                 ></sp-textfield>
-            `);await a(e),l(e).to.not.equal(void 0);const t=e.shadowRoot?e.shadowRoot.querySelector("#invalid"):null;l(t).to.not.be.null}),it("invalid - boundary-type assertions",async()=>{const e=await n(i`
+            `
+    );
+    await elementUpdated(el);
+    expect(el).to.not.equal(void 0);
+    const input = el.shadowRoot ? el.shadowRoot.querySelector("#invalid") : null;
+    expect(input).to.not.be.null;
+  });
+  it("invalid - boundary-type assertions", async () => {
+    const el = await litFixture(
+      html`
                 <sp-textfield
                     placeholder="Enter your number"
                     pattern="^\\p{N}+$"
                     value="123 not valid"
                     required
                 ></sp-textfield>
-            `);await a(e),l(e).to.not.equal(void 0);const t=e.shadowRoot?e.shadowRoot.querySelector("#invalid"):null;l(t).to.not.be.null}),it("invalid - multiline - boundary-type assertions",async()=>{const e=await n(i`
+            `
+    );
+    await elementUpdated(el);
+    expect(el).to.not.equal(void 0);
+    const input = el.shadowRoot ? el.shadowRoot.querySelector("#invalid") : null;
+    expect(input).to.not.be.null;
+  });
+  it("invalid - multiline - boundary-type assertions", async () => {
+    const el = await litFixture(
+      html`
                 <sp-textfield
                     placeholder="Enter your number"
                     pattern="^\\p{N}+$"
@@ -148,74 +416,357 @@ import{elementUpdated as a,expect as l,html as i,litFixture as n}from"@open-wc/t
                     required
                     multiline
                 ></sp-textfield>
-            `);await a(e),l(e).to.not.equal(void 0);const t=e.shadowRoot?e.shadowRoot.querySelector("#invalid"):null;l(t).to.not.be.null}),it("receives focus",async()=>{let e=null;const t=s=>{e=s.composedPath()[0]};document.addEventListener("focusin",t);const o=await n(i`
+            `
+    );
+    await elementUpdated(el);
+    expect(el).to.not.equal(void 0);
+    const input = el.shadowRoot ? el.shadowRoot.querySelector("#invalid") : null;
+    expect(input).to.not.be.null;
+  });
+  it("receives focus", async () => {
+    let activeElement = null;
+    const onFocusIn = (event) => {
+      const path = event.composedPath();
+      activeElement = path[0];
+    };
+    document.addEventListener("focusin", onFocusIn);
+    const el = await litFixture(
+      html`
                 <sp-textfield placeholder="Enter your name"></sp-textfield>
-            `);await a(o),o.focus(),await a(o),l(e===o.focusElement).to.be.true,document.removeEventListener("focusin",t)}),it("does not receive focus when disabled",async()=>{let e=null;const t=s=>{e=s.composedPath()[0]};document.addEventListener("focusin",t);const o=await n(i`
+            `
+    );
+    await elementUpdated(el);
+    el.focus();
+    await elementUpdated(el);
+    expect(activeElement === el.focusElement).to.be.true;
+    document.removeEventListener("focusin", onFocusIn);
+  });
+  it("does not receive focus when disabled", async () => {
+    let activeElement = null;
+    const onFocusIn = (event) => {
+      const path = event.composedPath();
+      activeElement = path[0];
+    };
+    document.addEventListener("focusin", onFocusIn);
+    const el = await litFixture(
+      html`
                 <sp-textfield
                     disabled
                     placeholder="Enter your name"
                 ></sp-textfield>
-            `);await a(o),o.focus(),await a(o),l(e===o.focusElement).to.be.false,l(document.activeElement===o).to.be.false,document.removeEventListener("focusin",t),o.click(),await a(o),l(e===o.focusElement).to.be.false,l(document.activeElement===o).to.be.false,document.removeEventListener("focusin",t)}),it("accepts input",async()=>{const e="Test Name",t=await n(i`
+            `
+    );
+    await elementUpdated(el);
+    el.focus();
+    await elementUpdated(el);
+    expect(activeElement === el.focusElement).to.be.false;
+    expect(document.activeElement === el).to.be.false;
+    document.removeEventListener("focusin", onFocusIn);
+    el.click();
+    await elementUpdated(el);
+    expect(activeElement === el.focusElement).to.be.false;
+    expect(document.activeElement === el).to.be.false;
+    document.removeEventListener("focusin", onFocusIn);
+  });
+  it("accepts input", async () => {
+    const testValue = "Test Name";
+    const el = await litFixture(
+      html`
                 <sp-textfield placeholder="Enter your name"></sp-textfield>
-            `);await a(t),t.focusElement.value=e,t.focusElement.dispatchEvent(new Event("input")),l(t.value).to.equal(e)}),it("selects",async()=>{const e="Test Name",t=await n(i`
-                <sp-textfield value=${e}></sp-textfield>
-            `);await a(t),l(t.value).to.equal(e),t.focus(),t.select(),await u({press:"Backspace"}),l(t.value).to.equal("")}),it("setSelectionRange",async()=>{const e="Test Name",t=await n(i`
-                <sp-textfield value=${e}></sp-textfield>
-            `);await a(t),l(t.value).to.equal(e),t.focus(),t.setSelectionRange(0,5),await u({press:"Backspace"}),l(t.value).to.equal("Name")}),it("accepts maxlength",async()=>{const e=await n(i`
+            `
+    );
+    await elementUpdated(el);
+    el.focusElement.value = testValue;
+    el.focusElement.dispatchEvent(new Event("input"));
+    expect(el.value).to.equal(testValue);
+  });
+  it("selects", async () => {
+    const testValue = "Test Name";
+    const el = await litFixture(
+      html`
+                <sp-textfield value=${testValue}></sp-textfield>
+            `
+    );
+    await elementUpdated(el);
+    expect(el.value).to.equal(testValue);
+    el.focus();
+    el.select();
+    await sendKeys({ press: "Backspace" });
+    expect(el.value).to.equal("");
+  });
+  it("setSelectionRange", async () => {
+    const testValue = "Test Name";
+    const el = await litFixture(
+      html`
+                <sp-textfield value=${testValue}></sp-textfield>
+            `
+    );
+    await elementUpdated(el);
+    expect(el.value).to.equal(testValue);
+    el.focus();
+    el.setSelectionRange(0, "Test ".length);
+    await sendKeys({ press: "Backspace" });
+    expect(el.value).to.equal("Name");
+  });
+  it("accepts maxlength", async () => {
+    const el = await litFixture(
+      html`
                 <sp-textfield
                     placeholder="Enter your name"
                     maxlength="3"
                     minlength="2"
                     required
                 ></sp-textfield>
-            `);await a(e),e.focus(),await u({type:"a"}),await a(e),l(e.value).to.equal("a"),l(e.checkValidity()).to.be.false,await u({type:"b"}),await a(e),l(e.value).to.equal("ab"),l(e.checkValidity()),await u({type:"c"}),await a(e),l(e.value).to.equal("abc"),l(e.checkValidity()),await u({type:"d"}),await a(e),l(e.value).to.equal("abc"),l(e.checkValidity()),await u({press:"Backspace"}),await a(e),l(e.value).to.equal("ab"),l(e.checkValidity()),await u({press:"Backspace"}),await a(e),l(e.value).to.equal("a"),l(e.checkValidity()).to.be.false}),it("dispatches a `change` event",async()=>{const e="Test Name";let t=null;const s=await n(i`
+            `
+    );
+    await elementUpdated(el);
+    el.focus();
+    await sendKeys({
+      type: "a"
+    });
+    await elementUpdated(el);
+    expect(el.value).to.equal("a");
+    expect(el.checkValidity()).to.be.false;
+    await sendKeys({
+      type: "b"
+    });
+    await elementUpdated(el);
+    expect(el.value).to.equal("ab");
+    expect(el.checkValidity());
+    await sendKeys({
+      type: "c"
+    });
+    await elementUpdated(el);
+    expect(el.value).to.equal("abc");
+    expect(el.checkValidity());
+    await sendKeys({
+      type: "d"
+    });
+    await elementUpdated(el);
+    expect(el.value).to.equal("abc");
+    expect(el.checkValidity());
+    await sendKeys({
+      press: "Backspace"
+    });
+    await elementUpdated(el);
+    expect(el.value).to.equal("ab");
+    expect(el.checkValidity());
+    await sendKeys({
+      press: "Backspace"
+    });
+    await elementUpdated(el);
+    expect(el.value).to.equal("a");
+    expect(el.checkValidity()).to.be.false;
+  });
+  it("dispatches a `change` event", async () => {
+    const testValue = "Test Name";
+    let eventSource = null;
+    const onChange = (event) => {
+      eventSource = event.composedPath()[0];
+    };
+    const el = await litFixture(
+      html`
                 <sp-textfield
                     placeholder="Enter your name"
-                    @change=${c=>{t=c.composedPath()[0]}}
+                    @change=${onChange}
                 ></sp-textfield>
-            `);await a(s),s.focusElement.value=e,s.focusElement.dispatchEvent(new Event("input")),s.focusElement.dispatchEvent(new Event("change")),l(s.value).to.equal(e),l(t).to.equal(s)}),it("passes through `autocomplete` attribute",async()=>{let e=await n(i`
+            `
+    );
+    await elementUpdated(el);
+    el.focusElement.value = testValue;
+    el.focusElement.dispatchEvent(new Event("input"));
+    el.focusElement.dispatchEvent(new Event("change"));
+    expect(el.value).to.equal(testValue);
+    const testSource = eventSource;
+    expect(testSource).to.equal(el);
+  });
+  it("passes through `autocomplete` attribute", async () => {
+    let el = await litFixture(
+      html`
                 <sp-textfield autocomplete="off"></sp-textfield>
-            `);await a(e);let t=e.shadowRoot?e.shadowRoot.querySelector("input"):null;l(t).to.exist,t&&l(t.getAttribute("autocomplete")).to.equal("off"),e=await n(i`
+            `
+    );
+    await elementUpdated(el);
+    let input = el.shadowRoot ? el.shadowRoot.querySelector("input") : null;
+    expect(input).to.exist;
+    if (input) {
+      expect(input.getAttribute("autocomplete")).to.equal("off");
+    }
+    el = await litFixture(
+      html`
                 <sp-textfield></sp-textfield>
-            `),await a(e),t=e.shadowRoot?e.shadowRoot.querySelector("input"):null,l(t).to.exist,t&&l(t.getAttribute("autocomplete")).to.not.exist}),it("tests on `required` changes",async()=>{const e=await n(i`
+            `
+    );
+    await elementUpdated(el);
+    input = el.shadowRoot ? el.shadowRoot.querySelector("input") : null;
+    expect(input).to.exist;
+    if (input) {
+      expect(input.getAttribute("autocomplete")).to.not.exist;
+    }
+  });
+  it("tests on `required` changes", async () => {
+    const el = await litFixture(
+      html`
                 <sp-textfield value=""></sp-textfield>
-            `);await a(e),l(e.invalid).to.be.false,e.required=!0,await a(e),l(e.invalid).to.be.true}),it("manages `allowed-keys`",async()=>{const e=await n(i`
+            `
+    );
+    await elementUpdated(el);
+    expect(el.invalid).to.be.false;
+    el.required = true;
+    await elementUpdated(el);
+    expect(el.invalid).to.be.true;
+  });
+  it("manages `allowed-keys`", async () => {
+    const el = await litFixture(
+      html`
                 <sp-textfield allowed-keys="asdf"></sp-textfield>
-            `);await a(e),l(e.value).to.equal("");const t=e.focusElement;e.focusElement.value="asdf",t.dispatchEvent(new InputEvent("input")),await a(e),l(e.value).to.equal("asdf"),t.value="asdff",t.setSelectionRange(1,1),t.dispatchEvent(new InputEvent("input")),await a(e),l(e.value).to.equal("asdff"),l(t.selectionStart).to.equal(1),t.value="asdoff",t.setSelectionRange(4,4),t.dispatchEvent(new InputEvent("input")),await a(e),l(e.value).to.equal("asdff"),l(t.selectionStart).to.equal(3)}),describe("type attribute",()=>{it("assigns valid attributes to the property",async()=>{const e=["text","url","tel","email","password"];for await(const t of e){const o=await n(i`
+            `
+    );
+    await elementUpdated(el);
+    expect(el.value).to.equal("");
+    const inputElement = el.focusElement;
+    el.focusElement.value = "asdf";
+    inputElement.dispatchEvent(new InputEvent("input"));
+    await elementUpdated(el);
+    expect(el.value).to.equal("asdf");
+    inputElement.value = `asdff`;
+    inputElement.setSelectionRange(1, 1);
+    inputElement.dispatchEvent(new InputEvent("input"));
+    await elementUpdated(el);
+    expect(el.value).to.equal("asdff");
+    expect(inputElement.selectionStart).to.equal(1);
+    inputElement.value = `asdoff`;
+    inputElement.setSelectionRange(4, 4);
+    inputElement.dispatchEvent(new InputEvent("input"));
+    await elementUpdated(el);
+    expect(el.value).to.equal("asdff");
+    expect(inputElement.selectionStart).to.equal(3);
+  });
+  describe("type attribute", () => {
+    it("assigns valid attributes to the property", async () => {
+      const types = [
+        "text",
+        "url",
+        "tel",
+        "email",
+        "password"
+      ];
+      for await (const t of types) {
+        const el = await litFixture(
+          html`
                         <sp-textfield type=${t}></sp-textfield>
-                    `);l(o.type).equals(t),o.setAttribute("type","url"),l(o.type).equals("url")}}),it('represents invalid and missing attributes as "text"',async()=>{const e=await n(i`
+                    `
+        );
+        expect(el.type).equals(t);
+        el.setAttribute("type", "url");
+        expect(el.type).equals("url");
+      }
+    });
+    it('represents invalid and missing attributes as "text"', async () => {
+      const el1 = await litFixture(
+        html`
                     <sp-textfield></sp-textfield>
-                `),t=await n(i`
+                `
+      );
+      const el2 = await litFixture(
+        html`
                     <sp-textfield type="time"></sp-textfield>
-                `);l(e.type).equals("text"),l(t.type).equals("text"),e.setAttribute("type","submit"),l(e.type).equals("text")}),it("reflects valid property assignments",async()=>{const e=await n(i`
+                `
+      );
+      expect(el1.type).equals("text");
+      expect(el2.type).equals("text");
+      el1.setAttribute("type", "submit");
+      expect(el1.type).equals("text");
+    });
+    it("reflects valid property assignments", async () => {
+      const el = await litFixture(
+        html`
                     <sp-textfield type="url"></sp-textfield>
-                `);e.type="email",await a(e),l(e.getAttribute("type")).equals("email"),l(e.type).equals("email")}),it('reflects invalid assignments but sets state to "text"',async()=>{const e=await n(i`
+                `
+      );
+      el.type = "email";
+      await elementUpdated(el);
+      expect(el.getAttribute("type")).equals("email");
+      expect(el.type).equals("email");
+    });
+    it('reflects invalid assignments but sets state to "text"', async () => {
+      const el = await litFixture(
+        html`
                     <sp-textfield type="url"></sp-textfield>
-                `);e.type="range",await a(e),l(e.getAttribute("type")).equals("range"),l(e.type).equals("text")})}),describe("help text",()=>{const e="This is a textfield",t="This text helps you fill it out",o="This text helps you when invalid";it('accepts help text in `slot="help-text"`',async()=>{const s=await n(i`
-                <sp-textfield label=${e}>
-                    <sp-help-text slot="help-text">${t}</sp-help-text>
+                `
+      );
+      el.type = "range";
+      await elementUpdated(el);
+      expect(el.getAttribute("type")).equals("range");
+      expect(el.type).equals("text");
+    });
+  });
+  describe("help text", () => {
+    const name = "This is a textfield";
+    const description = "This text helps you fill it out";
+    const descriptionNegative = "This text helps you when invalid";
+    it('accepts help text in `slot="help-text"`', async () => {
+      const el = await litFixture(html`
+                <sp-textfield label=${name}>
+                    <sp-help-text slot="help-text">${description}</sp-help-text>
                 </sp-textfield>
-            `);await a(s),await r(e,t)}),it('accepts help text in `slot="help-text"` w/ own ID',async()=>{const s=await n(i`
-                <sp-textfield label=${e}>
+            `);
+      await elementUpdated(el);
+      await findDescribedNode(name, description);
+    });
+    it('accepts help text in `slot="help-text"` w/ own ID', async () => {
+      const el = await litFixture(html`
+                <sp-textfield label=${name}>
                     <sp-help-text slot="help-text" id="help-text-id-1">
-                        ${t}
+                        ${description}
                     </sp-help-text>
                 </sp-textfield>
-            `);await a(s),await r(e,t)}),it("manages neutral/negative help text pairs",async()=>{const s=await n(i`
-                <sp-textfield label=${e}>
-                    <sp-help-text slot="help-text">${t}</sp-help-text>
+            `);
+      await elementUpdated(el);
+      await findDescribedNode(name, description);
+    });
+    it("manages neutral/negative help text pairs", async () => {
+      const el = await litFixture(html`
+                <sp-textfield label=${name}>
+                    <sp-help-text slot="help-text">${description}</sp-help-text>
                     <sp-help-text slot="negative-help-text">
-                        ${o}
+                        ${descriptionNegative}
                     </sp-help-text>
                 </sp-textfield>
-            `),d=s.querySelector('[slot="negative-help-text"]');await a(s),l(d.variant).to.equal("neutral"),await r(e,t),s.invalid=!0,await a(s),l(d.variant).to.equal("negative"),await r(e,o)}),it("manages neutral/negative help text pairs w/ own IDs",async()=>{const s=await n(i`
-                <sp-textfield label=${e}>
+            `);
+      const negativeHelpText = el.querySelector(
+        '[slot="negative-help-text"]'
+      );
+      await elementUpdated(el);
+      expect(negativeHelpText.variant).to.equal("neutral");
+      await findDescribedNode(name, description);
+      el.invalid = true;
+      await elementUpdated(el);
+      expect(negativeHelpText.variant).to.equal("negative");
+      await findDescribedNode(name, descriptionNegative);
+    });
+    it("manages neutral/negative help text pairs w/ own IDs", async () => {
+      const el = await litFixture(html`
+                <sp-textfield label=${name}>
                     <sp-help-text slot="help-text" id="help-text-id-2">
-                        ${t}
+                        ${description}
                     </sp-help-text>
                     <sp-help-text slot="negative-help-text" id="help-text-id-3">
-                        ${o}
+                        ${descriptionNegative}
                     </sp-help-text>
                 </sp-textfield>
-            `),d=s.querySelector('[slot="negative-help-text"]');await a(s),l(d.variant).to.equal("neutral"),await r(e,t),s.invalid=!0,await a(s),l(d.variant).to.equal("negative"),await r(e,o)})})});
+            `);
+      const negativeHelpText = el.querySelector(
+        '[slot="negative-help-text"]'
+      );
+      await elementUpdated(el);
+      expect(negativeHelpText.variant).to.equal("neutral");
+      await findDescribedNode(name, description);
+      el.invalid = true;
+      await elementUpdated(el);
+      expect(negativeHelpText.variant).to.equal("negative");
+      await findDescribedNode(name, descriptionNegative);
+    });
+  });
+});
 //# sourceMappingURL=textfield.test.js.map