From c5c7458d55f439cfb02520ab02532fe0e3d4bdd4 Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Tue, 17 Dec 2024 13:47:07 -0800 Subject: [PATCH] test(karma): add test for for:each issue #4889 (#5053) --- .../test/rendering/issue-4889/index.spec.js | 34 +++++ .../test/rendering/issue-4889/x/data/data.js | 129 ++++++++++++++++++ .../test/rendering/issue-4889/x/row/row.html | 2 + .../test/rendering/issue-4889/x/row/row.js | 5 + .../rendering/issue-4889/x/table/table.html | 8 ++ .../rendering/issue-4889/x/table/table.js | 5 + 6 files changed, 183 insertions(+) create mode 100644 packages/@lwc/integration-karma/test/rendering/issue-4889/index.spec.js create mode 100644 packages/@lwc/integration-karma/test/rendering/issue-4889/x/data/data.js create mode 100644 packages/@lwc/integration-karma/test/rendering/issue-4889/x/row/row.html create mode 100644 packages/@lwc/integration-karma/test/rendering/issue-4889/x/row/row.js create mode 100644 packages/@lwc/integration-karma/test/rendering/issue-4889/x/table/table.html create mode 100644 packages/@lwc/integration-karma/test/rendering/issue-4889/x/table/table.js diff --git a/packages/@lwc/integration-karma/test/rendering/issue-4889/index.spec.js b/packages/@lwc/integration-karma/test/rendering/issue-4889/index.spec.js new file mode 100644 index 0000000000..5d6ad3e2a3 --- /dev/null +++ b/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)); + }); + }); +}); diff --git a/packages/@lwc/integration-karma/test/rendering/issue-4889/x/data/data.js b/packages/@lwc/integration-karma/test/rendering/issue-4889/x/data/data.js new file mode 100644 index 0000000000..0145cd9910 --- /dev/null +++ b/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, + }, + ], + }, + ], +]; diff --git a/packages/@lwc/integration-karma/test/rendering/issue-4889/x/row/row.html b/packages/@lwc/integration-karma/test/rendering/issue-4889/x/row/row.html new file mode 100644 index 0000000000..6beff5199f --- /dev/null +++ b/packages/@lwc/integration-karma/test/rendering/issue-4889/x/row/row.html @@ -0,0 +1,2 @@ + diff --git a/packages/@lwc/integration-karma/test/rendering/issue-4889/x/row/row.js b/packages/@lwc/integration-karma/test/rendering/issue-4889/x/row/row.js new file mode 100644 index 0000000000..fe8af250df --- /dev/null +++ b/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; +} diff --git a/packages/@lwc/integration-karma/test/rendering/issue-4889/x/table/table.html b/packages/@lwc/integration-karma/test/rendering/issue-4889/x/table/table.html new file mode 100644 index 0000000000..cd8386dafe --- /dev/null +++ b/packages/@lwc/integration-karma/test/rendering/issue-4889/x/table/table.html @@ -0,0 +1,8 @@ + diff --git a/packages/@lwc/integration-karma/test/rendering/issue-4889/x/table/table.js b/packages/@lwc/integration-karma/test/rendering/issue-4889/x/table/table.js new file mode 100644 index 0000000000..437fce3bf7 --- /dev/null +++ b/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 = []; +}