xmlui 0.10.13 → 0.10.14

package/dist/scripts/src/testing/ComponentDrivers.js

@@ -0,0 +1,1355 @@
+"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 });
+exports.SpinnerDriver = exports.LabelDriver = exports.CheckboxDriver = exports.CodeBlockDriver = exports.HtmlTagDriver = exports.FormItemDriver = exports.OptionDriver = exports.NoResultDriver = exports.BadgeDriver = exports.AppFooterDriver = exports.AppHeaderDriver = exports.AccordionDriver = exports.CardDriver = exports.NavPanelDriver = exports.NavGroupDriver = exports.NavLinkDriver = exports.LinkDriver = exports.VStackDriver = exports.HStackDriver = exports.StackDriver = exports.IconDriver = exports.HeadingDriver = exports.TextDriver = exports.ListDriver = exports.ProgressBarDriver = exports.TextAreaDriver = exports.TextBoxDriver = exports.NumberBoxDriver = exports.RadioGroupDriver = exports.SelectDriver = exports.AutoCompleteDriver = exports.DatePickerDriver = exports.RangeDriver = exports.SliderDriver = exports.ItemsDriver = exports.MarkdownDriver = exports.ValidationDisplayDriver = exports.ValidationSummaryDriver = exports.FormDriver = exports.BackdropDriver = exports.FileUploadDropZoneDriver = exports.FileInputDriver = exports.ExpandableItemDriver = exports.SplitterDriver = exports.AvatarDriver = exports.ContentSeparatorDriver = exports.ButtonDriver = exports.TestStateDriver = exports.InputComponentDriver = exports.ComponentDriver = void 0;
+exports.DropdownMenuDriver = void 0;
+const component_test_helpers_1 = require("./component-test-helpers");
+class ComponentDriver {
+    constructor({ locator, page }) {
+        // NOTE: methods must be created using the arrow function notation.
+        // Otherwise, the "this" will not be correctly bound to the class instance when destructuring.
+        this.click = (options) => __awaiter(this, void 0, void 0, function* () {
+            yield this.locator.click(options);
+        });
+        this.dblclick = (options) => __awaiter(this, void 0, void 0, function* () {
+            yield this.locator.dblclick(options);
+        });
+        this.focus = (options) => __awaiter(this, void 0, void 0, function* () {
+            yield this.locator.focus(options);
+        });
+        this.blur = (options) => __awaiter(this, void 0, void 0, function* () {
+            yield this.locator.blur(options);
+        });
+        this.hover = (options) => __awaiter(this, void 0, void 0, function* () {
+            yield this.locator.hover(options);
+        });
+        this.locator = locator;
+        this.page = page;
+    }
+    get component() {
+        return this.locator;
+    }
+    getByPartName(part) {
+        return this.component.locator(`[data-part-id="${part}"]`).first();
+    }
+    /**
+     * Gets the html tag name of the final rendered component
+     */
+    getComponentTagName() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.component.evaluate((el) => el.tagName.toLowerCase());
+        });
+    }
+}
+exports.ComponentDriver = ComponentDriver;
+class InputComponentDriver extends ComponentDriver {
+    get field() {
+        return this.getByPartName("input");
+    }
+    get label() {
+        return this.getByPartName("label");
+    }
+    get placeholder() {
+        return this.field.getAttribute("placeholder");
+    }
+    get requiredIndicator() {
+        return this.component.getByText("*");
+    }
+}
+exports.InputComponentDriver = InputComponentDriver;
+class TestStateDriver {
+    constructor(testStateLocator) {
+        this.testStateLocator = testStateLocator;
+    }
+    /** returns an async function that can query the test state */
+    get testState() {
+        return () => __awaiter(this, void 0, void 0, function* () {
+            const text = yield this.testStateLocator.textContent();
+            const testState = text === "undefined" ? undefined : JSON.parse(text);
+            return testState;
+        });
+    }
+}
+exports.TestStateDriver = TestStateDriver;
+// --- Button
+class ButtonDriver extends ComponentDriver {
+    // Ensure we either get rtl or ltr strings
+    /* async getWritingDirection() {
+      // https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir
+      const attribute = await this.locator.getAttribute("dir");
+      if (attribute && attribute !== "auto") return attribute as "rtl" | "ltr";
+      const style = await this.locator.evaluate(
+        (element) => window.getComputedStyle(element).direction,
+      );
+      // Default is ltr: https://developer.mozilla.org/en-US/docs/Web/CSS/direction#values
+      return style === "rtl" ? "rtl" : "ltr";
+    } */
+    // Unused as of yet
+    /* async getTextNodes() {
+      return await this.locator.evaluate((element) =>
+        [...element.childNodes]
+          .filter((e) => e.nodeType === Node.TEXT_NODE && e.textContent.trim())
+          .map((e) => e.textContent.trim()),
+      );
+    }
+   */
+    getFirstNonTextNode() {
+        return this.locator.locator("> *").first();
+    }
+    // NOTE: Accounts for icons being passed as children as well
+    getIcons() {
+        return this.locator.locator("> svg").or(this.locator.locator("> img"));
+    }
+}
+exports.ButtonDriver = ButtonDriver;
+// --- ContentSeparator
+class ContentSeparatorDriver extends ComponentDriver {
+    get separator() {
+        return this.component;
+    }
+    getOrientation() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const classList = yield this.separator.evaluate((el) => el.className);
+            if (classList.includes("horizontal"))
+                return "horizontal";
+            if (classList.includes("vertical"))
+                return "vertical";
+            return "unknown";
+        });
+    }
+    getComputedHeight() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this.separator.evaluate((el) => {
+                return window.getComputedStyle(el).height;
+            });
+        });
+    }
+    getComputedWidth() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this.separator.evaluate((el) => {
+                return window.getComputedStyle(el).width;
+            });
+        });
+    }
+    getBackgroundColor() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this.separator.evaluate((el) => {
+                return window.getComputedStyle(el).backgroundColor;
+            });
+        });
+    }
+}
+exports.ContentSeparatorDriver = ContentSeparatorDriver;
+// --- Avatar
+class AvatarDriver extends ComponentDriver {
+}
+exports.AvatarDriver = AvatarDriver;
+// --- Splitter
+class SplitterDriver extends ComponentDriver {
+    /**
+     * Gets the resizer element (non-floating)
+     */
+    getResizer() {
+        return __awaiter(this, void 0, void 0, function* () {
+            // Look for the non-floating resizer element
+            const allResizerCandidates = this.locator.locator('[class*="resizer"]');
+            const resizerCount = yield allResizerCandidates.count();
+            for (let i = 0; i < resizerCount; i++) {
+                const candidate = allResizerCandidates.nth(i);
+                const className = yield candidate.getAttribute("class");
+                // Look for resizer that doesn't contain "floating" in its class
+                if (className && className.includes("resizer") && !className.includes("floating")) {
+                    return candidate;
+                }
+            }
+            // Fallback: return first resizer element
+            return allResizerCandidates.first();
+        });
+    }
+    /**
+     * Gets the floating resizer element
+     */
+    getFloatingResizer() {
+        return __awaiter(this, void 0, void 0, function* () {
+            // Look for the floating resizer element
+            const allResizerCandidates = this.locator.locator('[class*="resizer"]');
+            const resizerCount = yield allResizerCandidates.count();
+            for (let i = 0; i < resizerCount; i++) {
+                const candidate = allResizerCandidates.nth(i);
+                const className = yield candidate.getAttribute("class");
+                // Look for resizer that contains "floating" in its class
+                if (className && className.includes("floating")) {
+                    return candidate;
+                }
+            }
+            // If no floating resizer found, return null locator
+            return this.locator.locator('[class*="floating"][class*="resizer"]').first();
+        });
+    }
+    /**
+     * Hovers near the resizer area to trigger floating resizer visibility
+     */
+    hoverNearResizer() {
+        return __awaiter(this, void 0, void 0, function* () {
+            // Get the center of the splitter and hover there
+            const bounds = yield this.locator.boundingBox();
+            if (bounds) {
+                yield this.page.mouse.move(bounds.x + bounds.width / 2, bounds.y + bounds.height / 2);
+                // Wait a bit for the hover effect to take place
+                yield this.page.waitForTimeout(200);
+            }
+        });
+    }
+    /**
+     * Drags the resizer by the specified offset
+     * @param deltaX - Horizontal offset in pixels
+     * @param deltaY - Vertical offset in pixels
+     */
+    dragResizer(deltaX, deltaY) {
+        return __awaiter(this, void 0, void 0, function* () {
+            // Try to get both types of resizers
+            const resizer = yield this.getResizer();
+            const floatingResizer = yield this.getFloatingResizer();
+            // Determine which resizer to use based on visibility
+            let targetResizer = resizer;
+            try {
+                const isResizerVisible = yield resizer.isVisible();
+                const isFloatingResizerVisible = yield floatingResizer.isVisible();
+                if (!isResizerVisible && isFloatingResizerVisible) {
+                    targetResizer = floatingResizer;
+                }
+                else if (!isResizerVisible) {
+                    // If neither is visible, try to hover to make floating resizer visible
+                    yield this.hoverNearResizer();
+                    targetResizer = floatingResizer;
+                }
+            }
+            catch (error) {
+                // If there's any error checking visibility, use the regular resizer
+                targetResizer = resizer;
+            }
+            // Get the resizer bounds
+            const resizerBounds = yield targetResizer.boundingBox();
+            if (!resizerBounds) {
+                throw new Error("Could not get resizer bounds for drag operation");
+            }
+            const startX = resizerBounds.x + resizerBounds.width / 2;
+            const startY = resizerBounds.y + resizerBounds.height / 2;
+            const endX = startX + deltaX;
+            const endY = startY + deltaY;
+            // Perform the drag operation
+            yield this.page.mouse.move(startX, startY);
+            yield this.page.mouse.down();
+            yield this.page.mouse.move(endX, endY, { steps: 5 });
+            yield this.page.mouse.up();
+            // Wait a bit for the component to update
+            yield this.page.waitForTimeout(100);
+        });
+    }
+    /**
+     * Gets the primary panel element
+     */
+    getPrimaryPanel() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.locator.locator('[class*="primaryPanel"]').first();
+        });
+    }
+    /**
+     * Gets the secondary panel element
+     */
+    getSecondaryPanel() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.locator.locator('[class*="secondaryPanel"]').first();
+        });
+    }
+}
+exports.SplitterDriver = SplitterDriver;
+// --- ExpandableItem
+class ExpandableItemDriver extends ComponentDriver {
+    getSummary() {
+        return this.component.locator('[class*="_summary_"]');
+    }
+    getSummaryContent() {
+        return this.component.locator('[class*="_summaryContent_"]');
+    }
+    getContent() {
+        return this.component.locator('[class*="_content_"]');
+    }
+    getIcon() {
+        return this.component.locator('[class*="_icon_"] svg');
+    }
+    getSwitch() {
+        // Get the actual switch input element, not the wrapper
+        return this.component.getByRole("switch");
+    }
+    isExpanded() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this.component.locator('[class*="_content_"]').isVisible();
+        });
+    }
+    isDisabled() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this.component.evaluate((el) => el.className.includes("disabled"));
+        });
+    }
+    expand() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!(yield this.isExpanded())) {
+                yield this.getSummary().click();
+            }
+        });
+    }
+    collapse() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (yield this.isExpanded()) {
+                yield this.getSummary().click();
+            }
+        });
+    }
+    toggle() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.getSummary().click();
+        });
+    }
+}
+exports.ExpandableItemDriver = ExpandableItemDriver;
+// --- FileInput
+class FileInputDriver extends ComponentDriver {
+    getTextBox() {
+        return this.component.locator("input[readonly]");
+    }
+    getHiddenInput() {
+        return this.component.locator('input[type="file"]');
+    }
+    getBrowseButton() {
+        return this.component.locator('[class*="_button_"]');
+    }
+    getContainer() {
+        return this.component;
+    }
+    isEnabled() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const browseButton = this.getBrowseButton();
+            return !(yield browseButton.isDisabled());
+        });
+    }
+    getSelectedFiles() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const textBox = this.getTextBox();
+            const value = yield textBox.inputValue();
+            return value || "";
+        });
+    }
+    openFileDialog() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.getBrowseButton().click();
+        });
+    }
+    getPlaceholder() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const textBox = this.getTextBox();
+            return (yield textBox.getAttribute("placeholder")) || "";
+        });
+    }
+    focusButton() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.getBrowseButton().focus();
+        });
+    }
+    hasReadOnlyAttribute() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const textBox = this.getTextBox();
+            return (yield textBox.getAttribute("readonly")) !== null;
+        });
+    }
+    getAcceptedFileTypes() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const hiddenInput = this.getHiddenInput();
+            return (yield hiddenInput.getAttribute("accept")) || "";
+        });
+    }
+    isMultiple() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const hiddenInput = this.getHiddenInput();
+            return (yield hiddenInput.getAttribute("multiple")) !== null;
+        });
+    }
+    isDirectory() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const hiddenInput = this.getHiddenInput();
+            return (yield hiddenInput.getAttribute("webkitdirectory")) !== null;
+        });
+    }
+}
+exports.FileInputDriver = FileInputDriver;
+// --- FileUploadDropZone
+class FileUploadDropZoneDriver extends ComponentDriver {
+    getWrapper() {
+        return this.component.locator('[class*="_wrapper_"]');
+    }
+    getHiddenInput() {
+        return this.component.locator('input[type="file"]');
+    }
+    getDropPlaceholder() {
+        return this.component.locator('[class*="_dropPlaceholder_"]');
+    }
+    getDropIcon() {
+        return this.getDropPlaceholder().locator("svg");
+    }
+    isDropPlaceholderVisible() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this.getDropPlaceholder().isVisible();
+        });
+    }
+    isEnabled() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const input = this.getHiddenInput();
+            const isDisabled = yield input.isDisabled();
+            return !isDisabled;
+        });
+    }
+    getDropText() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return (yield this.getDropPlaceholder().textContent()) || "";
+        });
+    }
+    triggerDragEnter() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.component.dispatchEvent("dragenter");
+        });
+    }
+    triggerDragLeave() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.component.dispatchEvent("dragleave");
+        });
+    }
+    triggerDrop() {
+        return __awaiter(this, arguments, void 0, function* (files = ["test.txt"]) {
+            // Simulate file drop event by creating File objects and using setInputFiles
+            const hiddenInput = this.getHiddenInput();
+            // Create temporary files for testing
+            const fileObjects = files.map((name) => {
+                return {
+                    name,
+                    mimeType: "text/plain",
+                    buffer: Buffer.from("test content")
+                };
+            });
+            // Set files on the hidden input
+            yield hiddenInput.setInputFiles(fileObjects);
+            // Trigger the drop event with a proper structure
+            yield this.component.evaluate((element, fileNames) => {
+                // Create a proper drop event
+                const event = new DragEvent("drop", {
+                    bubbles: true,
+                    cancelable: true,
+                    dataTransfer: new DataTransfer()
+                });
+                // Add files to dataTransfer if needed for component logic
+                fileNames.forEach((fileName) => {
+                    var _a;
+                    const file = new File(["test content"], fileName, { type: "text/plain" });
+                    (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.items.add(file);
+                });
+                element.dispatchEvent(event);
+            }, files);
+        });
+    }
+    triggerPaste() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.component.dispatchEvent("paste", {
+                clipboardData: {
+                    files: [{ name: "pasted.txt", type: "text/plain", size: 50 }],
+                    items: [{ kind: "file", getAsFile: () => ({ name: "pasted.txt" }) }],
+                },
+            });
+        });
+    }
+    hasChildren() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const childrenCount = yield this.component
+                .locator('> *:not(input):not([class*="_dropPlaceholder_"])')
+                .count();
+            return childrenCount > 0;
+        });
+    }
+}
+exports.FileUploadDropZoneDriver = FileUploadDropZoneDriver;
+class BackdropDriver extends ComponentDriver {
+    getBackdrop() {
+        return this.component.locator("> *").first();
+    }
+    getOverlay() {
+        return this.component.locator("> *").nth(1);
+    }
+    getDefaultBackgroundColor() {
+        return "rgb(0, 0, 0)"; // Default backdrop color
+    }
+    getDefaultOpacity() {
+        return "0.1"; // Default backdrop opacity
+    }
+}
+exports.BackdropDriver = BackdropDriver;
+class FormDriver extends ComponentDriver {
+    mockExternalApi(url, apiOptions) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { status = 200, headers = {}, body = {} } = apiOptions;
+            yield this.page.route(url, (route) => route.fulfill({ status, headers, body: JSON.stringify(body) }));
+        });
+    }
+    get submitButton() {
+        return this.getByPartName("submitButton");
+    }
+    get cancelButton() {
+        return this.getByPartName("cancelButton");
+    }
+    hasSubmitButton() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return (yield this.submitButton.count()) > 0;
+        });
+    }
+    submitForm() {
+        return __awaiter(this, arguments, void 0, function* (trigger = "click") {
+            if (trigger === "keypress") {
+                if ((yield this.hasSubmitButton()) && (yield this.submitButton.isEnabled())) {
+                    yield this.submitButton.focus();
+                }
+                yield this.locator.locator("input").waitFor();
+                const firstInputChild = this.locator.locator("input");
+                if ((yield firstInputChild.count()) > 0) {
+                    yield firstInputChild.first().focus();
+                }
+                yield this.page.keyboard.press("Enter");
+            }
+            else if (trigger === "click") {
+                yield this.submitButton.click();
+            }
+        });
+    }
+    getSubmitRequest() {
+        return __awaiter(this, arguments, void 0, function* (endpoint = "/entities", requestMethod = "POST", trigger = "click", timeout = 5000) {
+            const requestPromise = this.page.waitForRequest((request) => request.url().includes(endpoint) &&
+                request.method().toLowerCase() === requestMethod.toLowerCase(), { timeout });
+            yield this.submitForm(trigger);
+            return requestPromise;
+        });
+    }
+    getSubmitResponse() {
+        return __awaiter(this, arguments, void 0, function* (endpoint = "/entities", responseStatus = 200, timeout = 5000) {
+            const responsePromise = this.page.waitForResponse((response) => response.url().includes(endpoint) && response.status() === responseStatus, { timeout });
+            return responsePromise;
+        });
+    }
+    /**
+     * Gets the validation summary component inside the Form.
+     * Uses the 'data-validation-summary' attribute to find the component
+     */
+    getValidationSummary() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.component.locator("[data-validation-summary='true']");
+        });
+    }
+    /**
+     * Gets the validation display components inside the Form.
+     * Uses the 'data-validation-display-severity' attribute to find the components.
+     * The attribute contains the severity of the validation.
+     */
+    getValidationDisplays() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.component
+                .locator("[data-validation-summary='true']")
+                .locator("[data-validation-display-severity]");
+        });
+    }
+    getValidationDisplaysBySeverity(severity) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.component
+                .locator("[data-validation-summary='true']")
+                .locator(`[data-validation-display-severity="${severity}"]`);
+        });
+    }
+}
+exports.FormDriver = FormDriver;
+// --- ValidationSummary
+class ValidationSummaryDriver extends ComponentDriver {
+    /**
+     * Gets the validation display components inside the Form.
+     * Uses the 'data-validation-display-severity' attribute to find the components.
+     * The attribute contains the severity of the validation.
+     */
+    getValidationDisplays() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.component
+                .locator("[data-validation-summary='true']")
+                .locator("[data-validation-display-severity]");
+        });
+    }
+}
+exports.ValidationSummaryDriver = ValidationSummaryDriver;
+// --- ValidationDisplay
+class ValidationDisplayDriver extends ComponentDriver {
+    getSeverity() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.component.getAttribute("data-validation-display-severity");
+        });
+    }
+    getText() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.component.locator("li").textContent();
+        });
+    }
+}
+exports.ValidationDisplayDriver = ValidationDisplayDriver;
+// --- Markdown
+class MarkdownDriver extends ComponentDriver {
+    hasHtmlElement(elements) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const contents = yield this.component.innerHTML();
+            elements = typeof elements === "string" ? [elements] : elements;
+            return elements.map((e) => `<${e}`).reduce((acc, curr) => acc && contents.includes(curr), true);
+        });
+    }
+}
+exports.MarkdownDriver = MarkdownDriver;
+// --- Items
+class ItemsDriver extends ComponentDriver {
+}
+exports.ItemsDriver = ItemsDriver;
+// --- Slider
+class SliderDriver extends ComponentDriver {
+}
+exports.SliderDriver = SliderDriver;
+// --- Range
+class RangeDriver extends ComponentDriver {
+}
+exports.RangeDriver = RangeDriver;
+// --- DatePicker
+class DatePickerDriver extends ComponentDriver {
+    toggleDropdownVisibility() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.component.click();
+        });
+    }
+    pickADay(value) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.component
+                .getByRole("gridcell", { name: value })
+                .or(this.page.getByRole("gridcell", { name: value }))
+                .first()
+                .click({ force: true });
+        });
+    }
+}
+exports.DatePickerDriver = DatePickerDriver;
+// --- AutoComplete
+class AutoCompleteDriver extends ComponentDriver {
+    toggleOptionsVisibility() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.component.click();
+        });
+    }
+    selectLabel(value) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.component
+                .getByRole("option", { name: value })
+                .or(this.page.getByRole("option", { name: value }))
+                .first()
+                .click({ force: true });
+        });
+    }
+    searchFor(value) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.page.getByRole("combobox").fill(value);
+        });
+    }
+    chooseIndex(index) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.locator
+                .getByRole("option")
+                .nth(index)
+                .or(this.page.getByRole("option").nth(index))
+                .first()
+                .click();
+        });
+    }
+}
+exports.AutoCompleteDriver = AutoCompleteDriver;
+// --- Select
+class SelectDriver extends ComponentDriver {
+    toggleOptionsVisibility() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.component.click();
+        });
+    }
+    selectLabel(value) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.component
+                .getByRole("option", { name: value })
+                .or(this.page.getByRole("option", { name: value }))
+                .first()
+                .click({ force: true });
+        });
+    }
+    selectFirstLabelPostSearh(label) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.searchFor(label);
+            yield this.chooseIndex(0);
+        });
+    }
+    searchFor(value) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.page.getByRole("combobox").fill(value);
+        });
+    }
+    chooseIndex(index) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.locator
+                .getByRole("option")
+                .nth(index)
+                .or(this.page.getByRole("option").nth(index))
+                .first()
+                .click();
+        });
+    }
+    selectMultipleLabels(values) {
+        return __awaiter(this, void 0, void 0, function* () {
+            for (const value of values) {
+                yield this.component
+                    .getByRole("option", { name: value })
+                    .or(this.page.getByRole("option", { name: value }))
+                    .first()
+                    .click();
+            }
+        });
+    }
+}
+exports.SelectDriver = SelectDriver;
+// --- RadioGroup
+class RadioGroupDriver extends ComponentDriver {
+}
+exports.RadioGroupDriver = RadioGroupDriver;
+// --- NumberBox
+class NumberBoxDriver extends ComponentDriver {
+    get field() {
+        return this.component.locator("input");
+    }
+    get label() {
+        return this.component.locator("label");
+    }
+    get placeholder() {
+        return this.field.getAttribute("placeholder");
+    }
+    get spinnerUpButton() {
+        return this.component.locator("button").and(this.component.locator("[data-spinner='up']"));
+    }
+    get spinnerDownButton() {
+        return this.component.locator("button").and(this.component.locator("[data-spinner='down']"));
+    }
+}
+exports.NumberBoxDriver = NumberBoxDriver;
+// --- TextBox
+class TextBoxDriver extends InputComponentDriver {
+}
+exports.TextBoxDriver = TextBoxDriver;
+// --- TextArea
+class TextAreaDriver extends InputComponentDriver {
+}
+exports.TextAreaDriver = TextAreaDriver;
+// --- ProgressBar
+class ProgressBarDriver extends ComponentDriver {
+    get bar() {
+        return this.component.locator("> div");
+    }
+    getProgressRatio() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const style = yield this.bar.getAttribute("style");
+            if (!style)
+                return 0;
+            const widthMatch = style.match(/width:\s*(\d+(?:\.\d+)?)%/);
+            return widthMatch ? parseFloat(widthMatch[1]) / 100 : 0;
+        });
+    }
+}
+exports.ProgressBarDriver = ProgressBarDriver;
+// --- List
+class ListDriver extends ComponentDriver {
+    /**
+     * Gets all list item elements
+     */
+    get items() {
+        return this.component
+            .locator("[data-list-item]")
+            .or(this.component.locator("div").filter({ hasText: /^(?!.*Loading).*/ }));
+    }
+    /**
+     * Gets the loading spinner element
+     */
+    get loadingSpinner() {
+        return this.component.locator('[class*="loadingWrapper"]');
+    }
+    /**
+     * Checks if the loading state is visible
+     */
+    isLoading() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this.loadingSpinner.isVisible().catch(() => false);
+        });
+    }
+    /**
+     * Gets group header elements
+     */
+    get groupHeaders() {
+        return this.component
+            .locator("[data-group-header]")
+            .or(this.component.locator("div").filter({ hasText: /^Category:|^Header:/ }));
+    }
+    /**
+     * Gets group footer elements
+     */
+    get groupFooters() {
+        return this.component
+            .locator("[data-group-footer]")
+            .or(this.component.locator("div").filter({ hasText: /^End of/ }));
+    }
+    /**
+     * Gets the empty state element
+     */
+    get emptyState() {
+        return this.component
+            .locator("[data-empty-state]")
+            .or(this.component.getByText("No items found!"));
+    }
+    /**
+     * Scrolls the list to a specific position
+     */
+    scrollTo(position) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (position === "top") {
+                yield this.component.evaluate((el) => el.scrollTo({ top: 0 }));
+            }
+            else if (position === "bottom") {
+                yield this.component.evaluate((el) => el.scrollTo({ top: el.scrollHeight }));
+            }
+            else {
+                yield this.component.evaluate((el, pos) => el.scrollTo({ top: pos }), position);
+            }
+        });
+    }
+    /**
+     * Gets the number of visible items (for virtualization testing)
+     */
+    getVisibleItemCount() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this.items.count();
+        });
+    }
+    /**
+     * Gets item at specific index
+     */
+    getItemAt(index) {
+        return this.items.nth(index);
+    }
+    /**
+     * Gets item by text content
+     */
+    getItemByText(text) {
+        return this.component.getByText(text);
+    }
+    /**
+     * Checks if list is empty
+     */
+    isEmpty() {
+        return __awaiter(this, void 0, void 0, function* () {
+            // Check for the actual "No data available" text that appears when list is empty
+            const noDataText = yield this.component.textContent();
+            const hasNoDataMessage = (noDataText === null || noDataText === void 0 ? void 0 : noDataText.includes("No data available")) || (noDataText === null || noDataText === void 0 ? void 0 : noDataText.includes("No items found"));
+            // Also check if there are any actual data items
+            const itemCount = yield this.items.count();
+            const hasDataItems = itemCount > 0 && !hasNoDataMessage;
+            return hasNoDataMessage || !hasDataItems;
+        });
+    }
+    /**
+     * Gets all text content from visible items
+     */
+    getVisibleItemTexts() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const items = yield this.items.all();
+            const texts = yield Promise.all(items.map((item) => item.textContent()));
+            return texts.filter((text) => text !== null);
+        });
+    }
+}
+exports.ListDriver = ListDriver;
+// --- Text
+class TextDriver extends ComponentDriver {
+}
+exports.TextDriver = TextDriver;
+// --- Heading
+class HeadingDriver extends ComponentDriver {
+}
+exports.HeadingDriver = HeadingDriver;
+// --- Icon
+class IconDriver extends ComponentDriver {
+    get svgIcon() {
+        return this.component.locator("svg");
+    }
+}
+exports.IconDriver = IconDriver;
+// --- Stack
+class StackDriver extends ComponentDriver {
+}
+exports.StackDriver = StackDriver;
+// --- HStack
+class HStackDriver extends StackDriver {
+}
+exports.HStackDriver = HStackDriver;
+// --- VStack
+class VStackDriver extends StackDriver {
+}
+exports.VStackDriver = VStackDriver;
+// --- Link
+class LinkDriver extends ComponentDriver {
+}
+exports.LinkDriver = LinkDriver;
+// --- NavLink
+class NavLinkDriver extends ComponentDriver {
+}
+exports.NavLinkDriver = NavLinkDriver;
+// --- NavGroup
+class NavGroupDriver extends ComponentDriver {
+    getIcons() {
+        return this.locator.locator("> svg").or(this.locator.locator("> img"));
+    }
+}
+exports.NavGroupDriver = NavGroupDriver;
+// --- NavPanel
+class NavPanelDriver extends ComponentDriver {
+}
+exports.NavPanelDriver = NavPanelDriver;
+// --- Card
+class CardDriver extends ComponentDriver {
+    get avatar() {
+        return this.component.getByRole("img", { name: "avatar" });
+    }
+}
+exports.CardDriver = CardDriver;
+// --- Accordion
+class AccordionDriver extends ComponentDriver {
+}
+exports.AccordionDriver = AccordionDriver;
+// --- AppHeader
+class AppHeaderDriver extends ComponentDriver {
+}
+exports.AppHeaderDriver = AppHeaderDriver;
+// --- AppFooter
+class AppFooterDriver extends ComponentDriver {
+}
+exports.AppFooterDriver = AppFooterDriver;
+// --- Badge
+class BadgeDriver extends ComponentDriver {
+}
+exports.BadgeDriver = BadgeDriver;
+// --- NoResult
+class NoResultDriver extends ComponentDriver {
+}
+exports.NoResultDriver = NoResultDriver;
+// --- Option
+class OptionDriver extends ComponentDriver {
+}
+exports.OptionDriver = OptionDriver;
+// --- FormItem
+// NOTE (NEW): FormItem will be removed, delete this Driver
+// NOTE: Do not delete these comments.
+// This is an untested proposal to shorten code length.
+// Now, you have to provide the .input element for a specific control driver:
+//
+// element = FormItemDriver().input -> TextBoxDriver(element)
+//
+// This can be shortened to FormItemDriver().input.as("TextBoxDriver") if we extend
+// the locator object only for the return type of the "input" getter to support the "as" method
+//
+/* type DriverMap = {
+  TextBoxDriver: TextBoxDriver;
+  NumberBoxDriver: NumberBoxDriver;
+};
+
+const driverConstructors: {
+  [K in keyof DriverMap]: new (obj: ComponentDriverParams) => DriverMap[K]
+} = {
+  TextBoxDriver,
+  NumberBoxDriver
+};
+
+export interface ExtendedLocator extends Locator {
+  as?: <K extends keyof DriverMap>(type: K) => DriverMap[K];
+}
+
+export const extendLocator = (
+  locator: Locator,
+): ExtendedLocator => ({
+  ...locator,
+  locator: (selector, options) =>
+    extendLocator(locator.locator(selector, options)),
+  as: (type) => { return new driverConstructors[type]({ locator, page: locator.page() }); }
+}); */
+class FormItemDriver extends ComponentDriver {
+    get input() {
+        return this.component.locator(">input").or(this.component).first();
+    }
+    get textBox() {
+        return this.input.getByRole("textbox");
+    }
+    get checkbox() {
+        return this.input.getByRole("checkbox");
+    }
+    get label() {
+        return this.component.locator("label");
+    }
+    get validationStatusTag() {
+        return "data-validation-status";
+    }
+    getValidationStatusIndicator() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.component.locator(`[${this.validationStatusTag}]`);
+        });
+    }
+}
+exports.FormItemDriver = FormItemDriver;
+// --- htmlTags
+class HtmlTagDriver extends ComponentDriver {
+}
+exports.HtmlTagDriver = HtmlTagDriver;
+// --- CodeBlock
+class CodeBlockDriver extends ComponentDriver {
+    getHeader() {
+        return this.component.locator('[class*="codeBlockHeader"]');
+    }
+    getContent() {
+        return this.component.locator('[class*="codeBlockContent"]');
+    }
+    getCopyButton() {
+        return this.component.locator('[class*="codeBlockCopyButton"] button');
+    }
+    getFilename() {
+        return this.getHeader().locator("span");
+    }
+    isCopyButtonVisible() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this.getCopyButton().isVisible();
+        });
+    }
+    hasHeader() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this.getHeader().isVisible();
+        });
+    }
+    getCodeText() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this.getContent().textContent();
+        });
+    }
+    clickCopyButton() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.getCopyButton().click();
+        });
+    }
+    hoverContent() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.getContent().hover();
+        });
+    }
+}
+exports.CodeBlockDriver = CodeBlockDriver;
+// --- Checkbox
+class CheckboxDriver extends InputComponentDriver {
+    getIndicatorColor() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const specifier = this.component.getByRole("checkbox").or(this.component).last();
+            const { boxShadow } = yield (0, component_test_helpers_1.getPseudoStyles)(specifier, "::before", "box-shadow");
+            const colorMatch = boxShadow.match(/(rgba?\([^)]+\)|hsla?\([^)]+\)|#[a-fA-F0-9]{3,8})/);
+            return colorMatch ? colorMatch[1] : null;
+        });
+    }
+}
+exports.CheckboxDriver = CheckboxDriver;
+// --- Label
+class LabelDriver extends ComponentDriver {
+}
+exports.LabelDriver = LabelDriver;
+// --- Spinner
+class SpinnerDriver extends ComponentDriver {
+    /**
+     * Gets the main spinner element (the one with the ring animation)
+     */
+    get spinnerElement() {
+        // Filter for spinner elements and use the first one by default
+        return this.page
+            .locator('[data-testid="test-id-component"]')
+            .filter({ has: this.page.locator("div") })
+            .first();
+    }
+    /**
+     * Gets a specific spinner element by index (for multiple spinners)
+     */
+    getSpinnerByIndex(index) {
+        return this.page
+            .locator('[data-testid="test-id-component"]')
+            .filter({ has: this.page.locator("div") })
+            .nth(index);
+    }
+    /**
+     * Gets the fullscreen wrapper element (only exists when fullScreen=true)
+     */
+    get fullScreenWrapper() {
+        return this.page.locator('div[class*="_fullScreenSpinnerWrapper_"]');
+    }
+    /**
+     * Checks if the spinner is in fullscreen mode
+     */
+    isFullScreen() {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                const wrapper = this.fullScreenWrapper;
+                return yield wrapper.isVisible();
+            }
+            catch (_a) {
+                return false;
+            }
+        });
+    }
+    /**
+     * Gets the computed style of the spinner element
+     */
+    getSpinnerStyle() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const element = this.spinnerElement;
+            return yield element.evaluate((el) => {
+                const styles = window.getComputedStyle(el);
+                return {
+                    display: styles.display,
+                    position: styles.position,
+                    width: styles.width,
+                    height: styles.height,
+                    animationDuration: styles.animationDuration,
+                    className: el.className,
+                };
+            });
+        });
+    }
+    /**
+     * Gets the animation duration from the child elements (where the actual animation occurs)
+     */
+    getAnimationDuration() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const element = this.spinnerElement;
+            return yield element.evaluate((el) => {
+                // Check the first child div for animation duration
+                const firstChild = el.querySelector("div");
+                if (firstChild) {
+                    const styles = window.getComputedStyle(firstChild);
+                    return styles.animationDuration;
+                }
+                return "0s";
+            });
+        });
+    }
+    /**
+     * Waits for the spinner to appear
+     */
+    waitForSpinner() {
+        return __awaiter(this, arguments, void 0, function* (timeout = 5000) {
+            yield this.spinnerElement.waitFor({ state: "visible", timeout });
+        });
+    }
+    /**
+     * Waits for the spinner to disappear
+     */
+    waitForSpinnerToDisappear() {
+        return __awaiter(this, arguments, void 0, function* (timeout = 5000) {
+            yield this.spinnerElement.waitFor({ state: "hidden", timeout });
+        });
+    }
+    /**
+     * Checks if the spinner is visible
+     */
+    isVisible() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this.spinnerElement.isVisible();
+        });
+    }
+    /**
+     * Gets the CSS class name to verify CSS modules are working
+     */
+    getClassName() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return (yield this.spinnerElement.getAttribute("class")) || "";
+        });
+    }
+    /**
+     * Gets the number of child div elements (should be 4 for the ring animation)
+     */
+    getChildCount() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this.spinnerElement.evaluate((el) => {
+                return el.querySelectorAll("div").length;
+            });
+        });
+    }
+    /**
+     * Gets the total number of spinner components on the page
+     */
+    getSpinnerCount() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this.page.locator('[data-testid="test-id-component"]').count();
+        });
+    }
+    /**
+     * Gets a spinner by specific test ID
+     */
+    getSpinnerByTestId(testId) {
+        return this.page.locator(`[data-testid="${testId}"]`);
+    }
+    /**
+     * Checks if fullscreen mode has the correct wrapper structure
+     */
+    getFullScreenWrapperInfo() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const wrapper = this.fullScreenWrapper;
+            if (!(yield wrapper.isVisible())) {
+                return null;
+            }
+            return yield wrapper.evaluate((el) => {
+                const parent = el.parentElement;
+                const styles = window.getComputedStyle(el);
+                return {
+                    position: styles.position,
+                    inset: styles.inset,
+                    parentClassName: (parent === null || parent === void 0 ? void 0 : parent.className) || "",
+                    hasSpinnerChild: !!el.querySelector('[class*="_lds-ring_"]'),
+                };
+            });
+        });
+    }
+}
+exports.SpinnerDriver = SpinnerDriver;
+// --- DropdownMenu
+class DropdownMenuDriver extends ComponentDriver {
+    /**
+     * Get the trigger button element
+     * For DropdownMenu, we'll look for the button on the page level since Radix UI may render it separately
+     */
+    getTrigger() {
+        return this.page.getByRole("button").first();
+    }
+    /**
+     * Open the dropdown menu
+     */
+    open() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const trigger = this.getTrigger();
+            yield trigger.click();
+        });
+    }
+    /**
+     * Close the dropdown menu by clicking outside
+     */
+    close() {
+        return __awaiter(this, void 0, void 0, function* () {
+            // Try clicking on the trigger first to close, then fall back to clicking outside
+            try {
+                yield this.page.keyboard.press("Escape");
+            }
+            catch (_a) {
+                // If escape doesn't work, try clicking on a safe area
+                yield this.page.click("html");
+            }
+        });
+    }
+    /**
+     * Get all menu items
+     */
+    getMenuItems() {
+        return this.page.getByRole("menuitem");
+    }
+    /**
+     * Get a specific menu item by text
+     */
+    getMenuItem(text) {
+        return this.page.getByRole("menuitem", { name: text });
+    }
+    /**
+     * Click a menu item by text
+     */
+    clickMenuItem(text) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.getMenuItem(text).click();
+        });
+    }
+    /**
+     * Get submenu items
+     */
+    getSubMenuItems(parentText) {
+        // First hover over the parent submenu to open it
+        return this.page.getByText(parentText);
+    }
+    /**
+     * Open a submenu by hovering over it
+     */
+    openSubMenu(submenuText) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.page.getByText(submenuText).hover();
+        });
+    }
+    /**
+     * Get menu separators
+     */
+    getMenuSeparators() {
+        return this.page.locator('[class*="DropdownMenuSeparator"]');
+    }
+    /**
+     * Get the menu content container
+     */
+    getMenuContent() {
+        return this.page.locator('[class*="DropdownMenuContent"]');
+    }
+    /**
+     * Check if the menu is open
+     */
+    isOpen() {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                const content = this.getMenuContent();
+                return yield content.isVisible();
+            }
+            catch (_a) {
+                return false;
+            }
+        });
+    }
+    /**
+     * Wait for menu to open
+     */
+    waitForOpen() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.getMenuContent().waitFor({ state: "visible" });
+        });
+    }
+    /**
+     * Wait for menu to close
+     */
+    waitForClose() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.getMenuContent().waitFor({ state: "hidden" });
+        });
+    }
+}
+exports.DropdownMenuDriver = DropdownMenuDriver;