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 95bff56da47..b268abf424a 100755 --- a/packages/calcite-components/src/components/list/list.e2e.ts +++ b/packages/calcite-components/src/components/list/list.e2e.ts @@ -1651,6 +1651,38 @@ describe("calcite-list", () => { await page.waitForChanges(); + const letterItemSelector = `calcite-list[group="letters"] calcite-list-item`; + const letterItems = await findAll(page, letterItemSelector); + + expect(letterItems.length).toBe(6); + + 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); + + const uniqueMoveToItemIds = new Set(moveToItemIds); + + expect(uniqueMoveToItemIds.size).toBe(2); + + 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"); + 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/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));