@esri/calcite-components 2.8.1-next.5 → 2.8.2

package/dist/collection/components/table/table.e2e.js

@@ -1,12 +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.5
+ * v2.8.2
  */
 import { newE2EPage } from "@stencil/core/testing";
 import { html } from "../../../support/formatting";
 import { accessible, renders, hidden, defaults, reflects } from "../../tests/commonTests";
-import { createSelectedItemsAsserter, getFocusedElementProp } from "../../tests/utils";
+import { getFocusedElementProp } from "../../tests/utils";
 import { CSS } from "../table-header/resources";
 import { CSS as CELL_CSS } from "../table-cell/resources";
 import { SLOTS } from "../table/resources";
@@ -338,7 +338,7 @@ describe("selection modes", () => {
           <calcite-table-cell>cell</calcite-table-cell>
         </calcite-table-row>
       </calcite-table>`);
-        const selectedItemAsserter = await createSelectedItemsAsserter(page, "calcite-table", "calciteTableSelect");
+        await assertSelectedItems.setUpEvents(page);
         const element = await page.find("calcite-table");
         const row1 = await page.find("#row-1");
         const row2 = await page.find("#row-2");
@@ -353,7 +353,7 @@ describe("selection modes", () => {
         expect(rowSelectSpy2).toHaveReceivedEventTimes(0);
         expect(rowSelectSpy3).toHaveReceivedEventTimes(0);
         expect(await element.getProperty("selectedItems")).toHaveLength(1);
-        await selectedItemAsserter([row3.id]);
+        await assertSelectedItems(page, { expectedItemIds: [row3.id] });
         await page.$eval("calcite-table", () => {
             const row = document.getElementById("row-1");
             const cell = row.shadowRoot.querySelector("calcite-table-cell:first-child");
@@ -368,7 +368,7 @@ describe("selection modes", () => {
         expect(await row2.getProperty("selected")).toBe(false);
         expect(await row3.getProperty("selected")).toBe(false);
         expect(await element.getProperty("selectedItems")).toHaveLength(1);
-        await selectedItemAsserter([row1.id]);
+        await assertSelectedItems(page, { expectedItemIds: [row1.id] });
         await page.$eval("calcite-table", () => {
             const row = document.getElementById("row-2");
             const cell = row.shadowRoot.querySelector("calcite-table-cell:first-child");
@@ -383,7 +383,7 @@ describe("selection modes", () => {
         expect(await row2.getProperty("selected")).toBe(true);
         expect(await row3.getProperty("selected")).toBe(false);
         expect(await element.getProperty("selectedItems")).toHaveLength(1);
-        await selectedItemAsserter([row2.id]);
+        await assertSelectedItems(page, { expectedItemIds: [row2.id] });
         await page.$eval("calcite-table", () => {
             const row = document.getElementById("row-3");
             const cell = row.shadowRoot.querySelector("calcite-table-cell:first-child");
@@ -398,7 +398,7 @@ describe("selection modes", () => {
         expect(await row2.getProperty("selected")).toBe(false);
         expect(await row3.getProperty("selected")).toBe(true);
         expect(await element.getProperty("selectedItems")).toHaveLength(1);
-        await selectedItemAsserter([row3.id]);
+        await assertSelectedItems(page, { expectedItemIds: [row3.id] });
         await page.$eval("calcite-table", () => {
             const row = document.getElementById("row-3");
             const cell = row.shadowRoot.querySelector("calcite-table-cell:first-child");
@@ -413,7 +413,7 @@ describe("selection modes", () => {
         expect(await row2.getProperty("selected")).toBe(false);
         expect(await row3.getProperty("selected")).toBe(false);
         expect(await element.getProperty("selectedItems")).toEqual([]);
-        await selectedItemAsserter([]);
+        await assertSelectedItems(page, { expectedItemIds: [] });
     });
     it("selection mode multiple allows one, multiple, or no rows to be selected", async () => {
         const page = await newE2EPage();
@@ -435,7 +435,7 @@ describe("selection modes", () => {
           <calcite-table-cell>cell</calcite-table-cell>
         </calcite-table-row>
       </calcite-table>`);
-        const selectedItemAsserter = await createSelectedItemsAsserter(page, "calcite-table", "calciteTableSelect");
+        await assertSelectedItems.setUpEvents(page);
         const element = await page.find("calcite-table");
         const row1 = await page.find("#row-1");
         const row2 = await page.find("#row-2");
@@ -450,7 +450,7 @@ describe("selection modes", () => {
         expect(rowSelectSpy2).toHaveReceivedEventTimes(0);
         expect(rowSelectSpy3).toHaveReceivedEventTimes(0);
         expect(await element.getProperty("selectedItems")).toHaveLength(2);
-        await selectedItemAsserter([row2.id, row3.id]);
+        await assertSelectedItems(page, { expectedItemIds: [row2.id, row3.id] });
         await page.$eval("calcite-table", () => {
             const row = document.getElementById("row-1");
             const cell = row.shadowRoot.querySelector("calcite-table-cell:first-child");
@@ -465,7 +465,7 @@ describe("selection modes", () => {
         expect(await row2.getProperty("selected")).toBe(true);
         expect(await row3.getProperty("selected")).toBe(true);
         expect(await element.getProperty("selectedItems")).toHaveLength(3);
-        await selectedItemAsserter([row1.id, row2.id, row3.id]);
+        await assertSelectedItems(page, { expectedItemIds: [row1.id, row2.id, row3.id] });
         await page.$eval("calcite-table", () => {
             const row = document.getElementById("row-2");
             const cell = row.shadowRoot.querySelector("calcite-table-cell:first-child");
@@ -480,7 +480,7 @@ describe("selection modes", () => {
         expect(await row2.getProperty("selected")).toBe(false);
         expect(await row3.getProperty("selected")).toBe(true);
         expect(await element.getProperty("selectedItems")).toHaveLength(2);
-        await selectedItemAsserter([row1.id, row3.id]);
+        await assertSelectedItems(page, { expectedItemIds: [row1.id, row3.id] });
         await page.$eval("calcite-table", () => {
             const row = document.getElementById("row-3");
             const cell = row.shadowRoot.querySelector("calcite-table-cell:first-child");
@@ -495,7 +495,7 @@ describe("selection modes", () => {
         expect(await row2.getProperty("selected")).toBe(false);
         expect(await row3.getProperty("selected")).toBe(false);
         expect(await element.getProperty("selectedItems")).toHaveLength(1);
-        await selectedItemAsserter([row1.id]);
+        await assertSelectedItems(page, { expectedItemIds: [row1.id] });
         await page.$eval("calcite-table", () => {
             const row = document.getElementById("row-1");
             const cell = row.shadowRoot.querySelector("calcite-table-cell:first-child");
@@ -510,7 +510,7 @@ describe("selection modes", () => {
         expect(await row2.getProperty("selected")).toBe(false);
         expect(await row3.getProperty("selected")).toBe(false);
         expect(await element.getProperty("selectedItems")).toEqual([]);
-        await selectedItemAsserter([]);
+        await assertSelectedItems(page, { expectedItemIds: [] });
     });
     it("selection mode single allows one or no rows to be selected with keyboard", async () => {
         const page = await newE2EPage();
@@ -532,7 +532,7 @@ describe("selection modes", () => {
           <calcite-table-cell>cell</calcite-table-cell>
         </calcite-table-row>
       </calcite-table>`);
-        const selectedItemAsserter = await createSelectedItemsAsserter(page, "calcite-table", "calciteTableSelect");
+        await assertSelectedItems.setUpEvents(page);
         const element = await page.find("calcite-table");
         const row1 = await page.find("#row-1");
         const row2 = await page.find("#row-2");
@@ -550,7 +550,7 @@ describe("selection modes", () => {
         expect(rowSelectSpy2).toHaveReceivedEventTimes(0);
         expect(rowSelectSpy3).toHaveReceivedEventTimes(0);
         expect(await element.getProperty("selectedItems")).toHaveLength(1);
-        await selectedItemAsserter([row3.id]);
+        await assertSelectedItems(page, { expectedItemIds: [row3.id] });
         await selectionCell1.callMethod("setFocus");
         await page.waitForChanges();
         await page.keyboard.press("Space");
@@ -563,7 +563,7 @@ describe("selection modes", () => {
         expect(await row2.getProperty("selected")).toBe(false);
         expect(await row3.getProperty("selected")).toBe(false);
         expect(await element.getProperty("selectedItems")).toHaveLength(1);
-        await selectedItemAsserter([row1.id]);
+        await assertSelectedItems(page, { expectedItemIds: [row1.id] });
         await selectionCell2.callMethod("setFocus");
         await page.waitForChanges();
         await page.keyboard.press("Enter");
@@ -576,7 +576,7 @@ describe("selection modes", () => {
         expect(await row2.getProperty("selected")).toBe(true);
         expect(await row3.getProperty("selected")).toBe(false);
         expect(await element.getProperty("selectedItems")).toHaveLength(1);
-        await selectedItemAsserter([row2.id]);
+        await assertSelectedItems(page, { expectedItemIds: [row2.id] });
         await selectionCell3.callMethod("setFocus");
         await page.waitForChanges();
         await page.keyboard.press("Enter");
@@ -589,7 +589,7 @@ describe("selection modes", () => {
         expect(await row2.getProperty("selected")).toBe(false);
         expect(await row3.getProperty("selected")).toBe(true);
         expect(await element.getProperty("selectedItems")).toHaveLength(1);
-        await selectedItemAsserter([row3.id]);
+        await assertSelectedItems(page, { expectedItemIds: [row3.id] });
         await selectionCell3.callMethod("setFocus");
         await page.waitForChanges();
         await page.keyboard.press("Space");
@@ -602,7 +602,7 @@ describe("selection modes", () => {
         expect(await row2.getProperty("selected")).toBe(false);
         expect(await row3.getProperty("selected")).toBe(false);
         expect(await element.getProperty("selectedItems")).toEqual([]);
-        await selectedItemAsserter([]);
+        await assertSelectedItems(page, { expectedItemIds: [] });
     });
     it("selection mode multiple allows one, multiple, or no rows to be selected with keyboard", async () => {
         const page = await newE2EPage();
@@ -624,7 +624,7 @@ describe("selection modes", () => {
           <calcite-table-cell>cell</calcite-table-cell>
         </calcite-table-row>
       </calcite-table>`);
-        const selectedItemAsserter = await createSelectedItemsAsserter(page, "calcite-table", "calciteTableSelect");
+        await assertSelectedItems.setUpEvents(page);
         const element = await page.find("calcite-table");
         const row1 = await page.find("#row-1");
         const row2 = await page.find("#row-2");
@@ -642,7 +642,7 @@ describe("selection modes", () => {
         expect(rowSelectSpy2).toHaveReceivedEventTimes(0);
         expect(rowSelectSpy3).toHaveReceivedEventTimes(0);
         expect(await element.getProperty("selectedItems")).toHaveLength(2);
-        await selectedItemAsserter([row2.id, row3.id]);
+        await assertSelectedItems(page, { expectedItemIds: [row2.id, row3.id] });
         await selectionCell1.callMethod("setFocus");
         await page.waitForChanges();
         await page.keyboard.press("Enter");
@@ -655,7 +655,7 @@ describe("selection modes", () => {
         expect(await row2.getProperty("selected")).toBe(true);
         expect(await row3.getProperty("selected")).toBe(true);
         expect(await element.getProperty("selectedItems")).toHaveLength(3);
-        await selectedItemAsserter([row1.id, row2.id, row3.id]);
+        await assertSelectedItems(page, { expectedItemIds: [row1.id, row2.id, row3.id] });
         await selectionCell2.callMethod("setFocus");
         await page.waitForChanges();
         await page.keyboard.press("Space");
@@ -668,7 +668,7 @@ describe("selection modes", () => {
         expect(await row2.getProperty("selected")).toBe(false);
         expect(await row3.getProperty("selected")).toBe(true);
         expect(await element.getProperty("selectedItems")).toHaveLength(2);
-        await selectedItemAsserter([row1.id, row3.id]);
+        await assertSelectedItems(page, { expectedItemIds: [row1.id, row3.id] });
         await selectionCell3.callMethod("setFocus");
         await page.waitForChanges();
         await page.keyboard.press("Enter");
@@ -681,7 +681,7 @@ describe("selection modes", () => {
         expect(await row2.getProperty("selected")).toBe(false);
         expect(await row3.getProperty("selected")).toBe(false);
         expect(await element.getProperty("selectedItems")).toHaveLength(1);
-        await selectedItemAsserter([row1.id]);
+        await assertSelectedItems(page, { expectedItemIds: [row1.id] });
         await selectionCell1.callMethod("setFocus");
         await page.waitForChanges();
         await page.keyboard.press("Space");
@@ -694,7 +694,7 @@ describe("selection modes", () => {
         expect(await row2.getProperty("selected")).toBe(false);
         expect(await row3.getProperty("selected")).toBe(false);
         expect(await element.getProperty("selectedItems")).toEqual([]);
-        await selectedItemAsserter([]);
+        await assertSelectedItems(page, { expectedItemIds: [] });
     });
     it("correctly has no selected items after user clears selection via clear button", async () => {
         const page = await newE2EPage();
@@ -716,7 +716,7 @@ describe("selection modes", () => {
           <calcite-table-cell>cell</calcite-table-cell>
         </calcite-table-row>
       </calcite-table>`);
-        const selectedItemAsserter = await createSelectedItemsAsserter(page, "calcite-table", "calciteTableSelect");
+        await assertSelectedItems.setUpEvents(page);
         const element = await page.find("calcite-table");
         const row1 = await page.find("#row-1");
         const row2 = await page.find("#row-2");
@@ -725,7 +725,7 @@ describe("selection modes", () => {
         await page.waitForChanges();
         expect(tableSelectSpy).toHaveReceivedEventTimes(0);
         expect(await element.getProperty("selectedItems")).toHaveLength(2);
-        await selectedItemAsserter([row2.id, row3.id]);
+        await assertSelectedItems(page, { expectedItemIds: [row2.id, row3.id] });
         await page.$eval("calcite-table", () => {
             const table = document.querySelector("calcite-table");
             const button = table.shadowRoot.querySelector("calcite-button");
@@ -737,7 +737,7 @@ describe("selection modes", () => {
         expect(await row2.getProperty("selected")).toBe(false);
         expect(await row3.getProperty("selected")).toBe(false);
         expect(await element.getProperty("selectedItems")).toHaveLength(0);
-        await selectedItemAsserter([]);
+        await assertSelectedItems(page, { expectedItemIds: [] });
     });
     it("correctly has all items selected after user uses select all cell while none selected", async () => {
         const page = await newE2EPage();
@@ -759,7 +759,7 @@ describe("selection modes", () => {
           <calcite-table-cell>cell</calcite-table-cell>
         </calcite-table-row>
       </calcite-table>`);
-        const selectedItemAsserter = await createSelectedItemsAsserter(page, "calcite-table", "calciteTableSelect");
+        await assertSelectedItems.setUpEvents(page);
         const element = await page.find("calcite-table");
         const row1 = await page.find("#row-1");
         const row2 = await page.find("#row-2");
@@ -768,7 +768,7 @@ describe("selection modes", () => {
         await page.waitForChanges();
         expect(tableSelectSpy).toHaveReceivedEventTimes(0);
         expect(await element.getProperty("selectedItems")).toHaveLength(0);
-        await selectedItemAsserter([]);
+        await assertSelectedItems(page, { expectedItemIds: [] });
         await page.$eval("calcite-table", () => {
             const row = document.getElementById("row-head");
             const cell = row.shadowRoot.querySelector("calcite-table-header:first-child");
@@ -780,7 +780,7 @@ describe("selection modes", () => {
         expect(await row2.getProperty("selected")).toBe(true);
         expect(await row3.getProperty("selected")).toBe(true);
         expect(await element.getProperty("selectedItems")).toHaveLength(3);
-        await selectedItemAsserter([row1.id, row2.id, row3.id]);
+        await assertSelectedItems(page, { expectedItemIds: [row1.id, row2.id, row3.id] });
     });
     it("correctly has all items selected after user uses select all cell while none selected and multiple pages", async () => {
         const page = await newE2EPage();
@@ -802,7 +802,7 @@ describe("selection modes", () => {
           <calcite-table-cell>cell</calcite-table-cell>
         </calcite-table-row>
       </calcite-table>`);
-        const selectedItemAsserter = await createSelectedItemsAsserter(page, "calcite-table", "calciteTableSelect");
+        await assertSelectedItems.setUpEvents(page);
         const element = await page.find("calcite-table");
         const row1 = await page.find("#row-1");
         const row2 = await page.find("#row-2");
@@ -811,7 +811,7 @@ describe("selection modes", () => {
         await page.waitForChanges();
         expect(tableSelectSpy).toHaveReceivedEventTimes(0);
         expect(await element.getProperty("selectedItems")).toHaveLength(0);
-        await selectedItemAsserter([]);
+        await assertSelectedItems(page, { expectedItemIds: [] });
         await page.$eval("calcite-table", () => {
             const row = document.getElementById("row-head");
             const cell = row.shadowRoot.querySelector("calcite-table-header:first-child");
@@ -823,7 +823,7 @@ describe("selection modes", () => {
         expect(await row2.getProperty("selected")).toBe(true);
         expect(await row3.getProperty("selected")).toBe(true);
         expect(await element.getProperty("selectedItems")).toHaveLength(3);
-        await selectedItemAsserter([row1.id, row2.id, row3.id]);
+        await assertSelectedItems(page, { expectedItemIds: [row1.id, row2.id, row3.id] });
     });
     it("correctly has all items selected after user uses select all cell while some selected", async () => {
         const page = await newE2EPage();
@@ -845,7 +845,7 @@ describe("selection modes", () => {
           <calcite-table-cell>cell</calcite-table-cell>
         </calcite-table-row>
       </calcite-table>`);
-        const selectedItemAsserter = await createSelectedItemsAsserter(page, "calcite-table", "calciteTableSelect");
+        await assertSelectedItems.setUpEvents(page);
         const element = await page.find("calcite-table");
         const row1 = await page.find("#row-1");
         const row2 = await page.find("#row-2");
@@ -857,7 +857,7 @@ describe("selection modes", () => {
         expect(await row2.getProperty("selected")).toBe(true);
         expect(await row3.getProperty("selected")).toBe(false);
         expect(await element.getProperty("selectedItems")).toHaveLength(1);
-        await selectedItemAsserter([row2.id]);
+        await assertSelectedItems(page, { expectedItemIds: [row2.id] });
         await page.$eval("calcite-table", () => {
             const row = document.getElementById("row-head");
             const cell = row.shadowRoot.querySelector("calcite-table-header:first-child");
@@ -869,7 +869,7 @@ describe("selection modes", () => {
         expect(await row2.getProperty("selected")).toBe(true);
         expect(await row3.getProperty("selected")).toBe(true);
         expect(await element.getProperty("selectedItems")).toHaveLength(3);
-        await selectedItemAsserter([row1.id, row2.id, row3.id]);
+        await assertSelectedItems(page, { expectedItemIds: [row1.id, row2.id, row3.id] });
     });
     it("correctly has no items selected after user uses select none cell while all selected", async () => {
         const page = await newE2EPage();
@@ -891,7 +891,7 @@ describe("selection modes", () => {
           <calcite-table-cell>cell</calcite-table-cell>
         </calcite-table-row>
       </calcite-table>`);
-        const selectedItemAsserter = await createSelectedItemsAsserter(page, "calcite-table", "calciteTableSelect");
+        await assertSelectedItems.setUpEvents(page);
         const element = await page.find("calcite-table");
         const row1 = await page.find("#row-1");
         const row2 = await page.find("#row-2");
@@ -903,7 +903,7 @@ describe("selection modes", () => {
         expect(await row2.getProperty("selected")).toBe(true);
         expect(await row3.getProperty("selected")).toBe(true);
         expect(await element.getProperty("selectedItems")).toHaveLength(3);
-        await selectedItemAsserter([row1.id, row2.id, row3.id]);
+        await assertSelectedItems(page, { expectedItemIds: [row1.id, row2.id, row3.id] });
         await page.$eval("calcite-table", () => {
             const row = document.getElementById("row-head");
             const cell = row.shadowRoot.querySelector("calcite-table-header:first-child");
@@ -915,7 +915,7 @@ describe("selection modes", () => {
         expect(await row2.getProperty("selected")).toBe(false);
         expect(await row3.getProperty("selected")).toBe(false);
         expect(await element.getProperty("selectedItems")).toHaveLength(0);
-        await selectedItemAsserter([]);
+        await assertSelectedItems(page, { expectedItemIds: [] });
     });
     it("correctly maintains selected items if they are paginated out of view", async () => {
         const page = await newE2EPage();
@@ -937,7 +937,7 @@ describe("selection modes", () => {
           <calcite-table-cell>cell</calcite-table-cell>
         </calcite-table-row>
       </calcite-table>`);
-        const selectedItemAsserter = await createSelectedItemsAsserter(page, "calcite-table", "calciteTableSelect");
+        await assertSelectedItems.setUpEvents(page);
         const element = await page.find("calcite-table");
         const row1 = await page.find("#row-1");
         const row2 = await page.find("#row-2");
@@ -951,7 +951,7 @@ describe("selection modes", () => {
         expect(await row2.getProperty("selected")).toBe(false);
         expect(await row3.getProperty("selected")).toBe(false);
         expect(await element.getProperty("selectedItems")).toHaveLength(1);
-        await selectedItemAsserter([row1.id]);
+        await assertSelectedItems(page, { expectedItemIds: [row1.id] });
         await page.$eval("calcite-table", () => {
             const table = document.querySelector("calcite-table");
             const pagination = table.shadowRoot.querySelector("calcite-pagination");
@@ -965,7 +965,7 @@ describe("selection modes", () => {
         expect(await row2.getProperty("selected")).toBe(false);
         expect(await row3.getProperty("selected")).toBe(false);
         expect(await element.getProperty("selectedItems")).toHaveLength(1);
-        await selectedItemAsserter([row1.id]);
+        await assertSelectedItems(page, { expectedItemIds: [row1.id] });
     });
 });
 describe("pagination event", () => {
@@ -989,6 +989,7 @@ describe("pagination event", () => {
           <calcite-table-cell>cell</calcite-table-cell>
         </calcite-table-row>
       </calcite-table>`);
+        await assertSelectedItems.setUpEvents(page);
         const element = await page.find("calcite-table");
         const tablePaginateSpy = await element.spyOnEvent("calciteTablePageChange");
         await page.waitForChanges();
@@ -2096,4 +2097,34 @@ describe("keyboard navigation", () => {
         expect(await page.$eval(`#${row3.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList)).toEqual({ "0": CSS.selectionCell });
     });
 });
+/**
+ * Test helper for selected calcite-table-row 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 table = document.querySelector("calcite-table");
+        return table.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("calciteTableSelect", ({ detail }) => {
+            window.eventDetail = detail;
+        });
+    });
+};
 //# sourceMappingURL=table.e2e.js.map