61 lines
2.2 KiB
JavaScript
61 lines
2.2 KiB
JavaScript
import { render } from "@cerxes/csx";
|
|
import { testContainer } from "../utils/test-container";
|
|
|
|
describe("Key-property tests", () => {
|
|
test("Keyed list", async () => {
|
|
let renderedIndexes = [];
|
|
let initIndexes = [0, 1, 2, 3];
|
|
|
|
let makeSpec = (targetList, indexes)=>(
|
|
<ul>
|
|
{
|
|
indexes.map(index => (
|
|
<li id={`li_${index}`} key={index} ref={(el) => targetList[ index ] = el}>
|
|
{index}
|
|
</li>
|
|
))
|
|
}
|
|
</ul>
|
|
);
|
|
|
|
let initialVSpec = makeSpec(renderedIndexes, initIndexes);
|
|
|
|
let rendered = render(initialVSpec);
|
|
let container = testContainer(rendered);
|
|
|
|
expect(container.innerHTML).toBe(
|
|
[
|
|
`<ul>`,
|
|
...initIndexes.map(index=>`<li id="${`li_${index}`}">${index}</li>`),
|
|
`</ul>`
|
|
].join('')
|
|
);
|
|
|
|
expect(renderedIndexes.length).toBe(4);
|
|
for(let rendered of renderedIndexes){
|
|
expect(rendered).not.toBeUndefined();
|
|
}
|
|
|
|
let reorderedIndexes = [3,2,1,0];
|
|
let rerenderedIndexes = renderedIndexes.slice();
|
|
let updatedVSpec = makeSpec(rerenderedIndexes, reorderedIndexes);
|
|
render(updatedVSpec, {host: rendered, old: initialVSpec});// Is this host right? it seems inconsistent and the source of our bug (as it is probably also misused in custom-elements)
|
|
|
|
// Updated
|
|
expect(container.innerHTML).toBe(
|
|
[
|
|
`<ul>`,
|
|
...reorderedIndexes.map(index=>`<li id="${`li_${index}`}">${index}</li>`),
|
|
`</ul>`
|
|
].join('')
|
|
);
|
|
|
|
// Validate that items were merely re-arranged and not re-created
|
|
expect(rerenderedIndexes.length).toBe(4);
|
|
for(let i=0; i<4; ++i){
|
|
let initRendered = renderedIndexes[i];
|
|
let reorderedRendered = rerenderedIndexes[i];
|
|
expect(initRendered === reorderedRendered).toBe(true); // These should've remained the same
|
|
}
|
|
});
|
|
}); |