@dynatrace/strato-components-testing 1.18.0 → 3.1.0

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

@@ -0,0 +1,131 @@
+import { screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+class SelectTestingHelper {
+  constructor(dataTestId) {
+    this.dataTestId = dataTestId;
+  }
+  /**
+   * Gets the root element of the select.
+   */
+  get element() {
+    return 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 = 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 = within(this.overlay).getByPlaceholderText(
+      "Search"
+    );
+    return filter.value;
+  }
+  /**
+   * Gets the currently selected option(s).
+   */
+  get selectedOptions() {
+    const selectedOptions = within(
+      this.element
+    ).getAllByRole("option", { hidden: true });
+    return selectedOptions.map((option) => option.value);
+  }
+  /**
+   * Gets the open state of the select overlay.
+   */
+  get openState() {
+    return within(this.trigger).getByRole("combobox", { hidden: true }).getAttribute("aria-expanded") === "true";
+  }
+  /**
+   * Gets the option with the corresponding label.
+   */
+  getOption(label) {
+    const option = within(this.overlay).getByRole("option", {
+      name: label
+    });
+    return option;
+  }
+  /**
+   * Selects the option with the corresponding label.
+   */
+  async selectOption(label) {
+    await this.open();
+    const option = within(this.overlay).getByRole("option", {
+      name: label
+    });
+    await userEvent.click(option);
+  }
+  /**
+   * Opens the select overlay.
+   */
+  async open() {
+    if (!this.openState) {
+      await userEvent.click(this.trigger);
+    }
+  }
+  /**
+   * Closes the select overlay.
+   */
+  async close() {
+    if (this.openState) {
+      await userEvent.click(this.trigger);
+    }
+  }
+  /**
+   * Types in the filter of the select.
+   */
+  async typeInFilter(text) {
+    await this.open();
+    const user = userEvent.setup();
+    const filter = 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 = within(this.overlay).getByPlaceholderText("Search");
+    await userEvent.clear(filter);
+  }
+}
+function getSelectTestingHelper(dataTestId) {
+  return new SelectTestingHelper(dataTestId);
+}
+export {
+  SelectTestingHelper,
+  getSelectTestingHelper
+};
+//# sourceMappingURL=select.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/jest/testing-helpers/forms/select.ts"],
+  "sourcesContent": ["import { screen, within } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\n\n/**\n * Helper class for interacting with the select.\n * @public\n */\nexport class SelectTestingHelper {\n  constructor(protected dataTestId: string) {}\n\n  /**\n   * Gets the root element of the select.\n   */\n  get element(): HTMLDivElement {\n    return screen.getByTestId(this.dataTestId);\n  }\n\n  /**\n   * Gets the trigger element of the select.\n   */\n  get trigger(): HTMLDivElement {\n    const triggerElement =\n      this.element.querySelector<HTMLDivElement>('div[type=\"button\"]');\n    if (triggerElement) {\n      return triggerElement;\n    }\n    throw new Error('Trigger element for the select was not found.');\n  }\n\n  /**\n   * Gets the text value of the trigger display value of the select.\n   */\n  get displayValue(): string {\n    const displayValue = this.trigger.textContent;\n\n    if (displayValue) {\n      return displayValue;\n    }\n\n    throw new Error('Could not get display value.');\n  }\n\n  /**\n   * Gets the overlay (content) of the select.\n   */\n  get overlay(): HTMLDivElement {\n    // Get the aria-controls attribute that connects the combobx to the listbox in\n    // the overlay. It's the only unique identifier that we have that the overlay\n    // is actually connected to the trigger.\n    const selectInputAriaControls = within(this.trigger)\n      .getByRole('combobox', { hidden: true })\n      .getAttribute('aria-controls');\n\n    // Get the listbox that is connected to the combobox of the trigger.\n    const listboxElement = document.querySelector(\n      `[role=\"listbox\"][id=\"${selectInputAriaControls}\"]`,\n    );\n\n    // Get the parent element of the listbox (the actual overlay).\n    if (listboxElement) {\n      return listboxElement.parentElement as HTMLDivElement;\n    }\n\n    throw new Error('Could not find the overlay element for the select.');\n  }\n\n  /**\n   * Gets the text value of the select filter in the overlay.\n   */\n  get filterValue(): string {\n    const filter = within(this.overlay).getByPlaceholderText<HTMLInputElement>(\n      'Search',\n    );\n    return filter.value;\n  }\n\n  /**\n   * Gets the currently selected option(s).\n   */\n  get selectedOptions(): Array<string> {\n    const selectedOptions = within(\n      this.element,\n    ).getAllByRole<HTMLOptionElement>('option', { hidden: true });\n\n    return selectedOptions.map((option) => option.value);\n  }\n\n  /**\n   * Gets the open state of the select overlay.\n   */\n  get openState(): boolean {\n    return (\n      within(this.trigger)\n        .getByRole('combobox', { hidden: true })\n        .getAttribute('aria-expanded') === 'true'\n    );\n  }\n\n  /**\n   * Gets the option with the corresponding label.\n   */\n  getOption(label: string): HTMLOptionElement {\n    const option = within(this.overlay).getByRole<HTMLOptionElement>('option', {\n      name: label,\n    });\n\n    return option;\n  }\n\n  /**\n   * Selects the option with the corresponding label.\n   */\n  async selectOption(label: string) {\n    await this.open();\n\n    const option = within(this.overlay).getByRole<HTMLOptionElement>('option', {\n      name: label,\n    });\n\n    await userEvent.click(option);\n  }\n\n  /**\n   * Opens the select overlay.\n   */\n  async open() {\n    if (!this.openState) {\n      await userEvent.click(this.trigger);\n    }\n  }\n\n  /**\n   * Closes the select overlay.\n   */\n  async close() {\n    if (this.openState) {\n      await userEvent.click(this.trigger);\n    }\n  }\n\n  /**\n   * Types in the filter of the select.\n   */\n  async typeInFilter(text: string) {\n    await this.open();\n    const user = userEvent.setup();\n\n    const filter = within(this.overlay).getByPlaceholderText('Search');\n    await user.click(filter);\n    await user.keyboard(text);\n  }\n\n  /**\n   * Clears the filter / search of the select overlay.\n   */\n  async clearFilter() {\n    await this.open();\n\n    const filter = within(this.overlay).getByPlaceholderText('Search');\n    await userEvent.clear(filter);\n  }\n}\n\n/**\n * Helper function that returns the select element with its testing utilities.\n * @public\n */\nexport function getSelectTestingHelper(\n  dataTestId: string,\n): SelectTestingHelper {\n  return new SelectTestingHelper(dataTestId);\n}\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,24 @@
+import { within } from "@testing-library/react";
+import { BaseInputHelper } from "./base-input.js";
+import { setupUserEvent } from "../utils/setup-user-event.js";
+class TextInputHelper extends BaseInputHelper {
+  /**
+   * Helper that will let you call a specific prefix or suffix button
+   * within the TextInput component.
+   */
+  async clickButton(name) {
+    const button = within(this.inputWrapper).getByRole("button", {
+      hidden: true,
+      name
+    });
+    await setupUserEvent().click(button);
+  }
+}
+function getTextInputHelper(dataTestId) {
+  return new TextInputHelper(dataTestId);
+}
+export {
+  TextInputHelper,
+  getTextInputHelper
+};
+//# sourceMappingURL=text-input.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/jest/testing-helpers/forms/text-input.ts"],
+  "sourcesContent": ["import { within } from '@testing-library/react';\n\nimport { BaseInputHelper } from './base-input.js';\nimport { setupUserEvent } from '../utils/setup-user-event.js';\n\n/**\n * Helper class for interacting with the text input\n * @public\n */\nexport class TextInputHelper extends BaseInputHelper {\n  /**\n   * Helper that will let you call a specific prefix or suffix button\n   * within the TextInput component.\n   */\n  async clickButton(name: string) {\n    const button = within(this.inputWrapper).getByRole('button', {\n      hidden: true,\n      name,\n    });\n\n    await setupUserEvent().click(button);\n  }\n}\n\n/**\n * Helper function that returns the text input element with its testing utilities.\n * @public\n */\nexport function getTextInputHelper(\n  /** The accessible test id used to locate the input wrapper. */\n  dataTestId: string,\n): TextInputHelper {\n  return new TextInputHelper(dataTestId);\n}\n"],
+  "mappings": "AAAA,SAAS,cAAc;AAEvB,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAMxB,MAAM,wBAAwB,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA,EAKnD,MAAM,YAAY,MAAc;AAC9B,UAAM,SAAS,OAAO,KAAK,YAAY,EAAE,UAAU,UAAU;AAAA,MAC3D,QAAQ;AAAA,MACR;AAAA,IACF,CAAC;AAED,UAAM,eAAe,EAAE,MAAM,MAAM;AAAA,EACrC;AACF;AAMO,SAAS,mBAEd,YACiB;AACjB,SAAO,IAAI,gBAAgB,UAAU;AACvC;",
+  "names": []
+}