chore: add test showing property reflection on boolean attribute (#7353)

# Pull Request

## 📖 Description

Added a test showing reflection of a property on a boolean attribute.

Closes #7351

## ✅ Checklist

### General

- [x] I have included a change request file using `$ npm run change`
- [x] I have added tests for my changes.
- [x] I have tested my changes.
- [ ] I have updated the project documentation to reflect my changes.
- [x] I have read the [CONTRIBUTING](https://github.com/microsoft/fast/blob/main/CONTRIBUTING.md) documentation and followed the [standards](https://github.com/microsoft/fast/blob/main/CODE_OF_CONDUCT.md#our-standards) for this project.

Author: janechu

change/@microsoft-fast-html-18236536-e635-4a0a-9208-08fbe1e9a695.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: add test showing property reflection on boolean attribute",
+  "packageName": "@microsoft/fast-html",
+  "email": "7559015+janechu@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

packages/fast-html/test/fixtures/attribute/attribute.spec.ts

@@ -24,6 +24,20 @@ test.describe("f-template", async () => {
         await expect(customElement).toHaveAttribute("type", "radio");
         await expect(customElement.locator("input[type='radio']")).toHaveCount(1);
     });
+    test("create a property to attribute binding", async ({ page }) => {
+        await page.goto("/fixtures/attribute/");
+
+        const customElement = page.locator("test-element-property");
+
+        await expect(customElement.locator("input[disabled]")).toHaveCount(1);
+
+        await page.evaluate(() => {
+            const customElement = document.getElementsByTagName("test-element-property");
+            (customElement.item(0) as any)!.isEnabled = true;
+        });
+
+        await expect(customElement.locator("input[disabled]")).toHaveCount(0);
+    });
     test("create an attribute binding with an expression", async ({ page }) => {
         await page.goto("/fixtures/attribute/");
 
@@ -33,7 +47,9 @@ test.describe("f-template", async () => {
         await expect(customElementInput).toHaveAttribute("disabled");
 
         await page.evaluate(() => {
-            const customElement = document.getElementsByTagName("test-element-expression");
+            const customElement = document.getElementsByTagName(
+                "test-element-expression",
+            );
             customElement.item(0)?.setAttribute("active-group", "home");
         });
 

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

@@ -10,6 +10,11 @@
                 <input disabled data-fe-b-0 type="checkbox">
             </template>
         </test-element>
+        <test-element-property>
+            <template shadowrootmode="open">
+                <input type="checkbox" data-fe-b-0 disabled>
+            </template>
+        </test-element-property>
         <test-element-expression active-group="work" current-group="work">
             <template shadowrootmode="open">
                 <input disabled data-fe-b-0 type="button">
@@ -18,6 +23,9 @@
         <f-template name="test-element">
             <template><input type="{{type}}" disabled></template>
         </f-template>
+        <f-template name="test-element-property">
+            <template><input type="checkbox" ?disabled="{{!isEnabled}}"></template>
+        </f-template>
         <f-template name="test-element-expression">
             <template>
                 <input ?disabled="{{activeGroup == currentGroup}}" type="button">

packages/fast-html/test/fixtures/attribute/main.ts

@@ -1,5 +1,5 @@
+import { attr, FASTElement, observable } from "@microsoft/fast-element";
 import { RenderableFASTElement, TemplateElement } from "@microsoft/fast-html";
-import { attr, FASTElement } from "@microsoft/fast-element";
 
 class TestElement extends FASTElement {
     @attr
@@ -10,6 +10,15 @@ RenderableFASTElement(TestElement).defineAsync({
     templateOptions: "defer-and-hydrate",
 });
 
+class TestElementProperty extends FASTElement {
+    @observable
+    isEnabled: boolean = false;
+}
+RenderableFASTElement(TestElementProperty).defineAsync({
+    name: "test-element-property",
+    templateOptions: "defer-and-hydrate",
+});
+
 class TestElementExpression extends FASTElement {
     @attr({ attribute: "active-group" })
     activeGroup: string = "";