diff --git a/change/@microsoft-fast-html-192b646c-1a97-4adf-a456-a253d0d54eda.json b/change/@microsoft-fast-html-192b646c-1a97-4adf-a456-a253d0d54eda.json new file mode 100644 index 00000000000..b9312d33ac9 --- /dev/null +++ b/change/@microsoft-fast-html-192b646c-1a97-4adf-a456-a253d0d54eda.json @@ -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" +} diff --git a/packages/fast-html/test/fixtures/repeat/index.html b/packages/fast-html/test/fixtures/repeat/index.html index 0e78050fffb..22d467c1eef 100644 --- a/packages/fast-html/test/fixtures/repeat/index.html +++ b/packages/fast-html/test/fixtures/repeat/index.html @@ -101,5 +101,22 @@ + + + + + + + diff --git a/packages/fast-html/test/fixtures/repeat/main.ts b/packages/fast-html/test/fixtures/repeat/main.ts index 5108be6d01c..fefc989a477 100644 --- a/packages/fast-html/test/fixtures/repeat/main.ts +++ b/packages/fast-html/test/fixtures/repeat/main.ts @@ -47,6 +47,15 @@ RenderableFASTElement(TestElementIntervalUpdates).defineAsync({ templateOptions: "defer-and-hydrate", }); +export class TestElementNoItemRepeatBinding extends FASTElement { + @observable + list: Array = []; +} +RenderableFASTElement(TestElementNoItemRepeatBinding).defineAsync({ + name: "test-element-no-item-repeat-binding", + templateOptions: "defer-and-hydrate", +}); + TemplateElement.options({ "test-element-interval-updates": { observerMap: "all", diff --git a/packages/fast-html/test/fixtures/repeat/repeat.spec.ts b/packages/fast-html/test/fixtures/repeat/repeat.spec.ts index e055eb1d70c..f852b8ca134 100644 --- a/packages/fast-html/test/fixtures/repeat/repeat.spec.ts +++ b/packages/fast-html/test/fixtures/repeat/repeat.spec.ts @@ -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"]); + }); });