@atomic-testing/component-driver-mui-v9 0.0.0

package/src/components/ToggleButtonGroupDriver.ts

@@ -0,0 +1,75 @@
+import { byTagName, ComponentDriver, IInputDriver, listHelper, locatorUtil } from '@atomic-testing/core';
+
+import { ToggleButtonDriver } from './ToggleButtonDriver';
+
+const toggleButtonLocator = byTagName('button');
+
+export class ToggleButtonGroupDriver extends ComponentDriver implements IInputDriver<readonly string[]> {
+  protected itemLocator = locatorUtil.append(this.locator, toggleButtonLocator);
+  /**
+   * Get all the selected toggle buttons' values.
+   * @returns
+   */
+  async getValue(): Promise<readonly string[]> {
+    const result: string[] = [];
+    for await (const itemDriver of listHelper.getListItemIterator(this, this.itemLocator, ToggleButtonDriver)) {
+      const isSelected = await itemDriver.isSelected();
+      if (isSelected) {
+        const value = await itemDriver.getValue();
+        if (value != null) {
+          result.push(value);
+        }
+      }
+    }
+    return result;
+  }
+
+  /**
+   * Toggle all the toggle buttons such that only those with value in the given array are selected.
+   * @param value Always true
+   * @returns
+   */
+  async setValue(value: readonly string[]): Promise<boolean> {
+    const valueSet = new Set(value);
+    for await (const itemDriver of listHelper.getListItemIterator(this, this.itemLocator, ToggleButtonDriver)) {
+      const value = await itemDriver.getValue();
+      await itemDriver.setSelected(valueSet.has(value!));
+    }
+    return true;
+  }
+
+  get driverName(): string {
+    return 'MuiV9ToggleButtonGroupDriver';
+  }
+}
+
+/**
+ * A toggle button group driver that only allows a single selection.
+ *
+ * INTENTIONAL @ts-ignore comments below: This class intentionally narrows the return type
+ * from `readonly string[]` to `string | null` for exclusive selection mode. TypeScript
+ * correctly flags this as a type incompatibility because the subclass changes the interface
+ * contract. However, this design is intentional as exclusive and multi-select toggle groups
+ * have fundamentally different value semantics, and we want the type system to reflect
+ * `string | null` for exclusive mode rather than forcing consumers to work with arrays.
+ */
+export class ExclusiveToggleButtonGroupDriver extends ToggleButtonGroupDriver implements IInputDriver<string | null> {
+  // @ts-ignore - See class comment for explanation of intentional type narrowing
+  async getValue(): Promise<string | null> {
+    const values = await super.getValue();
+    return values?.[0] ?? null;
+  }
+
+  // @ts-ignore - See class comment for explanation of intentional type narrowing
+  async setValue(value: string | null): Promise<boolean> {
+    if (value === null) {
+      return super.setValue([]);
+    } else {
+      return super.setValue([value]);
+    }
+  }
+
+  get driverName(): string {
+    return 'MuiV9ExclusiveToggleButtonGroupDriver';
+  }
+}

package/src/components/TooltipDriver.ts

@@ -0,0 +1,82 @@
+import { byRole, ComponentDriver, Optional, PartLocator } from '@atomic-testing/core';
+
+// MUI renders the tooltip into a portal outside this driver's subtree, so it is
+// addressed from the document root by its `role="tooltip"`.
+const tooltipLocator: PartLocator = byRole('tooltip', 'Root');
+
+const defaultRevealTimeout = 250;
+
+/**
+ * Driver for the Material UI v9 Tooltip component.
+ *
+ * The driver is rooted at the **trigger** element. MUI shows the tooltip on
+ * hover/focus and renders it into a portal (a `role="tooltip"` popper) outside the
+ * trigger's subtree, so the text is read from the document root via
+ * {@link tooltipLocator} after revealing it. The tooltip unmounts when not shown,
+ * so presence of that element doubles as the visible state.
+ *
+ * Note: hover reveal depends on the tooltip's `enterDelay`; with a non-zero delay
+ * the reveal is timer-bound. {@link getTitle} waits for the tooltip to appear.
+ * @see https://mui.com/material-ui/react-tooltip/
+ */
+export class TooltipDriver extends ComponentDriver {
+  /**
+   * Reveal the tooltip by hovering its trigger, waiting until it is shown (or the
+   * timeout elapses, e.g. when the trigger has no tooltip).
+   */
+  async show(timeoutMs: number = defaultRevealTimeout): Promise<void> {
+    await this.interactor.hover(this.locator);
+    await this.interactor.waitUntil({
+      probeFn: () => this.isVisible(),
+      terminateCondition: true,
+      timeoutMs,
+    });
+  }
+
+  /**
+   * Hide the tooltip by moving the pointer off its trigger, waiting until it is gone.
+   */
+  async hide(timeoutMs: number = defaultRevealTimeout): Promise<void> {
+    await this.interactor.mouseLeave(this.locator);
+    await this.interactor.waitUntil({
+      probeFn: () => this.isVisible(),
+      terminateCondition: false,
+      timeoutMs,
+    });
+  }
+
+  /**
+   * Whether a tooltip is currently shown.
+   */
+  async isVisible(): Promise<boolean> {
+    if (!(await this.interactor.exists(tooltipLocator))) {
+      return false;
+    }
+    return this.interactor.isVisible(tooltipLocator);
+  }
+
+  /**
+   * Reveal the tooltip, read its text, then restore the un-hovered state. Returns
+   * `undefined` when the trigger has no tooltip (none appears within the timeout).
+   *
+   * The hover is undone before returning so a subsequent read on a *different*
+   * trigger isn't shadowed by this still-open tooltip: MUI renders all tooltips into
+   * one portal and provides no per-trigger DOM link, and jsdom's synthetic hover does
+   * not fire `mouseout` on the previously-hovered sibling.
+   *
+   * @param timeoutMs How long to wait for the tooltip to appear after hovering.
+   */
+  async getTitle(timeoutMs: number = defaultRevealTimeout): Promise<Optional<string>> {
+    await this.show(timeoutMs);
+    if (!(await this.interactor.exists(tooltipLocator))) {
+      return undefined;
+    }
+    const text = (await this.interactor.getText(tooltipLocator))?.trim();
+    await this.hide(timeoutMs);
+    return text;
+  }
+
+  override get driverName(): string {
+    return 'MuiV9TooltipDriver';
+  }
+}

