@esri/calcite-components 2.8.1-next.4 → 2.8.1

package/dist/collection/components/chip-group/chip-group.e2e.js

@@ -1,13 +1,12 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.8.1-next.4
+ * v2.8.1
  */
 import { newE2EPage } from "@stencil/core/testing";
 import { html } from "../../../support/formatting";
 import { accessible, renders, hidden, disabled } from "../../tests/commonTests";
 import { CSS as CHIP_CSS } from "../chip/resources";
-import { createSelectedItemsAsserter } from "../../tests/utils";
 describe("calcite-chip-group", () => {
     describe("renders", () => {
         renders("<calcite-chip-group><calcite-chip></calcite-chip></calcite-chip-group>", {
@@ -59,14 +58,14 @@ describe("calcite-chip-group", () => {
             const chip1 = await page.find("#chip-1");
             const chip2 = await page.find("#chip-2");
             const chipGroupSelectSpy = await element.spyOnEvent("calciteChipGroupSelect");
-            const selectedItemAsserter = await createSelectedItemsAsserter(page, "calcite-chip-group", "calciteChipGroupSelect");
+            await assertSelectedItems.setUpEvents(page);
             const chipSelectSpy1 = await chip1.spyOnEvent("calciteChipSelect");
             const chipSelectSpy2 = await chip2.spyOnEvent("calciteChipSelect");
             expect(chipGroupSelectSpy).toHaveReceivedEventTimes(0);
             expect(chipSelectSpy1).toHaveReceivedEventTimes(0);
             expect(chipSelectSpy2).toHaveReceivedEventTimes(0);
             expect(await element.getProperty("selectedItems")).toHaveLength(1);
-            await selectedItemAsserter([chip2.id]);
+            await assertSelectedItems(page, { expectedItemIds: [chip2.id] });
             await chip1.click();
             await page.waitForChanges();
             expect(await chipGroupSelectSpy).toHaveReceivedEventTimes(1);
@@ -75,7 +74,7 @@ describe("calcite-chip-group", () => {
             expect(await chip1.getProperty("selected")).toBe(true);
             expect(await chip2.getProperty("selected")).toBe(false);
             expect(await element.getProperty("selectedItems")).toHaveLength(1);
-            await selectedItemAsserter([chip1.id]);
+            await assertSelectedItems(page, { expectedItemIds: [chip1.id] });
             await chip2.click();
             await page.waitForChanges();
             expect(chipGroupSelectSpy).toHaveReceivedEventTimes(2);
@@ -84,7 +83,7 @@ describe("calcite-chip-group", () => {
             expect(await chip1.getProperty("selected")).toBe(false);
             expect(await chip2.getProperty("selected")).toBe(true);
             expect(await element.getProperty("selectedItems")).toHaveLength(1);
-            await selectedItemAsserter([chip2.id]);
+            await assertSelectedItems(page, { expectedItemIds: [chip2.id] });
             await chip2.click();
             await page.waitForChanges();
             expect(chipGroupSelectSpy).toHaveReceivedEventTimes(3);
@@ -93,7 +92,7 @@ describe("calcite-chip-group", () => {
             expect(await chip1.getProperty("selected")).toBe(false);
             expect(await chip2.getProperty("selected")).toBe(false);
             expect(await element.getProperty("selectedItems")).toEqual([]);
-            await selectedItemAsserter([]);
+            await assertSelectedItems(page, { expectedItemIds: [] });
         });
         it("selection mode none (default) allows no chip to be selected", async () => {
             const page = await newE2EPage();
@@ -106,31 +105,31 @@ describe("calcite-chip-group", () => {
             const chip1 = await page.find("#chip-1");
             const chip2 = await page.find("#chip-2");
             const chipGroupSelectSpy = await element.spyOnEvent("calciteChipGroupSelect");
-            const selectedItemAsserter = await createSelectedItemsAsserter(page, "calcite-chip-group", "calciteChipGroupSelect");
+            await assertSelectedItems.setUpEvents(page);
             expect(chipGroupSelectSpy).toHaveReceivedEventTimes(0);
             expect(await element.getProperty("selectedItems")).toEqual([]);
-            await selectedItemAsserter([]);
+            await assertSelectedItems(page, { expectedItemIds: [] });
             await chip1.click();
             await page.waitForChanges();
             expect(chipGroupSelectSpy).toHaveReceivedEventTimes(1);
             expect(await chip1.getProperty("selected")).toBe(false);
             expect(await chip2.getProperty("selected")).toBe(false);
             expect(await element.getProperty("selectedItems")).toEqual([]);
-            await selectedItemAsserter([]);
+            await assertSelectedItems(page, { expectedItemIds: [] });
             await chip2.click();
             await page.waitForChanges();
             expect(chipGroupSelectSpy).toHaveReceivedEventTimes(2);
             expect(await chip1.getProperty("selected")).toBe(false);
             expect(await chip2.getProperty("selected")).toBe(false);
             expect(await element.getProperty("selectedItems")).toEqual([]);
-            await selectedItemAsserter([]);
+            await assertSelectedItems(page, { expectedItemIds: [] });
             await chip2.click();
             await page.waitForChanges();
             expect(chipGroupSelectSpy).toHaveReceivedEventTimes(3);
             expect(await chip1.getProperty("selected")).toBe(false);
             expect(await chip2.getProperty("selected")).toBe(false);
             expect(await element.getProperty("selectedItems")).toEqual([]);
-            await selectedItemAsserter([]);
+            await assertSelectedItems(page, { expectedItemIds: [] });
         });
         it("selection mode single-persist allows one chip to be selected", async () => {
             const page = await newE2EPage();
@@ -143,31 +142,31 @@ describe("calcite-chip-group", () => {
             const chip1 = await page.find("#chip-1");
             const chip2 = await page.find("#chip-2");
             const chipGroupSelectSpy = await element.spyOnEvent("calciteChipGroupSelect");
-            const selectedItemAsserter = await createSelectedItemsAsserter(page, "calcite-chip-group", "calciteChipGroupSelect");
+            await assertSelectedItems.setUpEvents(page);
             expect(chipGroupSelectSpy).toHaveReceivedEventTimes(0);
             expect(await element.getProperty("selectedItems")).toHaveLength(1);
-            await selectedItemAsserter([chip1.id]);
+            await assertSelectedItems(page, { expectedItemIds: [chip1.id] });
             await chip1.click();
             await page.waitForChanges();
             expect(chipGroupSelectSpy).toHaveReceivedEventTimes(1);
             expect(await chip1.getProperty("selected")).toBe(true);
             expect(await chip2.getProperty("selected")).toBe(false);
             expect(await element.getProperty("selectedItems")).toHaveLength(1);
-            await selectedItemAsserter([chip1.id]);
+            await assertSelectedItems(page, { expectedItemIds: [chip1.id] });
             await chip2.click();
             await page.waitForChanges();
             expect(chipGroupSelectSpy).toHaveReceivedEventTimes(2);
             expect(await chip1.getProperty("selected")).toBe(false);
             expect(await chip2.getProperty("selected")).toBe(true);
             expect(await element.getProperty("selectedItems")).toHaveLength(1);
-            await selectedItemAsserter([chip2.id]);
+            await assertSelectedItems(page, { expectedItemIds: [chip2.id] });
             await chip2.click();
             await page.waitForChanges();
             expect(chipGroupSelectSpy).toHaveReceivedEventTimes(3);
             expect(await chip1.getProperty("selected")).toBe(false);
             expect(await chip2.getProperty("selected")).toBe(true);
             expect(await element.getProperty("selectedItems")).toHaveLength(1);
-            await selectedItemAsserter([chip2.id]);
+            await assertSelectedItems(page, { expectedItemIds: [chip2.id] });
         });
         it("selection mode multiple allows none, one, or multiple to be selected", async () => {
             const page = await newE2EPage();
@@ -182,10 +181,10 @@ describe("calcite-chip-group", () => {
             const chip2 = await page.find("#chip-2");
             const chip3 = await page.find("#chip-3");
             const chipGroupSelectSpy = await element.spyOnEvent("calciteChipGroupSelect");
-            const selectedItemAsserter = await createSelectedItemsAsserter(page, "calcite-chip-group", "calciteChipGroupSelect");
+            await assertSelectedItems.setUpEvents(page);
             expect(chipGroupSelectSpy).toHaveReceivedEventTimes(0);
             expect(await element.getProperty("selectedItems")).toEqual([]);
-            await selectedItemAsserter([]);
+            await assertSelectedItems(page, { expectedItemIds: [] });
             await chip1.click();
             await page.waitForChanges();
             expect(chipGroupSelectSpy).toHaveReceivedEventTimes(1);
@@ -193,7 +192,7 @@ describe("calcite-chip-group", () => {
             expect(await chip2.getProperty("selected")).toBe(false);
             expect(await chip3.getProperty("selected")).toBe(false);
             expect(await element.getProperty("selectedItems")).toHaveLength(1);
-            await selectedItemAsserter([chip1.id]);
+            await assertSelectedItems(page, { expectedItemIds: [chip1.id] });
             await chip2.click();
             await page.waitForChanges();
             expect(chipGroupSelectSpy).toHaveReceivedEventTimes(2);
@@ -201,7 +200,7 @@ describe("calcite-chip-group", () => {
             expect(await chip2.getProperty("selected")).toBe(true);
             expect(await chip3.getProperty("selected")).toBe(false);
             expect(await element.getProperty("selectedItems")).toHaveLength(2);
-            await selectedItemAsserter([chip1.id, chip2.id]);
+            await assertSelectedItems(page, { expectedItemIds: [chip1.id, chip2.id] });
             await chip3.click();
             await page.waitForChanges();
             expect(chipGroupSelectSpy).toHaveReceivedEventTimes(3);
@@ -209,7 +208,7 @@ describe("calcite-chip-group", () => {
             expect(await chip2.getProperty("selected")).toBe(true);
             expect(await chip3.getProperty("selected")).toBe(true);
             expect(await element.getProperty("selectedItems")).toHaveLength(3);
-            await selectedItemAsserter([chip1.id, chip2.id, chip3.id]);
+            await assertSelectedItems(page, { expectedItemIds: [chip1.id, chip2.id, chip3.id] });
             await chip1.click();
             await page.waitForChanges();
             expect(chipGroupSelectSpy).toHaveReceivedEventTimes(4);
@@ -217,7 +216,7 @@ describe("calcite-chip-group", () => {
             expect(await chip2.getProperty("selected")).toBe(true);
             expect(await chip3.getProperty("selected")).toBe(true);
             expect(await element.getProperty("selectedItems")).toHaveLength(2);
-            await selectedItemAsserter([chip2.id, chip3.id]);
+            await assertSelectedItems(page, { expectedItemIds: [chip2.id, chip3.id] });
             await chip2.click();
             await page.waitForChanges();
             expect(chipGroupSelectSpy).toHaveReceivedEventTimes(5);
@@ -225,7 +224,7 @@ describe("calcite-chip-group", () => {
             expect(await chip2.getProperty("selected")).toBe(false);
             expect(await chip3.getProperty("selected")).toBe(true);
             expect(await element.getProperty("selectedItems")).toHaveLength(1);
-            await selectedItemAsserter([chip3.id]);
+            await assertSelectedItems(page, { expectedItemIds: [chip3.id] });
             await chip3.click();
             await page.waitForChanges();
             expect(chipGroupSelectSpy).toHaveReceivedEventTimes(6);
@@ -233,8 +232,7 @@ describe("calcite-chip-group", () => {
             expect(await chip2.getProperty("selected")).toBe(false);
             expect(await chip3.getProperty("selected")).toBe(false);
             expect(await element.getProperty("selectedItems")).toEqual([]);
-            await selectedItemAsserter([]);
-            3;
+            await assertSelectedItems(page, { expectedItemIds: [] });
         });
     });
     describe("focus and interaction function as intended", () => {
@@ -249,7 +247,7 @@ describe("calcite-chip-group", () => {
         </calcite-chip-group>`);
             const element = await page.find("calcite-chip-group");
             const chipGroupSelectSpy = await element.spyOnEvent("calciteChipGroupSelect");
-            const selectedItemAsserter = await createSelectedItemsAsserter(page, "calcite-chip-group", "calciteChipGroupSelect");
+            await assertSelectedItems.setUpEvents(page);
             const chip1 = await page.find("#chip-1");
             const chip2 = await page.find("#chip-2");
             const chip3 = await page.find("#chip-3");
@@ -259,7 +257,7 @@ describe("calcite-chip-group", () => {
             await page.waitForChanges();
             expect(await page.evaluate(() => document.activeElement.id)).toEqual(chip1.id);
             expect(await element.getProperty("selectedItems")).toHaveLength(1);
-            await selectedItemAsserter([chip1.id]);
+            await assertSelectedItems(page, { expectedItemIds: [chip1.id] });
             await page.keyboard.press("ArrowRight");
             await page.waitForChanges();
             expect(await page.evaluate(() => document.activeElement.id)).toEqual(chip2.id);
@@ -273,7 +271,7 @@ describe("calcite-chip-group", () => {
             await page.waitForChanges();
             expect(chipGroupSelectSpy).toHaveReceivedEventTimes(2);
             expect(await element.getProperty("selectedItems")).toHaveLength(2);
-            await selectedItemAsserter([chip1.id, chip5.id]);
+            await assertSelectedItems(page, { expectedItemIds: [chip1.id, chip5.id] });
             await page.keyboard.press("ArrowLeft");
             await page.waitForChanges();
             expect(await page.evaluate(() => document.activeElement.id)).toEqual(chip4.id);
@@ -281,12 +279,12 @@ describe("calcite-chip-group", () => {
             await page.waitForChanges();
             expect(chipGroupSelectSpy).toHaveReceivedEventTimes(3);
             expect(await element.getProperty("selectedItems")).toHaveLength(3);
-            await selectedItemAsserter([chip1.id, chip4.id, chip5.id]);
+            await assertSelectedItems(page, { expectedItemIds: [chip1.id, chip4.id, chip5.id] });
             await page.keyboard.press("Space");
             await page.waitForChanges();
             expect(chipGroupSelectSpy).toHaveReceivedEventTimes(4);
             expect(await element.getProperty("selectedItems")).toHaveLength(2);
-            await selectedItemAsserter([chip1.id, chip5.id]);
+            await assertSelectedItems(page, { expectedItemIds: [chip1.id, chip5.id] });
             await page.keyboard.press("Home");
             await page.waitForChanges();
             expect(await page.evaluate(() => document.activeElement.id)).toEqual(chip1.id);
@@ -371,10 +369,10 @@ describe("calcite-chip-group", () => {
             const element = await page.find("calcite-chip-group");
             const chip4 = await page.find("#chip-4");
             const chip5 = await page.find("#chip-5");
-            const selectedItemAsserter = await createSelectedItemsAsserter(page, "calcite-chip-group", "calciteChipGroupSelect");
+            await assertSelectedItems.setUpEvents(page);
             await page.waitForChanges();
             expect(await element.getProperty("selectedItems")).toHaveLength(2);
-            await selectedItemAsserter([chip4.id, chip5.id]);
+            await assertSelectedItems(page, { expectedItemIds: [chip4.id, chip5.id] });
         });
     });
     describe("programmatically selecting Chips", () => {
@@ -391,12 +389,12 @@ describe("calcite-chip-group", () => {
             const chip4 = await page.find("#chip-4");
             const chip5 = await page.find("#chip-5");
             const chipGroupSelectSpy = await element.spyOnEvent("calciteChipGroupSelect");
-            const selectedItemAsserter = await createSelectedItemsAsserter(page, "calcite-chip-group", "calciteChipGroupSelect");
+            await assertSelectedItems.setUpEvents(page);
             const chipSelectSpy1 = await chip4.spyOnEvent("calciteChipSelect");
             const chipSelectSpy2 = await chip5.spyOnEvent("calciteChipSelect");
             await page.waitForChanges();
             expect(await element.getProperty("selectedItems")).toHaveLength(1);
-            await selectedItemAsserter([chip4.id]);
+            await assertSelectedItems(page, { expectedItemIds: [chip4.id] });
             expect(chipGroupSelectSpy).toHaveReceivedEventTimes(0);
             expect(chipSelectSpy1).toHaveReceivedEventTimes(0);
             expect(chipSelectSpy2).toHaveReceivedEventTimes(0);
@@ -406,7 +404,7 @@ describe("calcite-chip-group", () => {
             expect(chipSelectSpy1).toHaveReceivedEventTimes(0);
             expect(chipSelectSpy2).toHaveReceivedEventTimes(0);
             expect(await element.getProperty("selectedItems")).toHaveLength(1);
-            await selectedItemAsserter([chip5.id]);
+            await assertSelectedItems(page, { expectedItemIds: [chip5.id] });
         });
         it("programmatically setting selected on a chip in single-persist should update the component but not emit public events", async () => {
             const page = await newE2EPage();
@@ -421,12 +419,12 @@ describe("calcite-chip-group", () => {
             const chip4 = await page.find("#chip-4");
             const chip5 = await page.find("#chip-5");
             const chipGroupSelectSpy = await element.spyOnEvent("calciteChipGroupSelect");
-            const selectedItemAsserter = await createSelectedItemsAsserter(page, "calcite-chip-group", "calciteChipGroupSelect");
+            await assertSelectedItems.setUpEvents(page);
             const chipSelectSpy1 = await chip4.spyOnEvent("calciteChipSelect");
             const chipSelectSpy2 = await chip5.spyOnEvent("calciteChipSelect");
             await page.waitForChanges();
             expect(await element.getProperty("selectedItems")).toHaveLength(1);
-            await selectedItemAsserter([chip4.id]);
+            await assertSelectedItems(page, { expectedItemIds: [chip4.id] });
             expect(chipGroupSelectSpy).toHaveReceivedEventTimes(0);
             expect(chipSelectSpy1).toHaveReceivedEventTimes(0);
             expect(chipSelectSpy2).toHaveReceivedEventTimes(0);
@@ -436,21 +434,21 @@ describe("calcite-chip-group", () => {
             expect(chipSelectSpy1).toHaveReceivedEventTimes(0);
             expect(chipSelectSpy2).toHaveReceivedEventTimes(0);
             expect(await element.getProperty("selectedItems")).toHaveLength(0);
-            await selectedItemAsserter([]);
+            await assertSelectedItems(page, { expectedItemIds: [] });
             chip5.setAttribute("selected", true);
             await page.waitForChanges();
             expect(chipGroupSelectSpy).toHaveReceivedEventTimes(0);
             expect(chipSelectSpy1).toHaveReceivedEventTimes(0);
             expect(chipSelectSpy2).toHaveReceivedEventTimes(0);
             expect(await element.getProperty("selectedItems")).toHaveLength(1);
-            await selectedItemAsserter([chip5.id]);
+            await assertSelectedItems(page, { expectedItemIds: [chip5.id] });
             chip4.setAttribute("selected", true);
             await page.waitForChanges();
             expect(chipGroupSelectSpy).toHaveReceivedEventTimes(0);
             expect(chipSelectSpy1).toHaveReceivedEventTimes(0);
             expect(chipSelectSpy2).toHaveReceivedEventTimes(0);
             expect(await element.getProperty("selectedItems")).toHaveLength(1);
-            await selectedItemAsserter([chip4.id]);
+            await assertSelectedItems(page, { expectedItemIds: [chip4.id] });
         });
         it("programmatically setting selected on a chip in multiple should update the component but not emit public events", async () => {
             const page = await newE2EPage();
@@ -465,12 +463,12 @@ describe("calcite-chip-group", () => {
             const chip4 = await page.find("#chip-4");
             const chip5 = await page.find("#chip-5");
             const chipGroupSelectSpy = await element.spyOnEvent("calciteChipGroupSelect");
-            const selectedItemAsserter = await createSelectedItemsAsserter(page, "calcite-chip-group", "calciteChipGroupSelect");
+            await assertSelectedItems.setUpEvents(page);
             const chipSelectSpy1 = await chip4.spyOnEvent("calciteChipSelect");
             const chipSelectSpy2 = await chip5.spyOnEvent("calciteChipSelect");
             await page.waitForChanges();
             expect(await element.getProperty("selectedItems")).toHaveLength(1);
-            await selectedItemAsserter([chip4.id]);
+            await assertSelectedItems(page, { expectedItemIds: [chip4.id] });
             expect(chipGroupSelectSpy).toHaveReceivedEventTimes(0);
             expect(chipSelectSpy1).toHaveReceivedEventTimes(0);
             expect(chipSelectSpy2).toHaveReceivedEventTimes(0);
@@ -480,7 +478,7 @@ describe("calcite-chip-group", () => {
             expect(chipSelectSpy1).toHaveReceivedEventTimes(0);
             expect(chipSelectSpy2).toHaveReceivedEventTimes(0);
             expect(await element.getProperty("selectedItems")).toHaveLength(2);
-            await selectedItemAsserter([chip4.id, chip5.id]);
+            await assertSelectedItems(page, { expectedItemIds: [chip4.id, chip5.id] });
         });
     });
     describe("updating component after page load", () => {
@@ -497,7 +495,7 @@ describe("calcite-chip-group", () => {
             const chip4 = await page.find("#chip-4");
             const chip5 = await page.find("#chip-5");
             const chipGroupSelectSpy = await element.spyOnEvent("calciteChipGroupSelect");
-            const selectedItemAsserter = await createSelectedItemsAsserter(page, "calcite-chip-group", "calciteChipGroupSelect");
+            await assertSelectedItems.setUpEvents(page);
             const chipSelectSpy1 = await chip4.spyOnEvent("calciteChipSelect");
             const chipSelectSpy2 = await chip5.spyOnEvent("calciteChipSelect");
             await page.waitForChanges();
@@ -505,7 +503,7 @@ describe("calcite-chip-group", () => {
             expect(chipSelectSpy1).toHaveReceivedEventTimes(0);
             expect(chipSelectSpy2).toHaveReceivedEventTimes(0);
             expect(await element.getProperty("selectedItems")).toHaveLength(2);
-            await selectedItemAsserter([chip4.id, chip5.id]);
+            await assertSelectedItems(page, { expectedItemIds: [chip4.id, chip5.id] });
             await page.evaluate(() => {
                 const group = document.querySelector("calcite-chip-group");
                 const newChip = document.createElement("calcite-chip");
@@ -518,7 +516,7 @@ describe("calcite-chip-group", () => {
             expect(chipSelectSpy1).toHaveReceivedEventTimes(0);
             expect(chipSelectSpy2).toHaveReceivedEventTimes(0);
             expect(await element.getProperty("selectedItems")).toHaveLength(3);
-            await selectedItemAsserter([chip4.id, chip5.id, "chip-6"]);
+            await assertSelectedItems(page, { expectedItemIds: [chip4.id, chip5.id, "chip-6"] });
         });
         it("should update selected items without emitting event if chips are added after page load in single", async () => {
             const page = await newE2EPage();
@@ -532,13 +530,13 @@ describe("calcite-chip-group", () => {
             const element = await page.find("calcite-chip-group");
             const chip4 = await page.find("#chip-4");
             const chipGroupSelectSpy = await element.spyOnEvent("calciteChipGroupSelect");
-            const selectedItemAsserter = await createSelectedItemsAsserter(page, "calcite-chip-group", "calciteChipGroupSelect");
+            await assertSelectedItems.setUpEvents(page);
             const chipSelectSpy1 = await chip4.spyOnEvent("calciteChipSelect");
             await page.waitForChanges();
             expect(chipGroupSelectSpy).toHaveReceivedEventTimes(0);
             expect(chipSelectSpy1).toHaveReceivedEventTimes(0);
             expect(await element.getProperty("selectedItems")).toHaveLength(1);
-            await selectedItemAsserter([chip4.id]);
+            await assertSelectedItems(page, { expectedItemIds: [chip4.id] });
             await page.evaluate(() => {
                 const group = document.querySelector("calcite-chip-group");
                 const newChip = document.createElement("calcite-chip");
@@ -550,7 +548,7 @@ describe("calcite-chip-group", () => {
             expect(chipGroupSelectSpy).toHaveReceivedEventTimes(0);
             expect(chipSelectSpy1).toHaveReceivedEventTimes(0);
             expect(await element.getProperty("selectedItems")).toHaveLength(1);
-            await selectedItemAsserter(["chip-6"]);
+            await assertSelectedItems(page, { expectedItemIds: ["chip-6"] });
         });
         it("should update selected items without emitting event if chips are removed after page load", async () => {
             const page = await newE2EPage();
@@ -565,7 +563,7 @@ describe("calcite-chip-group", () => {
             const chip4 = await page.find("#chip-4");
             const chip5 = await page.find("#chip-5");
             const chipGroupSelectSpy = await element.spyOnEvent("calciteChipGroupSelect");
-            const selectedItemAsserter = await createSelectedItemsAsserter(page, "calcite-chip-group", "calciteChipGroupSelect");
+            await assertSelectedItems.setUpEvents(page);
             const chipSelectSpy1 = await chip4.spyOnEvent("calciteChipSelect");
             const chipSelectSpy2 = await chip5.spyOnEvent("calciteChipSelect");
             await page.waitForChanges();
@@ -573,7 +571,7 @@ describe("calcite-chip-group", () => {
             expect(chipSelectSpy1).toHaveReceivedEventTimes(0);
             expect(chipSelectSpy2).toHaveReceivedEventTimes(0);
             expect(await element.getProperty("selectedItems")).toHaveLength(2);
-            await selectedItemAsserter([chip4.id, chip5.id]);
+            await assertSelectedItems(page, { expectedItemIds: [chip4.id, chip5.id] });
             await page.evaluate(() => {
                 document.querySelector("calcite-chip:last-child").remove();
             });
@@ -582,7 +580,7 @@ describe("calcite-chip-group", () => {
             expect(chipSelectSpy1).toHaveReceivedEventTimes(0);
             expect(chipSelectSpy2).toHaveReceivedEventTimes(0);
             expect(await element.getProperty("selectedItems")).toHaveLength(1);
-            await selectedItemAsserter([chip4.id]);
+            await assertSelectedItems(page, { expectedItemIds: [chip4.id] });
             await page.evaluate(() => {
                 document.querySelector("calcite-chip:last-child").remove();
             });
@@ -591,8 +589,38 @@ describe("calcite-chip-group", () => {
             expect(chipSelectSpy1).toHaveReceivedEventTimes(0);
             expect(chipSelectSpy2).toHaveReceivedEventTimes(0);
             expect(await element.getProperty("selectedItems")).toHaveLength(0);
-            await selectedItemAsserter([]);
+            await assertSelectedItems(page, { expectedItemIds: [] });
         });
     });
 });
+/**
+ * Test helper for selected calcite-chip-group items. Expects items to have IDs to test against.
+ *
+ * Note: assertSelectedItems.setUpEvents must be called before using this method
+ *
+ * @param page
+ * @param root0
+ * @param root0.expectedItemIds
+ */
+async function assertSelectedItems(page, { expectedItemIds }) {
+    await page.waitForTimeout(100);
+    const selectedItemIds = await page.evaluate(() => {
+        const chipGroup = document.querySelector("calcite-chip-group");
+        return chipGroup.selectedItems.map((item) => item.id);
+    });
+    expect(selectedItemIds).toHaveLength(expectedItemIds.length);
+    expectedItemIds.forEach((itemId, index) => expect(selectedItemIds[index]).toEqual(itemId));
+}
+/**
+ * Helper to wire up the page to assert on the event detail
+ *
+ * @param page
+ */
+assertSelectedItems.setUpEvents = async (page) => {
+    await page.evaluate(() => {
+        document.addEventListener("calciteChipGroupSelect", ({ detail }) => {
+            window.eventDetail = detail;
+        });
+    });
+};
 //# sourceMappingURL=chip-group.e2e.js.map