test: add test for snabbdom mutating old children

[nolanlawson]

Details

See discussion here: #2589 (comment)

Prior to this PR, we didn't have any Jest or Karma tests to exercise the else block in this code path (line 133):

lwc/packages/@lwc/engine-core/src/3rdparty/snabbdom/snabbdom.ts

Lines 127 to 146 in d93e296

	idxInOld = oldKeyToIdx[newStartVnode.key!];
	if (isUndef(idxInOld)) {
	// New element
	newStartVnode.hook.create(newStartVnode);
	newStartVnode.hook.insert(newStartVnode, parentElm, oldStartVnode.elm!);
	newStartVnode = newCh[++newStartIdx];
	} else {
	elmToMove = oldCh[idxInOld];
	if (isVNode(elmToMove)) {
	if (elmToMove.sel !== newStartVnode.sel) {
	// New element
	newStartVnode.hook.create(newStartVnode);
	newStartVnode.hook.insert(newStartVnode, parentElm, oldStartVnode.elm!);
	} else {
	patchVnode(elmToMove, newStartVnode);
	oldCh[idxInOld] = undefined as any;
	newStartVnode.hook.move(elmToMove, parentElm, oldStartVnode.elm!);
	}
	}
	newStartVnode = newCh[++newStartIdx];

This PR adds a test that does hit this line of code:

Interestingly, the if block here seems completely unreachable:

lwc/packages/@lwc/engine-core/src/3rdparty/snabbdom/snabbdom.ts

Line 136 in d93e296

if (elmToMove.sel !== newStartVnode.sel) {

The only way it could be reached is if two VNodes with two different tags (e.g. x-foo and x-bar) occupy the same positions in the children array. I tried to repro this using both:

1. lwc:dynamic and
2. <template if:true> inside of a <template for:each>

…but neither seem to work. In the case of (1), the dynamic component has the same tag name (e.g. x-dynamic) regardless of whether it's actually x-foo or x-bar under the hood, and in the case of (2) there are holes in the array for the <template if:true> and <template if:false>, so two different element types cannot occupy the same index in the array.

We can probably remove that part of the code, but I'd prefer not to, because maybe someday we will refactor our templates to avoid creating holes for if/else blocks?

Does this pull request introduce a breaking change?

• ✅ No, it does not introduce a breaking change.

Does this pull request introduce an observable change?

• ✅ No, it does not introduce an observable change.

[nolanlawson]

See the test above; it's basically the same, except I changed one row.

[nolanlawson]

Also: I can confirm that the test fails if I remove this line:

lwc/packages/@lwc/engine-core/src/3rdparty/snabbdom/snabbdom.ts

Line 142 in d93e296

oldCh[idxInOld] = undefined as any;

The error is:

Chrome 96.0.4664.93 (Mac OS 10.15.7) rendering table-diffing Table diffing should reuse the elements when moving the end to the start and adding new to the end FAILED
        Expected $.length = 3 to equal 4.
        Expected $[1] = 2 to equal 1.
        Expected $[2] = 4 to equal 2.
        Expected $[3] = undefined to equal 4.
        Error: Expected $.length = 3 to equal 4.
        Expected $[1] = 2 to equal 1.
        Expected $[2] = 4 to equal 2.
        Expected $[3] = undefined to equal 4.

[caridy]

excellent!