xmlui 0.10.13 → 0.10.15

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

@@ -0,0 +1,383 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const fixtures_1 = require("../../testing/fixtures");
+// =============================================================================
+// BASIC FUNCTIONALITY TESTS
+// =============================================================================
+(0, fixtures_1.test)("renders with default props", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAutoCompleteDriver }) {
+    yield initTestBed(`
+    <AutoComplete />
+  `);
+    const driver = yield createAutoCompleteDriver();
+    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+}));
+(0, fixtures_1.test)("displays placeholder text", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    const placeholder = "Search for an option";
+    yield initTestBed(`<AutoComplete placeholder="${placeholder}" />`);
+    yield (0, fixtures_1.expect)(page.getByPlaceholder(placeholder)).toBeVisible();
+}));
+(0, fixtures_1.test)("initialValue sets the selected option", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    yield initTestBed(`
+    <Fragment>
+      <AutoComplete id="autoComplete" initialValue="1" label="Select a superhero">
+        <Option value="1" label="Bruce Wayne" />
+        <Option value="2" label="Clark Kent" />
+        <Option value="3" label="Diana Prince" />
+      </AutoComplete>
+      <Text testId="text">Selected value: {autoComplete.value}</Text>
+    </Fragment>
+  `);
+    yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("Selected value: 1");
+    yield (0, fixtures_1.expect)(page.getByRole("combobox")).toHaveValue("Bruce Wayne");
+}));
+(0, fixtures_1.test)("opens dropdown when clicked", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createAutoCompleteDriver }) {
+    yield initTestBed(`
+    <AutoComplete>
+      <Option value="1" label="Bruce Wayne" />
+      <Option value="2" label="Clark Kent" />
+      <Option value="3" label="Diana Prince" />
+    </AutoComplete>
+  `);
+    const driver = yield createAutoCompleteDriver();
+    yield driver.click();
+    yield (0, fixtures_1.expect)(page.getByRole("listbox")).toBeVisible();
+}));
+(0, fixtures_1.test)("selects an option when clicked", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createAutoCompleteDriver }) {
+    yield initTestBed(`
+    <Fragment>
+      <AutoComplete id="autoComplete">
+        <Option value="1" label="Bruce Wayne" />
+        <Option value="2" label="Clark Kent" />
+        <Option value="3" label="Diana Prince" />
+      </AutoComplete>
+      <Text testId="text">Selected value: {autoComplete.value}</Text>
+    </Fragment>
+  `);
+    const driver = yield createAutoCompleteDriver("autoComplete");
+    // Open the dropdown
+    yield driver.click();
+    // Wait for options to be visible before selecting
+    yield page.getByRole("option", { name: "Diana Prince" }).waitFor({ state: "visible" });
+    // Select the option
+    yield driver.selectLabel("Diana Prince");
+    // Verify the results
+    yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("Selected value: 3");
+    yield (0, fixtures_1.expect)(page.getByRole("combobox")).toHaveValue("Diana Prince");
+}));
+// =============================================================================
+// EDGE CASE TESTS
+// =============================================================================
+(0, fixtures_1.test)("disabled option cannot be selected", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createAutoCompleteDriver, }) {
+    yield initTestBed(`
+    <Fragment>
+      <AutoComplete id="autoComplete">
+        <Option value="1" label="Bruce Wayne" />
+        <Option value="2" label="Clark Kent" enabled="false" />
+        <Option value="3" label="Diana Prince" />
+      </AutoComplete>
+      <Text testId="text">Selected value: {autoComplete.value}</Text>
+    </Fragment>
+  `);
+    const driver = yield createAutoCompleteDriver("autoComplete");
+    yield driver.click();
+    yield driver.selectLabel("Clark Kent");
+    // Value should not change to the disabled option
+    yield (0, fixtures_1.expect)(page.getByRole("combobox")).not.toHaveValue("Bruce Wayne");
+    yield (0, fixtures_1.expect)(page.getByTestId("text")).not.toHaveText("Selected value: 2");
+}));
+// =============================================================================
+// INTEGRATION TESTS
+// =============================================================================
+(0, fixtures_1.test)("multi mode allows selecting multiple options", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createAutoCompleteDriver, }) {
+    yield initTestBed(`
+    <Fragment>
+      <AutoComplete id="autoComplete" multi="true">
+        <Option value="1" label="Bruce Wayne" />
+        <Option value="2" label="Clark Kent" />
+        <Option value="3" label="Diana Prince" />
+      </AutoComplete>
+      <Text testId="text">Selected values: {autoComplete.value}</Text>
+    </Fragment>
+  `);
+    const driver = yield createAutoCompleteDriver("autoComplete");
+    yield driver.click();
+    // Click the first option
+    yield driver.selectLabel("Bruce Wayne");
+    // First option should be selected
+    yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("Selected values: 1");
+    // Click another option
+    yield driver.click();
+    yield driver.selectLabel("Diana Prince");
+    // Both options should be selected
+    yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("Selected values: 1,3");
+    // Both selected options should be visible as badges
+    yield (0, fixtures_1.expect)(page.getByText("Bruce Wayne")).toBeVisible();
+    yield (0, fixtures_1.expect)(page.getByText("Diana Prince")).toBeVisible();
+}));
+(0, fixtures_1.test)("searching filters options", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createAutoCompleteDriver }) {
+    yield initTestBed(`
+    <AutoComplete>
+      <Option value="1" label="Bruce Wayne" />
+      <Option value="2" label="Clark Kent" />
+      <Option value="3" label="Diana Prince" />
+      <Option value="4" label="Barry Allen" />
+      <Option value="5" label="Hal Jordan" />
+    </AutoComplete>
+  `);
+    const driver = yield createAutoCompleteDriver();
+    yield driver.click();
+    // Type in the search field
+    yield page.keyboard.type("Bruce");
+    // Only Bruce Wayne should be visible
+    yield (0, fixtures_1.expect)(page.getByText("Bruce Wayne")).toBeVisible();
+    yield (0, fixtures_1.expect)(page.getByText("Clark Kent")).not.toBeVisible();
+    yield (0, fixtures_1.expect)(page.getByText("Diana Prince")).not.toBeVisible();
+}));
+(0, fixtures_1.test)("emptyListTemplate is shown when no options match", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createAutoCompleteDriver, }) {
+    yield initTestBed(`
+    <AutoComplete>
+      <property name="emptyListTemplate">
+        <Text>No options found</Text>
+      </property>
+      <Option value="1" label="Bruce Wayne" />
+      <Option value="2" label="Clark Kent" />
+      <Option value="3" label="Diana Prince" />
+    </AutoComplete>
+  `);
+    const driver = yield createAutoCompleteDriver();
+    yield driver.click();
+    // Type something that doesn't match any option
+    yield page.keyboard.type("Joker");
+    // Empty list template should be shown
+    yield (0, fixtures_1.expect)(page.getByText("No options found")).toBeVisible();
+}));
+(0, fixtures_1.test)("optionTemplate customizes option appearance", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createAutoCompleteDriver, }) {
+    yield initTestBed(`
+    <AutoComplete>
+      <property name="optionTemplate">
+        <Text textAlign="center" color="purple">{$item.label}</Text>
+      </property>
+      <Option value="1" label="Bruce Wayne" />
+      <Option value="2" label="Clark Kent" />
+      <Option value="3" label="Diana Prince" />
+    </AutoComplete>
+  `);
+    const driver = yield createAutoCompleteDriver();
+    yield driver.click();
+    // Options should be visible with custom styling
+    yield (0, fixtures_1.expect)(page.getByText("Bruce Wayne")).toBeVisible();
+    yield (0, fixtures_1.expect)(page.getByText("Clark Kent")).toBeVisible();
+    yield (0, fixtures_1.expect)(page.getByText("Diana Prince")).toBeVisible();
+}));
+// =============================================================================
+// VISUAL STATE TESTS
+// =============================================================================
+(0, fixtures_1.test)("readOnly prevents changing selection", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createAutoCompleteDriver, }) {
+    yield initTestBed(`
+    <AutoComplete readOnly="true" initialValue="1">
+      <Option value="1" label="Bruce Wayne" />
+      <Option value="2" label="Clark Kent" />
+      <Option value="3" label="Diana Prince" />
+    </AutoComplete>
+  `);
+    // Initial value should be displayed
+    yield (0, fixtures_1.expect)(page.getByRole("combobox")).toHaveValue("Bruce Wayne");
+    // Try to click to open dropdown
+    const driver = yield createAutoCompleteDriver();
+    yield driver.click();
+    // Selection should not change
+    yield (0, fixtures_1.expect)(page.getByRole("listbox")).not.toBeVisible();
+}));
+(0, fixtures_1.test)("disabled state prevents interaction", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createAutoCompleteDriver, }) {
+    yield initTestBed(`
+    <AutoComplete enabled="false">
+      <Option value="1" label="Bruce Wayne" />
+      <Option value="2" label="Clark Kent" />
+      <Option value="3" label="Diana Prince" />
+    </AutoComplete>
+  `);
+    const driver = yield createAutoCompleteDriver();
+    // Try to click to open dropdown
+    yield driver.click({ force: true });
+    // Try to type in the input
+    yield page.keyboard.type("Joker");
+    // Dropdown should not open
+    yield (0, fixtures_1.expect)(page.getByRole("listbox")).not.toBeVisible();
+    // Input should not change
+    yield (0, fixtures_1.expect)(page.getByRole("combobox")).toHaveValue("");
+}));
+// =============================================================================
+// API AND EVENT TESTS
+// =============================================================================
+(0, fixtures_1.test)("didChange event fires when option is selected", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createAutoCompleteDriver, }) {
+    yield initTestBed(`
+    <App var.selectedValue="">
+      <AutoComplete id="autoComplete" onDidChange="(val) => selectedValue = val">
+        <Option value="1" label="Bruce Wayne" />
+        <Option value="2" label="Clark Kent" />
+        <Option value="3" label="Diana Prince" />
+      </AutoComplete>
+      <Text testId="text">{selectedValue}</Text>
+    </App>
+  `);
+    const driver = yield createAutoCompleteDriver("autoComplete");
+    yield driver.click();
+    yield driver.selectLabel("Diana Prince");
+    yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("3");
+}));
+(0, fixtures_1.test)("gotFocus and lostFocus events work correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createAutoCompleteDriver, }) {
+    yield initTestBed(`
+    <App var.isFocused="false">
+      <Text testId="focusText">{isFocused === true ? 'AutoComplete focused' : 'AutoComplete lost focus'}</Text>
+      <AutoComplete
+        id="autoComplete"
+        onGotFocus="isFocused = true"
+        onLostFocus="isFocused = false"
+      >
+        <Option value="1" label="Bruce Wayne" />
+      </AutoComplete>
+    </App>
+  `);
+    // Initial state
+    yield (0, fixtures_1.expect)(page.getByTestId("focusText")).toHaveText("AutoComplete lost focus");
+    // Focus the autocomplete
+    const driver = yield createAutoCompleteDriver("autoComplete");
+    yield driver.click();
+    yield (0, fixtures_1.expect)(page.getByTestId("focusText")).toHaveText("AutoComplete focused");
+    // Blur the autocomplete
+    yield page.keyboard.press("Tab");
+    yield (0, fixtures_1.expect)(page.getByTestId("focusText")).toHaveText("AutoComplete lost focus");
+}));
+(0, fixtures_1.test)("setValue API works correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    yield initTestBed(`
+    <App>
+      <AutoComplete id="autoComplete">
+        <Option value="1" label="Bruce Wayne" />
+        <Option value="2" label="Clark Kent" />
+        <Option value="3" label="Diana Prince" />
+      </AutoComplete>
+      <Button
+        testId="setButton"
+        label="Set Value"
+        onClick="autoComplete.setValue('2')" />
+      <Text testId="text">Selected value: {autoComplete.value}</Text>
+    </App>
+  `);
+    // Initially no selection
+    yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("Selected value: ");
+    // Set the value using the API
+    yield page.getByTestId("setButton").click();
+    yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("Selected value: 2");
+    yield (0, fixtures_1.expect)(page.getByRole("combobox")).toHaveValue("Clark Kent");
+}));
+(0, fixtures_1.test)("focus API brings focus to the component", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    yield initTestBed(`
+    <App var.isFocused="false">
+      <Text testId="focusText">{isFocused === true ? 'AutoComplete focused' : 'AutoComplete lost focus'}</Text>
+ 
+      <AutoComplete id="autoComplete">
+        <Option value="1" label="Bruce Wayne" />
+      </AutoComplete>
+      <Button
+        testId="focusButton"
+        label="Focus AutoComplete"
+        onClick="autoComplete.focus()" />
+    </App>
+  `);
+    // Initial state
+    yield (0, fixtures_1.expect)(page.getByTestId("focusText")).toHaveText("AutoComplete lost focus");
+    // Focus the autocomplete using the API
+    yield page.getByTestId("focusButton").click();
+    // Check if the autocomplete is focused
+    yield (0, fixtures_1.expect)(page.getByTestId("focusText")).toHaveText("AutoComplete lost focus");
+    const isFocused = yield page
+        .getByRole("combobox")
+        .evaluate((el) => document.activeElement === el);
+    (0, fixtures_1.expect)(isFocused).toBeTruthy();
+}));
+(0, fixtures_1.test)("autoFocus brings focus to the component on load", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    yield initTestBed(`
+    <App var.isFocused="false">
+      <Text testId="focusText">{isFocused === true ? 'AutoComplete focused' : 'AutoComplete lost focus'}</Text>
+      <AutoComplete autoFocus="true" onGotFocus="isFocused = true">
+        <Option value="1" label="Bruce Wayne" />
+      </AutoComplete>
+    </App>
+  `);
+    yield (0, fixtures_1.expect)(page.getByTestId("focusText")).toHaveText("AutoComplete focused");
+}));
+(0, fixtures_1.test)("creates new option when typing non-existing value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createAutoCompleteDriver, }) {
+    const { testStateDriver } = yield initTestBed(`
+    <Fragment>
+      <AutoComplete id="autoComplete" creatable="true" onItemCreated="item => testState = item">
+        <Option value="1" label="Bruce Wayne" />
+        <Option value="2" label="Clark Kent" />
+      </AutoComplete>
+    </Fragment>
+  `);
+    const driver = yield createAutoCompleteDriver("autoComplete");
+    yield driver.click();
+    // Type a new option
+    yield page.keyboard.type("Peter Parker");
+    yield page.keyboard.press("Enter");
+    (0, fixtures_1.expect)(yield testStateDriver.testState()).toBe("Peter Parker");
+}));
+// =============================================================================
+// ACCESSIBILITY TESTS
+// =============================================================================
+(0, fixtures_1.test)("has appropriate ARIA attributes", // SKIP_REASON.XMLUI_BUG(
+//   "There's a weird issue where the aria-expanded attribute is not set correctly on the input but it is on the wrapping div.",
+// ),
+(_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    // TODO: review these Copilot-created tests
+    yield initTestBed(`
+    <AutoComplete label="Select a hero" placeholder="Search heroes">
+      <Option value="1" label="Bruce Wayne" />
+      <Option value="2" label="Clark Kent" />
+      <Option value="3" label="Diana Prince" />
+    </AutoComplete>
+  `);
+    // Get the combobox element
+    const listWrapper = page.locator('[data-part-id="listWrapper"]').first();
+    const combobox = page.getByRole("combobox");
+    // Check initial ARIA attributes
+    yield (0, fixtures_1.expect)(combobox).toHaveAttribute("aria-autocomplete", "list");
+    yield (0, fixtures_1.expect)(listWrapper).toHaveAttribute("aria-expanded", "false");
+    // Open the dropdown
+    yield combobox.focus();
+    yield page.keyboard.press("Enter");
+    // Check expanded state
+    yield (0, fixtures_1.expect)(listWrapper).toHaveAttribute("aria-expanded", "true");
+}));
+(0, fixtures_1.test)("supports keyboard navigation with arrow keys", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    yield initTestBed(`
+    <AutoComplete id="autoComplete">
+      <Option value="1" label="Bruce Wayne" />
+      <Option value="2" label="Clark Kent" />
+      <Option value="3" label="Diana Prince" />
+    </AutoComplete>
+  `);
+    // Focus the autocomplete
+    yield page.getByRole("combobox").focus();
+    // Open dropdown with arrow down
+    yield page.keyboard.press("ArrowDown", { delay: 100 });
+    yield (0, fixtures_1.expect)(page.getByRole("listbox")).toBeVisible();
+    // Navigate through options
+    yield page.keyboard.press("ArrowDown", { delay: 100 }); // First option
+    yield page.keyboard.press("ArrowDown", { delay: 100 }); // Second option
+    yield page.keyboard.press("ArrowDown", { delay: 100 }); // Third option
+    yield page.keyboard.press("ArrowUp", { delay: 100 }); // Back to second option
+    // Select with Enter
+    yield page.keyboard.press("Enter", { delay: 100 });
+    // Verify selection
+    yield (0, fixtures_1.expect)(page.getByRole("combobox")).toHaveValue("Clark Kent");
+}));