@patternfly/react-core 4.202.34 → 4.202.37

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

@@ -1,192 +1,93 @@
 import React from 'react';
-
 import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
 
 import { TextInputGroup, TextInputGroupContext } from '../TextInputGroup';
-import { TextInputGroupMain } from '../TextInputGroupMain';
-import { TextInputGroupUtilities } from '../TextInputGroupUtilities';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 describe('TextInputGroup', () => {
-  test('renders content', () => {
-    const { asFragment } = render(
-      <TextInputGroup>
-        <TextInputGroupMain>Foo</TextInputGroupMain>
-        <TextInputGroupUtilities />
-      </TextInputGroup>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('gets custom class and id', () => {
-    const { asFragment } = render(
-      <TextInputGroup className="custom-class" id="test-id">
-        <TextInputGroupMain>Foo</TextInputGroupMain>
-        <TextInputGroupUtilities />
-      </TextInputGroup>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
+  it('renders without children', () => {
+    render(<TextInputGroup data-testid="TextInputGroup" />);
 
-  test('renders with the proper stying when disabled', () => {
-    const { asFragment } = render(
-      <TextInputGroup isDisabled>
-        <TextInputGroupMain>Foo</TextInputGroupMain>
-        <TextInputGroupUtilities />
-      </TextInputGroup>
-    );
-    expect(asFragment()).toMatchSnapshot();
+    expect(screen.getByTestId('TextInputGroup')).toBeVisible();
   });
 
-  test('passes isDisabled=false to children via a context when isDisabled prop is not passed', () => {
-    const TestComponent: React.FunctionComponent = () => {
-      const context = React.useContext(TextInputGroupContext);
+  it('renders children', () => {
+    render(<TextInputGroup>Test</TextInputGroup>);
 
-      return <div>{context.isDisabled ? 'is disabled' : 'not disabled'}</div>;
-    };
-
-    render(
-      <TextInputGroup>
-        <TestComponent />
-      </TextInputGroup>
-    );
-
-    expect(screen.queryByText('is disabled')).toBeNull();
+    expect(screen.getByText('Test')).toBeVisible();
   });
 
-  test('passes isDisabled=true to children via a context when isDisabled prop is passed', () => {
-    const TestComponent: React.FunctionComponent = () => {
-      const context = React.useContext(TextInputGroupContext);
+  it('renders with class pf-c-text-input-group', () => {
+    render(<TextInputGroup>Test</TextInputGroup>);
 
-      return <div>{context.isDisabled ? 'is disabled' : 'not disabled'}</div>;
-    };
-
-    render(
-      <TextInputGroup isDisabled>
-        <TestComponent />
-      </TextInputGroup>
-    );
+    const inputGroup = screen.getByText('Test');
 
-    expect(screen.queryByText('not disabled')).toBeNull();
+    expect(inputGroup).toHaveClass('pf-c-text-input-group');
   });
-});
 
-describe('TextInputGroupMain', () => {
-  test('renders content', () => {
-    const { asFragment } = render(<TextInputGroupMain>Foo</TextInputGroupMain>);
-    expect(asFragment()).toMatchSnapshot();
-  });
+  it('renders with custom class names provided via prop', () => {
+    render(<TextInputGroup className="custom-class">Test</TextInputGroup>);
 
-  test('renders given input icon props', () => {
-    const { asFragment } = render(<TextInputGroupMain icon={<SearchIcon />}>Foo</TextInputGroupMain>);
-    expect(asFragment()).toMatchSnapshot();
-  });
+    const inputGroup = screen.getByText('Test');
 
-  test('renders the input with custom aria label when given', () => {
-    const { asFragment } = render(<TextInputGroupMain aria-label="Foo">Foo</TextInputGroupMain>);
-    expect(asFragment()).toMatchSnapshot();
+    expect(inputGroup).toHaveClass('custom-class');
   });
 
-  test('does not call onChange callback when the input does not change', () => {
-    const onChangeMock = jest.fn();
+  it('does not render with the pf-m-disabled class when not disabled', () => {
+    render(<TextInputGroup>Test</TextInputGroup>);
 
-    render(<TextInputGroupMain onChange={onChangeMock}>Foo</TextInputGroupMain>);
-    expect(onChangeMock).not.toHaveBeenCalled();
-  });
-
-  test('calls the onChange callback when the input changes', () => {
-    const onChangeMock = jest.fn();
+    const inputGroup = screen.getByText('Test');
 
-    render(<TextInputGroupMain onChange={onChangeMock}>Foo</TextInputGroupMain>);
-
-    userEvent.type(screen.getByText('Foo').querySelector('input'), 'Foo');
-    expect(onChangeMock).toHaveBeenCalled();
+    expect(inputGroup).not.toHaveClass('pf-m-disabled');
   });
 
-  test('does not call onFocus callback when the input does not get focus', () => {
-    const onFocusMock = jest.fn();
+  it('renders with the pf-m-disabled class when disabled', () => {
+    render(<TextInputGroup isDisabled>Test</TextInputGroup>);
 
-    render(<TextInputGroupMain onFocus={onFocusMock}>Foo</TextInputGroupMain>);
-    expect(onFocusMock).not.toHaveBeenCalled();
-  });
+    const inputGroup = screen.getByText('Test');
 
-  test('calls the onFocus callback when the input is focused', () => {
-    const onFocusMock = jest.fn();
-
-    render(<TextInputGroupMain onFocus={onFocusMock}>Foo</TextInputGroupMain>);
-    userEvent.click(screen.getByText('Foo').querySelector('input'));
-    expect(onFocusMock).toHaveBeenCalledTimes(1);
+    expect(inputGroup).toHaveClass('pf-m-disabled');
   });
 
-  test('does not call onBlur callback when the input does not lose focus', () => {
-    const onBlurMock = jest.fn();
-
-    render(<TextInputGroupMain onBlur={onBlurMock}>Foo</TextInputGroupMain>);
-
-    userEvent.type(screen.getByText('Foo').querySelector('input'), 'Foo');
-    expect(onBlurMock).not.toHaveBeenCalled();
-  });
+  it('passes isDisabled=false to children via a context when isDisabled prop is not passed', () => {
+    const TestComponent: React.FunctionComponent = () => {
+      const context = React.useContext(TextInputGroupContext);
 
-  test('calls the onFocus callback when the input loses focus', () => {
-    const onBlurMock = jest.fn();
+      return <button disabled={context.isDisabled} />;
+    };
 
     render(
-      <>
-        <div>Other element</div>
-        <TextInputGroupMain onBlur={onBlurMock}>Foo</TextInputGroupMain>
-      </>
+      <TextInputGroup>
+        <TestComponent />
+      </TextInputGroup>
     );
 
-    userEvent.type(screen.getByText('Foo').querySelector('input'), 'Foo');
-    userEvent.click(screen.getByText('Other element'));
+    const testComponent = screen.getByRole('button');
 
-    expect(onBlurMock).toHaveBeenCalled();
+    expect(testComponent).not.toBeDisabled();
   });
 
-  test('input type defaults to text', () => {
-    render(<TextInputGroupMain>Foo</TextInputGroupMain>);
-    expect(
-      screen
-        .getByText('Foo')
-        .querySelector('input')
-        .getAttribute('type')
-    ).toEqual('text');
-  });
+  it('passes isDisabled=true to children via a context when isDisabled prop is passed', () => {
+    const TestComponent: React.FunctionComponent = () => {
+      const context = React.useContext(TextInputGroupContext);
 
-  test('input type is updated when a different type is passed', () => {
-    render(<TextInputGroupMain type="search">Foo</TextInputGroupMain>);
-    expect(
-      screen
-        .getByText('Foo')
-        .querySelector('input')
-        .getAttribute('type')
-    ).toEqual('search');
-  });
+      return <button disabled={context.isDisabled} />;
+    };
 
-  test('input is not disabled when TextInputGroupContext isDisabled is false', () => {
-    const { asFragment } = render(
-      <TextInputGroupContext.Provider value={{ isDisabled: false }}>
-        <TextInputGroupMain />
-      </TextInputGroupContext.Provider>
+    render(
+      <TextInputGroup isDisabled>
+        <TestComponent />
+      </TextInputGroup>
     );
 
-    expect(asFragment()).toMatchSnapshot();
-  });
+    const testComponent = screen.getByRole('button');
 
-  test('input is disabled when TextInputGroupContext isDisabled is true', () => {
-    const { asFragment } = render(
-      <TextInputGroupContext.Provider value={{ isDisabled: true }}>
-        <TextInputGroupMain />
-      </TextInputGroupContext.Provider>
-    );
-    expect(asFragment()).toMatchSnapshot();
+    expect(testComponent).toBeDisabled();
   });
-});
 
-describe('TextInputGroupUtilities', () => {
-  test('renders the content', () => {
-    const { asFragment } = render(<TextInputGroupUtilities>{<button>Foo</button>}</TextInputGroupUtilities>);
+  it('matches the snapshot', () => {
+    const { asFragment } = render(<TextInputGroup>Test</TextInputGroup>);
+
     expect(asFragment()).toMatchSnapshot();
   });
 });

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();
+  });
+});