@dynatrace/strato-components-testing 1.17.0 → 3.0.1

package/jest/testing-helpers/forms/select.js

@@ -0,0 +1,159 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var select_exports = {};
+__export(select_exports, {
+  SelectTestingHelper: () => SelectTestingHelper,
+  getSelectTestingHelper: () => getSelectTestingHelper
+});
+module.exports = __toCommonJS(select_exports);
+var import_react = require("@testing-library/react");
+var import_user_event = __toESM(require("@testing-library/user-event"));
+class SelectTestingHelper {
+  constructor(dataTestId) {
+    this.dataTestId = dataTestId;
+  }
+  /**
+   * Gets the root element of the select.
+   */
+  get element() {
+    return import_react.screen.getByTestId(this.dataTestId);
+  }
+  /**
+   * Gets the trigger element of the select.
+   */
+  get trigger() {
+    const triggerElement = this.element.querySelector('div[type="button"]');
+    if (triggerElement) {
+      return triggerElement;
+    }
+    throw new Error("Trigger element for the select was not found.");
+  }
+  /**
+   * Gets the text value of the trigger display value of the select.
+   */
+  get displayValue() {
+    const displayValue = this.trigger.textContent;
+    if (displayValue) {
+      return displayValue;
+    }
+    throw new Error("Could not get display value.");
+  }
+  /**
+   * Gets the overlay (content) of the select.
+   */
+  get overlay() {
+    const selectInputAriaControls = (0, import_react.within)(this.trigger).getByRole("combobox", { hidden: true }).getAttribute("aria-controls");
+    const listboxElement = document.querySelector(
+      `[role="listbox"][id="${selectInputAriaControls}"]`
+    );
+    if (listboxElement) {
+      return listboxElement.parentElement;
+    }
+    throw new Error("Could not find the overlay element for the select.");
+  }
+  /**
+   * Gets the text value of the select filter in the overlay.
+   */
+  get filterValue() {
+    const filter = (0, import_react.within)(this.overlay).getByPlaceholderText(
+      "Search"
+    );
+    return filter.value;
+  }
+  /**
+   * Gets the currently selected option(s).
+   */
+  get selectedOptions() {
+    const selectedOptions = (0, import_react.within)(
+      this.element
+    ).getAllByRole("option", { hidden: true });
+    return selectedOptions.map((option) => option.value);
+  }
+  /**
+   * Gets the open state of the select overlay.
+   */
+  get openState() {
+    return (0, import_react.within)(this.trigger).getByRole("combobox", { hidden: true }).getAttribute("aria-expanded") === "true";
+  }
+  /**
+   * Gets the option with the corresponding label.
+   */
+  getOption(label) {
+    const option = (0, import_react.within)(this.overlay).getByRole("option", {
+      name: label
+    });
+    return option;
+  }
+  /**
+   * Selects the option with the corresponding label.
+   */
+  async selectOption(label) {
+    await this.open();
+    const option = (0, import_react.within)(this.overlay).getByRole("option", {
+      name: label
+    });
+    await import_user_event.default.click(option);
+  }
+  /**
+   * Opens the select overlay.
+   */
+  async open() {
+    if (!this.openState) {
+      await import_user_event.default.click(this.trigger);
+    }
+  }
+  /**
+   * Closes the select overlay.
+   */
+  async close() {
+    if (this.openState) {
+      await import_user_event.default.click(this.trigger);
+    }
+  }
+  /**
+   * Types in the filter of the select.
+   */
+  async typeInFilter(text) {
+    await this.open();
+    const user = import_user_event.default.setup();
+    const filter = (0, import_react.within)(this.overlay).getByPlaceholderText("Search");
+    await user.click(filter);
+    await user.keyboard(text);
+  }
+  /**
+   * Clears the filter / search of the select overlay.
+   */
+  async clearFilter() {
+    await this.open();
+    const filter = (0, import_react.within)(this.overlay).getByPlaceholderText("Search");
+    await import_user_event.default.clear(filter);
+  }
+}
+function getSelectTestingHelper(dataTestId) {
+  return new SelectTestingHelper(dataTestId);
+}

package/jest/testing-helpers/forms/text-input.d.ts

@@ -0,0 +1,19 @@
+import { BaseInputHelper } from './base-input.js';
+/**
+ * Helper class for interacting with the text input
+ * @public
+ */
+export declare class TextInputHelper extends BaseInputHelper {
+    /**
+     * Helper that will let you call a specific prefix or suffix button
+     * within the TextInput component.
+     */
+    clickButton(name: string): Promise<void>;
+}
+/**
+ * Helper function that returns the text input element with its testing utilities.
+ * @public
+ */
+export declare function getTextInputHelper(
+/** The accessible test id used to locate the input wrapper. */
+dataTestId: string): TextInputHelper;

package/jest/testing-helpers/forms/text-input.js

