@patternfly/react-core 4.202.32 → 4.202.35

package/src/components/TextInputGroup/__tests__/TextInputGroupMain.test.tsx

@@ -0,0 +1,302 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+
+import { TextInputGroupMain } from '../TextInputGroupMain';
+import { TextInputGroupContext } from '../TextInputGroup';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+
+describe('TextInputGroupMain', () => {
+  it('renders without children', () => {
+    render(<TextInputGroupMain data-testid='TextInputGroupMain'/>);
+    
+    expect(screen.getByTestId('TextInputGroupMain')).toBeVisible();
+  });
+  
+  it('renders children', () => {
+    render(<TextInputGroupMain>Test</TextInputGroupMain>);
+
+    expect(screen.getByText('Test')).toBeVisible();
+  });
+
+  it('renders with class pf-c-text-input-group__main', () => {
+    render(<TextInputGroupMain>Test</TextInputGroupMain>);
+
+    const inputGroupMain = screen.getByText('Test');
+
+    expect(inputGroupMain).toHaveClass('pf-c-text-input-group__main');
+  });
+
+  it('does not render with class pf-m-icon when an icon prop is not passed', () => {
+    render(<TextInputGroupMain>Test</TextInputGroupMain>);
+
+    const inputGroupMain = screen.getByText('Test');
+
+    expect(inputGroupMain).not.toHaveClass('pf-m-icon');
+  });
+
+  it('renders with class pf-m-icon when an icon prop is passed', () => {
+    render(<TextInputGroupMain icon="icon">Test</TextInputGroupMain>);
+
+    const inputGroupMain = screen.getByText('Test');
+
+    expect(inputGroupMain).toHaveClass('pf-m-icon');
+  });
+
+  it('renders with custom class names provided via prop', () => {
+    render(<TextInputGroupMain className="custom-class">Test</TextInputGroupMain>);
+
+    const inputGroupMain = screen.getByText('Test');
+
+    expect(inputGroupMain).toHaveClass('custom-class');
+  });
+
+  it('renders with class pf-c-text-input-group__text on the inputs parent', () => {
+    render(<TextInputGroupMain>Test</TextInputGroupMain>);
+
+    const inputGroupText = screen.getByRole('textbox').parentNode;
+
+    expect(inputGroupText).toHaveClass('pf-c-text-input-group__text');
+  });
+
+  it('renders the input with class pf-c-text-input-group__text-input', () => {
+    render(<TextInputGroupMain>Test</TextInputGroupMain>);
+
+    const input = screen.getByRole('textbox');
+
+    expect(input).toHaveClass('pf-c-text-input-group__text-input');
+  });
+
+  it('does not render the icon when it is not passed', () => {
+    render(<TextInputGroupMain />);
+
+    const icon = screen.queryByRole('img', { hidden: true });
+
+    expect(icon).not.toBeInTheDocument();
+  });
+
+  it('renders the icon when passed', () => {
+    render(<TextInputGroupMain icon={<SearchIcon />} />);
+
+    const icon = screen.getByRole('img', { hidden: true });
+
+    expect(icon).toBeInTheDocument();
+  });
+
+  it('renders the icon as aria hidden', () => {
+    render(<TextInputGroupMain icon={<SearchIcon />} />);
+
+    const icon = screen.getByRole('img', { hidden: true });
+
+    expect(icon).toHaveAttribute('aria-hidden', 'true');
+  });
+
+  it('passes the aria-label prop to the input', () => {
+    render(<TextInputGroupMain aria-label="Test label">Test</TextInputGroupMain>);
+
+    const input = screen.getByRole('textbox');
+
+    expect(input).toHaveAccessibleName('Test label');
+  });
+
+  it('passes the value prop to the input', () => {
+    render(<TextInputGroupMain value="value text">Test</TextInputGroupMain>);
+
+    const inputValue = screen.getByDisplayValue('value text');
+
+    expect(inputValue).toBeVisible();
+  });
+
+  it('passes the placeholder prop to the input', () => {
+    render(<TextInputGroupMain placeholder="placeholder text">Test</TextInputGroupMain>);
+
+    const inputPlaceholder = screen.getByPlaceholderText('placeholder text');
+
+    expect(inputPlaceholder).toBeVisible();
+  });
+
+  it('defaults to an input type of text', () => {
+    render(<TextInputGroupMain>Test</TextInputGroupMain>);
+
+    const input = screen.getByRole('textbox');
+
+    expect(input).toHaveAttribute('type', 'text');
+  });
+
+  it('updates the input type when a different type is passed', () => {
+    render(<TextInputGroupMain type="search">Test</TextInputGroupMain>);
+
+    const textInput = screen.queryByRole('textbox');
+    const searchInput = screen.getByRole('searchbox');
+
+    expect(textInput).not.toBeInTheDocument();
+    expect(searchInput).toBeVisible();
+  });
+
+  it('does not disable the input when TextInputGroupContext isDisabled is false', () => {
+    render(
+      <TextInputGroupContext.Provider value={{ isDisabled: false }}>
+        <TextInputGroupMain />
+      </TextInputGroupContext.Provider>
+    );
+
+    const input = screen.getByRole('textbox');
+
+    expect(input).not.toBeDisabled();
+  });
+
+  it('disables the input when TextInputGroupContext isDisabled is true', () => {
+    render(
+      <TextInputGroupContext.Provider value={{ isDisabled: true }}>
+        <TextInputGroupMain />
+      </TextInputGroupContext.Provider>
+    );
+
+    const input = screen.getByRole('textbox');
+
+    expect(input).toBeDisabled();
+  });
+
+  it("doesn't render the hint input when a hint prop isn't passed", () => {
+    // we set the type of the main input to search here so that we can accurately target the hint input
+    render(<TextInputGroupMain type="search">Test</TextInputGroupMain>);
+
+    const hintInput = screen.queryByRole('textbox', { hidden: true });
+
+    expect(hintInput).not.toBeInTheDocument();
+  });
+
+  it('renders the hint input when a hint prop is passed', () => {
+    // we set the type of the main input to search here so that we can accurately target the hint input
+    render(
+      <TextInputGroupMain hint="Test" type="search">
+        Test
+      </TextInputGroupMain>
+    );
+
+    const hintInput = screen.getByRole('textbox', { hidden: true });
+
+    expect(hintInput).toBeInTheDocument();
+  });
+
+  it('renders the hint input with classes pf-c-text-input-group__text-input and pf-m-hint', () => {
+    // we set the type of the main input to search here so that we can accurately target the hint input
+    render(
+      <TextInputGroupMain hint="Test" type="search">
+        Test
+      </TextInputGroupMain>
+    );
+
+    const hintInput = screen.getByRole('textbox', { hidden: true });
+
+    expect(hintInput).toHaveClass('pf-m-hint');
+    expect(hintInput).toHaveClass('pf-c-text-input-group__text-input');
+  });
+
+  it('renders the hint input as disabled', () => {
+    // we set the type of the main input to search here so that we can accurately target the hint input
+    render(
+      <TextInputGroupMain hint="Test" type="search">
+        Test
+      </TextInputGroupMain>
+    );
+
+    const hintInput = screen.getByRole('textbox', { hidden: true });
+
+    expect(hintInput).toBeDisabled();
+  });
+
+  it('renders the hint input as aria-hidden', () => {
+    // we set the type of the main input to search here so that we can accurately target the hint input
+    render(
+      <TextInputGroupMain hint="Test" type="search">
+        Test
+      </TextInputGroupMain>
+    );
+
+    const hintInput = screen.getByRole('textbox', { hidden: true });
+
+    expect(hintInput).toHaveAttribute('aria-hidden', 'true');
+  });
+
+  it('passes the hint prop to the hint input as its value', () => {
+    // we set the type of the main input to search here so that we can accurately target the hint input
+    render(
+      <TextInputGroupMain hint="value text" type="search">
+        Test
+      </TextInputGroupMain>
+    );
+
+    const hintInput = screen.getByDisplayValue('value text');
+
+    expect(hintInput).toBeVisible();
+  });
+
+  it('does not call onChange callback when the input does not change', () => {
+    const onChangeMock = jest.fn();
+
+    render(<TextInputGroupMain onChange={onChangeMock}>Test</TextInputGroupMain>);
+
+    expect(onChangeMock).not.toHaveBeenCalled();
+  });
+
+  it('calls the onChange callback when the input changes', () => {
+    const onChangeMock = jest.fn();
+
+    render(<TextInputGroupMain onChange={onChangeMock}>Test</TextInputGroupMain>);
+
+    const input = screen.getByRole('textbox');
+    userEvent.type(input, 'Test');
+
+    expect(onChangeMock).toHaveBeenCalledTimes(4);
+  });
+
+  it('does not call onFocus callback when the input does not get focus', () => {
+    const onFocusMock = jest.fn();
+
+    render(<TextInputGroupMain onFocus={onFocusMock}>Test</TextInputGroupMain>);
+
+    expect(onFocusMock).not.toHaveBeenCalled();
+  });
+
+  it('calls the onFocus callback when the input is focused', () => {
+    const onFocusMock = jest.fn();
+
+    render(<TextInputGroupMain onFocus={onFocusMock}>Test</TextInputGroupMain>);
+
+    const input = screen.getByRole('textbox');
+    userEvent.click(input);
+
+    expect(onFocusMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not call onBlur callback when the input does not lose focus', () => {
+    const onBlurMock = jest.fn();
+
+    render(<TextInputGroupMain onBlur={onBlurMock}>Test</TextInputGroupMain>);
+
+    const input = screen.getByRole('textbox');
+    userEvent.click(input);
+
+    expect(onBlurMock).not.toHaveBeenCalled();
+  });
+
+  it('calls the onBlur callback when the input loses focus', () => {
+    const onBlurMock = jest.fn();
+
+    render(<TextInputGroupMain onBlur={onBlurMock}>Test</TextInputGroupMain>);
+
+    const input = screen.getByRole('textbox');
+    userEvent.click(input);
+    userEvent.click(document.body);
+
+    expect(onBlurMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('matches the snapshot', () => {
+    const { asFragment } = render(<TextInputGroupMain>Test</TextInputGroupMain>);
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/src/components/TextInputGroup/__tests__/TextInputGroupUtilities.test.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+
+import { TextInputGroupUtilities } from '../TextInputGroupUtilities';
+
+describe('TextInputGroupUtilities', () => {
+  it('renders without children', () => {
+    render(<TextInputGroupUtilities data-testid="TextInputGroupUtilities" />);
+
+    expect(screen.getByTestId('TextInputGroupUtilities')).toBeVisible();
+  });
+
+  it('renders the children', () => {
+    render(<TextInputGroupUtilities>{<button>Test</button>}</TextInputGroupUtilities>);
+
+    expect(screen.getByRole('button', { name: 'Test' })).toBeVisible();
+  });
+
+  it('renders with class pf-c-text-input-group__utilities', () => {
+    render(<TextInputGroupUtilities>Test</TextInputGroupUtilities>);
+
+    const utilities = screen.getByText('Test');
+
+    expect(utilities).toHaveClass('pf-c-text-input-group__utilities');
+  });
+
+  it('matches the snapshot', () => {
+    const { asFragment } = render(<TextInputGroupUtilities>{<button>Test</button>}</TextInputGroupUtilities>);
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/src/components/TextInputGroup/__tests__/__snapshots__/TextInputGroup.test.tsx.snap

@@ -1,212 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`TextInputGroup gets custom class and id 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-text-input-group custom-class"
-    id="test-id"
-  >
-    <div
-      class="pf-c-text-input-group__main"
-    >
-      Foo
-      <span
-        class="pf-c-text-input-group__text"
-      >
-        <input
-          aria-label="Type to filter"
-          class="pf-c-text-input-group__text-input"
-          type="text"
-          value=""
-        />
-      </span>
-    </div>
-    <div
-      class="pf-c-text-input-group__utilities"
-    />
-  </div>
-</DocumentFragment>
-`;
-
-exports[`TextInputGroup renders content 1`] = `
+exports[`TextInputGroup matches the snapshot 1`] = `
 <DocumentFragment>
   <div
     class="pf-c-text-input-group"
   >
-    <div
-      class="pf-c-text-input-group__main"
-    >
-      Foo
-      <span
-        class="pf-c-text-input-group__text"
-      >
-        <input
-          aria-label="Type to filter"
-          class="pf-c-text-input-group__text-input"
-          type="text"
-          value=""
-        />
-      </span>
-    </div>
-    <div
-      class="pf-c-text-input-group__utilities"
-    />
-  </div>
-</DocumentFragment>
-`;
-
-exports[`TextInputGroup renders with the proper stying when disabled 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-text-input-group pf-m-disabled"
-  >
-    <div
-      class="pf-c-text-input-group__main"
-    >
-      Foo
-      <span
-        class="pf-c-text-input-group__text"
-      >
-        <input
-          aria-label="Type to filter"
-          class="pf-c-text-input-group__text-input"
-          disabled=""
-          type="text"
-          value=""
-        />
-      </span>
-    </div>
-    <div
-      class="pf-c-text-input-group__utilities"
-    />
-  </div>
-</DocumentFragment>
-`;
-
-exports[`TextInputGroupMain input is disabled when TextInputGroupContext isDisabled is true 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-text-input-group__main"
-  >
-    <span
-      class="pf-c-text-input-group__text"
-    >
-      <input
-        aria-label="Type to filter"
-        class="pf-c-text-input-group__text-input"
-        disabled=""
-        type="text"
-        value=""
-      />
-    </span>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`TextInputGroupMain input is not disabled when TextInputGroupContext isDisabled is false 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-text-input-group__main"
-  >
-    <span
-      class="pf-c-text-input-group__text"
-    >
-      <input
-        aria-label="Type to filter"
-        class="pf-c-text-input-group__text-input"
-        type="text"
-        value=""
-      />
-    </span>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`TextInputGroupMain renders content 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-text-input-group__main"
-  >
-    Foo
-    <span
-      class="pf-c-text-input-group__text"
-    >
-      <input
-        aria-label="Type to filter"
-        class="pf-c-text-input-group__text-input"
-        type="text"
-        value=""
-      />
-    </span>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`TextInputGroupMain renders given input icon props 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-text-input-group__main pf-m-icon"
-  >
-    Foo
-    <span
-      class="pf-c-text-input-group__text"
-    >
-      <span
-        class="pf-c-text-input-group__icon"
-      >
-        <svg
-          aria-hidden="true"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          style="vertical-align: -0.125em;"
-          viewBox="0 0 512 512"
-          width="1em"
-        >
-          <path
-            d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
-          />
-        </svg>
-      </span>
-      <input
-        aria-label="Type to filter"
-        class="pf-c-text-input-group__text-input"
-        type="text"
-        value=""
-      />
-    </span>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`TextInputGroupMain renders the input with custom aria label when given 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-text-input-group__main"
-  >
-    Foo
-    <span
-      class="pf-c-text-input-group__text"
-    >
-      <input
-        aria-label="Foo"
-        class="pf-c-text-input-group__text-input"
-        type="text"
-        value=""
-      />
-    </span>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`TextInputGroupUtilities renders the content 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-text-input-group__utilities"
-  >
-    <button>
-      Foo
-    </button>
+    Test
   </div>
 </DocumentFragment>
 `;

package/src/components/TextInputGroup/__tests__/__snapshots__/TextInputGroupMain.test.tsx.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TextInputGroupMain matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-text-input-group__main"
+  >
+    Test
+    <span
+      class="pf-c-text-input-group__text"
+    >
+      <input
+        aria-label="Type to filter"
+        class="pf-c-text-input-group__text-input"
+        type="text"
+        value=""
+      />
+    </span>
+  </div>
+</DocumentFragment>
+`;

package/src/components/TextInputGroup/__tests__/__snapshots__/TextInputGroupUtilities.test.tsx.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TextInputGroupUtilities matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-text-input-group__utilities"
+  >
+    <button>
+      Test
+    </button>
+  </div>
+</DocumentFragment>
+`;

package/src/components/Wizard/Wizard.tsx

@@ -54,6 +54,8 @@ export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
   descriptionId?: string;
   /** The wizard description */
   description?: React.ReactNode;
+  /** Component type of the description */
+  descriptionComponent?: 'div' | 'p';
   /** Flag indicating whether the close button should be in the header */
   hideClose?: boolean;
   /** Callback function to close the wizard */
@@ -111,6 +113,7 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
   static defaultProps: PickOptional<WizardProps> = {
     title: null,
     description: '',
+    descriptionComponent: 'p',
     className: '',
     startAtStep: 1,
     nextButtonText: 'Next',
@@ -312,6 +315,7 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
       height,
       title,
       description,
+      descriptionComponent,
       onClose,
       onSave,
       onBack,
@@ -453,6 +457,7 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
               onClose={onClose}
               title={title}
               description={description}
+              descriptionComponent={descriptionComponent}
               closeButtonAriaLabel={closeButtonAriaLabel}
               hideClose={hideClose}
             />

package/src/components/Wizard/WizardHeader.tsx

@@ -12,6 +12,8 @@ export interface WizardHeaderProps {
   title: string;
   /** Description of the wizard */
   description?: React.ReactNode;
+  /** Component type of the description */
+  descriptionComponent?: 'div' | 'p';
   /** Flag indicating whether the close button should be in the header */
   hideClose?: boolean;
   /** Aria-label applied to the X (Close) button */
@@ -29,6 +31,7 @@ export const WizardHeader: React.FunctionComponent<WizardHeaderProps> = ({
   hideClose,
   closeButtonAriaLabel,
   titleId,
+  descriptionComponent: Component = 'p',
   descriptionId
 }: WizardHeaderProps) => (
   <div className={css(styles.wizardHeader)}>
@@ -41,9 +44,9 @@ export const WizardHeader: React.FunctionComponent<WizardHeaderProps> = ({
       {title || <>&nbsp;</>}
     </Title>
     {description && (
-      <p className={css(styles.wizardDescription)} id={descriptionId}>
+      <Component className={css(styles.wizardDescription)} id={descriptionId}>
         {description}
-      </p>
+      </Component>
     )}
   </div>
 );