@spectrum-web-components/textfield 0.12.1-devmode.0 → 0.13.0

package/test/textfield.test.js

@@ -1,163 +1,45 @@
-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`
+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`
                     <sp-textfield label="Enter Your Name"></sp-textfield>
-                `));
-  it("loads default textfield accessibly", async () => {
-    const el = await litFixture(html`
+                `)),it("loads default textfield accessibly",async()=>{const e=await n(i`
                 <sp-textfield label="Enter Your Name"></sp-textfield>
-            `);
-    await elementUpdated(el);
-    await expect(el).to.be.accessible();
-  });
-  it("loads multiline textfield accessibly", async () => {
-    const el = await litFixture(html`
+            `);await a(e),await l(e).to.be.accessible()}),it("loads multiline textfield accessibly",async()=>{const e=await n(i`
                 <sp-textfield label="Enter your name" multiline></sp-textfield>
-            `);
-    await elementUpdated(el);
-    await expect(el).to.be.accessible();
-  });
-  it("manages tabIndex while disabled", async () => {
-    const el = await litFixture(html`
+            `);await a(e),await l(e).to.be.accessible()}),it("manages tabIndex while disabled",async()=>{const e=await n(i`
                 <sp-textfield placeholder="Enter Your Name"></sp-textfield>
-            `);
-    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`
+            `);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`
                 <sp-textfield
                     placeholder="Enter your name"
                     multiline
                 ></sp-textfield>
-            `);
-    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`
+            `);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`
                 <sp-textfield
                     multiline
                     label="No resize control"
                     placeholder="No resize control"
                 ></sp-textfield>
-            `);
-    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`
+            `),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`
                 <sp-textfield
                     multiline
                     style="resize: none;"
                     label="No resize control"
                     placeholder="No resize control"
                 ></sp-textfield>
-            `);
-    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`
+            `),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`
                 <sp-textfield
                     placeholder="Enter your name"
                     multiline
                     grows
                 ></sp-textfield>
-            `);
-    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`
+            `);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`
                 <sp-textfield
                     placeholder="Enter your number"
                     pattern="[\\d]+"
                     value="123"
                     required
                 ></sp-textfield>
-            `);
-    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`
+            `);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`
                 <sp-textfield
                     placeholder="Enter your number"
                     pattern="[\\d]+"
