xmlui 0.10.18 → 0.10.20

package/dist/scripts/src/components/Select/Select.spec.js

@@ -10,21 +10,26 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const fixtures_1 = require("../../testing/fixtures");
-(0, fixtures_1.test)("dynamic options displayed with Items component", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createSelectDriver, page, }) {
-    yield initTestBed(`
-    <Select>
-      <Items data="{['One', 'Two', 'Three']}" >
-        <Option value="{$itemIndex}" label="{$item}" />
-      </Items>
-    </Select>`);
-    const driver = yield createSelectDriver();
-    yield driver.click();
-    yield (0, fixtures_1.expect)(page.getByRole("option", { name: "One" })).toBeVisible();
-    yield (0, fixtures_1.expect)(page.getByRole("option", { name: "Two" })).toBeVisible();
-    yield (0, fixtures_1.expect)(page.getByRole("option", { name: "Three" })).toBeVisible();
-}));
-(0, fixtures_1.test)("changing selected option in form", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createSelectDriver }) {
-    yield initTestBed(`
+// =============================================================================
+// BASIC FUNCTIONALITY TESTS
+// =============================================================================
+fixtures_1.test.describe("Basic Functionality", () => {
+    // --- Component rendering
+    (0, fixtures_1.test)("dynamic options displayed with Items component", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createSelectDriver, page, }) {
+        yield initTestBed(`
+      <Select>
+        <Items data="{['One', 'Two', 'Three']}" >
+          <Option value="{$itemIndex}" label="{$item}" />
+        </Items>
+      </Select>`);
+        const driver = yield createSelectDriver();
+        yield driver.click();
+        yield (0, fixtures_1.expect)(page.getByRole("option", { name: "One" })).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("option", { name: "Two" })).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("option", { name: "Three" })).toBeVisible();
+    }));
+    (0, fixtures_1.test)("changing selected option in form", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createSelectDriver }) {
+        yield initTestBed(`
     <Form data="{{sel: 'opt1'}}">
       <FormItem testId="mySelect" type="select" bindTo="sel">
         <Option value="opt1" label="first"/>
@@ -32,14 +37,15 @@ const fixtures_1 = require("../../testing/fixtures");
         <Option value="opt3" label="third"/>
       </FormItem>
     </Form>`);
-    const driver = yield createSelectDriver("mySelect");
-    yield (0, fixtures_1.expect)(driver.component.locator("select")).toHaveValue("opt1");
-    yield driver.toggleOptionsVisibility();
-    yield driver.selectLabel("second");
-    yield (0, fixtures_1.expect)(driver.component.locator("select")).toHaveValue("opt2");
-}));
-(0, fixtures_1.test)("initialValue set to first valid value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`
+        const driver = yield createSelectDriver("mySelect");
+        yield (0, fixtures_1.expect)(driver.component.locator("select")).toHaveValue("opt1");
+        yield driver.toggleOptionsVisibility();
+        yield driver.selectLabel("second");
+        yield (0, fixtures_1.expect)(driver.component.locator("select")).toHaveValue("opt2");
+    }));
+    // --- initialValue prop
+    (0, fixtures_1.test)("initialValue set to first valid value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
     <Fragment>
       <Select id="mySelect" initialValue="{0}">
         <Option value="{0}" label="Zero"/>
@@ -49,12 +55,12 @@ const fixtures_1 = require("../../testing/fixtures");
       <Text testId="text">Selected value: {mySelect.value}</Text>
     </Fragment>
   `);
-    yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("Selected value: 0");
-    yield (0, fixtures_1.expect)(page.getByText("Zero", { exact: true })).toBeVisible();
-    yield (0, fixtures_1.expect)(page.getByText("One", { exact: true })).not.toBeVisible();
-}));
-(0, fixtures_1.test)("initialValue set to non-existant option", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("Selected value: 0");
+        yield (0, fixtures_1.expect)(page.getByText("Zero", { exact: true })).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByText("One", { exact: true })).not.toBeVisible();
+    }));
+    (0, fixtures_1.test)("initialValue set to non-existant option", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
     <Fragment>
       <Select id="mySelect" initialValue="{42}">
         <Option value="{0}" label="Zero"/>
@@ -64,10 +70,10 @@ const fixtures_1 = require("../../testing/fixtures");
       <Text testId="text">Selected value: {mySelect.value}</Text>
     </Fragment>
   `);
