adds select required tests

microsoft · Dec 19, 2023 · 7e541ae · 7e541ae
1 parent b50f14f
commit 7e541ae
Showing 1 changed file with 57 additions and 0 deletions.
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
@@ -7,13 +7,16 @@ import type { FASTSelect } from "./select.js";
 test.describe("Select", () => {
     let page: Page;
     let element: Locator;
+    let options: Locator;
     let root: Locator;
 
     test.beforeAll(async ({ browser }) => {
         page = await browser.newPage();
 
         element = page.locator("fast-select");
 
+        options = page.locator("fast-option");
+
         root = page.locator("#root");
 
         await page.goto(fixtureURL("select--select"), {
@@ -75,6 +78,16 @@ test.describe("Select", () => {
         await expect(element).toHaveAttribute("aria-expanded", "false");
     });
 
+    test("should set the attribute aria-required to true when required attribute is present", async () => {
+        await root.evaluate(node => {
+            node.innerHTML = /* html */ `
+                <fast-select required></fast-select>
+            `;
+        });
+
+        await expect(element).toHaveAttribute("aria-required", "true");
+    });
+
     test("should set its value to the first enabled option", async () => {
         await root.evaluate(node => {
             node.innerHTML = /* html */ `
@@ -91,6 +104,50 @@ test.describe("Select", () => {
         await expect(element).toHaveJSProperty("selectedIndex", 0);
     });
 
+    test("should not set default value when placeholder is set", 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>
+            `;
+        });
+
+        await expect(element).toHaveJSProperty("value", "");
+        await expect(element).toHaveJSProperty("currentIndex", undefined);
+        await expect(element).toHaveAttribute("currentIndex", "");
+        await expect(element).not.toHaveJSProperty("selectedIndex", 0);
+    });
+
+    test("should handle validity when the `required` attribute is present", async () => {
+        await root.evaluate(node => {
+            node.innerHTML = /* html */ `
+                <fast-select required placeholder="my placeholder">
+                    <fast-option>Option 1</fast-option>
+                    <fast-option>Option 2</fast-option>
+                    <fast-option>Option 3</fast-option>
+                </fast-select>
+            `;
+        });
+
+        await element.evaluate<void, FASTSelect>(node => {
+            node.open = true;
+        });
+        const option = options.nth(0);
+
+        expect(
+            await element.evaluate((node: FASTSelect) => node.validity.valueMissing)
+        ).toBe(true);
+
+        await option.click();
+
+        expect(
+            await element.evaluate((node: FASTSelect) => node.validity.valueMissing)
+        ).toBe(false);
+    });
+
     test("should NOT have a tabindex when `disabled` is true", async () => {
         await root.evaluate(node => {
             node.innerHTML = /* html */ `