Queries

function getSelectTestElements(
  options: GetPartsByRoleOptions
): SelectTestElements;

async function findSelectTestElements(
  options: GetPartsByRoleOptions
): Promise<SelectTestElements>;

import {
  getSelectTestElements,
  rmdRender,
  screen,
  userEvent,
} from "@react-md/core/test-utils";

it("should be able to verify the display value", async () => {
  const user = userEvent.setup();
  rmdRender(<SimpleSelect />);

  const { select, selectInput, selectedOption } = getSelectTestElements({
    name: "Label",
  });
  // this isn't required, but added to show what element this is
  expect(selectedOption).toHaveClass("rmd-selected-option");

  // there is currently no selected value
  expect(selectedOption).toHaveTextContent("");

  await user.click(select);
  await user.click(screen.getByRole("option", { name: "Option 1" }));
  expect(selectInput).toHaveValue("a");
  expect(selectedOption).toHaveTextContent("Option 1");
});

import {
  type BoundFunctions,
  type ByRoleOptions,
  type queries,
} from "@testing-library/dom";

export interface GetPartsByRoleOptions extends ByRoleOptions {
  /** @defaultValue `screen` */
  container?: BoundFunctions<typeof queries>;
}

export interface SelectTestElements {
  /**
   * The element that should be interacted with for showing and hiding the
   * listbox of available options in the `Select`.
   */
  select: HTMLDivElement;

  /**
   * The input element storing the current value for the `Select`. This should
   * be used to verify a specific option has been selected and will be the
   * `Option`'s `value` prop.
   *
   * i.e. Selecting `<Option value="a">Option 1</Option>` -> `selectInput`
   * would have value `"a"`.
   */
  selectInput: HTMLInputElement;

  /**
   * The current selected option that is shown in the `Select` underneath the
   * floating label. This should be used if the selected option label needs to
   * be verified instead of the value.
   *
   * i.e. Selecting `<Option value="a">Option 1</Option>` -> `selectedOption`
   * would have text content `"Option 1"`.
   */
  selectedOption: HTMLDivElement;
}

function getSliderTestElements(
  options: GetPartsByRoleOptions
): SliderTestElements {

async function findSliderTestElements(
  options: GetPartsByRoleOptions
): Promise<SliderTestElements>;

function Test(): ReactElement {
  const slider = useSlider({ defaultValue: 30 });
  return <Slider {...slider} aria-label="Example" />;
}

rmdRender(<Test />);

const { slider, sliderInput } = getSliderTestElements({ name: "Example" });

expect(slider).toHaveValue(30);
expect(sliderInput).toHaveValue("30");

fireEvent.change(sliderInput, { target: { value: "55" } });
expect(slider).toHaveValue(55);
expect(sliderInput).toHaveValue("55");

import {
  type BoundFunctions,
  type ByRoleOptions,
  type queries,
} from "@testing-library/dom";

export interface GetPartsByRoleOptions extends ByRoleOptions {
  /** @defaultValue `screen` */
  container?: BoundFunctions<typeof queries>;
}

export interface SliderTestElements {
  /**
   * The element that is visible to screen readers and can be updated using
   * drag, touch, or keyboard events. Since this is usually annoying for tests,
   * the `sliderInput` should normally be used instead.
   */
  slider: HTMLSpanElement;

  /**
   * The element that is hidden to screen readers but stores the current value
   * and can be updated using
   * `fireEvent.change(sliderInput, { target: { value: "100" }})`.
   */
  sliderInput: HTMLInputElement;

  /**
   * This is only useful when needing to verify that clicking somewhere on the
   * track updates the value. Most test cases can be solved through the
   * {@link slider} or {@link sliderInput} instead.
   */
  sliderTrack: HTMLSpanElement;

  /**
   * Returns the slider container element if it is needed for testing. It's
   * useful for simple snapshot tests.
   */
  sliderContainer: HTMLDivElement;
}

function getRangeSliderTestElements(
  options: GetRangetSliderTestElementsOptions = {}
): RangeSliderTestElements;

async function findRangeSliderTestElements(
  options: GetRangetSliderTestElementsOptions = {}
): Promise<RangeSliderTestElements>;

export interface GetRangetSliderTestElementsOptions {
  /** @defaultValue `screen` */
  container?: BoundFunctions<typeof queries>;

  /** @defaultValue `{ name: "Min" }` */
  min?: ByRoleOptions;

  /** @defaultValue `{ name: "Max" }` */
  max?: ByRoleOptions;
}

export interface RangeSliderTestElements {
  /** @see {@link SliderTestElements.slider} */
  minSlider: HTMLSpanElement;
  /** @see {@link SliderTestElements.sliderInput} */
  minSliderInput: HTMLInputElement;
  /** @see {@link SliderTestElements.slider} */
  maxSlider: HTMLSpanElement;
  /** @see {@link SliderTestElements.sliderInput} */
  maxSliderInput: HTMLInputElement;
  /** @see {@link SliderTestElements.sliderTrack} */
  sliderTrack: HTMLSpanElement;
  /** @see {@link SliderTestElements.sliderContainer} */
  sliderContainer: HTMLDivElement;
}