-    yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("Selected value: 42");
-}));
-(0, fixtures_1.test)("reset works with initialValue", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed, createSelectDriver, createButtonDriver, }) {
-    yield initTestBed(`
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("Selected value: 42");
+    }));
+    (0, fixtures_1.test)("reset works with initialValue", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed, createSelectDriver, createButtonDriver, }) {
+        yield initTestBed(`
     <Fragment>
       <Select id="mySelect" initialValue="{0}">
         <Option value="{0}" label="Zero"/>
@@ -77,17 +83,17 @@ const fixtures_1 = require("../../testing/fixtures");
       <Button id="resetBtn" label="reset" onClick="mySelect.reset()"/>
       <Text testId="text">Selected value: {mySelect.value}</Text>
     </Fragment>
-  `);
-    const selectDrv = yield createSelectDriver("mySelect");
-    yield selectDrv.toggleOptionsVisibility();
-    yield selectDrv.selectLabel("One");
-    yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("Selected value: 1");
-    const btnDriver = yield createButtonDriver("resetBtn");
-    yield btnDriver.click();
-    yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("Selected value: 0");
-}));
-(0, fixtures_1.test)("reset works with no intialValue", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed, createSelectDriver, createButtonDriver, }) {
-    yield initTestBed(`
+    `);
+        const selectDrv = yield createSelectDriver("mySelect");
+        yield selectDrv.toggleOptionsVisibility();
+        yield selectDrv.selectLabel("One");
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("Selected value: 1");
+        const btnDriver = yield createButtonDriver("resetBtn");
+        yield btnDriver.click();
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("Selected value: 0");
+    }));
+    (0, fixtures_1.test)("reset works with no intialValue", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed, createSelectDriver, createButtonDriver, }) {
+        yield initTestBed(`
     <Fragment>
       <Select id="mySelect">
         <Option value="{0}" label="Zero"/>
@@ -97,88 +103,90 @@ const fixtures_1 = require("../../testing/fixtures");
       <Button id="resetBtn" label="reset" onClick="mySelect.reset()"/>
       <Text testId="text">Selected value: {mySelect.value}</Text>
     </Fragment>
-  `);
-    const selectDrv = yield createSelectDriver("mySelect");
-    yield selectDrv.toggleOptionsVisibility();
-    yield selectDrv.selectLabel("One");
-    yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("Selected value: 1");
-    const btnDriver = yield createButtonDriver("resetBtn");
-    yield btnDriver.click();
-    yield (0, fixtures_1.expect)(page.getByTestId("text")).not.toContainText("1");
-}));
-(0, fixtures_1.test)("disabled Select cannot be opened", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, createSelectDriver, initTestBed }) {
-    yield initTestBed(`
+    `);
+        const selectDrv = yield createSelectDriver("mySelect");
+        yield selectDrv.toggleOptionsVisibility();
+        yield selectDrv.selectLabel("One");
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("Selected value: 1");
+        const btnDriver = yield createButtonDriver("resetBtn");
+        yield btnDriver.click();
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).not.toContainText("1");
+    }));
+    // --- enabled prop
+    (0, fixtures_1.test)("disabled Select cannot be opened", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, createSelectDriver, initTestBed }) {
+        yield initTestBed(`
     <Select enabled="{false}">
       <Option value="1" label="One"/>
       <Option value="2" label="Two"/>
     </Select>
-  `);
-    const driver = yield createSelectDriver();
-    yield driver.click({ force: true });
-    yield (0, fixtures_1.expect)(page.getByText("One")).not.toBeVisible();
-}));
-(0, fixtures_1.test)("readOnly Select shows options, but value cannot be changed", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed, createSelectDriver, }) {
-    yield initTestBed(`
+    `);
+        const driver = yield createSelectDriver();
+        yield driver.click({ force: true });
+        yield (0, fixtures_1.expect)(page.getByText("One")).not.toBeVisible();
+    }));
+    // --- readOnly prop
+    (0, fixtures_1.test)("readOnly Select shows options, but value cannot be changed", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed, createSelectDriver, }) {
+        yield initTestBed(`
     <Select readOnly initialValue="1">
       <Option value="1" label="One"/>
       <Option value="2" label="Two"/>
     </Select>
-  `);
-    const driver = yield createSelectDriver();
-    yield (0, fixtures_1.expect)(page.getByText("Two")).not.toBeVisible();
-    yield (0, fixtures_1.expect)(page.getByText("One")).toBeVisible();
-    yield driver.toggleOptionsVisibility();
-    yield driver.selectLabel("Two");
-    yield (0, fixtures_1.expect)(page.getByText("Two")).not.toBeVisible();
-    yield (0, fixtures_1.expect)(page.getByText("One")).toBeVisible();
-    // verify dropdown is not visible but value is shown
-}));
-(0, fixtures_1.test)("readOnly multi-Select shows options, but value cannot be changed", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed, createSelectDriver, }) {
-    yield initTestBed(`
+    `);
+        const driver = yield createSelectDriver();
+        yield (0, fixtures_1.expect)(page.getByText("Two")).not.toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByText("One")).toBeVisible();
+        yield driver.toggleOptionsVisibility();
+        yield driver.selectLabel("Two");
+        yield (0, fixtures_1.expect)(page.getByText("Two")).not.toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByText("One")).toBeVisible();
+        // verify dropdown is not visible but value is shown
+    }));
+    (0, fixtures_1.test)("readOnly multi-Select shows options, but value cannot be changed", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed, createSelectDriver, }) {
+        yield initTestBed(`
     <Select readOnly initialValue="{[1, 2]}" multiSelect>
       <Option value="1" label="One"/>
       <Option value="2" label="Two"/>
       <Option value="3" label="Three"/>
     </Select>
-  `);
-    const driver = yield createSelectDriver();
-    yield (0, fixtures_1.expect)(page.getByText("Three")).not.toBeVisible();
-    yield (0, fixtures_1.expect)(page.getByText("One")).toBeVisible();
-    yield (0, fixtures_1.expect)(page.getByText("Two")).toBeVisible();
-    yield driver.toggleOptionsVisibility();
-    yield driver.selectLabel("Three");
-    yield (0, fixtures_1.expect)(page.getByText("Three")).not.toBeVisible();
-    yield (0, fixtures_1.expect)(page.getByText("One")).toBeVisible();
-    yield (0, fixtures_1.expect)(page.getByText("Two")).toBeVisible();
-}));
-(0, fixtures_1.test)("disabled Option cannot be selected", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createSelectDriver, page }) {
-    yield initTestBed(`
+    `);
+        const driver = yield createSelectDriver();
+        yield (0, fixtures_1.expect)(page.getByText("Three")).not.toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByText("One")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByText("Two")).toBeVisible();
+        yield driver.toggleOptionsVisibility();
+        yield driver.selectLabel("Three");
+        yield (0, fixtures_1.expect)(page.getByText("Three")).not.toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByText("One")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByText("Two")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("disabled Option cannot be selected", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createSelectDriver, page }) {
+        yield initTestBed(`
     <Select>
       <Option value="1" label="One"/>
       <Option value="2" label="Two" enabled="{false}"/>
     </Select>
-  `);
-    yield (0, fixtures_1.expect)(page.getByRole("option", { name: "One" })).not.toBeVisible();
-    yield (0, fixtures_1.expect)(page.getByRole("option", { name: "Two" })).not.toBeVisible();
-    const driver = yield createSelectDriver();
-    yield driver.toggleOptionsVisibility();
-    yield driver.selectLabel("Two");
-    yield (0, fixtures_1.expect)(page.getByRole("option", { name: "One" })).toBeVisible();
-    yield (0, fixtures_1.expect)(page.getByRole("option", { name: "Two" })).toBeVisible();
-}));
-(0, fixtures_1.test)("clicking label brings up the options", { tag: "@smoke" }, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver }) {
-    yield initTestBed(`
+    `);
+        yield (0, fixtures_1.expect)(page.getByRole("option", { name: "One" })).not.toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("option", { name: "Two" })).not.toBeVisible();
+        const driver = yield createSelectDriver();
+        yield driver.toggleOptionsVisibility();
+        yield driver.selectLabel("Two");
+        yield (0, fixtures_1.expect)(page.getByRole("option", { name: "One" })).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("option", { name: "Two" })).toBeVisible();
+    }));
+    (0, fixtures_1.test)("clicking label brings up the options", { tag: "@smoke" }, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver }) {
+        yield initTestBed(`
     <Select label="Choose an option">
       <Option value="1" label="One"/>
       <Option value="2" label="Two"/>
     </Select>
   `);
-    yield page.getByLabel("Choose an option").click();
-    yield (0, fixtures_1.expect)(page.getByRole("option", { name: "One" })).toBeVisible();
-    yield (0, fixtures_1.expect)(page.getByRole("option", { name: "Two" })).toBeVisible();
-}));
-(0, fixtures_1.test)("label displayed for selected numeric value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`
+        yield page.getByLabel("Choose an option").click();
+        yield (0, fixtures_1.expect)(page.getByRole("option", { name: "One" })).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("option", { name: "Two" })).toBeVisible();
+    }));
+    (0, fixtures_1.test)("label displayed for selected numeric value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
     <Fragment>
       <Select initialValue="{0}" >
         <Option value="{0}" label="Zero"/>
@@ -187,10 +195,11 @@ const fixtures_1 = require("../../testing/fixtures");
       </Select>
     </Fragment>
   `);
-    yield (0, fixtures_1.expect)(page.getByText("Zero")).toBeVisible();
-}));
-(0, fixtures_1.test)("autoFocus brings the focus to component", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver, }) {
-    yield initTestBed(`
+        yield (0, fixtures_1.expect)(page.getByText("Zero")).toBeVisible();
+    }));
+    // --- autoFocus prop
+    (0, fixtures_1.test)("autoFocus brings the focus to component", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver, }) {
+        yield initTestBed(`
     <Select>
       <Option value="1" label="One"/>
       <Option value="2" label="Two"/>
@@ -199,12 +208,13 @@ const fixtures_1 = require("../../testing/fixtures");
       <Option value="1" label="One"/>
       <Option value="2" label="Two"/>
     </Select>
-  `);
-    const driver = yield createSelectDriver("focused-select");
-    yield (0, fixtures_1.expect)(driver.component).toBeFocused();
-}));
-(0, fixtures_1.test)("emptyListTemplate shown when wrapped inside an App component", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver, }) {
-    yield initTestBed(`
+    `);
+        const driver = yield createSelectDriver("focused-select");
+        yield (0, fixtures_1.expect)(driver.component).toBeFocused();
+    }));
+    // --- Templates
+    (0, fixtures_1.test)("emptyListTemplate shown when wrapped inside an App component", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver, }) {
+        yield initTestBed(`
     <App>
       <Select testId="mySelect">
         <property name="emptyListTemplate">
@@ -212,13 +222,13 @@ const fixtures_1 = require("../../testing/fixtures");
         </property>
       </Select>
     </App>
-  `);
-    const driver = yield createSelectDriver("mySelect");
-    yield driver.click();
-    yield (0, fixtures_1.expect)(page.getByText("Nothing to see here!", { exact: true })).toBeVisible();
-}));
-(0, fixtures_1.test)("optionTemplate is shown", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver }) {
-    yield initTestBed(`
+    `);
+        const driver = yield createSelectDriver("mySelect");
+        yield driver.click();
+        yield (0, fixtures_1.expect)(page.getByText("Nothing to see here!", { exact: true })).toBeVisible();
+    }));
+    (0, fixtures_1.test)("optionTemplate is shown", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver }) {
+        yield initTestBed(`
     <Select>
       <Items items="{[
         { value: 'opt1', label: 'first' },
@@ -230,66 +240,90 @@ const fixtures_1 = require("../../testing/fixtures");
         </Option>
       </Items>
     </Select>
-  `);
-    const driver = yield createSelectDriver();
-    yield driver.click();
-    yield (0, fixtures_1.expect)(page.getByText("Template for value opt1")).toBeVisible();
-    yield (0, fixtures_1.expect)(page.getByText("Template for value opt2")).toBeVisible();
-    yield (0, fixtures_1.expect)(page.getByText("Template for value opt3")).toBeVisible();
-}));
-(0, fixtures_1.test)("labelBreak prop defaults to false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver }) {
-    yield page.setViewportSize({ width: 300, height: 720 });
-    yield initTestBed(`
+    `);
+        const driver = yield createSelectDriver();
+        yield driver.click();
+        yield (0, fixtures_1.expect)(page.getByText("Template for value opt1")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByText("Template for value opt2")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByText("Template for value opt3")).toBeVisible();
+    }));
+    // --- placeholder prop
+    (0, fixtures_1.test)("placeholder is shown", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver }) {
+        yield initTestBed(`
+      <Select placeholder="Please select an item">
+        <Option value="opt1" label="first"/>
+        <Option value="opt2" label="second"/>
+        <Option value="opt3" label="third"/>
+      </Select>
+    `);
+        yield (0, fixtures_1.expect)(page.getByText("Please select an item")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("Option without label and value is not rendered", { tag: "@smoke" }, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver }) {
+        yield initTestBed(`
+      <Select placeholder="Please select an item">
+        <Option />
+        <Option />
+        <Option />
+      </Select>
+    `);
+        const driver = yield createSelectDriver();
+        yield driver.click();
+        yield (0, fixtures_1.expect)(page.getByRole("option")).not.toBeVisible();
+    }));
+    (0, fixtures_1.test)("Option value defaults to label", { tag: "@smoke" }, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver }) {
+        yield initTestBed(`
+      <Fragment>
+        <Select id="mySelect">
+          <Option label="Zero"/>
+          <Option label="One"/>
+          <Option label="Two"/>
+        </Select>
+        <Text testId="text">Selected value: {mySelect.value}</Text>
+      </Fragment>
+    `);
+        const driver = yield createSelectDriver("mySelect");
+        yield driver.toggleOptionsVisibility();
+        yield driver.selectLabel("Zero");
+        yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("Selected value: Zero");
+    }));
+});
+// =============================================================================
+// LABEL POSITIONING TESTS
+// =============================================================================
+fixtures_1.test.describe("Label", () => {
+    (0, fixtures_1.test)("labelBreak prop defaults to false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver }) {
+        yield page.setViewportSize({ width: 300, height: 720 });
+        yield initTestBed(`
     <Select
       label="Dignissimos esse quasi esse cupiditate qui qui. Ut provident ad voluptatem tenetur sit consequuntur. Aliquam nisi fugit ut temporibus itaque ducimus rerum. Dolorem reprehenderit qui adipisci. Ullam harum atque ipsa."
       >
       <Option value="1" label="One"/>
       <Option value="2" label="Two"/>
     </Select>
-  `);
-    const labelWidth = (yield page.getByText("Dignissimos esse quasi").boundingBox()).width;
-    const select = page.getByRole("button").or(page.getByRole("combobox")).first();
-    const { width: selectWidth } = yield select.boundingBox();
-    (0, fixtures_1.expect)(labelWidth).toBe(selectWidth);
-}));
-(0, fixtures_1.test)("placeholder is shown", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver }) {
-    yield initTestBed(`
-    <Select placeholder="Please select an item">
-      <Option value="opt1" label="first"/>
-      <Option value="opt2" label="second"/>
-      <Option value="opt3" label="third"/>
-    </Select>
-  `);
-    yield (0, fixtures_1.expect)(page.getByText("Please select an item")).toBeVisible();
-}));
-(0, fixtures_1.test)("Option without label and value is not rendered", { tag: "@smoke" }, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver }) {
-    yield initTestBed(`
-    <Select placeholder="Please select an item">
-      <Option />
-      <Option />
-      <Option />
-    </Select>
-  `);
-    const driver = yield createSelectDriver();
-    yield driver.click();
-    yield (0, fixtures_1.expect)(page.getByRole("option")).not.toBeVisible();
-}));
-(0, fixtures_1.test)("Option value defaults to label", { tag: "@smoke" }, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver }) {
-    yield initTestBed(`
-    <Fragment>
-      <Select id="mySelect">
-        <Option label="Zero"/>
-        <Option label="One"/>
-        <Option label="Two"/>
+    `);
+        const labelWidth = (yield page.getByText("Dignissimos esse quasi").boundingBox()).width;
+        const select = page.getByRole("button").or(page.getByRole("combobox")).first();
+        const { width: selectWidth } = yield select.boundingBox();
+        (0, fixtures_1.expect)(labelWidth).toBe(selectWidth);
+    }));
+    (0, fixtures_1.test)('labelWidth applies with labelPosition="start"', (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield page.setViewportSize({ width: 300, height: 720 });
+        yield initTestBed(`
+      <Select label="Dignissimos esse quasi" labelWidth="200px" labelPosition="start" >
+        <Option value="opt1" label="first"/>
+        <Option value="opt2" label="second"/>
+        <Option value="opt3" label="third"/>
+        <Option value="opt4" label="fourth"/>
+        <Option value="opt5" label="fifth"/>
       </Select>
-      <Text testId="text">Selected value: {mySelect.value}</Text>
-    </Fragment>
-  `);
-    const driver = yield createSelectDriver("mySelect");
-    yield driver.toggleOptionsVisibility();
-    yield driver.selectLabel("Zero");
-    yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("Selected value: Zero");
-}));
+    `);
+        const labelWidth = (yield page.getByText("Dignissimos esse quasi").boundingBox()).width;
+        (0, fixtures_1.expect)(labelWidth).toBeGreaterThanOrEqual(200);
+    }));
+});
+// =============================================================================
+// SEARCHABLE SELECT TESTS
+// =============================================================================
 fixtures_1.test.describe("searchable select", () => {
     (0, fixtures_1.test)("placeholder is shown", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver }) {
         yield initTestBed(`
