@patternfly/react-templates 1.1.0-prerelease.9 → 1.1.0

package/src/components/Select/__tests__/TypeaheadSelect.test.tsx

@@ -0,0 +1,372 @@
+import * as React from 'react';
+import { render, screen, waitForElementToBeRemoved } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { TypeaheadSelect } from '../TypeaheadSelect';
+import styles from '@patternfly/react-styles/css/components/Menu/menu';
+
+test('renders typeahead select with options', async () => {
+  const selectOptions = [
+    { content: 'Option 1', value: 'option1' },
+    { content: 'Option 2', value: 'option2' },
+    { content: 'Option 3', value: 'option3' }
+  ];
+
+  const user = userEvent.setup();
+
+  render(<TypeaheadSelect selectOptions={selectOptions} />);
+
+  const toggle = screen.getByRole('button', { name: 'Typeahead menu toggle' });
+
+  await user.click(toggle);
+
+  const option1 = screen.getByText('Option 1');
+  const option2 = screen.getByText('Option 2');
+  const option3 = screen.getByText('Option 3');
+
+  expect(option1).toBeInTheDocument();
+  expect(option2).toBeInTheDocument();
+  expect(option3).toBeInTheDocument();
+});
+
+test('shows the selected item as selected', async () => {
+  const selectOptions = [
+    { content: 'Option 1', value: 'option1' },
+    { content: 'Option 2', value: 'option2' },
+    { content: 'Option 3', value: 'option3' }
+  ];
+
+  const user = userEvent.setup();
+
+  render(<TypeaheadSelect selectOptions={selectOptions} selected="option1" />);
+
+  const toggle = screen.getByRole('button', { name: 'Typeahead menu toggle' });
+
+  await user.click(toggle);
+
+  const option1 = screen.getByRole('option', { name: 'Option 1' });
+
+  expect(option1).toHaveClass(styles.modifiers.selected);
+});
+
+test('calls the onSelect callback with the selected value when an option is selected', async () => {
+  const selectOptions = [
+    { content: 'Option 1', value: 'option1' },
+    { content: 'Option 2', value: 'option2' },
+    { content: 'Option 3', value: 'option3' }
+  ];
+
+  const user = userEvent.setup();
+  const onSelectMock = jest.fn();
+
+  render(<TypeaheadSelect selectOptions={selectOptions} onSelect={onSelectMock} />);
+
+  const toggle = screen.getByRole('button', { name: 'Typeahead menu toggle' });
+
+  await user.click(toggle);
+
+  expect(onSelectMock).not.toHaveBeenCalled();
+
+  const option1 = screen.getByRole('option', { name: 'Option 1' });
+
+  await user.click(option1);
+
+  expect(onSelectMock).toHaveBeenCalledTimes(1);
+  expect(onSelectMock).toHaveBeenCalledWith(expect.anything(), 'option1');
+});
+
+test('calls the onClearSelection callback when clear button is clicked', async () => {
+  const selectOptions = [
+    { content: 'Option 1', value: 'option1' },
+    { content: 'Option 2', value: 'option2' },
+    { content: 'Option 3', value: 'option3' }
+  ];
+  const onClearSelectionMock = jest.fn();
+
+  const user = userEvent.setup();
+
+  render(<TypeaheadSelect selectOptions={selectOptions} selected="option1" onClearSelection={onClearSelectionMock} />);
+
+  const toggle = screen.getByRole('button', { name: 'Typeahead menu toggle' });
+
+  await user.click(toggle);
+
+  const option1 = screen.getByRole('option', { name: 'Option 1' });
+  expect(option1).toHaveClass(styles.modifiers.selected);
+
+  const input = screen.getByRole('combobox');
+  expect(input).toHaveValue('Option 1');
+
+  const clearButton = screen.getByRole('button', { name: 'Clear input value' });
+  await user.click(clearButton);
+
+  expect(onClearSelectionMock).toHaveBeenCalledTimes(1);
+});
+
+test('toggles the select menu when the toggle button is clicked', async () => {
+  const selectOptions = [
+    { content: 'Option 1', value: 'option1' },
+    { content: 'Option 2', value: 'option2' },
+    { content: 'Option 3', value: 'option3' }
+  ];
+
+  const user = userEvent.setup();
+
+  render(<TypeaheadSelect selectOptions={selectOptions} />);
+
+  const toggle = screen.getByRole('button', { name: 'Typeahead menu toggle' });
+
+  await user.click(toggle);
+
+  const menu = screen.getByRole('listbox');
+  expect(menu).toBeInTheDocument();
+
+  await user.click(toggle);
+
+  await waitForElementToBeRemoved(menu);
+
+  expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+});
+
+test('calls the onToggle callback when the toggle is clicked', async () => {
+  const selectOptions = [
+    { content: 'Option 1', value: 'option1' },
+    { content: 'Option 2', value: 'option2' },
+    { content: 'Option 3', value: 'option3' }
+  ];
+
+  const user = userEvent.setup();
+  const onToggleMock = jest.fn();
+
+  render(<TypeaheadSelect selectOptions={selectOptions} onToggle={onToggleMock} />);
+
+  const toggle = screen.getByRole('button', { name: 'Typeahead menu toggle' });
+
+  expect(onToggleMock).not.toHaveBeenCalled();
+
+  await user.click(toggle);
+
+  expect(onToggleMock).toHaveBeenCalledTimes(1);
+  expect(onToggleMock).toHaveBeenCalledWith(true);
+
+  await user.click(toggle);
+
+  expect(onToggleMock).toHaveBeenCalledTimes(2);
+  expect(onToggleMock).toHaveBeenCalledWith(false);
+});
+
+test('Passes toggleWidth', () => {
+  const selectOptions = [
+    { content: 'Option 1', value: 'option1' },
+    { content: 'Option 2', value: 'option2' },
+    { content: 'Option 3', value: 'option3' }
+  ];
+
+  render(<TypeaheadSelect selectOptions={selectOptions} toggleWidth="500px" />);
+
+  const toggle = screen.getByRole('button', { name: 'Typeahead menu toggle' });
+  expect(toggle.parentElement).toHaveAttribute('style', 'width: 500px;');
+});
+
+test('Passes additional toggleProps', () => {
+  const selectOptions = [
+    { content: 'Option 1', value: 'option1' },
+    { content: 'Option 2', value: 'option2' },
+    { content: 'Option 3', value: 'option3' }
+  ];
+
+  render(<TypeaheadSelect selectOptions={selectOptions} toggleProps={{ id: 'toggle' }} />);
+
+  const toggle = screen.getByRole('button', { name: 'Typeahead menu toggle' });
+  expect(toggle.parentElement).toHaveAttribute('id', 'toggle');
+});
+
+test('passes custom placeholder text', async () => {
+  const selectOptions = [
+    { content: 'Option 1', value: 'option1' },
+    { content: 'Option 2', value: 'option2' },
+    { content: 'Option 3', value: 'option3' }
+  ];
+
+  render(<TypeaheadSelect selectOptions={selectOptions} placeholder="custom" />);
+
+  const input = screen.getByRole('combobox');
+
+  expect(input).toHaveAttribute('placeholder', 'custom');
+});
+
+test('displays noOptionsFoundMessage when filter returns no results', async () => {
+  const selectOptions = [
+    { content: 'Option 1', value: 'option1' },
+    { content: 'Option 2', value: 'option2' },
+    { content: 'Option 3', value: 'option3' }
+  ];
+  const user = userEvent.setup();
+
+  render(<TypeaheadSelect selectOptions={selectOptions} />);
+
+  const toggle = screen.getByRole('button', { name: 'Typeahead menu toggle' });
+  const input = screen.getByRole('combobox');
+
+  expect(input).toHaveAttribute('placeholder', 'Select an option');
+
+  await user.click(toggle);
+
+  const option1 = screen.getByRole('option', { name: 'Option 1' });
+  const option2 = screen.getByRole('option', { name: 'Option 2' });
+  const option3 = screen.getByRole('option', { name: 'Option 3' });
+
+  expect(option1).toBeInTheDocument();
+  expect(option2).toBeInTheDocument();
+  expect(option3).toBeInTheDocument();
+
+  await user.type(input, '9');
+  expect(input).toHaveValue('9');
+
+  expect(option1).not.toBeInTheDocument();
+  expect(option2).not.toBeInTheDocument();
+  expect(option3).not.toBeInTheDocument();
+  expect(screen.getByRole('option', { name: 'No results found for "9"' })).toBeInTheDocument();
+});
+
+test('displays custom noOptionsFoundMessage', async () => {
+  const selectOptions = [
+    { content: 'Option 1', value: 'option1' },
+    { content: 'Option 2', value: 'option2' },
+    { content: 'Option 3', value: 'option3' }
+  ];
+  const user = userEvent.setup();
+
+  render(<TypeaheadSelect selectOptions={selectOptions} noOptionsFoundMessage="custom" />);
+
+  const toggle = screen.getByRole('button', { name: 'Typeahead menu toggle' });
+  const input = screen.getByRole('combobox');
+
+  expect(input).toHaveAttribute('placeholder', 'Select an option');
+
+  await user.click(toggle);
+
+  const option1 = screen.getByRole('option', { name: 'Option 1' });
+  const option2 = screen.getByRole('option', { name: 'Option 2' });
+  const option3 = screen.getByRole('option', { name: 'Option 3' });
+
+  expect(option1).toBeInTheDocument();
+  expect(option2).toBeInTheDocument();
+  expect(option3).toBeInTheDocument();
+
+  await user.type(input, '9');
+  expect(input).toHaveValue('9');
+
+  expect(option1).not.toBeInTheDocument();
+  expect(option2).not.toBeInTheDocument();
+  expect(option3).not.toBeInTheDocument();
+  expect(screen.getByRole('option', { name: 'custom' })).toBeInTheDocument();
+});
+
+test('disables the select when isDisabled prop is true', async () => {
+  const selectOptions = [
+    { content: 'Option 1', value: 'option1' },
+    { content: 'Option 2', value: 'option2' },
+    { content: 'Option 3', value: 'option3' }
+  ];
+
+  const user = userEvent.setup();
+
+  render(<TypeaheadSelect selectOptions={selectOptions} isDisabled={true} />);
+
+  const toggle = screen.getByRole('button', { name: 'Typeahead menu toggle' });
+
+  expect(toggle.parentElement).toHaveClass(styles.modifiers.disabled);
+
+  await user.click(toggle);
+
+  expect(screen.queryByRole('menu')).not.toBeInTheDocument();
+});
+
+test('passes other SelectOption props to the SelectOption component', async () => {
+  const selectOptions = [{ content: 'Option 1', value: 'option1', isDisabled: true }];
+
+  const user = userEvent.setup();
+
+  render(<TypeaheadSelect selectOptions={selectOptions} />);
+
+  const toggle = screen.getByRole('button', { name: 'Typeahead menu toggle' });
+
+  await user.click(toggle);
+
+  const option1 = screen.getByRole('option', { name: 'Option 1' });
+  expect(option1).toBeDisabled();
+});
+
+test('typing in input filters options', async () => {
+  const selectOptions = [
+    { content: 'Option 1', value: 'option1' },
+    { content: 'Option 2', value: 'option2' },
+    { content: 'Option 3', value: 'option3' }
+  ];
+
+  const user = userEvent.setup();
+
+  render(<TypeaheadSelect selectOptions={selectOptions} />);
+
+  const toggle = screen.getByRole('button', { name: 'Typeahead menu toggle' });
+  const input = screen.getByRole('combobox');
+
+  expect(input).toHaveAttribute('placeholder', 'Select an option');
+
+  await user.click(toggle);
+
+  const option1 = screen.getByRole('option', { name: 'Option 1' });
+  const option2 = screen.getByRole('option', { name: 'Option 2' });
+  const option3 = screen.getByRole('option', { name: 'Option 3' });
+
+  expect(option1).toBeInTheDocument();
+  expect(option2).toBeInTheDocument();
+  expect(option3).toBeInTheDocument();
+
+  await user.type(input, '1');
+  expect(input).toHaveValue('1');
+
+  expect(option1).toBeInTheDocument();
+  expect(option2).not.toBeInTheDocument();
+  expect(option3).not.toBeInTheDocument();
+});
+
+test('typing in input triggers onInputChange callback', async () => {
+  const selectOptions = [
+    { content: 'Option 1', value: 'option1' },
+    { content: 'Option 2', value: 'option2' },
+    { content: 'Option 3', value: 'option3' }
+  ];
+
+  const user = userEvent.setup();
+  const onInputChangeMock = jest.fn();
+
+  render(<TypeaheadSelect selectOptions={selectOptions} onInputChange={onInputChangeMock} />);
+
+  const input = screen.getByRole('combobox');
+
+  expect(input).toHaveAttribute('placeholder', 'Select an option');
+
+  await user.type(input, '1');
+
+  expect(input).toHaveValue('1');
+  expect(onInputChangeMock).toHaveBeenCalledTimes(1);
+  expect(onInputChangeMock).toHaveBeenCalledWith('1');
+});
+
+test('Matches snapshot', async () => {
+  const selectOptions = [
+    { content: 'Option 1', value: 'option1' },
+    { content: 'Option 2', value: 'option2' },
+    { content: 'Option 3', value: 'option3' }
+  ];
+
+  const user = userEvent.setup();
+
+  const { asFragment } = render(<TypeaheadSelect selectOptions={selectOptions} />);
+
+  const toggle = screen.getByRole('button', { name: 'Typeahead menu toggle' });
+  await user.click(toggle);
+
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/Select/{__snapshots__ → __tests__/__snapshots__}/CheckboxSelectSnapshots.test.tsx.snap

@@ -5,6 +5,9 @@ exports[`checkbox select with no props snapshot 1`] = `
   <button
     aria-expanded="false"
     class="pf-v5-c-menu-toggle"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-1"
+    data-ouia-component-type="PF5/MenuToggle"
+    data-ouia-safe="true"
     style="width: 200px;"
     type="button"
   >
@@ -43,6 +46,9 @@ exports[`opened checkbox select snapshot 1`] = `
   <button
     aria-expanded="true"
     class="pf-v5-c-menu-toggle pf-m-expanded"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-2"
+    data-ouia-component-type="PF5/MenuToggle"
+    data-ouia-safe="true"
     style="width: 200px;"
     type="button"
   >
@@ -75,13 +81,12 @@ exports[`opened checkbox select snapshot 1`] = `
   </button>
   <div
     class="pf-v5-c-menu"
-    data-ouia-component-id="OUIA-Generated-Select-3"
+    data-ouia-component-id="OUIA-Generated-Select-5"
     data-ouia-component-type="PF5/Select"
     data-ouia-safe="true"
     data-popper-escaped="true"
     data-popper-placement="bottom-start"
     data-popper-reference-hidden="true"
-    id="checkbox-select"
     style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 1; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11); min-width: 0px; transform: translate(0px, 0px);"
   >
     <div

package/src/components/Select/__tests__/__snapshots__/MultiTypeaheadSelect.test.tsx.snap

@@ -0,0 +1,180 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MultiTypeaheadSelect Matches snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-menu-toggle pf-m-expanded pf-m-full-width pf-m-typeahead"
+  >
+    <div
+      class="pf-v5-c-text-input-group pf-m-plain"
+    >
+      <div
+        autocomplete="off"
+        class="pf-v5-c-text-input-group__main"
+      >
+        <span
+          class="pf-v5-c-text-input-group__text"
+        >
+          <input
+            aria-controls="select-typeahead-listbox"
+            aria-expanded="true"
+            aria-label="Type to filter"
+            class="pf-v5-c-text-input-group__text-input"
+            placeholder="Select an option"
+            role="combobox"
+            type="text"
+            value=""
+          />
+        </span>
+      </div>
+      <div
+        class="pf-v5-c-text-input-group__utilities"
+        style="display: none;"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Clear input value"
+          class="pf-v5-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-20"
+          data-ouia-component-type="PF5/Button"
+          data-ouia-safe="true"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="pf-v5-svg"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            viewBox="0 0 352 512"
+            width="1em"
+          >
+            <path
+              d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+    <button
+      aria-expanded="true"
+      aria-label="Multi select Typeahead menu toggle"
+      class="pf-v5-c-menu-toggle__button"
+      data-ouia-component-id="OUIA-Generated-MenuToggle-typeahead-17"
+      data-ouia-component-type="PF5/MenuToggle"
+      data-ouia-safe="true"
+      tabindex="-1"
+      type="button"
+    >
+      <span
+        class="pf-v5-c-menu-toggle__controls"
+      >
+        <span
+          class="pf-v5-c-menu-toggle__toggle-icon"
+        >
+          <svg
+            aria-hidden="true"
+            class="pf-v5-svg"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            viewBox="0 0 320 512"
+            width="1em"
+          >
+            <path
+              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+            />
+          </svg>
+        </span>
+      </span>
+    </button>
+  </div>
+  <div
+    class="pf-v5-c-menu"
+    data-ouia-component-id="OUIA-Generated-Select-67"
+    data-ouia-component-type="PF5/Select"
+    data-ouia-safe="true"
+    data-popper-escaped="true"
+    data-popper-placement="bottom-start"
+    data-popper-reference-hidden="true"
+    style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 1; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11); min-width: 0px; transform: translate(0px, 0px);"
+  >
+    <div
+      class="pf-v5-c-menu__content"
+    >
+      <ul
+        aria-multiselectable="false"
+        class="pf-v5-c-menu__list"
+        role="listbox"
+      >
+        <li
+          class="pf-v5-c-menu__list-item"
+          role="none"
+        >
+          <button
+            aria-selected="false"
+            class="pf-v5-c-menu__item"
+            role="option"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="pf-v5-c-menu__item-main"
+            >
+              <span
+                class="pf-v5-c-menu__item-text"
+              >
+                Option 1
+              </span>
+            </span>
+          </button>
+        </li>
+        <li
+          class="pf-v5-c-menu__list-item"
+          role="none"
+        >
+          <button
+            aria-selected="false"
+            class="pf-v5-c-menu__item"
+            role="option"
+            tabindex="-1"
+            type="button"
+          >
+            <span
+              class="pf-v5-c-menu__item-main"
+            >
+              <span
+                class="pf-v5-c-menu__item-text"
+              >
+                Option 2
+              </span>
+            </span>
+          </button>
+        </li>
+        <li
+          class="pf-v5-c-menu__list-item"
+          role="none"
+        >
+          <button
+            aria-selected="false"
+            class="pf-v5-c-menu__item"
+            role="option"
+            tabindex="-1"
+            type="button"
+          >
+            <span
+              class="pf-v5-c-menu__item-main"
+            >
+              <span
+                class="pf-v5-c-menu__item-text"
+              >
+                Option 3
+              </span>
+            </span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</DocumentFragment>
+`;