@patternfly/react-core 4.202.28 → 4.202.31

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TextInputGroup gets custom class and id 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-text-input-group custom-class"
     id="test-id"
@@ -25,11 +25,11 @@ exports[`TextInputGroup gets custom class and id 1`] = `
       class="pf-c-text-input-group__utilities"
     />
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`TextInputGroup renders content 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-text-input-group"
   >
@@ -52,11 +52,11 @@ exports[`TextInputGroup renders content 1`] = `
       class="pf-c-text-input-group__utilities"
     />
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`TextInputGroup renders with the proper stying when disabled 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-text-input-group pf-m-disabled"
   >
@@ -80,11 +80,50 @@ exports[`TextInputGroup renders with the proper stying when disabled 1`] = `
       class="pf-c-text-input-group__utilities"
     />
   </div>
-</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`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-text-input-group__main"
   >
@@ -100,11 +139,11 @@ exports[`TextInputGroupMain renders content 1`] = `
       />
     </span>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`TextInputGroupMain renders given input icon props 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-text-input-group__main pf-m-icon"
   >
@@ -137,11 +176,11 @@ exports[`TextInputGroupMain renders given input icon props 1`] = `
       />
     </span>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`TextInputGroupMain renders the input with custom aria label when given 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-text-input-group__main"
   >