@@ -341,20 +375,9 @@ fixtures_1.test.describe("searchable select", () => {
         yield (0, fixtures_1.expect)(options[0]).toHaveText("second");
     }));
 });
-(0, fixtures_1.test)('labelWidth applies with labelPosition="start"', (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver, }) {
-    yield page.setViewportSize({ width: 300, height: 720 });
-    yield initTestBed(`
-    <Select label="Dignissimos esse quasi" labelWidth="200px" labelPosition="start" >
-      <Option value="opt1" label="first"/>
-      <Option value="opt2" label="second"/>
-      <Option value="opt3" label="third"/>
-      <Option value="opt4" label="fourth"/>
-      <Option value="opt5" label="fifth"/>
-    </Select>
-  `);
-    const labelWidth = (yield page.getByText("Dignissimos esse quasi").boundingBox()).width;
-    (0, fixtures_1.expect)(labelWidth).toBeGreaterThanOrEqual(200);
-}));
+// =============================================================================
+// MULTISELECT TESTS
+// =============================================================================
 fixtures_1.test.describe("multiSelect", () => {
     (0, fixtures_1.test)("initialValue='{[0]}' works", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
         yield initTestBed(`
@@ -382,7 +405,7 @@ fixtures_1.test.describe("multiSelect", () => {
     `);
         yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("Selected value: 0,1");
     }));