@@ -165,55 +47,27 @@ describe("Textfield", () => {
                     required
                     multiline
                 ></sp-textfield>
-            `);
-    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`
+            `);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`
                 <sp-textfield
                     placeholder="Enter your number"
                     value="123"
                     required
                 ></sp-textfield>
-            `);
-    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`
+            `);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`
                 <sp-textfield
                     placeholder="Enter your number"
                     value="123"
                     required
                     multiline
                 ></sp-textfield>
-            `);
-    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`
+            `);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`
                 <sp-textfield
                     placeholder="Enter your number"
                     pattern="^[\\d]+$"
                     value="123"
                     required
                 ></sp-textfield>
-            `);
-    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`
+            `);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`
                 <sp-textfield
                     placeholder="Enter your number"
                     pattern="^[\\d]+$"
@@ -221,28 +75,14 @@ describe("Textfield", () => {
                     required
                     multiline
                 ></sp-textfield>
-            `);
-    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`
+            `);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`
                 <sp-textfield
                     placeholder="Enter your name"
                     pattern="\\p{L}{4,8}"
                     value="你的名字"
                     required
                 ></sp-textfield>
-            `);
-    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`
+            `);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`
                 <sp-textfield
                     placeholder="Enter your name"
                     pattern="\\p{L}{4,8}"
@@ -250,28 +90,14 @@ describe("Textfield", () => {
                     required
                     multiline
                 ></sp-textfield>
-            `);
-    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`
+            `);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`
                 <sp-textfield
                     placeholder="Enter your number"
                     pattern="[\\d]+"
                     value="123 not valid"
                     required
                 ></sp-textfield>
-            `);
-    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`
+            `);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`
                 <sp-textfield
                     placeholder="Enter your number"
                     pattern="[\\d]+"
@@ -279,55 +105,27 @@ describe("Textfield", () => {
                     required
                     multiline
                 ></sp-textfield>
-            `);
-    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`
+            `);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`
                 <sp-textfield
                     placeholder="Enter your number"
                     value=""
                     required
                 ></sp-textfield>
-            `);
-    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`
+            `);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`
                 <sp-textfield
                     placeholder="Enter your number"
                     value=""
                     required
                     multiline
                 ></sp-textfield>
-            `);
-    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`
+            `);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`
                 <sp-textfield
                     placeholder="Enter your number"
                     pattern="\\p{N}+"
                     value="123 not valid"
                     required
                 ></sp-textfield>
-            `);
-    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`
+            `);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`
                 <sp-textfield
                     placeholder="Enter your number"
                     pattern="\\p{N}+"
@@ -335,28 +133,14 @@ describe("Textfield", () => {
                     required
                     multiline
                 ></sp-textfield>
-            `);
-    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`
+            `);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`
                 <sp-textfield
                     placeholder="Enter your number"
                     pattern="^\\p{N}+$"
                     value="123 not valid"
                     required
                 ></sp-textfield>
-            `);
-    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`
+            `);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`
                 <sp-textfield
                     placeholder="Enter your number"
                     pattern="^\\p{N}+$"
@@ -364,320 +148,74 @@ describe("Textfield", () => {
                     required
                     multiline
                 ></sp-textfield>
-            `);
-    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`
+            `);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`
                 <sp-textfield placeholder="Enter your name"></sp-textfield>
-            `);
-    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`
+            `);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`
                 <sp-textfield
                     disabled
                     placeholder="Enter your name"
                 ></sp-textfield>
-            `);
-    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`
+            `);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`
                 <sp-textfield placeholder="Enter your name"></sp-textfield>
-            `);
-    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`
+            `);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`
                 <sp-textfield
                     placeholder="Enter your name"
                     maxlength="3"
                     minlength="2"
                     required
                 ></sp-textfield>
-            `);
-    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`
+            `);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`
                 <sp-textfield
                     placeholder="Enter your name"
-                    @change=${onChange}
+                    @change=${c=>{t=c.composedPath()[0]}}
                 ></sp-textfield>
-            `);
-    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`
+            `);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`
                 <sp-textfield autocomplete="off"></sp-textfield>
-            `);
-    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`
+            `);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`
                 <sp-textfield></sp-textfield>
-            `);
-    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`
+            `),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`
                 <sp-textfield value=""></sp-textfield>
-            `);
-    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`
+            `);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`
                 <sp-textfield allowed-keys="asdf"></sp-textfield>
-            `);
-    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`
+            `);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`
                         <sp-textfield type=${t}></sp-textfield>
-                    `);
-        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`
+                    `);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`
                     <sp-textfield></sp-textfield>
-                `);
-      const el2 = await litFixture(html`
+                `),t=await n(i`
                     <sp-textfield type="time"></sp-textfield>
-                `);
-      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`
+                `);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`
                     <sp-textfield type="url"></sp-textfield>
-                `);
-      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`
+                `);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`
                     <sp-textfield type="url"></sp-textfield>
-                `);
-      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>
+                `);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>
                 </sp-textfield>
-            `);
-      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}>
+            `);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}>
                     <sp-help-text slot="help-text" id="help-text-id-1">
-                        ${description}
+                        ${t}
                     </sp-help-text>
                 </sp-textfield>
-            `);
-      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>
+            `);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>
                     <sp-help-text slot="negative-help-text">
-                        ${descriptionNegative}
+                        ${o}
                     </sp-help-text>
                 </sp-textfield>
-            `);
-      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}>
+            `),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}>
                     <sp-help-text slot="help-text" id="help-text-id-2">
-                        ${description}
+                        ${t}
                     </sp-help-text>
                     <sp-help-text slot="negative-help-text" id="help-text-id-3">
-                        ${descriptionNegative}
+                        ${o}
                     </sp-help-text>
                 </sp-textfield>
-            `);
-      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);
-    });
-  });
-});
+            `),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)})})});
 //# sourceMappingURL=textfield.test.js.map