select: adds tests for conditional placeholder rendering

microsoft · Dec 19, 2023 · 113c731 · 113c731
1 parent 39f4a4b
commit 113c731
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 1 deletion.
diff --git a/packages/web-components/fast-foundation/src/select/select.pw.spec.ts b/packages/web-components/fast-foundation/src/select/select.pw.spec.ts
@@ -88,6 +88,52 @@ test.describe("Select", () => {
         await expect(element).toHaveAttribute("aria-required", "true");
     });
 
+    test("should render placeholder option when select is collapsible", async () => {
+        await root.evaluate(node => {
+            node.innerHTML = /* html */ `
+                <fast-select placeholder="my placeholder">
+                    <fast-option>Option 1</fast-option>
+                    <fast-option>Option 2</fast-option>
+                    <fast-option>Option 3</fast-option>
+                </fast-select>
+            `;
+        });
+
+        const option = await page.$(".placeholder");
+
+        expect(option).not.toBeNull();
+    });
+
+    test("should not render placeholder option when the multiple attribute is present", async () => {
+        await root.evaluate(node => {
+            node.innerHTML = /* html */ `
+                <fast-select multiple placeholder="placeholder">
+                    <fast-option>Option 1</fast-option>
+                    <fast-option>Option 2</fast-option>
+                    <fast-option>Option 3</fast-option>
+                </fast-select>
+            `;
+        });
+        const option = await page.$(".placeholder");
+
+        expect(option).toBeNull();
+    });
+
+    test("should not render placeholder option when the size attribute is present", async () => {
+        await root.evaluate(node => {
+            node.innerHTML = /* html */ `
+                <fast-select size="3" placeholder="placeholder">
+                    <fast-option>Option 1</fast-option>
+                    <fast-option>Option 2</fast-option>
+                    <fast-option>Option 3</fast-option>
+                </fast-select>
+            `;
+        });
+        const option = await page.$(".placeholder");
+
+        expect(option).toBeNull();
+    });
+
     test("should set its value to the first enabled option", async () => {
         await root.evaluate(node => {
             node.innerHTML = /* html */ `

diff --git a/packages/web-components/fast-foundation/src/select/select.template.ts b/packages/web-components/fast-foundation/src/select/select.template.ts
@@ -65,7 +65,13 @@ export function selectTemplate<T extends FASTSelect>(
                 ${when(
                     x => x.placeholder && x.collapsible,
                     html<T>`
-                        <option disabled hidden ${ref("placeholderOption")}>
+                        <option
+                            class="placeholder"
+                            part="placeholder"
+                            disabled
+                            hidden
+                            ${ref("placeholderOption")}
+                        >
                             ${x => x.placeholder}
                         </option>
                     `