chore: add tests for no item repeat binding

Author: radium-v

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"
+}

packages/fast-html/test/fixtures/repeat/index.html

@@ -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>

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<string> = [];
+}
+RenderableFASTElement(TestElementNoItemRepeatBinding).defineAsync({
+    name: "test-element-no-item-repeat-binding",
+    templateOptions: "defer-and-hydrate",
+});
+
 TemplateElement.options({
     "test-element-interval-updates": {
         observerMap: "all",

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"]);
+    });
 });