@@ -0,0 +1,42 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var text_input_exports = {};
+__export(text_input_exports, {
+  TextInputHelper: () => TextInputHelper,
+  getTextInputHelper: () => getTextInputHelper
+});
+module.exports = __toCommonJS(text_input_exports);
+var import_react = require("@testing-library/react");
+var import_base_input = require("./base-input.js");
+var import_setup_user_event = require("../utils/setup-user-event.js");
+class TextInputHelper extends import_base_input.BaseInputHelper {
+  /**
+   * Helper that will let you call a specific prefix or suffix button
+   * within the TextInput component.
+   */
+  async clickButton(name) {
+    const button = (0, import_react.within)(this.inputWrapper).getByRole("button", {
+      hidden: true,
+      name
+    });
+    await (0, import_setup_user_event.setupUserEvent)().click(button);
+  }
+}
+function getTextInputHelper(dataTestId) {
+  return new TextInputHelper(dataTestId);
+}

package/jest/testing-helpers/tables/datatable.d.ts

@@ -0,0 +1,239 @@
+/** @public */
+export declare class DataTableSubRowsHelper {
+    private readonly rootHelper;
+    constructor(rootHelper: DataTableHelper);
+    private getSubRowButton;
+    private get getToggleAllSubRowsButton();
+    /**
+     * Return the expanded state of the passed subrow id.
+     */
+    getSubRowStateById(rowId: string): Promise<boolean>;
+    /**
+     * Expands the given row identified by the passed rowId if it not yet expanded.
+     */
+    expandRowById(rowId: string): Promise<void>;
+    /**
+     * Collapses the given row identified by the passed rowId if not yet collapsed.
+     */
+    collapseRowById(rowId: string): Promise<void>;
+    /**
+     * Toggles the expanded state of a given row identified by the passed rowId if not yet collapsed.
+     */
+    toggleSubRowById(rowId: string): Promise<void>;
+    /**
+     * Expands/Collapses all sub rows in the table.
+     */
+    toggleAllSubRows(): Promise<void>;
+}
+/** @public */
+export declare class DataTableRowSelectionHelper {
+    private readonly rootHelper;
+    constructor(rootHelper: DataTableHelper);
+    private getCheckboxById;
+    private getCheckboxSelectAll;
+    /**
+     * Ticks the selection checkbox for a row if it is not yet selected.
+     */
+    selectRowById(id: string): Promise<void>;
+    /**
+     * Unselects the selection checkbox for a row if it is not selected.
+     */
+    deselectRowById(id: string): Promise<void>;
+    /**
+     * Toggles selection on the row.
+     */
+    toggleSelectionRowById(id: string): Promise<void>;
+    /**
+     * Toggles selection on the row with the Shift key pressed (batch selection).
+     */
+    shiftToggleSelectionRowById(id: string): Promise<void>;
+    /**
+     * Returns the selection state for the row with the given ID.
+     */
+    getSelectionStateById(id: string): Promise<boolean | 'indeterminate'>;
+    /**
+     * Returns a selection state for the currently shown checkboxes (current page).
+     * Hint: Elements might be virtualized or not shown on this page.
+     */
+    getSelectionState(): Promise<Record<string, boolean | 'indeterminate'>>;
+    isSelectAllDisabled(): Promise<boolean>;
+    getSelectAllState(): Promise<boolean | 'indeterminate'>;
+    toggleSelectAll(): Promise<void>;
+}
+/** @public */
+export declare class DataTableUserActionHelper {
+    private readonly dataTestId;
+    /**
+     * Gets the root element of the DataTable
+     */
+    get element(): HTMLDivElement;
+    constructor(dataTestId: string);
+    /**
+     * Lets you call a HeaderAction registered on the DataTable
+     */
+    activateHeaderAction(
+    /** Provide the rendered header string or a RegExp that matches the header cell. */
+    headerName: string | RegExp, 
+    /** Provide the rendered actionName string or a RegExp that matches the option. */
+    actionName: string | RegExp): Promise<void>;
+    /**
+     * Lets you call a CellAction registered on the DataTable
+     */
+    activateCellAction(
+    /** Provide the rendered header id string or a RegExp that matches the header cell. */
+    headerName: string | RegExp, 
+    /** Zero based index for the row. */
+    row: number, 
+    /** Provide the rendered actionName string or a RegExp that matches the option. */
+    actionName: string | RegExp): Promise<void>;
+    /**
+     * Lets you call a RowAction registered on the DataTable
+     */
+    activateRowAction(
+    /** Zero based index for the row. */
+    row: number, 
+    /** Provide the rendered actionName string or a RegExp that matches the option. */
+    actionName: string | RegExp): Promise<void>;
+}
+/** @public */
+export declare class DataTablePaginationHelper {
+    private readonly dataTestId;
+    /**
+     * Gets the root element of the DataTable
+     */
+    private get element();
+    private get paginationElement();
+    private get pageSizeSelect();
+    private get pageIndexSelect();
+    constructor(dataTestId: string);
+    /**
+     * Allows you to set the pageSize via the select in the DataTable Pagination.
+     * @param pageSize - Target pageSize the pagination should be set to.
+     */
+    setPageSizeTo(pageSize: number): Promise<void>;
+    /**
+     * Allows you to set the pageIndex via the select in the DataTable Pagination.
+     * @param pageIndex - pageIndex you want to navigate to. 0 based value
+     */
+    setPageIndex(pageIndex: number): Promise<void>;
+    /**
+     * Allows you to go to the next page using the "Next page" button.
+     */
+    goToNextPage(): Promise<void>;
+    /**
+     * Allows you to go to the previous page using the "Previous page" button.
+     */
+    goToPreviousPage(): Promise<void>;
+}
+/** @public */
+export declare class DataTableSortingHelper {
+    private readonly dataTestId;
+    private readonly rootHelper;
+    /**
+     * Gets the root element of the DataTable
+     */
+    get element(): HTMLDivElement;
+    constructor(dataTestId: string, rootHelper: DataTableHelper);
+    /**
+     * Get a column header by header name
+     */
+    getColumnHeader(headerName: string | RegExp): Promise<Element | null>;
+    /**
+     * Will return the current sorting direction of the column provided by the parameter.
+     */
+    getSortingDirection(
+    /** Provide the rendered header string or a RegExp that matches the header cell. */
+    headerName: string | RegExp): Promise<'none' | 'ascending' | 'descending' | 'other' | null>;
+    /**
+     * Will return the current `sortDescFirst` attribute of the column provided by the parameter.
+     */
+    getSortDescFirst(
+    /** Provide the rendered header string or a RegExp that matches the header cell. */
+    headerName: string | RegExp): Promise<boolean>;
+    /**
+     * Lets you sort the column.
+     */
+    sortColumn(
+    /**
+     * Header name that should be sorted.
+     */
+    headerName: string | RegExp, options?: {
+        /**
+         * The sorting direction needs to be specified when the column has sorting triggers located inside the actions menu.
+         */
+        direction?: 'ascending' | 'descending';
+        /**
+         * Enables multi-sorting. The table will sort by the specified column in addition to the columns that are already sorted.
+         */
+        multiSorting?: boolean;
+    }): Promise<void>;
+}
+/** @public */
+export declare class DataTableInteractiveRowsHelper {
+    private readonly _rootHelper;
+    constructor(_rootHelper: DataTableHelper);
+    /**
+     * Returns the id of the currently active row or null if no rows are selected.
+     */
+    getActivatedRowId(): Promise<string | null>;
+    /**
+     * Toggles the row identified by the given rowId as active.
+     */
+    toggleActiveRow(rowId: string): Promise<void>;
+}
+/** @public */
+export declare class DataTableDownloadHelper {
+    private readonly rootHelper;
+    constructor(rootHelper: DataTableHelper);
+    private getDownloadMenuTrigger;
+    private openDownloadMenu;
+    private isMenuOpen;
+    private getMenuItem;
+    /**
+     * Activates the _download all_ item in the DataTable.Toolbar menu.
+     */
+    downloadAllCSV(): Promise<void>;
+    /**
+     * Activates the _download current page_ item in the DataTable.Toolbar menu.
+     */
+    downloadPageCSV(): Promise<void>;
+    /**
+     * Activates the _download selected_ item in the DataTable.Toolbar menu.
+     */
+    downloadSelectedRowsCSV(): Promise<void>;
+}
+/** @public */
+export declare class DataTableExpandableRowHelper {
+    private readonly rootHelper;
+    constructor(rootHelper: DataTableHelper);
+    getExpandedRowIds(): Array<string>;
+    expandRowById(rowId: string): Promise<void>;
+    collapseRowById(rowId: string): Promise<void>;
+    toggleRowById(rowId: string): Promise<void>;
+}
+/** @public */
+export declare class DataTableHelper {
+    private readonly dataTestId;
+    private get tableElement();
+    private getHeaderRow;
+    private getAllCellsInBodyRow;
+    userActions: DataTableUserActionHelper;
+    pagination: DataTablePaginationHelper;
+    sorting: DataTableSortingHelper;
+    rowSelection: DataTableRowSelectionHelper;
+    subRows: DataTableSubRowsHelper;
+    interactiveRows: DataTableInteractiveRowsHelper;
+    download: DataTableDownloadHelper;
+    expandableRows: DataTableExpandableRowHelper;
+    constructor(dataTestId: string);
+    /**
+     * Gets the root element of the DataTable
+     */
+    get element(): HTMLDivElement;
+    get headerRowCount(): number;
+    getHeaderRowContent(index: number): Array<string | null>;
+    getRowContent(index: number): Array<string | null>;
+    get rowCount(): number;
+}
+/** @public */
+export declare function getDataTableHelper(testid: string): DataTableHelper;