-    (0, fixtures_1.test)("select multiple items without closing listbox", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed, createSelectDriver, createButtonDriver, }) {
+    (0, fixtures_1.test)("select multiple items without closing listbox", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed, createSelectDriver, }) {
         const { testStateDriver } = yield initTestBed(`
       <Fragment>
         <Select id="mySelect" multiSelect>
@@ -425,7 +448,7 @@ fixtures_1.test.describe("multiSelect", () => {
         const { width: selectWidth } = yield select.boundingBox();
         (0, fixtures_1.expect)(labelWidth).toBe(selectWidth);
     }));
-    (0, fixtures_1.test)('labelPosition="start" is left in ltr language', (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+    (0, fixtures_1.test)('labelPosition="start" is left in ltr language', (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         yield initTestBed(`
       <Select multiSelect label="hi there" labelPosition="start" labelBreak="false">
         <Option value="1" label="One"/>
@@ -437,7 +460,7 @@ fixtures_1.test.describe("multiSelect", () => {
         const { x: selectX } = yield select.boundingBox();
         (0, fixtures_1.expect)(labelX).toBeLessThan(selectX);
     }));
-    (0, fixtures_1.test)('labelPosition="start" is right in rtl language', (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+    (0, fixtures_1.test)('labelPosition="start" is right in rtl language', (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         yield initTestBed(`
       <VStack direction="rtl">
         <Select multiSelect label="hi there" labelPosition="start" labelBreak="false">
@@ -492,6 +515,9 @@ fixtures_1.test.describe("multiSelect", () => {
         yield (0, fixtures_1.expect)(page.getByText("opt1=first", { exact: true })).not.toBeVisible();
     }));
 });
+// =============================================================================
+// SEARCHABLE MULTISELECT TESTS
+// =============================================================================
 fixtures_1.test.describe("searchable multiselect", { tag: "@smoke" }, () => {
     (0, fixtures_1.test)("searching for and selecting 2 items works", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed, createSelectDriver, }) {
         yield initTestBed(`
@@ -511,6 +537,47 @@ fixtures_1.test.describe("searchable multiselect", { tag: "@smoke" }, () => {
         yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("Selected value: 1,2");
     }));
 });
+// =============================================================================
+// EVENT HANDLING TESTS
+// =============================================================================
+fixtures_1.test.describe("Event Handling", () => {
+    (0, fixtures_1.test)("gotFocus event fires on focus", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Select onGotFocus="testState = 'focused'">
+        <Option value="1" label="One"/>
+        <Option value="2" label="Two"/>
+      </Select>
+    `);
+        const selectButton = page.getByRole("combobox");
+        yield selectButton.focus();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toBe("focused");
+    }));
+    (0, fixtures_1.test)("gotFocus event fires on label click", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Select label="Choose" onGotFocus="testState = 'focused'">
+        <Option value="1" label="One"/>
+        <Option value="2" label="Two"/>
+      </Select>
+    `);
+        yield page.getByText("Choose").click();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toBe("focused");
+    }));
+    (0, fixtures_1.test)("lostFocus event fires on blur", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Select onLostFocus="testState = 'blurred'">
+        <Option value="1" label="One"/>
+        <Option value="2" label="Two"/>
+      </Select>
+    `);
+        const selectButton = page.getByRole("combobox");
+        yield selectButton.focus();
+        yield selectButton.blur();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toBe("blurred");
+    }));
+});
+// =============================================================================
+// FORM INTEGRATION TESTS
+// =============================================================================
 //this is an upstream issue: https://github.com/radix-ui/primitives/issues/3135
 (0, fixtures_1.test)("initialValue honored when used within Form", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
     yield initTestBed(`
@@ -527,29 +594,31 @@ fixtures_1.test.describe("searchable multiselect", { tag: "@smoke" }, () => {
 // =============================================================================
 // VISUAL STATE TESTS
 // =============================================================================
-(0, fixtures_1.test)("input has correct width in px", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`<Select width="200px" testId="test"/>`, {});
-    const input = page.getByTestId("test");
-    const { width } = yield input.boundingBox();
-    (0, fixtures_1.expect)(width).toBe(200);
-}));
-(0, fixtures_1.test)("input with label has correct width in px", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`<Select width="200px" label="test" testId="test"/>`, {});
-    const input = page.getByTestId("test");
-    const { width } = yield input.boundingBox();
-    (0, fixtures_1.expect)(width).toBe(200);
-}));
-(0, fixtures_1.test)("input has correct width in %", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield page.setViewportSize({ width: 400, height: 300 });
-    yield initTestBed(`<Select width="50%" testId="test"/>`, {});
-    const input = page.getByTestId("test");
-    const { width } = yield input.boundingBox();
-    (0, fixtures_1.expect)(width).toBe(200);
-}));
-(0, fixtures_1.test)("input with label has correct width in %", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield page.setViewportSize({ width: 400, height: 300 });
-    yield initTestBed(`<Select width="50%" label="test" testId="test"/>`, {});
-    const input = page.getByTestId("test");
-    const { width } = yield input.boundingBox();
-    (0, fixtures_1.expect)(width).toBe(200);
-}));
+fixtures_1.test.describe("Visual State", () => {
+    (0, fixtures_1.test)("input has correct width in px", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`<Select width="200px" testId="test"/>`, {});
+        const input = page.getByTestId("test");
+        const { width } = yield input.boundingBox();
+        (0, fixtures_1.expect)(width).toBe(200);
+    }));
+    (0, fixtures_1.test)("input with label has correct width in px", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`<Select width="200px" label="test" testId="test"/>`, {});
+        const input = page.getByTestId("test");
+        const { width } = yield input.boundingBox();
+        (0, fixtures_1.expect)(width).toBe(200);
+    }));
+    (0, fixtures_1.test)("input has correct width in %", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield page.setViewportSize({ width: 400, height: 300 });
+        yield initTestBed(`<Select width="50%" testId="test"/>`, {});
+        const input = page.getByTestId("test");
+        const { width } = yield input.boundingBox();
+        (0, fixtures_1.expect)(width).toBe(200);
+    }));
+    (0, fixtures_1.test)("input with label has correct width in %", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield page.setViewportSize({ width: 400, height: 300 });
+        yield initTestBed(`<Select width="50%" label="test" testId="test"/>`, {});
+        const input = page.getByTestId("test");
+        const { width } = yield input.boundingBox();
+        (0, fixtures_1.expect)(width).toBe(200);
+    }));
+});