Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "none",
"comment": "chore: add tests for no item repeat binding",
"packageName": "@microsoft/fast-html",
"email": "863023+radium-v@users.noreply.github.com",
"dependentChangeType": "none"
}
17 changes: 17 additions & 0 deletions packages/fast-html/test/fixtures/repeat/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -101,5 +101,22 @@
</ul>
</template>
</test-element-interval-updates>

<test-element-no-item-repeat-binding>
<template shadowrootmode="open">
<ul>
<!--fe-b$$start$$0$$item-in-list$$fe-b--><!--fe-b$$end$$0$$item-in-list$$fe-b-->
</ul>
</template>
</test-element-no-item-repeat-binding>
<f-template name="test-element-no-item-repeat-binding">
<template>
<ul>
<f-repeat value="{item in list}">
<li>{{item}}</li>
</f-repeat>
</ul>
</template>
</f-template>
</body>
</html>
9 changes: 9 additions & 0 deletions packages/fast-html/test/fixtures/repeat/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,15 @@ RenderableFASTElement(TestElementIntervalUpdates).defineAsync({
templateOptions: "defer-and-hydrate",
});

export class TestElementNoItemRepeatBinding extends FASTElement {
@observable
list: Array<string> = [];
}
RenderableFASTElement(TestElementNoItemRepeatBinding).defineAsync({
name: "test-element-no-item-repeat-binding",
templateOptions: "defer-and-hydrate",
});

TemplateElement.options({
"test-element-interval-updates": {
observerMap: "all",
Expand Down
38 changes: 38 additions & 0 deletions packages/fast-html/test/fixtures/repeat/repeat.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -92,4 +92,42 @@ test.describe("f-template", async () => {
});
})).resolves.toEqual("mutations detected");
});

test("repeat directive with no item binding should not error", async ({ page }) => {
await page.goto("/fixtures/repeat/");

const element = page.locator("test-element-no-item-repeat-binding");
const listItems = element.locator("li");

await expect(listItems).toHaveCount(0);

const commentNodeContent = await element.evaluate((node: TestElement) => {
const walker = document.createTreeWalker(
node.shadowRoot!,
NodeFilter.SHOW_COMMENT,
);

const comments: string[] = [];
let currentNode: Node | null = walker.nextNode();
while (currentNode) {
comments.push(currentNode.nodeValue!);
currentNode = walker.nextNode();
}

return comments;
});

expect(commentNodeContent).toEqual(["", ""]);

await element.evaluate((node: TestElement) => {
node.list = [
"A",
"B",
"C"
];
});

await expect(listItems).toHaveCount(3);
await expect(listItems).toContainText(["A", "B", "C"]);
});
});
Loading