package/src/errors/MenuItemDisabledError.ts

@@ -0,0 +1,17 @@
+import { ComponentDriver, ErrorBase } from '@atomic-testing/core';
+
+export const MenuItemDisabledErrorId = 'MenuItemDisabledError';
+
+function getErrorMessage(label: string): string {
+  return `The menu item with label: ${label} is disabled`;
+}
+
+export class MenuItemDisabledError extends ErrorBase {
+  constructor(
+    public readonly label: string,
+    public readonly driver: ComponentDriver<any>
+  ) {
+    super(getErrorMessage(label), driver);
+    this.name = MenuItemDisabledErrorId;
+  }
+}

package/src/errors/MenuItemNotFoundError.ts

@@ -0,0 +1,17 @@
+import { ComponentDriver, ErrorBase } from '@atomic-testing/core';
+
+export const MenuItemNotFoundErrorId = 'MenuItemNotFoundError';
+
+function getErrorMessage(label: string): string {
+  return `Cannot find menu item with label: ${label}`;
+}
+
+export class MenuItemNotFoundError extends ErrorBase {
+  constructor(
+    public readonly label: string,
+    public readonly driver: ComponentDriver<any>
+  ) {
+    super(getErrorMessage(label), driver);
+    this.name = MenuItemNotFoundErrorId;
+  }
+}

package/src/index.ts

@@ -0,0 +1,52 @@
+export { AccordionDriver } from './components/AccordionDriver';
+export { AlertDriver } from './components/AlertDriver';
+export { AvatarDriver } from './components/AvatarDriver';
+export { AvatarGroupDriver, defaultAvatarGroupDriverOption } from './components/AvatarGroupDriver';
+export { AutoCompleteDriver, defaultAutoCompleteDriverOption } from './components/AutoCompleteDriver';
+export type {
+  AutoCompleteDriverOption,
+  AutoCompleteDriverSpecificOption,
+  AutoCompleteMatchType,
+} from './components/AutoCompleteDriver';
+export { BadgeDriver } from './components/BadgeDriver';
+export { BottomNavigationActionDriver } from './components/BottomNavigationActionDriver';
+export type { BottomNavigationActionInfo } from './components/BottomNavigationDriver';
+export { BottomNavigationDriver } from './components/BottomNavigationDriver';
+export { ButtonDriver } from './components/ButtonDriver';
+export { CheckboxDriver } from './components/CheckboxDriver';
+export { ChipDriver } from './components/ChipDriver';
+export { DialogDriver } from './components/DialogDriver';
+export type { DrawerAnchor } from './components/DrawerDriver';
+export { drawerParts, DrawerDriver } from './components/DrawerDriver';
+export { FabDriver } from './components/FabDriver';
+export { OverlayDriver } from './components/OverlayDriver';
+export { InputDriver } from './components/InputDriver';
+export { ListDriver } from './components/ListDriver';
+export { ListItemDriver } from './components/ListItemDriver';
+export { MenuDriver } from './components/MenuDriver';
+export { MenuItemDriver } from './components/MenuItemDriver';
+export { PaginationDriver } from './components/PaginationDriver';
+export { ProgressDriver } from './components/ProgressDriver';
+export { RadioDriver } from './components/RadioDriver';
+export { defaultRadioGroupDriverOption, RadioGroupDriver } from './components/RadioGroupDriver';
+export { RatingDriver } from './components/RatingDriver';
+export { SelectDriver } from './components/SelectDriver';
+export { SliderDriver } from './components/SliderDriver';
+export { SnackbarDriver } from './components/SnackbarDriver';
+export { SpeedDialDriver } from './components/SpeedDialDriver';
+export type { StepInfo } from './components/StepperDriver';
+export { StepperDriver } from './components/StepperDriver';
+export { SwitchDriver } from './components/SwitchDriver';
+export { TableCellDriver } from './components/TableCellDriver';
+export type { TableSortDirection } from './components/TableDriver';
+export { defaultTableDriverOption, TableDriver } from './components/TableDriver';
+export { defaultTableRowDriverOption, TableRowDriver } from './components/TableRowDriver';
+export { TablePaginationDriver } from './components/TablePaginationDriver';
+export { TabDriver } from './components/TabDriver';
+export { defaultTabsDriverOption, TabsDriver } from './components/TabsDriver';
+export { TextFieldDriver } from './components/TextFieldDriver';
+export { ToggleButtonDriver } from './components/ToggleButtonDriver';
+export { ExclusiveToggleButtonGroupDriver, ToggleButtonGroupDriver } from './components/ToggleButtonGroupDriver';
+export { TooltipDriver } from './components/TooltipDriver';
+export { MenuItemDisabledError, MenuItemDisabledErrorId } from './errors/MenuItemDisabledError';
+export { MenuItemNotFoundError, MenuItemNotFoundErrorId } from './errors/MenuItemNotFoundError';