@spectrum-web-components/picker 0.14.2-overlay.33 → 0.14.2

package/test/index.js

@@ -29,9 +29,9 @@ import { sendMouse } from "../../../test/plugins/browser.js";
 import { ignoreResizeObserverLoopError } from "../../../test/testing-helpers.js";
 import { isWebKit } from "@spectrum-web-components/shared/src/platform.js";
 ignoreResizeObserverLoopError(before, after);
-const isMenuActiveElement = function(el) {
+const isMenuActiveElement = function() {
   var _a;
-  return ((_a = el.shadowRoot.activeElement) == null ? void 0 : _a.localName) === "sp-menu";
+  return ((_a = document.activeElement) == null ? void 0 : _a.localName) === "sp-menu";
 };
 export function runPickerTests() {
   let el;
@@ -81,7 +81,7 @@ export function runPickerTests() {
       el.open = true;
       await opened;
       expect(el.open).to.be.true;
-      const accessibleCloseButton = el.shadowRoot.querySelector(
+      const accessibleCloseButton = document.querySelector(
         ".visually-hidden button"
       );
       const closed = oneEvent(el, "sp-closed");
@@ -90,7 +90,6 @@ export function runPickerTests() {
       expect(el.open).to.be.false;
     });
     it("accepts new selected item content", async () => {
-      await nextFrame();
       const option2 = el.querySelector('[value="option-2"');
       el.value = "option-2";
       await elementUpdated(option2);
@@ -115,7 +114,6 @@ export function runPickerTests() {
       expect((el.button.textContent || "").trim()).to.equal(newLabel2);
     });
     it("accepts new selected item content when open", async () => {
-      await nextFrame();
       const option2 = el.querySelector('[value="option-2"');
       el.value = "option-2";
       await elementUpdated(el);
@@ -139,7 +137,6 @@ export function runPickerTests() {
       );
     });
     it("unsets value when children removed", async () => {
-      await nextFrame();
       el.value = "option-2";
       await elementUpdated(el);
       expect(el.value).to.equal("option-2");
@@ -155,8 +152,6 @@ export function runPickerTests() {
       });
       await Promise.all(removals);
       await elementUpdated(el);
-      await nextFrame();
-      expect(el.optionsMenu.childItems.length).to.equal(0);
       expect(el.value).to.equal("");
       expect((el.button.textContent || "").trim()).to.equal("");
     });
@@ -168,7 +163,7 @@ export function runPickerTests() {
       item.value = "option-new";
       item.textContent = "New Option";
       el.append(item);
-      await nextFrame();
+      await elementUpdated(el);
       el.value = "option-new";
       await elementUpdated(el);
       expect(el.value).to.equal("option-new");
@@ -181,7 +176,8 @@ export function runPickerTests() {
       item.value = "option-new";
       item.textContent = "New Option";
       el.append(item);
-      await nextFrame();
+      await elementUpdated(item);
+      await elementUpdated(el);
       let opened = oneEvent(el, "sp-opened");
       el.open = true;
       await opened;
@@ -198,7 +194,6 @@ export function runPickerTests() {
       expect(el.value, "second time").to.equal("option-new");
     });
     it('manages its "name" value in the accessibility tree', async () => {
-      await nextFrame();
       let snapshot = await a11ySnapshot({});
       expect(
         findAccessibilityNode(
@@ -209,7 +204,6 @@ export function runPickerTests() {
       ).to.not.be.null;
       el.value = "option-2";
       await elementUpdated(el);
-      await nextFrame();
       snapshot = await a11ySnapshot({});
       expect(
         findAccessibilityNode(
@@ -245,7 +239,7 @@ export function runPickerTests() {
       await elementUpdated(el);
       await expect(el).to.be.accessible();
     });
-    xit("opens with visible focus on a menu item on `DownArrow`", async () => {
+    it("opens with visible focus on a menu item on `DownArrow`", async () => {
       const firstItem = el.querySelector("sp-menu-item");
       await elementUpdated(el);
       expect(firstItem.focused, "should not visually focused").to.be.false;
@@ -303,15 +297,11 @@ export function runPickerTests() {
       document.body.append(other);
       await elementUpdated(el);
       expect(el.open).to.be.false;
-      const opened = oneEvent(el, "sp-opened");
       el.click();
-      await opened;
       await elementUpdated(el);
       expect(el.open).to.be.true;
-      const closed = oneEvent(el, "sp-closed");
       other.click();
-      closed;
-      await elementUpdated(el);
+      await waitUntil(() => !el.open, "closed");
       other.remove();
     });
     it("selects", async () => {
@@ -464,14 +454,18 @@ export function runPickerTests() {
       expect(el.open, "still closed").to.be.false;
       button.dispatchEvent(arrowUpEvent());
       await elementUpdated(el);
-      const opened = oneEvent(el, "sp-opened");
       expect(el.open, "open by ArrowUp").to.be.true;
-      await opened;
-      const closed = oneEvent(el, "sp-closed");
+      await waitUntil(
+        () => document.querySelector("active-overlay") !== null,
+        "an active-overlay has been inserted on the page"
+      );
       button.dispatchEvent(escapeEvent());
-      await closed;
       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"
+      );
     });
     it("opens on ArrowDown", async () => {
       var _a, _b;
@@ -498,7 +492,6 @@ export function runPickerTests() {
       expect(el.value).to.equal("Deselect");
     });
     it("quick selects on ArrowLeft/Right", async () => {
-      await nextFrame();
       const selectionSpy = spy();
       el.addEventListener("change", (event) => {
         const { value } = event.target;
@@ -526,7 +519,6 @@ export function runPickerTests() {
       expect(selectionSpy.calledWith("Make Work Path")).to.be.false;
     });
     it("quick selects first item on ArrowRight when no value", async () => {
-      await nextFrame();
       const selectionSpy = spy();
       el.addEventListener("change", (event) => {
         const { value } = event.target;
@@ -544,10 +536,6 @@ export function runPickerTests() {
     });
     it("refocuses on list when open", async () => {
       const firstItem = el.querySelector("sp-menu-item");
-      const thirdItem = el.querySelector(
-        "sp-menu-item:nth-of-type(3)"
-      );
-      const button = el.button;
       const input = document.createElement("input");
       el.insertAdjacentElement("afterend", input);
       el.focus();
@@ -555,41 +543,44 @@ export function runPickerTests() {
       expect(document.activeElement === input).to.be.true;
       await sendKeys({ press: "Shift+Tab" });
       expect(document.activeElement === el).to.be.true;
+      await sendKeys({ press: "Enter" });
       const opened = oneEvent(el, "sp-opened");
-      sendKeys({ press: "Enter" });
+      el.open = true;
       await opened;
       await elementUpdated(el);
       await waitUntil(
         () => firstItem.focused,
         "The first items should have become focused visually."
       );
-      await sendKeys({ press: "ArrowDown" });
-      await sendKeys({ press: "ArrowDown" });
-      expect(thirdItem.focused).to.be.true;
-      button.focus();
-      expect(isMenuActiveElement(el)).to.be.false;
+      el.blur();
+      await elementUpdated(el);
+      expect(el.open).to.be.true;
       el.focus();
       await elementUpdated(el);
       await waitUntil(
-        () => isMenuActiveElement(el),
+        () => isMenuActiveElement(),
         "first item refocused"
       );
-      expect(isMenuActiveElement(el)).to.be.true;
-      expect(thirdItem.focused).to.be.true;
+      expect(el.open).to.be.true;
+      expect(isMenuActiveElement()).to.be.true;
+      await sendKeys({ press: "ArrowDown" });
+      await sendKeys({ press: "ArrowUp" });
+      expect(firstItem.focused).to.be.true;
     });
-    it("allows tabing to close", async () => {
-      const input = document.createElement("input");
-      el.insertAdjacentElement("afterend", input);
-      const opened = oneEvent(el, "sp-opened");
+    it("does not allow tabing to close", async () => {
       el.open = true;
-      await opened;
-      await nextFrame();
+      await elementUpdated(el);
       expect(el.open).to.be.true;
       el.focus();
-      const closed = oneEvent(el, "sp-closed");
-      sendKeys({ press: "Tab" });
-      await closed;
-      expect(el.open, "closes").to.be.false;
+      await elementUpdated(el);
+      await waitUntil(
+        () => isMenuActiveElement(),
+        "first item refocused"
+      );
+      expect(el.open).to.be.true;
+      expect(isMenuActiveElement()).to.be.true;
+      await sendKeys({ press: "Tab" });
+      expect(el.open, "stays open").to.be.true;
     });
     describe("tab order", () => {
       let input1;
@@ -644,7 +635,7 @@ export function runPickerTests() {
           input1
         );
       });
-      xit('traps tab in the menu as a `type="modal"` overlay forward', async () => {
+      it('traps tab in the menu as a `type="modal"` overlay forward', async () => {
         el.focus();
         await nextFrame();
         expect(document.activeElement, "focuses el").to.equal(el);
@@ -653,7 +644,7 @@ export function runPickerTests() {
         await opened;
         expect(el.open, "opened").to.be.true;
         await waitUntil(
-          () => isMenuActiveElement(el),
+          () => isMenuActiveElement(),
           "first item focused"
         );
         const activeElement = document.activeElement;
@@ -666,7 +657,7 @@ export function runPickerTests() {
           expect(document.activeElement === input2).to.be.false;
         }
       });
-      xit('traps tab in the menu as a `type="modal"` overlay backwards', async () => {
+      it('traps tab in the menu as a `type="modal"` overlay backwards', async () => {
         el.focus();
         await nextFrame();
         expect(document.activeElement, "focuses el").to.equal(el);
@@ -675,7 +666,7 @@ export function runPickerTests() {
         await opened;
         expect(el.open, "opened").to.be.true;
         await waitUntil(
-          () => isMenuActiveElement(el),
+          () => isMenuActiveElement(),
           "first item focused"
         );
         const activeElement = document.activeElement;
@@ -688,7 +679,7 @@ export function runPickerTests() {
           expect(document.activeElement === input2).to.be.false;
         }
       });
-      xit("can close and immediate tab to the next tab stop", async () => {
+      it("can close and immediate tab to the next tab stop", async () => {
         el.focus();
         await nextFrame();
         expect(document.activeElement, "focuses el").to.equal(el);
@@ -697,7 +688,7 @@ export function runPickerTests() {
         await opened;
         expect(el.open, "opened").to.be.true;
         await waitUntil(
-          () => isMenuActiveElement(el),
+          () => isMenuActiveElement(),
           "first item focused"
         );
         const closed = oneEvent(el, "sp-closed");
@@ -714,13 +705,13 @@ export function runPickerTests() {
       it("can close and immediate shift+tab to the previous tab stop", async () => {
         el.focus();
         await nextFrame();
-        expect(document.activeElement === el, "focuses el").to.be.true;
+        expect(document.activeElement, "focuses el").to.equal(el);
         const opened = oneEvent(el, "sp-opened");
         await sendKeys({ press: "ArrowUp" });
         await opened;
         expect(el.open, "opened").to.be.true;
         await waitUntil(
-          () => isMenuActiveElement(el),
+          () => isMenuActiveElement(),
           "first item focused"
         );
         const closed = oneEvent(el, "sp-closed");
@@ -729,7 +720,7 @@ export function runPickerTests() {
         expect(el.open).to.be.false;
         expect(document.activeElement === el).to.be.true;
         const focused = oneEvent(input1, "focus");
-        sendKeys({ press: "Shift+Tab" });
+        await sendKeys({ press: "Shift+Tab" });
         await focused;
         expect(el.open).to.be.false;
         expect(document.activeElement === input1).to.be.true;
@@ -744,7 +735,8 @@ export function runPickerTests() {
       expect(el.open).to.be.false;
     });
     it("scrolls selected into view on open", async () => {
-      el.shadowRoot.querySelector("sp-popover").style.height = "40px";
+      await el.generatePopover();
+      el.popoverEl.style.height = "40px";
       const firstItem = el.querySelector(
         "sp-menu-item:first-child"
       );
@@ -756,12 +748,9 @@ export function runPickerTests() {
       await elementUpdated(el);
       el.open = true;
       await elementUpdated(el);
-      await waitUntil(
-        () => isMenuActiveElement(el),
-        "first item focused"
-      );
+      await waitUntil(() => isMenuActiveElement(), "first item focused");
       const getParentOffset = (el2) => {
-        const parentScroll = el2.assignedSlot.parentElement.scrollTop;
+        const parentScroll = el2.parentElement.scrollTop;
         const parentOffset = el2.offsetTop - parentScroll;
         return parentOffset;
       };
@@ -808,8 +797,6 @@ export function runPickerTests() {
     beforeEach(async () => {
       el = await groupedFixture();
       await elementUpdated(el);
-      await nextFrame();
-      await nextFrame();
     });
     it("selects the item with a matching value in a group", async () => {
       const item = el.querySelector("#should-be-selected");
@@ -968,7 +955,6 @@ export function runPickerTests() {
         `);
     const el2 = test.querySelector("sp-picker");
     await elementUpdated(el2);
-    await nextFrame();
     let snapshot = await a11ySnapshot({});
     expect(
       findAccessibilityNode(
@@ -979,7 +965,6 @@ export function runPickerTests() {
     ).to.not.be.null;
     el2.value = "2";
     await elementUpdated(el2);
-    await nextFrame();
     snapshot = await a11ySnapshot({});
     expect(
       findAccessibilityNode(
@@ -1022,7 +1007,7 @@ export function runPickerTests() {
     expect(el1.open).to.be.false;
   });
   it("displays selected item text by default", async () => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d;
     const el2 = await fixture(
       html`
                 <sp-picker
@@ -1066,13 +1051,9 @@ export function runPickerTests() {
     await opened;
     await elementUpdated(el2.optionsMenu);
     expect(
-      el2 === document.activeElement,
+      el2.optionsMenu === document.activeElement,
       `activeElement is ${(_d = document.activeElement) == null ? void 0 : _d.localName}`
     ).to.be.true;
-    expect(
-      el2.optionsMenu === el2.shadowRoot.activeElement,
-      `activeElement is ${(_e = el2.shadowRoot.activeElement) == null ? void 0 : _e.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(
@@ -1159,11 +1140,15 @@ export function runPickerTests() {
     await elementUpdated(el2);
     expect(openedSpy.calledOnce).to.be.true;
     expect(closedSpy.calledOnce).to.be.false;
+    const openedEvent = openedSpy.args[0][0];
+    expect(openedEvent.detail.interaction).to.equal("modal");
     const closed = oneEvent(el2, "sp-closed");
     el2.open = false;
     await closed;
     await elementUpdated(el2);
     expect(closedSpy.calledOnce).to.be.true;
+    const closedEvent = closedSpy.args[0][0];
+    expect(closedEvent.detail.interaction).to.equal("modal");
   });
 }
 //# sourceMappingURL=index.js.map