@spectrum-web-components/picker 0.12.1-devmode2.0 → 0.13.1

package/test/index.js

@@ -1,3 +1,4 @@
+"use strict";
 import {
   elementUpdated,
   expect,
@@ -31,7 +32,8 @@ const isMenuActiveElement = function() {
 export function runPickerTests() {
   let el;
   const pickerFixture = async () => {
-    const test = await fixture(html`
+    const test = await fixture(
+      html`
                 <div>
                     <sp-field-label for="picker">
                         Where do you live?
@@ -51,7 +53,8 @@ export function runPickerTests() {
                         <sp-menu-item disabled>Make Work Path</sp-menu-item>
                     </sp-picker>
                 </div>
-            `);
+            `
+    );
     return test.querySelector("sp-picker");
   };
   describe("standard", () => {
@@ -74,7 +77,9 @@ export function runPickerTests() {
       el.open = true;
       await opened;
       expect(el.open).to.be.true;
-      const accessibleCloseButton = document.querySelector(".visually-hidden button");
+      const accessibleCloseButton = document.querySelector(
+        ".visually-hidden button"
+      );
       const closed = oneEvent(el, "sp-closed");
       accessibleCloseButton.click();
       await closed;
@@ -86,7 +91,9 @@ export function runPickerTests() {
       await elementUpdated(option2);
       await elementUpdated(el);
       expect(el.value).to.equal("option-2");
-      expect((el.button.textContent || "").trim()).to.equal("Select Inverse");
+      expect((el.button.textContent || "").trim()).to.equal(
+        "Select Inverse"
+      );
       let itemUpdated = oneEvent(el, "sp-menu-item-added-or-updated");
       const newLabel1 = "Invert Selection";
       option2.innerHTML = newLabel1;
@@ -107,22 +114,31 @@ export function runPickerTests() {
       el.value = "option-2";
       await elementUpdated(el);
       expect(el.value).to.equal("option-2");
-      expect((el.button.textContent || "").trim()).to.equal("Select Inverse");
+      expect((el.button.textContent || "").trim()).to.equal(
+        "Select Inverse"
+      );
       const opened = oneEvent(el, "sp-opened");
       el.open = true;
       await opened;
-      const itemUpdated = oneEvent(option2, "sp-menu-item-added-or-updated");
+      const itemUpdated = oneEvent(
+        option2,
+        "sp-menu-item-added-or-updated"
+      );
       option2.innerHTML = "Invert Selection";
       await itemUpdated;
       await elementUpdated(el);
       expect(el.value).to.equal("option-2");
-      expect((el.button.textContent || "").trim()).to.equal("Invert Selection");
+      expect((el.button.textContent || "").trim()).to.equal(
+        "Invert Selection"
+      );
     });
     it("unsets value when children removed", async () => {
       el.value = "option-2";
       await elementUpdated(el);
       expect(el.value).to.equal("option-2");
-      expect((el.button.textContent || "").trim()).to.equal("Select Inverse");
+      expect((el.button.textContent || "").trim()).to.equal(
+        "Select Inverse"
+      );
       const items = el.querySelectorAll("sp-menu-item");
       const removals = [];
       items.forEach((item) => {
@@ -175,11 +191,23 @@ export function runPickerTests() {
     });
     it('manages its "name" value in the accessibility tree', async () => {
       let snapshot = await a11ySnapshot({});
-      expect(findAccessibilityNode(snapshot, (node) => node.name === "Where do you live?"), "`name` is the label text").to.not.be.null;
+      expect(
+        findAccessibilityNode(
+          snapshot,
+          (node) => node.name === "Where do you live?"
+        ),
+        "`name` is the label text"
+      ).to.not.be.null;
       el.value = "option-2";
       await elementUpdated(el);
       snapshot = await a11ySnapshot({});
-      expect(findAccessibilityNode(snapshot, (node) => node.name === "Where do you live? Select Inverse"), "`name` is the label text plus the selected item text").to.not.be.null;
+      expect(
+        findAccessibilityNode(
+          snapshot,
+          (node) => node.name === "Where do you live? Select Inverse"
+        ),
+        "`name` is the label text plus the selected item text"
+      ).to.not.be.null;
     });
     it("manages `aria-activedescendant`", async () => {
       const firstItem = el.querySelector("sp-menu-item:nth-child(1)");
@@ -187,10 +215,14 @@ export function runPickerTests() {
       const opened = oneEvent(el, "sp-opened");
       el.open = true;
       await opened;
-      expect(el.optionsMenu.getAttribute("aria-activedescendant")).to.equal(firstItem == null ? void 0 : firstItem.id);
+      expect(
+        el.optionsMenu.getAttribute("aria-activedescendant")
+      ).to.equal(firstItem == null ? void 0 : firstItem.id);
       await sendKeys({ press: "ArrowDown" });
       await elementUpdated(el);
-      expect(el.optionsMenu.getAttribute("aria-activedescendant")).to.equal(secondItem == null ? void 0 : secondItem.id);
+      expect(
+        el.optionsMenu.getAttribute("aria-activedescendant")
+      ).to.equal(secondItem == null ? void 0 : secondItem.id);
     });
     it("renders invalid accessibly", async () => {
       el.invalid = true;
@@ -270,7 +302,9 @@ export function runPickerTests() {
     });
     it("selects", async () => {
       var _a, _b;
-      const secondItem = el.querySelector("sp-menu-item:nth-of-type(2)");
+      const secondItem = el.querySelector(
+        "sp-menu-item:nth-of-type(2)"
+      );
       const button = el.button;
       const opened = oneEvent(el, "sp-opened");
       button.click();
@@ -288,8 +322,12 @@ export function runPickerTests() {
     });
     it("re-selects", async () => {
       var _a, _b, _c, _d;
-      const firstItem = el.querySelector("sp-menu-item:nth-of-type(1)");
-      const secondItem = el.querySelector("sp-menu-item:nth-of-type(2)");
+      const firstItem = el.querySelector(
+        "sp-menu-item:nth-of-type(1)"
+      );
+      const secondItem = el.querySelector(
+        "sp-menu-item:nth-of-type(2)"
+      );
       const button = el.button;
       const opened = oneEvent(el, "sp-opened");
       button.click();
@@ -325,7 +363,9 @@ export function runPickerTests() {
       const parent = el.parentElement;
       parent.attachShadow({ mode: "open" });
       parent.shadowRoot.append(el);
-      const secondItem = el.querySelector("sp-menu-item:nth-of-type(2)");
+      const secondItem = el.querySelector(
+        "sp-menu-item:nth-of-type(2)"
+      );
       parent.addEventListener("change", () => changeSpy());
       expect(el.value).to.equal("");
       const opened = oneEvent(el, "sp-opened");
@@ -342,7 +382,9 @@ export function runPickerTests() {
     it("can have selection prevented", async () => {
       var _a;
       const preventChangeSpy = spy();
-      const secondItem = el.querySelector("sp-menu-item:nth-of-type(2)");
+      const secondItem = el.querySelector(
+        "sp-menu-item:nth-of-type(2)"
+      );
       const button = el.button;
       let opened = oneEvent(el, "sp-opened");
       button.click();
@@ -370,7 +412,9 @@ export function runPickerTests() {
       const input = document.createElement("input");
       document.body.append(input);
       await elementUpdated(el);
-      const secondItem = el.querySelector("sp-menu-item:nth-of-type(2)");
+      const secondItem = el.querySelector(
+        "sp-menu-item:nth-of-type(2)"
+      );
       const button = el.button;
       const opened = oneEvent(el, "sp-opened");
       button.click();
@@ -390,7 +434,10 @@ export function runPickerTests() {
       expect(el.open).to.be.false;
       expect(el.value, "value changed").to.equal("option-2");
       expect(secondItem.selected, "selected changed").to.be.true;
-      await waitUntil(() => document.activeElement === input, "focus throw");
+      await waitUntil(
+        () => document.activeElement === input,
+        "focus throw"
+      );
       input.remove();
     });
     it("opens on ArrowUp", async () => {
@@ -404,21 +451,31 @@ export function runPickerTests() {
       button.dispatchEvent(arrowUpEvent());
       await elementUpdated(el);
       expect(el.open, "open by ArrowUp").to.be.true;
-      await waitUntil(() => document.querySelector("active-overlay") !== null, "an active-overlay has been inserted on the page");
-      button.dispatchEvent(new KeyboardEvent("keyup", {
-        bubbles: true,
-        composed: true,
-        cancelable: true,
-        key: "Escape",
-        code: "Escape"
-      }));
+      await waitUntil(
+        () => document.querySelector("active-overlay") !== null,
+        "an active-overlay has been inserted on the page"
+      );
+      button.dispatchEvent(
+        new KeyboardEvent("keyup", {
+          bubbles: true,
+          composed: true,
+          cancelable: true,
+          key: "Escape",
+          code: "Escape"
+        })
+      );
       await elementUpdated(el);
       await waitUntil(() => el.open === false, "closed by Escape");
-      await waitUntil(() => document.querySelector("active-overlay") === null, "an active-overlay has been inserted on the page");
+      await waitUntil(
+        () => document.querySelector("active-overlay") === null,
+        "an active-overlay has been inserted on the page"
+      );
     });
     it("opens on ArrowDown", async () => {
       var _a, _b;
-      const firstItem = el.querySelector("sp-menu-item:nth-of-type(1)");
+      const firstItem = el.querySelector(
+        "sp-menu-item:nth-of-type(1)"
+      );
       const button = el.button;
       el.focus();
       await elementUpdated(el);
@@ -495,13 +552,19 @@ export function runPickerTests() {
       el.open = true;
       await opened;
       await elementUpdated(el);
-      await waitUntil(() => firstItem.focused, "The first items should have become focused visually.");
+      await waitUntil(
+        () => firstItem.focused,
+        "The first items should have become focused visually."
+      );
       el.blur();
       await elementUpdated(el);
       expect(el.open).to.be.true;
       el.focus();
       await elementUpdated(el);
-      await waitUntil(() => isMenuActiveElement(), "first item refocused");
+      await waitUntil(
+        () => isMenuActiveElement(),
+        "first item refocused"
+      );
       expect(el.open).to.be.true;
       expect(isMenuActiveElement()).to.be.true;
       await sendKeys({ press: "ArrowDown" });
@@ -514,7 +577,10 @@ export function runPickerTests() {
       expect(el.open).to.be.true;
       el.focus();
       await elementUpdated(el);
-      await waitUntil(() => isMenuActiveElement(), "first item refocused");
+      await waitUntil(
+        () => isMenuActiveElement(),
+        "first item refocused"
+      );
       expect(el.open).to.be.true;
       expect(isMenuActiveElement()).to.be.true;
       await sendKeys({ press: "Tab" });
@@ -557,7 +623,9 @@ export function runPickerTests() {
       it("shift+tabs backwards through the element", async () => {
         input2.focus();
         await nextFrame();
-        expect(document.activeElement, "focuses input 2").to.equal(input2);
+        expect(document.activeElement, "focuses input 2").to.equal(
+          input2
+        );
         let focused = oneEvent(el, "focus");
         await sendKeys({ press: "Shift+Tab" });
         await focused;
@@ -567,7 +635,9 @@ export function runPickerTests() {
         focused = oneEvent(input1, "focus");
         await sendKeys({ press: "Shift+Tab" });
         await focused;
-        expect(document.activeElement, "focuses input 1").to.equal(input1);
+        expect(document.activeElement, "focuses input 1").to.equal(
+          input1
+        );
       });
       it('traps tab in the menu as a `type="modal"` overlay forward', async () => {
         el.focus();
@@ -577,7 +647,10 @@ export function runPickerTests() {
         await sendKeys({ press: "ArrowDown" });
         await opened;
         expect(el.open, "opened").to.be.true;
-        await waitUntil(() => isMenuActiveElement(), "first item focused");
+        await waitUntil(
+          () => isMenuActiveElement(),
+          "first item focused"
+        );
         const activeElement = document.activeElement;
         const blured = oneEvent(activeElement, "blur");
         await sendKeys({ press: "Tab" });
@@ -594,7 +667,10 @@ export function runPickerTests() {
         await sendKeys({ press: "ArrowDown" });
         await opened;
         expect(el.open, "opened").to.be.true;
-        await waitUntil(() => isMenuActiveElement(), "first item focused");
+        await waitUntil(
+          () => isMenuActiveElement(),
+          "first item focused"
+        );
         const activeElement = document.activeElement;
         const blured = oneEvent(activeElement, "blur");
         await sendKeys({ press: "Shift+Tab" });
@@ -611,7 +687,10 @@ export function runPickerTests() {
         await sendKeys({ press: "ArrowUp" });
         await opened;
         expect(el.open, "opened").to.be.true;
-        await waitUntil(() => isMenuActiveElement(), "first item focused");
+        await waitUntil(
+          () => isMenuActiveElement(),
+          "first item focused"
+        );
         const closed = oneEvent(el, "sp-closed");
         el.open = false;
         await closed;
@@ -631,7 +710,10 @@ export function runPickerTests() {
         await sendKeys({ press: "ArrowUp" });
         await opened;
         expect(el.open, "opened").to.be.true;
-        await waitUntil(() => isMenuActiveElement(), "first item focused");
+        await waitUntil(
+          () => isMenuActiveElement(),
+          "first item focused"
+        );
         const closed = oneEvent(el, "sp-closed");
         el.open = false;
         await closed;
@@ -655,8 +737,12 @@ export function runPickerTests() {
     it("scrolls selected into view on open", async () => {
       await el.generatePopover();
       el.popover.style.height = "40px";
-      const firstItem = el.querySelector("sp-menu-item:first-child");
-      const lastItem = el.querySelector("sp-menu-item:last-child");
+      const firstItem = el.querySelector(
+        "sp-menu-item:first-child"
+      );
+      const lastItem = el.querySelector(
+        "sp-menu-item:last-child"
+      );
       lastItem.disabled = false;
       el.value = lastItem.value;
       await elementUpdated(el);
@@ -670,7 +756,9 @@ export function runPickerTests() {
       };
       expect(getParentOffset(lastItem)).to.be.lessThan(40);
       expect(getParentOffset(firstItem)).to.be.lessThan(-1);
-      lastItem.dispatchEvent(new FocusEvent("focusin", { bubbles: true }));
+      lastItem.dispatchEvent(
+        new FocusEvent("focusin", { bubbles: true })
+      );
       lastItem.dispatchEvent(arrowDownEvent());
       await elementUpdated(el);
       await nextFrame();
@@ -680,7 +768,8 @@ export function runPickerTests() {
   });
   describe("grouped", async () => {
     const groupedFixture = async () => {
-      return fixture(html`
+      return fixture(
+        html`
                     <sp-picker
                         quiet
                         label="I would like to use Spectrum Web Components"
@@ -702,7 +791,8 @@ export function runPickerTests() {
                             <sp-menu-item value="4">In the future</sp-menu-item>
                         </sp-menu-group>
                     </sp-picker>
-                `);
+                `
+      );
     };
     beforeEach(async () => {
       el = await groupedFixture();
@@ -715,7 +805,8 @@ export function runPickerTests() {
   });
   describe("slotted label", () => {
     const pickerFixture2 = async () => {
-      const test = await fixture(html`
+      const test = await fixture(
+        html`
                     <div>
                         <sp-field-label for="picker-slotted">
                             Where do you live?
@@ -736,7 +827,8 @@ export function runPickerTests() {
                             <sp-menu-item disabled>Make Work Path</sp-menu-item>
                         </sp-picker>
                     </div>
-                `);
+                `
+      );
       return test.querySelector("sp-picker");
     };
     beforeEach(async () => {
@@ -756,7 +848,8 @@ export function runPickerTests() {
   });
   describe("deprecated", () => {
     const pickerFixture2 = async () => {
-      const test = await fixture(html`
+      const test = await fixture(
+        html`
                     <div>
                         <sp-field-label for="picker-deprecated">
                             Where do you live?
@@ -780,7 +873,8 @@ export function runPickerTests() {
                             </sp-menu>
                         </sp-picker>
                     </div>
-                `);
+                `
+      );
       return test.querySelector("sp-picker");
     };
     describe("Dev mode", () => {
@@ -790,8 +884,14 @@ export function runPickerTests() {
         await elementUpdated(el);
         expect(consoleWarnStub.called).to.be.true;
         const spyCall = consoleWarnStub.getCall(0);
-        expect(spyCall.args.at(0).includes("<sp-menu>"), "confirm <sp-menu>-centric message").to.be.true;
-        expect(spyCall.args.at(-1), "confirm `data` shape").to.deep.equal({
+        expect(
+          spyCall.args.at(0).includes("<sp-menu>"),
+          "confirm <sp-menu>-centric message"
+        ).to.be.true;
+        expect(
+          spyCall.args.at(-1),
+          "confirm `data` shape"
+        ).to.deep.equal({
           data: {
             localName: "sp-picker",
             type: "api",
@@ -829,7 +929,9 @@ export function runPickerTests() {
       });
       it("selects with deprecated syntax", async () => {
         var _a, _b;
-        const secondItem = el.querySelector("sp-menu-item:nth-of-type(2)");
+        const secondItem = el.querySelector(
+          "sp-menu-item:nth-of-type(2)"
+        );
         const opened = oneEvent(el, "sp-opened");
         el.button.click();
         await opened;
@@ -854,11 +956,23 @@ export function runPickerTests() {
     const el2 = test.querySelector("sp-picker");
     await elementUpdated(el2);
     let snapshot = await a11ySnapshot({});
-    expect(findAccessibilityNode(snapshot, (node) => node.name === "Choose an action type... Delete"), "`name` is the label text").to.not.be.null;
+    expect(
+      findAccessibilityNode(
+        snapshot,
+        (node) => node.name === "Choose an action type... Delete"
+      ),
+      "`name` is the label text"
+    ).to.not.be.null;
     el2.value = "2";
     await elementUpdated(el2);
     snapshot = await a11ySnapshot({});
-    expect(findAccessibilityNode(snapshot, (node) => node.name === "Choose an action type... Copy"), "`name` is the label text plus the selected item text").to.not.be.null;
+    expect(
+      findAccessibilityNode(
+        snapshot,
+        (node) => node.name === "Choose an action type... Copy"
+      ),
+      "`name` is the label text plus the selected item text"
+    ).to.not.be.null;
   });
   it("toggles between pickers", async () => {
     const el2 = await pickerFixture();
@@ -894,7 +1008,8 @@ export function runPickerTests() {
   });
   it("displays selected item text by default", async () => {
     var _a, _b, _c, _d;
-    const el2 = await fixture(html`
+    const el2 = await fixture(
+      html`
                 <sp-picker
                     value="inverse"
                     label="Select a Country with a very long label, too long in fact"
@@ -907,31 +1022,48 @@ export function runPickerTests() {
                     <sp-menu-item>Save Selection</sp-menu-item>
                     <sp-menu-item disabled>Make Work Path</sp-menu-item>
                 </sp-picker>
-            `);
+            `
+    );
     await elementUpdated(el2);
-    await waitUntil(() => {
-      var _a2;
-      return ((_a2 = el2.selectedItem) == null ? void 0 : _a2.itemText) === "Select Inverse";
-    }, `Selected Item Text: ${(_a = el2.selectedItem) == null ? void 0 : _a.itemText}`);
-    const firstItem = el2.querySelector("sp-menu-item:nth-of-type(1)");
-    const secondItem = el2.querySelector("sp-menu-item:nth-of-type(2)");
+    await waitUntil(
+      () => {
+        var _a2;
+        return ((_a2 = el2.selectedItem) == null ? void 0 : _a2.itemText) === "Select Inverse";
+      },
+      `Selected Item Text: ${(_a = el2.selectedItem) == null ? void 0 : _a.itemText}`
+    );
+    const firstItem = el2.querySelector(
+      "sp-menu-item:nth-of-type(1)"
+    );
+    const secondItem = el2.querySelector(
+      "sp-menu-item:nth-of-type(2)"
+    );
     expect(el2.value).to.equal("inverse");
     expect((_b = el2.selectedItem) == null ? void 0 : _b.itemText).to.equal("Select Inverse");
     el2.focus();
     await elementUpdated(el2);
-    expect(el2 === document.activeElement, `activeElement is ${(_c = document.activeElement) == null ? void 0 : _c.localName}`).to.be.true;
+    expect(
+      el2 === document.activeElement,
+      `activeElement is ${(_c = document.activeElement) == null ? void 0 : _c.localName}`
+    ).to.be.true;
     const opened = oneEvent(el2, "sp-opened");
     sendKeys({ press: "Enter" });
     await opened;
     await elementUpdated(el2.optionsMenu);
-    expect(el2.optionsMenu === document.activeElement, `activeElement is ${(_d = document.activeElement) == null ? void 0 : _d.localName}`).to.be.true;
+    expect(
+      el2.optionsMenu === document.activeElement,
+      `activeElement is ${(_d = document.activeElement) == null ? void 0 : _d.localName}`
+    ).to.be.true;
     expect(firstItem.focused, 'firstItem NOT "focused"').to.be.false;
     expect(secondItem.focused, 'secondItem "focused"').to.be.true;
-    expect(el2.optionsMenu.getAttribute("aria-activedescendant")).to.equal(secondItem.id);
+    expect(el2.optionsMenu.getAttribute("aria-activedescendant")).to.equal(
+      secondItem.id
+    );
   });
   it("resets value when item not available", async () => {
     var _a;
-    const el2 = await fixture(html`
+    const el2 = await fixture(
+      html`
                 <sp-picker
                     value="missing"
                     label="Select a Country with a very long label, too long in fact"
@@ -944,7 +1076,8 @@ export function runPickerTests() {
                     <sp-menu-item>Save Selection</sp-menu-item>
                     <sp-menu-item disabled>Make Work Path</sp-menu-item>
                 </sp-picker>
-            `);
+            `
+    );
     await elementUpdated(el2);
     await waitUntil(() => el2.value === "");
     expect(el2.value).to.equal("");
@@ -953,7 +1086,8 @@ export function runPickerTests() {
   it("allows event listeners on child items", async () => {
     const mouseenterSpy = spy();
     const handleMouseenter = () => mouseenterSpy();
-    const el2 = await fixture(html`
+    const el2 = await fixture(
+      html`
                 <sp-picker
                     label="Select a Country with a very long label, too long in fact"
                 >
@@ -964,7 +1098,8 @@ export function runPickerTests() {
                         Deselect Text
                     </sp-menu-item>
                 </sp-picker>
-            `);
+            `
+    );
     await elementUpdated(el2);
     const hoverEl = el2.querySelector("sp-menu-item");
     const opened = oneEvent(el2, "sp-opened");
@@ -987,7 +1122,8 @@ export function runPickerTests() {
     const closedSpy = spy();
     const handleOpenedSpy = (event) => openedSpy(event);
     const handleClosedSpy = (event) => closedSpy(event);
-    const el2 = await fixture(html`
+    const el2 = await fixture(
+      html`
                 <sp-picker
                     label="Select a Country with a very long label, too long in fact"
                     @sp-opened=${handleOpenedSpy}
@@ -995,7 +1131,8 @@ export function runPickerTests() {
                 >
                     <sp-menu-item value="deselect">Deselect Text</sp-menu-item>
                 </sp-picker>
-            `);
+            `
+    );
     await elementUpdated(el2);
     const opened = oneEvent(el2, "sp-opened");
     el2.open = true;