diff --git a/change/@microsoft-fast-html-repeat-event-0e0f8981-0abd-43ad-b94f-66429df77c92.json b/change/@microsoft-fast-html-repeat-event-0e0f8981-0abd-43ad-b94f-66429df77c92.json
new file mode 100644
index 00000000000..00090865ab3
--- /dev/null
+++ b/change/@microsoft-fast-html-repeat-event-0e0f8981-0abd-43ad-b94f-66429df77c92.json
@@ -0,0 +1,7 @@
+{
+ "type": "none",
+ "comment": "chore(fast-html): use @microsoft/fast-build to build repeat-event fixture",
+ "packageName": "@microsoft/fast-html",
+ "email": "7559015+janechu@users.noreply.github.com",
+ "dependentChangeType": "none"
+}
diff --git a/packages/fast-html/scripts/build-fixtures.js b/packages/fast-html/scripts/build-fixtures.js
index b067d115676..18212bacb0f 100644
--- a/packages/fast-html/scripts/build-fixtures.js
+++ b/packages/fast-html/scripts/build-fixtures.js
@@ -7,7 +7,7 @@ import { fileURLToPath } from "node:url";
// Builds test fixtures using @microsoft/fast-build. Add fixture names here
// incrementally as each one is verified to work with the fast-build CLI.
-const fixtures = ["attribute", "binding", "event", "ref", "slotted", "when", "repeat"];
+const fixtures = ["attribute", "binding", "event", "ref", "slotted", "when", "repeat", "repeat-event"];
const __dirname = dirname(fileURLToPath(import.meta.url));
const require = createRequire(import.meta.url);
diff --git a/packages/fast-html/test/fixtures/repeat-event/entry.html b/packages/fast-html/test/fixtures/repeat-event/entry.html
new file mode 100644
index 00000000000..25d60be0860
--- /dev/null
+++ b/packages/fast-html/test/fixtures/repeat-event/entry.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/fast-html/test/fixtures/repeat-event/index.html b/packages/fast-html/test/fixtures/repeat-event/index.html
index 9003c46c921..9036655d3e5 100644
--- a/packages/fast-html/test/fixtures/repeat-event/index.html
+++ b/packages/fast-html/test/fixtures/repeat-event/index.html
@@ -1,65 +1,53 @@
-
+
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+ -
+
+
+
+
+
+ -
+
+
+
+
+
+
+
+
+
+
+ -
+
+
+
+
+
+
+
+
+
+
+ -
+
+
+
+
+
+
+
+
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
+
diff --git a/packages/fast-html/test/fixtures/repeat-event/main.ts b/packages/fast-html/test/fixtures/repeat-event/main.ts
index 5d19fe97e12..43777f13ac6 100644
--- a/packages/fast-html/test/fixtures/repeat-event/main.ts
+++ b/packages/fast-html/test/fixtures/repeat-event/main.ts
@@ -1,5 +1,5 @@
-import { RenderableFASTElement, TemplateElement } from "@microsoft/fast-html";
import { FASTElement, observable } from "@microsoft/fast-element";
+import { RenderableFASTElement, TemplateElement } from "@microsoft/fast-html";
export interface ItemType {
name: string;
@@ -7,7 +7,7 @@ export interface ItemType {
export class TestElementRepeatEvent extends FASTElement {
@observable
- items: Array = [];
+ repeatEventItems: Array = [];
@observable
clickedItemName: string = "";
@@ -23,9 +23,9 @@ RenderableFASTElement(TestElementRepeatEvent).defineAsync({
templateOptions: "defer-and-hydrate",
});
-// Scenario: f-when using $c.parent inside f-repeat
+// Scenario: f-when using showNames inside f-repeat
export class TestWhenInRepeat extends FASTElement {
- @observable items: Array = [{ name: "Alpha" }, { name: "Beta" }];
+ @observable whenRepeatItems: Array = [{ name: "Alpha" }, { name: "Beta" }];
@observable showNames: boolean = true;
@observable clickedItemName: string = "";
diff --git a/packages/fast-html/test/fixtures/repeat-event/repeat-event.spec.ts b/packages/fast-html/test/fixtures/repeat-event/repeat-event.spec.ts
index 217510345b0..ce789adddd9 100644
--- a/packages/fast-html/test/fixtures/repeat-event/repeat-event.spec.ts
+++ b/packages/fast-html/test/fixtures/repeat-event/repeat-event.spec.ts
@@ -15,7 +15,7 @@ test.describe("f-repeat event binding", async () => {
// Dynamically populate items so the repeat renders buttons
await customElement.evaluate((node: TestElementRepeatEvent) => {
- node.items = [{ name: "Alpha" }, { name: "Beta" }];
+ node.repeatEventItems = [{ name: "Alpha" }, { name: "Beta" }];
});
await expect(buttons).toHaveCount(2);
@@ -26,10 +26,7 @@ test.describe("f-repeat event binding", async () => {
// set on the host element.
await buttons.nth(0).click();
- await expect(customElement).toHaveJSProperty(
- "clickedItemName",
- "Alpha"
- );
+ await expect(customElement).toHaveJSProperty("clickedItemName", "Alpha");
});
test("f-when with c.parent condition inside f-repeat", async ({ page }) => {
diff --git a/packages/fast-html/test/fixtures/repeat-event/state.json b/packages/fast-html/test/fixtures/repeat-event/state.json
new file mode 100644
index 00000000000..a302c5a5572
--- /dev/null
+++ b/packages/fast-html/test/fixtures/repeat-event/state.json
@@ -0,0 +1,5 @@
+{
+ "repeatEventItems": [],
+ "whenRepeatItems": [{ "name": "Alpha" }, { "name": "Beta" }],
+ "showNames": true
+}
diff --git a/packages/fast-html/test/fixtures/repeat-event/templates.html b/packages/fast-html/test/fixtures/repeat-event/templates.html
new file mode 100644
index 00000000000..410831c7b9c
--- /dev/null
+++ b/packages/fast-html/test/fixtures/repeat-event/templates.html
@@ -0,0 +1,24 @@
+
+
+
+
+ -
+
+
+
+
+
+
+
+
+
+
+ -
+
+
+
+
+
+
+
+