@@ -157,11 +196,11 @@ exports[`TextInputGroupMain renders the input with custom aria label when given
       />
     </span>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`TextInputGroupUtilities renders the content 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-text-input-group__utilities"
   >
@@ -169,5 +208,5 @@ exports[`TextInputGroupUtilities renders the content 1`] = `
       Foo
     </button>
   </div>
-</div>
+</DocumentFragment>
 `;

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

@@ -1,139 +1,142 @@
 import * as React from 'react';
-import { render } from '@testing-library/react';
-import { mount } from 'enzyme';
-import { act } from 'react-dom/test-utils';
-import { TimePicker } from '../TimePicker'
 
-describe('test timepicker onChange method with valid values', () => {
-  const testOnChange = ({ inputProps, expects }) => {
-    const onChange = jest.fn();
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
 
-    const event: any = {
-      currentTarget: { value: inputProps.value }
-    };
-    const view = mount(<TimePicker onChange={onChange} {...inputProps} aria-label="time picker" />);
-
-    act(() => {
-      view.find('input').prop('onChange')(event);
-    })
-    expect(onChange).toBeCalledWith(inputProps.value, expects.hour, expects.minutes, expects.seconds, true);
-  }
-
-  test('should return the correct value using the AM/PM pattern - midnight', () => {
-    testOnChange({ inputProps: { value: "12:00 AM", is24Hour: false }, expects: { hour: 0, minutes: 0, seconds: null }})
-  })
-
-  test('should return the correct value using the AM/PM pattern - midday', () => {
-    testOnChange({ inputProps: { value: "12:35 PM", is24Hour: false }, expects: { hour: 12, minutes: 35, seconds: null }})
-  })
-
-  test('should return the correct value using the AM/PM pattern - last minute of the day', () => {
-    testOnChange({ inputProps: { value: "11:59 PM", is24Hour: false }, expects: { hour: 23, minutes: 59, seconds: null }})
-  })
-
-  test('should return the correct value using the 24h pattern - midnight', () => {
-    testOnChange({ inputProps: { value: "00:00:00", is24Hour: true, includeSeconds: true }, expects: { hour: 0, minutes: 0, seconds: 0 }})
-  })
-
-  test('should return the correct value using the 24h pattern - midday', () => {
-    testOnChange({ inputProps: { value: "12:35", is24Hour: false }, expects: { hour: 12, minutes: 35, seconds: null }})
-  })
-
-  test('should return the correct value using the 24h pattern - last minute of the day', () => {
-    testOnChange({ inputProps: { value: "23:59", is24Hour: true }, expects: { hour: 23, minutes: 59, seconds: null }})
-  })
-})
+import { TimePicker } from '../TimePicker';
 
-describe('test isInvalid', () => {
-  test('should be valid by default', () => {
-    const validateTime = (time: string) => {
-      return true;
-    }
+describe('TimePicker', () => {
+  describe('test timepicker onChange method with valid values', () => {
+    const testOnChange = ({ inputProps, expects }) => {
+      const onChange = jest.fn();
+      render(<TimePicker onChange={onChange} {...inputProps} aria-label="time picker" />);
 
-    const view = mount(<TimePicker value={"00:00"} validateTime={validateTime} aria-label="time picker" />);
-
-    expect(view.find('.pf-m-error')).toHaveLength(0);
-  })
-
-  test('should stay valid after onChange', () => {
-    const validateTime = (time: string) => {
-      return true;
-    }
-
-    const event: any = {
-      currentTarget: { value: "01:00" }
+      userEvent.type(screen.getByLabelText('time picker'), inputProps.value);
+      expect(onChange).toBeCalledWith(inputProps.value, expects.hour, expects.minutes, expects.seconds, true);
     };
-    const view = mount(<TimePicker value={"00:00"} validateTime={validateTime} aria-label="time picker" />);
 
-    act(() => {
-      view.find('input').prop('onChange')(event);
-    })
-    view.update();
+    test('should return the correct value using the AM/PM pattern - midnight', () => {
+      testOnChange({
+        inputProps: { value: '12:00 AM', is24Hour: false },
+        expects: { hour: 0, minutes: 0, seconds: null }
+      });
+    });
+
+    test('should return the correct value using the AM/PM pattern - midday', () => {
+      testOnChange({
+        inputProps: { value: '12:35 PM', is24Hour: false },
+        expects: { hour: 12, minutes: 35, seconds: null }
+      });
+    });
+
+    test('should return the correct value using the AM/PM pattern - last minute of the day', () => {
+      testOnChange({
+        inputProps: { value: '11:59 PM', is24Hour: false },
+        expects: { hour: 23, minutes: 59, seconds: null }
+      });
+    });
+
+    test('should return the correct value using the 24h pattern - midnight', () => {
+      testOnChange({
+        inputProps: { value: '00:00:00', is24Hour: true, includeSeconds: true },
+        expects: { hour: 0, minutes: 0, seconds: 0 }
+      });
+    });
+
+    test('should return the correct value using the 24h pattern - midday', () => {
+      testOnChange({
+        inputProps: { value: '12:35', is24Hour: false },
+        expects: { hour: 12, minutes: 35, seconds: null }
+      });
+    });
+
+    test('should return the correct value using the 24h pattern - last minute of the day', () => {
+      testOnChange({
+        inputProps: { value: '23:59', is24Hour: true },
+        expects: { hour: 23, minutes: 59, seconds: null }
+      });
+    });
+  });
 
-    expect(view.find('.pf-m-error')).toHaveLength(0);
-  })
+  describe('test isInvalid', () => {
+    test('should be valid by default', () => {
+      const validateTime = (_time: string) => {
+        return true;
+      };
 
-  test('should be invalid after onBlur', () => {
-    const validateTime = (time: string) => {
-      return false;
-    }
+      render(<TimePicker value={'00:00'} validateTime={validateTime} aria-label="time picker" />);
 
-    const event: any = {
-      currentTarget: { value: "01:00" }
-    };
-    const view = mount(<TimePicker value={"00:00"} validateTime={validateTime} aria-label="time picker" />);
+      expect(screen.getByLabelText('time picker')).not.toHaveClass('pf-m-error');
+    });
 
-    act(() => {
-      view.find('input').prop('onChange')(event);
-    })
-    view.update();
+    test('should stay valid after onChange', () => {
+      const validateTime = (_time: string) => {
+        return true;
+      };
 
-    expect(view.find('.pf-m-error')).toHaveLength(0);
+      render(<TimePicker value="00:00" validateTime={validateTime} aria-label="time picker" />);
 
-    view.find('input').simulate('blur');
+      const input = screen.getByLabelText('time picker');
 
-    expect(view.find('.pf-m-error')).toHaveLength(1);
-  })
-})
+      userEvent.type(input, '01:00');
+      expect(input).not.toHaveClass('pf-m-error');
+    });
 
-describe('test includeSeconds', () => {
-  const baseProps = {
-    "aria-label": "time picker",
-    value: "12:00 PM",
-    includeSeconds: true
-  };
+    test('should be invalid after onBlur', async () => {
+      const validateTime = (_time: string) => {
+        return false;
+      };
 
-  it('should be valid still with a max value of "11:59:59 PM" by default', () => {
-    const event: any = { currentTarget: { value: "11:59:59 PM" } };
-    const view = mount(<TimePicker {...baseProps} />);
+      render(
+        <>
+          <div>Other element</div>
+          <TimePicker value={'00:00'} validateTime={validateTime} aria-label="time picker" />
+        </>
+      );
 
-    act(() => view.find('input').prop('onChange')(event));
-    view.update();
+      userEvent.type(screen.getByLabelText('time picker'), '01:00');
+      expect(screen.queryByText('Invalid time format')).toBeNull();
 
-    expect(view.find('.pf-m-error')).toHaveLength(0);
+      userEvent.click(screen.getByText('Other element'));
+      expect(screen.getByText('Invalid time format')).toBeInTheDocument();
+    });
   });
 
-  it('should be valid still with a max value of "23:59:59" by default when using 24 hour time', () => {
-    const event: any = { currentTarget: { value: "23:59:59" } };
-    const view = mount(<TimePicker {...baseProps} value="20:00" is24Hour />);
+  describe('test includeSeconds', () => {
+    const baseProps = {
+      'aria-label': 'time picker',
+      value: '12:00 PM',
+      includeSeconds: true
+    };
 
-    act(() => view.find('input').prop('onChange')(event));
-    view.update();
+    it('should be valid still with a max value of "11:59:59 PM" by default', () => {
+      render(<TimePicker {...baseProps} />);
 
-    expect(view.find('.pf-m-error')).toHaveLength(0);
-  });
+      userEvent.type(screen.getByLabelText(baseProps['aria-label']), '11:59:59 PM');
+      expect(screen.queryByText('Invalid time format')).toBeNull();
+    });
 
-  it('should be invalid with a max value of "24:00:00" by default', () => {
-    const event: any = { currentTarget: { value: "24:00:00" } };
-    const view = mount(<TimePicker {...baseProps} value="20:00" is24Hour />);
+    it('should be valid still with a max value of "23:59:59" by default when using 24 hour time', () => {
+      render(<TimePicker {...baseProps} value="20:00" is24Hour />);
 
-    act(() => view.find('input').prop('onChange')(event));
-    view.update();
+      userEvent.type(screen.getByLabelText(baseProps['aria-label']), '23:59:59');
+      expect(screen.queryByText('Invalid time format')).toBeNull();
+    });
 
-    expect(view.find('.pf-m-error')).toHaveLength(0);
+    it('should be invalid with a max value of "24:00:00" by default', () => {
+      render(
+        <>
+          <div>Other element</div>
+          <TimePicker {...baseProps} value="20:00" is24Hour />
+        </>
+      );
 
-    view.find('input').simulate('blur');
+      userEvent.type(screen.getByLabelText(baseProps['aria-label']), '24:00:00');
+      expect(screen.queryByText('Invalid time format')).toBeNull();
 
-    expect(view.find('.pf-m-error')).toHaveLength(1);
+      userEvent.click(screen.getByText('Other element'));
+      expect(screen.getByText('Invalid time format')).toBeInTheDocument();
+    });
   });
 });

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

@@ -1,27 +1,28 @@
 import * as React from 'react';
-import { render } from '@testing-library/react';
-import { shallow } from 'enzyme';
+
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
 import { Title, TitleSizes } from '..';
 
-Object.values(TitleSizes).forEach(size => {
-  test(`${size} Title`, () => {
-    const view = render(
-      <Title size={size} headingLevel="h1">
-        {size} Title
+describe('Title', () => {
+  Object.values(TitleSizes).forEach(size => {
+    test(`${size} Title`, () => {
+      const { asFragment } = render(
+        <Title size={size} headingLevel="h1">
+          {size} Title
+        </Title>
+      );
+      expect(asFragment()).toMatchSnapshot();
+    });
+  });
+
+  test('Heading level can be set using a string value', () => {
+    render(
+      <Title size="lg" headingLevel="h3">
+        H3 Heading
       </Title>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(screen.getByRole('heading').parentElement.querySelector('h3')).toBeInTheDocument();
   });
 });
-
-test('Heading level can be set using a string value', () => {
-  const view = shallow(
-    <Title size="lg" headingLevel="h3">
-      H3 Heading
-    </Title>
-  );
-  const isH3 = view.find('h3').length === 1;
-  const isH1 = view.find('h1').length === 1;
-  expect(isH1).toBe(false);
-  expect(isH3).toBe(true);
-});

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

@@ -1,85 +1,79 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`2xl Title 1`] = `
-<div>
+exports[`Title 2xl Title 1`] = `
+<DocumentFragment>
   <h1
     class="pf-c-title pf-m-2xl"
     data-ouia-component-id="OUIA-Generated-Title-4"
     data-ouia-component-type="PF4/Title"
     data-ouia-safe="true"
   >
-    2xl
-     Title
+    2xl Title
   </h1>
-</div>
+</DocumentFragment>
 `;
 
-exports[`3xl Title 1`] = `
-<div>
+exports[`Title 3xl Title 1`] = `
+<DocumentFragment>
   <h1
     class="pf-c-title pf-m-3xl"
     data-ouia-component-id="OUIA-Generated-Title-5"
     data-ouia-component-type="PF4/Title"
     data-ouia-safe="true"
   >
-    3xl
-     Title
+    3xl Title
   </h1>
-</div>
+</DocumentFragment>
 `;
 
-exports[`4xl Title 1`] = `
-<div>
+exports[`Title 4xl Title 1`] = `
+<DocumentFragment>
   <h1
     class="pf-c-title pf-m-4xl"
     data-ouia-component-id="OUIA-Generated-Title-6"
     data-ouia-component-type="PF4/Title"
     data-ouia-safe="true"
   >
-    4xl
-     Title
+    4xl Title
   </h1>
-</div>
+</DocumentFragment>
 `;
 
-exports[`lg Title 1`] = `
-<div>
+exports[`Title lg Title 1`] = `
+<DocumentFragment>
   <h1
     class="pf-c-title pf-m-lg"
     data-ouia-component-id="OUIA-Generated-Title-2"
     data-ouia-component-type="PF4/Title"
     data-ouia-safe="true"
   >
-    lg
-     Title
+    lg Title
   </h1>
-</div>
+</DocumentFragment>
 `;
 
-exports[`md Title 1`] = `
-<div>
+exports[`Title md Title 1`] = `
+<DocumentFragment>
   <h1
     class="pf-c-title pf-m-md"
     data-ouia-component-id="OUIA-Generated-Title-1"
     data-ouia-component-type="PF4/Title"
     data-ouia-safe="true"
   >
-    md
-     Title
+    md Title
   </h1>
-</div>
+</DocumentFragment>
 `;
 
-exports[`xl Title 1`] = `
-<div>
+exports[`Title xl Title 1`] = `
+<DocumentFragment>
   <h1
     class="pf-c-title pf-m-xl"
     data-ouia-component-id="OUIA-Generated-Title-3"
     data-ouia-component-type="PF4/Title"
     data-ouia-safe="true"
   >
-    xl
-     Title
+    xl Title
   </h1>
-</div>
+</DocumentFragment>
 `;

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

@@ -1,6 +1,8 @@
 import * as React from 'react';
-import { render } from '@testing-library/react';
-import { shallow } from 'enzyme';
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
 import { ToggleGroup } from '../ToggleGroup';
 import { ToggleGroupItem } from '../ToggleGroupItem';
 
@@ -9,41 +11,43 @@ const props = {
   selected: false
 };
 
-test('basic selected', () => {
-  const view = render(<ToggleGroupItem text="test" selected buttonId="toggleGroupItem" aria-label="basic selected" />);
-  expect(view.container).toMatchSnapshot();
-});
-
-test('basic not selected', () => {
-  const view = render(<ToggleGroupItem text="test" buttonId="toggleGroupItem" aria-label="basic not selected" />);
-  expect(view.container).toMatchSnapshot();
+describe('ToggleGroup', () => {
+  test('basic selected', () => {
+    const { asFragment } = render(<ToggleGroupItem text="test" isSelected buttonId="toggleGroupItem" aria-label="basic selected" />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('basic not selected', () => {
+    const { asFragment } = render(<ToggleGroupItem text="test" buttonId="toggleGroupItem" aria-label="basic not selected" />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('icon variant', () => {
+    const { asFragment } = render(<ToggleGroupItem isSelected icon="icon" buttonId="toggleGroupItem" aria-label="icon variant" />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('isDisabled', () => {
+    const { asFragment } = render(<ToggleGroupItem text="test" isDisabled buttonId="toggleGroupItem" aria-label="isDisabled" />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('item passes selection and event to onChange handler', () => {
+    render(
+      <ToggleGroupItem text="test" buttonId="toggleGroupItem" onChange={props.onChange} aria-label="onChange handler" />
+    );
+
+    userEvent.click(screen.getByRole('button'));
+    expect(props.onChange).toHaveBeenCalledWith(true, expect.any(Object));
+  });
+
+  test('isCompact', () => {
+    const { asFragment } = render(
+      <ToggleGroup isCompact aria-label="Label">
+        <ToggleGroupItem text="Test" />
+        <ToggleGroupItem text="Test" />
+      </ToggleGroup>
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
 });
-
-test('icon variant', () => {
-  const view = render(<ToggleGroupItem selected icon="icon" buttonId="toggleGroupItem" aria-label="icon variant" />);
-  expect(view.container).toMatchSnapshot();
-});
-
-test('isDisabled', () => {
-  const view = render(<ToggleGroupItem text="test" isDisabled buttonId="toggleGroupItem" aria-label="isDisabled" />);
-  expect(view.container).toMatchSnapshot();
-});
-
-test('item passes selection and event to onChange handler', () => {
-  const selected = true;
-  const event = {};
-  const view = shallow(<ToggleGroupItem text="test" buttonId="toggleGroupItem" onChange={props.onChange} aria-label="onChange handler" />);
-  view.find('button').simulate('click', event, selected);
-  expect(props.onChange).toBeCalledWith(selected, event);
-});
-
-test('isCompact', () => {
-  const view = render(
-    <ToggleGroup isCompact>
-      <ToggleGroupItem text="Test" />
-      <ToggleGroupItem text="Test" />
-    </ToggleGroup>
-  );
-  expect(view.container).toMatchSnapshot();
-});
-