@patternfly/react-core 4.202.30 → 4.202.31

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

@@ -1,6 +1,9 @@
 import React from 'react';
-import { render } from '@testing-library/react';
-import { mount, shallow } from 'enzyme';
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+
 import { TextInput, TextInputBase } from '../TextInput';
 import { ValidatedOptions } from '../../../helpers/constants';
 
@@ -9,84 +12,82 @@ const props = {
   value: 'test input'
 };
 
-test('input passes value and event to onChange handler', () => {
-  const newValue = 'new test input';
-  const event = {
-    currentTarget: { value: newValue }
-  };
-  const view = shallow(<TextInputBase {...props} aria-label="test input" />);
-  view.find('input').simulate('change', event);
-  expect(props.onChange).toBeCalledWith(newValue, event);
-});
+describe('TextInput', () => {
+  test('input passes value and event to onChange handler', () => {
+    render(<TextInputBase {...props} value='' aria-label="test input" />);
 
-test('simple text input', () => {
-  const view = render(<TextInput {...props} aria-label="simple text input" />);
-  expect(view.container).toMatchSnapshot();
-});
+    userEvent.type(screen.getByLabelText('test input'), 'a');
+    expect(props.onChange).toHaveBeenCalledWith('a', expect.any(Object));
+  });
 
-test('disabled text input', () => {
-  const view = render(<TextInput isDisabled aria-label="disabled text input" />);
-  expect(view.container).toMatchSnapshot();
-});
+  test('simple text input', () => {
+    const { asFragment } = render(<TextInput {...props} aria-label="simple text input" />);
+    expect(asFragment()).toMatchSnapshot();
+  });
 
-test('readonly text input', () => {
-  const view = render(<TextInput isReadOnly value="read only" aria-label="readonly text input" />);
-  expect(view.container).toMatchSnapshot();
-});
+  test('disabled text input', () => {
+    const { asFragment } = render(<TextInput isDisabled aria-label="disabled text input" />);
+    expect(asFragment()).toMatchSnapshot();
+  });
 
-test('invalid text input', () => {
-  const view = render(<TextInput {...props} required validated={'error'} aria-label="invalid text input" />);
-  expect(view.container).toMatchSnapshot();
-});
+  test('readonly text input', () => {
+    const { asFragment } = render(<TextInput isReadOnly value="read only" aria-label="readonly text input" />);
+    expect(asFragment()).toMatchSnapshot();
+  });
 
-test('validated text input success', () => {
-  const view = mount(
-    <TextInput {...props} required validated={ValidatedOptions.success} aria-label="validated text input" />
-  );
-  expect(view.find('.pf-c-form-control.pf-m-success').length).toBe(1);
-  expect(view).toMatchSnapshot();
-});
+  test('invalid text input', () => {
+    const { asFragment } = render(<TextInput {...props} required validated={'error'} aria-label="invalid text input" />);
+    expect(asFragment()).toMatchSnapshot();
+  });
 
-test('validated text input success', () => {
-  const view = mount(
-    <TextInput {...props} required validated={ValidatedOptions.warning} aria-label="validated text input" />
-  );
-  expect(view.find('.pf-c-form-control.pf-m-warning').length).toBe(1);
-  expect(view).toMatchSnapshot();
-});
+  test('validated text input success', () => {
+    render(<TextInput {...props} required validated={ValidatedOptions.success} aria-label="validated text input" />);
+    expect(screen.getByLabelText('validated text input')).toHaveClass('pf-m-success');
+  });
 
+  test('validated text input warning', () => {
+    render(<TextInput {...props} required validated={ValidatedOptions.warning} aria-label="validated text input" />);
+    expect(screen.getByLabelText('validated text input')).toHaveClass('pf-m-warning');
+  });
 
-test('validated text input', () => {
-  const view = render(
-    <TextInput {...props} required validated={ValidatedOptions.error} aria-label="validated text input" />
-  );
-  expect(view.container).toMatchSnapshot();
-});
+  test('validated text input error', () => {
+    const { asFragment } = render(<TextInput {...props} required validated={ValidatedOptions.error} aria-label="validated text input" />);
+    expect(asFragment()).toMatchSnapshot();
+  });
 
-test('should throw console error when no aria-label, id or aria-labelledby is given', () => {
-  const myMock = jest.fn();
-  global.console = { ...global.console, error: myMock };
-  render(<TextInput {...props} />);
-  expect(myMock).toBeCalled();
-});
+  test('should throw console error when no aria-label, id or aria-labelledby is given', () => {
+    const myMock = jest.fn();
+    global.console = { ...global.console, error: myMock };
 
-test('should not throw console error when id is given but no aria-label or aria-labelledby', () => {
-  const myMock = jest.fn();
-  global.console = { ...global.console, error: myMock };
-  render(<TextInput {...props} id="5" />);
-  expect(myMock).not.toBeCalled();
-});
+    render(<TextInput {...props} />);
 
-test('should not throw console error when aria-label is given but no id or aria-labelledby', () => {
-  const myMock = jest.fn();
-  global.console = { ...global.console, error: myMock };
-  render(<TextInput {...props} aria-label="test input" />);
-  expect(myMock).not.toBeCalled();
-});
+    expect(myMock).toBeCalled();
+  });
+
+  test('should not throw console error when id is given but no aria-label or aria-labelledby', () => {
+    const myMock = jest.fn();
+    global.console = { ...global.console, error: myMock };
+
+    render(<TextInput {...props} id="5" />);
+
+    expect(myMock).not.toBeCalled();
+  });
+
+  test('should not throw console error when aria-label is given but no id or aria-labelledby', () => {
+    const myMock = jest.fn();
+    global.console = { ...global.console, error: myMock };
+
+    render(<TextInput {...props} aria-label="test input" />);
+
+    expect(myMock).not.toBeCalled();
+  });
+
+  test('should not throw console error when aria-labelledby is given but no id or aria-label', () => {
+    const myMock = jest.fn();
+    global.console = { ...global.console, error: myMock };
+
+    render(<TextInput {...props} aria-labelledby="test input" />);
 
-test('should not throw console error when aria-labelledby is given but no id or aria-label', () => {
-  const myMock = jest.fn();
-  global.console = { ...global.console, error: myMock };
-  render(<TextInput {...props} aria-labelledby="test input" />);
-  expect(myMock).not.toBeCalled();
+    expect(myMock).not.toBeCalled();
+  });
 });

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`disabled text input 1`] = `
-<div>
+exports[`TextInput disabled text input 1`] = `
+<DocumentFragment>
   <input
     aria-invalid="false"
     aria-label="disabled text input"
@@ -13,11 +13,11 @@ exports[`disabled text input 1`] = `
     type="text"
     value=""
   />
-</div>
+</DocumentFragment>
 `;
 
-exports[`invalid text input 1`] = `
-<div>
+exports[`TextInput invalid text input 1`] = `
+<DocumentFragment>
   <input
     aria-invalid="true"
     aria-label="invalid text input"
@@ -28,11 +28,11 @@ exports[`invalid text input 1`] = `
     type="text"
     value="test input"
   />
-</div>
+</DocumentFragment>
 `;
 
-exports[`readonly text input 1`] = `
-<div>
+exports[`TextInput readonly text input 1`] = `
+<DocumentFragment>
   <input
     aria-invalid="false"
     aria-label="readonly text input"
@@ -44,11 +44,11 @@ exports[`readonly text input 1`] = `
     type="text"
     value="read only"
   />
-</div>
+</DocumentFragment>
 `;
 
-exports[`simple text input 1`] = `
-<div>
+exports[`TextInput simple text input 1`] = `
+<DocumentFragment>
   <input
     aria-invalid="false"
     aria-label="simple text input"
@@ -59,11 +59,11 @@ exports[`simple text input 1`] = `
     type="text"
     value="test input"
   />
-</div>
+</DocumentFragment>
 `;
 
-exports[`validated text input 1`] = `
-<div>
+exports[`TextInput validated text input error 1`] = `
+<DocumentFragment>
   <input
     aria-invalid="true"
     aria-label="validated text input"
@@ -74,93 +74,5 @@ exports[`validated text input 1`] = `
     type="text"
     value="test input"
   />
-</div>
-`;
-
-exports[`validated text input success 1`] = `
-<TextInput
-  aria-label="validated text input"
-  onChange={[MockFunction]}
-  required={true}
-  validated="success"
-  value="test input"
->
-  <TextInputBase
-    aria-label="validated text input"
-    className=""
-    innerRef={null}
-    isDisabled={false}
-    isIconSprite={false}
-    isLeftTruncated={false}
-    isReadOnly={false}
-    isRequired={false}
-    onChange={[MockFunction]}
-    ouiaSafe={true}
-    required={true}
-    type="text"
-    validated="success"
-    value="test input"
-  >
-    <input
-      aria-invalid={false}
-      aria-label="validated text input"
-      className="pf-c-form-control pf-m-success"
-      data-ouia-component-id="OUIA-Generated-TextInputBase-6"
-      data-ouia-component-type="PF4/TextInput"
-      data-ouia-safe={true}
-      disabled={false}
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      readOnly={false}
-      required={false}
-      type="text"
-      value="test input"
-    />
-  </TextInputBase>
-</TextInput>
-`;
-
-exports[`validated text input success 2`] = `
-<TextInput
-  aria-label="validated text input"
-  onChange={[MockFunction]}
-  required={true}
-  validated="warning"
-  value="test input"
->
-  <TextInputBase
-    aria-label="validated text input"
-    className=""
-    innerRef={null}
-    isDisabled={false}
-    isIconSprite={false}
-    isLeftTruncated={false}
-    isReadOnly={false}
-    isRequired={false}
-    onChange={[MockFunction]}
-    ouiaSafe={true}
-    required={true}
-    type="text"
-    validated="warning"
-    value="test input"
-  >
-    <input
-      aria-invalid={false}
-      aria-label="validated text input"
-      className="pf-c-form-control pf-m-warning"
-      data-ouia-component-id="OUIA-Generated-TextInputBase-7"
-      data-ouia-component-type="PF4/TextInput"
-      data-ouia-safe={true}
-      disabled={false}
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      readOnly={false}
-      required={false}
-      type="text"
-      value="test input"
-    />
-  </TextInputBase>
-</TextInput>
+</DocumentFragment>
 `;

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

@@ -1,6 +1,8 @@
 import React from 'react';
-import { render } from '@testing-library/react';
-import { mount } from 'enzyme';
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
 import { TextInputGroup, TextInputGroupContext } from '../TextInputGroup';
 import { TextInputGroupMain } from '../TextInputGroupMain';
 import { TextInputGroupUtilities } from '../TextInputGroupUtilities';
@@ -8,33 +10,33 @@ import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 describe('TextInputGroup', () => {
   test('renders content', () => {
-    const view = render(
+    const { asFragment } = render(
       <TextInputGroup>
         <TextInputGroupMain>Foo</TextInputGroupMain>
         <TextInputGroupUtilities />
       </TextInputGroup>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('gets custom class and id', () => {
-    const view = render(
+    const { asFragment } = render(
       <TextInputGroup className="custom-class" id="test-id">
         <TextInputGroupMain>Foo</TextInputGroupMain>
         <TextInputGroupUtilities />
       </TextInputGroup>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders with the proper stying when disabled', () => {
-    const view = render(
+    const { asFragment } = render(
       <TextInputGroup isDisabled>
         <TextInputGroupMain>Foo</TextInputGroupMain>
         <TextInputGroupUtilities />
       </TextInputGroup>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('passes isDisabled=false to children via a context when isDisabled prop is not passed', () => {
@@ -44,12 +46,13 @@ describe('TextInputGroup', () => {
       return <div>{context.isDisabled ? 'is disabled' : 'not disabled'}</div>;
     };
 
-    const view = mount(
+    render(
       <TextInputGroup>
         <TestComponent />
       </TextInputGroup>
     );
-    expect(view.text()).toBe('not disabled');
+
+    expect(screen.queryByText('is disabled')).toBeNull();
   });
 
   test('passes isDisabled=true to children via a context when isDisabled prop is passed', () => {
@@ -59,108 +62,131 @@ describe('TextInputGroup', () => {
       return <div>{context.isDisabled ? 'is disabled' : 'not disabled'}</div>;
     };
 
-    const view = mount(
+    render(
       <TextInputGroup isDisabled>
         <TestComponent />
       </TextInputGroup>
     );
-    expect(view.text()).toBe('is disabled');
+
+    expect(screen.queryByText('not disabled')).toBeNull();
   });
 });
 
 describe('TextInputGroupMain', () => {
   test('renders content', () => {
-    const view = render(<TextInputGroupMain>Foo</TextInputGroupMain>);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<TextInputGroupMain>Foo</TextInputGroupMain>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders given input icon props', () => {
-    const view = render(<TextInputGroupMain icon={<SearchIcon />}>Foo</TextInputGroupMain>);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<TextInputGroupMain icon={<SearchIcon />}>Foo</TextInputGroupMain>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders the input with custom aria label when given', () => {
-    const view = render(<TextInputGroupMain aria-label="Foo">Foo</TextInputGroupMain>);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<TextInputGroupMain aria-label="Foo">Foo</TextInputGroupMain>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('does not call onChange callback when the input does not change', () => {
     const onChangeMock = jest.fn();
 
-    const view = render(<TextInputGroupMain onChange={onChangeMock}>Foo</TextInputGroupMain>);
+    render(<TextInputGroupMain onChange={onChangeMock}>Foo</TextInputGroupMain>);
     expect(onChangeMock).not.toHaveBeenCalled();
   });
 
   test('calls the onChange callback when the input changes', () => {
     const onChangeMock = jest.fn();
 
-    const view = mount(<TextInputGroupMain onChange={onChangeMock}>Foo</TextInputGroupMain>);
-    view.find('input').simulate('change', { target: { value: 'Foo' } });
-    expect(onChangeMock).toHaveBeenCalledTimes(1);
+    render(<TextInputGroupMain onChange={onChangeMock}>Foo</TextInputGroupMain>);
+
+    userEvent.type(screen.getByText('Foo').querySelector('input'), 'Foo');
+    expect(onChangeMock).toHaveBeenCalled();
   });
 
   test('does not call onFocus callback when the input does not get focus', () => {
     const onFocusMock = jest.fn();
 
-    const view = render(<TextInputGroupMain onFocus={onFocusMock}>Foo</TextInputGroupMain>);
+    render(<TextInputGroupMain onFocus={onFocusMock}>Foo</TextInputGroupMain>);
     expect(onFocusMock).not.toHaveBeenCalled();
   });
 
   test('calls the onFocus callback when the input is focused', () => {
     const onFocusMock = jest.fn();
 
-    const view = mount(<TextInputGroupMain onFocus={onFocusMock}>Foo</TextInputGroupMain>);
-    view.find('input').simulate('focus');
+    render(<TextInputGroupMain onFocus={onFocusMock}>Foo</TextInputGroupMain>);
+    userEvent.click(screen.getByText('Foo').querySelector('input'));
     expect(onFocusMock).toHaveBeenCalledTimes(1);
   });
 
   test('does not call onBlur callback when the input does not lose focus', () => {
     const onBlurMock = jest.fn();
 
-    const view = render(<TextInputGroupMain onBlur={onBlurMock}>Foo</TextInputGroupMain>);
+    render(<TextInputGroupMain onBlur={onBlurMock}>Foo</TextInputGroupMain>);
+
+    userEvent.type(screen.getByText('Foo').querySelector('input'), 'Foo');
     expect(onBlurMock).not.toHaveBeenCalled();
   });
 
   test('calls the onFocus callback when the input loses focus', () => {
     const onBlurMock = jest.fn();
 
-    const view = mount(<TextInputGroupMain onBlur={onBlurMock}>Foo</TextInputGroupMain>);
-    view.find('input').simulate('blur');
-    expect(onBlurMock).toHaveBeenCalledTimes(1);
+    render(
+      <>
+        <div>Other element</div>
+        <TextInputGroupMain onBlur={onBlurMock}>Foo</TextInputGroupMain>
+      </>
+    );
+
+    userEvent.type(screen.getByText('Foo').querySelector('input'), 'Foo');
+    userEvent.click(screen.getByText('Other element'));
+
+    expect(onBlurMock).toHaveBeenCalled();
   });
 
   test('input type defaults to text', () => {
-    const view = mount(<TextInputGroupMain>Foo</TextInputGroupMain>);
-    expect(view.find('input').props()['type']).toBe('text');
+    render(<TextInputGroupMain>Foo</TextInputGroupMain>);
+    expect(
+      screen
+        .getByText('Foo')
+        .querySelector('input')
+        .getAttribute('type')
+    ).toEqual('text');
   });
 
   test('input type is updated when a different type is passed', () => {
-    const view = mount(<TextInputGroupMain type="search">Foo</TextInputGroupMain>);
-    expect(view.find('input').props()['type']).toBe('search');
+    render(<TextInputGroupMain type="search">Foo</TextInputGroupMain>);
+    expect(
+      screen
+        .getByText('Foo')
+        .querySelector('input')
+        .getAttribute('type')
+    ).toEqual('search');
   });
 
   test('input is not disabled when TextInputGroupContext isDisabled is false', () => {
-    const view = mount(
+    const { asFragment } = render(
       <TextInputGroupContext.Provider value={{ isDisabled: false }}>
         <TextInputGroupMain />
       </TextInputGroupContext.Provider>
     );
-    expect(view.find('input').props()['disabled']).toBe(false);
+
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('input is disabled when TextInputGroupContext isDisabled is true', () => {
-    const view = mount(
+    const { asFragment } = render(
       <TextInputGroupContext.Provider value={{ isDisabled: true }}>
         <TextInputGroupMain />
       </TextInputGroupContext.Provider>
     );
-    expect(view.find('input').props()['disabled']).toBe(true);
+    expect(asFragment()).toMatchSnapshot();
   });
 });
 
 describe('TextInputGroupUtilities', () => {
   test('renders the content', () => {
-    const view = render(<TextInputGroupUtilities>{<button>Foo</button>}</TextInputGroupUtilities>);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<TextInputGroupUtilities>{<button>Foo</button>}</TextInputGroupUtilities>);
+    expect(asFragment()).toMatchSnapshot();
   });
 });