test(karma): add test for for:each issue #4889 (#5053)

packages/@lwc/integration-karma/test/rendering/issue-4889/index.spec.js

@@ -0,0 +1,34 @@
+import { createElement } from 'lwc';
+import Table from 'x/table';
+import { dataStatesVariant1, dataStatesVariant2 } from 'x/data';
+
+// TODO [#4889]: fix issue with nested for:each loops and colliding keys
+xdescribe('issue-4889 - should render for:each correctly when nested', () => {
+    [dataStatesVariant1, dataStatesVariant2].forEach((dataStates, i) => {
+        it(`variant ${i + 1}`, async () => {
+            const elm = createElement('x-table', { is: Table });
+            document.body.appendChild(elm);
+
+            for (const dataState of dataStates) {
+                await new Promise(setTimeout);
+                elm.items = dataState;
+            }
+            // two ticks necessary to catch the unhandled rejection
+            await new Promise(setTimeout);
+            await new Promise(setTimeout);
+
+            // whatever state the DOM is in now, it should be the same as if we rendered
+            // the last data state from scratch
+            const elm2 = createElement('x-table', { is: Table });
+            elm2.items = dataStates[dataStates.length - 1];
+            document.body.appendChild(elm2);
+
+            await new Promise(setTimeout);
+
+            const toKeys = (el) =>
+                [...el.shadowRoot.children].map((_) => _.getAttribute('data-key'));
+
+            expect(toKeys(elm)).toEqual(toKeys(elm2));
+        });
+    });
+});

packages/@lwc/integration-karma/test/rendering/issue-4889/x/data/data.js

@@ -0,0 +1,129 @@
+export const dataStatesVariant1 = [
+    [
+        {
+            id: 1,
+            renderMe: true,
+        },
+        {
+            id: 2,
+            renderMe: true,
+            children: [],
+        },
+        {
+            id: 3,
+            renderMe: true,
+            children: [],
+        },
+    ],
+    [
+        {
+            id: 5,
+            renderMe: false,
+        },
+        {
+            id: 6,
+            renderMe: false,
+            children: [],
+        },
+        {
+            id: 7,
+            renderMe: true,
+            children: [
+                {
+                    id: 13,
+                    renderMe: true,
+                },
+            ],
+        },
+        {
+            id: 8,
+            renderMe: false,
+            children: [],
+        },
+    ],
+    [
+        {
+            id: 10,
+            renderMe: true,
+            children: [],
+        },
+        {
+            id: 11,
+            renderMe: true,
+            children: [
+                {
+                    id: 13,
+                    renderMe: true,
+                },
+            ],
+        },
+        {
+            id: 12,
+            renderMe: true,
+            children: [],
+        },
+    ],
+];
+
+// second variant to repro a different error message
+export const dataStatesVariant2 = [
+    [
+        {
+            id: 1,
+            renderMe: true,
+        },
+        {
+            id: 2,
+            renderMe: true,
+            children: [],
+        },
+        {
+            id: 3,
+            renderMe: true,
+            children: [],
+        },
+    ],
+    [
+        {
+            id: 5,
+            renderMe: false,
+        },
+        {
+            id: 6,
+            renderMe: false,
+            children: [],
+        },
+        {
+            id: 7,
+            renderMe: true,
+            children: [
+                {
+                    id: 13,
+                    renderMe: true,
+                },
+            ],
+        },
+        {
+            id: 8,
+            renderMe: false,
+            children: [],
+        },
+    ],
+    [
+        {
+            id: 10,
+            renderMe: true,
+            children: [],
+        },
+        {
+            id: 11,
+            renderMe: true,
+            children: [
+                {
+                    id: 13,
+                    renderMe: true,
+                },
+            ],
+        },
+    ],
+];

packages/@lwc/integration-karma/test/rendering/issue-4889/x/row/row.html

@@ -0,0 +1,2 @@
+<template>
+</template>

packages/@lwc/integration-karma/test/rendering/issue-4889/x/row/row.js

@@ -0,0 +1,5 @@
+import { LightningElement, api } from 'lwc';
+
+export default class Row extends LightningElement {
+    @api prop;
+}

packages/@lwc/integration-karma/test/rendering/issue-4889/x/table/table.html

@@ -0,0 +1,8 @@
+<template>
+    <template for:each={items} for:item="item">
+        <x-row lwc:if={item.renderMe} prop={child} key={item.id} data-key={item.id}></x-row>
+        <template lwc:if={item.children} for:each={item.children} for:item="grandchild">
+            <x-row lwc:if={grandchild.renderMe} prop={grandchild} key={grandchild.id} data-key={item.id}></x-row>
+        </template>
+    </template>
+</template>

packages/@lwc/integration-karma/test/rendering/issue-4889/x/table/table.js

@@ -0,0 +1,5 @@
+import { LightningElement, api } from 'lwc';
+
+export default class Table extends LightningElement {
+    @api items = [];
+}