From 9c44347ad400f9afb99210a80a4113817a915858 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Tue, 11 Feb 2025 10:25:16 -0800 Subject: [PATCH 1/3] fix(list): drag menu 'Move to' actions broken when list elements have explicit ids #11513 --- packages/calcite-components/src/components/list/list.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/calcite-components/src/components/list/list.tsx b/packages/calcite-components/src/components/list/list.tsx index eb379b3d84d..686bb036af8 100755 --- a/packages/calcite-components/src/components/list/list.tsx +++ b/packages/calcite-components/src/components/list/list.tsx @@ -854,7 +854,7 @@ export class List this.moveToItems = lists.map((element) => ({ element, label: element.label ?? element.id, - id: el.id || guid(), + id: guid(), })); const groupItems = Array.from(this.el.querySelectorAll(listItemGroupSelector)); From d47fa777c23fa90c3d801925a88e51bb2bad8068 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Tue, 11 Feb 2025 16:47:18 -0800 Subject: [PATCH 2/3] add tests --- .../src/components/list/list.e2e.ts | 31 +++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/packages/calcite-components/src/components/list/list.e2e.ts b/packages/calcite-components/src/components/list/list.e2e.ts index 95bff56da47..b547f85b5ec 100755 --- a/packages/calcite-components/src/components/list/list.e2e.ts +++ b/packages/calcite-components/src/components/list/list.e2e.ts @@ -1651,6 +1651,37 @@ describe("calcite-list", () => { await page.waitForChanges(); + const listItems = await findAll(page, `calcite-list[group="letters"] calcite-list-item`); + + expect(listItems.length).toBe(6); + + const moveToItemIds = await page.evaluate(() => { + return Array.from(document.querySelectorAll(`calcite-list[group="letters"] calcite-list-item`)) + .map((item: ListItem["el"]) => item.moveToItems.map((moveToItem) => moveToItem.id)) + .flat(); + }); + + expect(moveToItemIds.length).toBe(6); + + const uniqueMoveToItemIds = new Set(moveToItemIds); + + expect(uniqueMoveToItemIds.size).toBe(2); + + const moveToItemElementIds = await page.evaluate(() => { + return Array.from(document.querySelectorAll(`calcite-list[group="letters"] calcite-list-item`)) + .map((item: ListItem["el"]) => item.moveToItems.map((moveToItem) => moveToItem.element.id)) + .flat(); + }); + + expect(moveToItemElementIds.length).toBe(6); + expect(moveToItemElementIds[0]).toBe("second-letters"); + expect(moveToItemElementIds[1]).toBe("second-letters"); + + expect(moveToItemElementIds[2]).toBe("first-letters"); + expect(moveToItemElementIds[3]).toBe("first-letters"); + expect(moveToItemElementIds[4]).toBe("first-letters"); + expect(moveToItemElementIds[5]).toBe("first-letters"); + // Workaround for page.spyOnEvent() failing due to drag event payload being serialized and there being circular JSON structures from the payload elements. See: https://github.com/Esri/calcite-design-system/issues/7643 await page.evaluate(() => { const testWindow = window as TestWindow; From 2fe722da2b5df98668fd09856307fffac814ce88 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Tue, 11 Feb 2025 16:52:47 -0800 Subject: [PATCH 3/3] tests --- .../components/block-group/block-group.e2e.ts | 32 +++++++++++++++++++ .../components/block-group/block-group.tsx | 2 +- .../src/components/list/list.e2e.ts | 17 +++++----- 3 files changed, 42 insertions(+), 9 deletions(-) diff --git a/packages/calcite-components/src/components/block-group/block-group.e2e.ts b/packages/calcite-components/src/components/block-group/block-group.e2e.ts index c690a554aeb..810c9b8cbe2 100755 --- a/packages/calcite-components/src/components/block-group/block-group.e2e.ts +++ b/packages/calcite-components/src/components/block-group/block-group.e2e.ts @@ -246,6 +246,38 @@ describe("calcite-block-group", () => { await page.waitForChanges(); + const letterBlockSelector = `calcite-block-group[group="letters"] calcite-block`; + const letterBlocks = await findAll(page, letterBlockSelector); + + expect(letterBlocks.length).toBe(6); + + const moveToItemIds = await page.evaluate((letterBlockSelector) => { + return Array.from(document.querySelectorAll(letterBlockSelector)) + .map((item: Block["el"]) => item.moveToItems.map((moveToItem) => moveToItem.id)) + .flat(); + }, letterBlockSelector); + + expect(moveToItemIds.length).toBe(6); + + const uniqueMoveToItemIds = new Set(moveToItemIds); + + expect(uniqueMoveToItemIds.size).toBe(2); + + const moveToItemElementIds = await page.evaluate((letterBlockSelector) => { + return Array.from(document.querySelectorAll(letterBlockSelector)) + .map((item: Block["el"]) => item.moveToItems.map((moveToItem) => moveToItem.element.id)) + .flat(); + }, letterBlockSelector); + + expect(moveToItemElementIds.length).toBe(6); + expect(moveToItemElementIds[0]).toBe("second-letters"); + expect(moveToItemElementIds[1]).toBe("second-letters"); + + expect(moveToItemElementIds[2]).toBe("first-letters"); + expect(moveToItemElementIds[3]).toBe("first-letters"); + expect(moveToItemElementIds[4]).toBe("first-letters"); + expect(moveToItemElementIds[5]).toBe("first-letters"); + // Workaround for page.spyOnEvent() failing due to drag event payload being serialized and there being circular JSON structures from the payload elements. See: https://github.com/Esri/calcite-design-system/issues/7643 await page.evaluate(() => { const testWindow = window as TestWindow; diff --git a/packages/calcite-components/src/components/block-group/block-group.tsx b/packages/calcite-components/src/components/block-group/block-group.tsx index af7a698d126..ad99c793979 100755 --- a/packages/calcite-components/src/components/block-group/block-group.tsx +++ b/packages/calcite-components/src/components/block-group/block-group.tsx @@ -204,7 +204,7 @@ export class BlockGroup extends LitElement implements InteractiveComponent, Sort this.moveToItems = blockGroups.map((element) => ({ element, label: element.label ?? element.id, - id: el.id || guid(), + id: guid(), })); } diff --git a/packages/calcite-components/src/components/list/list.e2e.ts b/packages/calcite-components/src/components/list/list.e2e.ts index b547f85b5ec..b268abf424a 100755 --- a/packages/calcite-components/src/components/list/list.e2e.ts +++ b/packages/calcite-components/src/components/list/list.e2e.ts @@ -1651,15 +1651,16 @@ describe("calcite-list", () => { await page.waitForChanges(); - const listItems = await findAll(page, `calcite-list[group="letters"] calcite-list-item`); + const letterItemSelector = `calcite-list[group="letters"] calcite-list-item`; + const letterItems = await findAll(page, letterItemSelector); - expect(listItems.length).toBe(6); + expect(letterItems.length).toBe(6); - const moveToItemIds = await page.evaluate(() => { - return Array.from(document.querySelectorAll(`calcite-list[group="letters"] calcite-list-item`)) + const moveToItemIds = await page.evaluate((letterItemSelector) => { + return Array.from(document.querySelectorAll(letterItemSelector)) .map((item: ListItem["el"]) => item.moveToItems.map((moveToItem) => moveToItem.id)) .flat(); - }); + }, letterItemSelector); expect(moveToItemIds.length).toBe(6); @@ -1667,11 +1668,11 @@ describe("calcite-list", () => { expect(uniqueMoveToItemIds.size).toBe(2); - const moveToItemElementIds = await page.evaluate(() => { - return Array.from(document.querySelectorAll(`calcite-list[group="letters"] calcite-list-item`)) + const moveToItemElementIds = await page.evaluate((letterItemSelector) => { + return Array.from(document.querySelectorAll(letterItemSelector)) .map((item: ListItem["el"]) => item.moveToItems.map((moveToItem) => moveToItem.element.id)) .flat(); - }); + }, letterItemSelector); expect(moveToItemElementIds.length).toBe(6); expect(moveToItemElementIds[0]).toBe("second-letters");