@patternfly/react-core 4.202.30 → 4.202.33

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`state active 1`] = `
-<div>
+exports[`SelectToggle state active 1`] = `
+<DocumentFragment>
   <button
     aria-expanded="false"
     aria-haspopup="listbox"
@@ -30,5 +30,5 @@ exports[`state active 1`] = `
       </svg>
     </span>
   </button>
-</div>
+</DocumentFragment>
 `;

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

@@ -1,6 +1,9 @@
 import * as 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 '@testing-library/jest-dom';
+
 import { SimpleList } from '../SimpleList';
 import { SimpleListGroup } from '../SimpleListGroup';
 import { SimpleListItem } from '../SimpleListItem';
@@ -25,64 +28,58 @@ const anchors = [
 
 describe('SimpleList', () => {
   test('renders content', () => {
-    const view = render(<SimpleList>{items}</SimpleList>);
-    expect(view.container).toMatchSnapshot();
+    const { asFragment } = render(<SimpleList>{items}</SimpleList>);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('renders grouped content', () => {
-    const view = render(
+    const { asFragment } = render(
       <SimpleList>
         <SimpleListGroup title="Group 1">{items}</SimpleListGroup>
       </SimpleList>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   test('onSelect is called when item is selected', () => {
-    const selectSpy = jest.fn();
-    const view = mount(<SimpleList onSelect={selectSpy}>{items}</SimpleList>);
-    view
-      .find('button')
-      .first()
-      .simulate('click', { target: { value: 'r' } });
-    view.update();
-    expect(selectSpy).toBeCalled();
-    expect(view).toMatchSnapshot();
+    const onSelect = jest.fn();
+
+    render(<SimpleList onSelect={onSelect}>{items}</SimpleList>);
+
+    userEvent.click(screen.getByText('Item 1'));
+    expect(onSelect).toBeCalled();
   });
 
   test('renders anchor content', () => {
-    const view = render(<SimpleList>{anchors}</SimpleList>);
-    expect(view.container).toMatchSnapshot();
+    render(<SimpleList>{anchors}</SimpleList>);
+    expect(screen.getAllByRole('link').length).toEqual(3);
   });
 
   test('onSelect is called when anchor item is selected', () => {
-    const selectSpy = jest.fn();
-    const view = mount(<SimpleList onSelect={selectSpy}>{anchors}</SimpleList>);
-    view
-      .find('a')
-      .first()
-      .simulate('click', { target: { value: 'r' } });
-    view.update();
-    expect(selectSpy).toBeCalled();
-    expect(view).toMatchSnapshot();
+    const onSelect = jest.fn();
+
+    render(<SimpleList onSelect={onSelect}>{anchors}</SimpleList>);
+
+    userEvent.click(screen.getByText('Item 1'));
+    expect(onSelect).toBeCalled();
   });
 });
 
 describe('SimpleListGroup', () => {
   test('renders content', () => {
-    const view = render(<SimpleListGroup title="Group 1">{items}</SimpleListGroup>);
-    expect(view.container).toMatchSnapshot();
+    render(<SimpleListGroup title="Group 1">{items}</SimpleListGroup>);
+    expect(screen.getByText('Group 1')).toBeInTheDocument();
   });
 });
 
 describe('SimpleListItem', () => {
   test('renders content', () => {
-    const view = render(<SimpleListItem>Item 1</SimpleListItem>);
-    expect(view.container).toMatchSnapshot();
+    render(<SimpleListItem>Item 1</SimpleListItem>);
+    expect(screen.getByText('Item 1')).toBeInTheDocument();
   });
 
   test('renders anchor', () => {
-    const view = render(<SimpleListItem component="a">Item 1</SimpleListItem>);
-    expect(view.container).toMatchSnapshot();
+    render(<SimpleListItem component="a">Item 1</SimpleListItem>);
+    expect(screen.getByText('Item 1')).toBeInTheDocument();
   });
 });

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

@@ -1,287 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SimpleList onSelect is called when anchor item is selected 1`] = `
-<SimpleList
-  className=""
-  isControlled={true}
-  onSelect={
-    [MockFunction] {
-      "calls": Array [
-        Array [
-          Object {
-            "current": <a
-              class="pf-c-simple-list__item-link pf-m-current"
-              href=""
-              tabindex="0"
-            >
-              Item 1
-            </a>,
-          },
-          Object {
-            "children": "Item 1",
-            "className": "",
-            "component": "a",
-            "componentClassName": "",
-            "href": "",
-            "isActive": false,
-            "isCurrent": false,
-            "onClick": [Function],
-            "type": "button",
-          },
-        ],
-      ],
-      "results": Array [
-        Object {
-          "type": "return",
-          "value": undefined,
-        },
-      ],
-    }
-  }
->
-  <div
-    className="pf-c-simple-list"
-  >
-    <ul>
-      <SimpleListItem
-        className=""
-        component="a"
-        componentClassName=""
-        href=""
-        isActive={false}
-        isCurrent={false}
-        key="i1"
-        onClick={[Function]}
-        type="button"
-      >
-        <li
-          className=""
-        >
-          <a
-            className="pf-c-simple-list__item-link pf-m-current"
-            href=""
-            onClick={[Function]}
-            tabIndex={0}
-          >
-            Item 1
-          </a>
-        </li>
-      </SimpleListItem>
-      <SimpleListItem
-        className=""
-        component="a"
-        componentClassName=""
-        href=""
-        isActive={false}
-        isCurrent={false}
-        key="i2"
-        onClick={[Function]}
-        type="button"
-      >
-        <li
-          className=""
-        >
-          <a
-            className="pf-c-simple-list__item-link"
-            href=""
-            onClick={[Function]}
-            tabIndex={0}
-          >
-            Item 2
-          </a>
-        </li>
-      </SimpleListItem>
-      <SimpleListItem
-        className=""
-        component="a"
-        componentClassName=""
-        href=""
-        isActive={false}
-        isCurrent={false}
-        key="i3"
-        onClick={[Function]}
-        type="button"
-      >
-        <li
-          className=""
-        >
-          <a
-            className="pf-c-simple-list__item-link"
-            href=""
-            onClick={[Function]}
-            tabIndex={0}
-          >
-            Item 3
-          </a>
-        </li>
-      </SimpleListItem>
-    </ul>
-  </div>
-</SimpleList>
-`;
-
-exports[`SimpleList onSelect is called when item is selected 1`] = `
-<SimpleList
-  className=""
-  isControlled={true}
-  onSelect={
-    [MockFunction] {
-      "calls": Array [
-        Array [
-          Object {
-            "current": <button
-              class="pf-c-simple-list__item-link pf-m-current"
-              type="button"
-            >
-              Item 1
-            </button>,
-          },
-          Object {
-            "children": "Item 1",
-            "className": "",
-            "component": "button",
-            "componentClassName": "",
-            "href": "",
-            "isActive": false,
-            "isCurrent": false,
-            "onClick": [Function],
-            "type": "button",
-          },
-        ],
-      ],
-      "results": Array [
-        Object {
-          "type": "return",
-          "value": undefined,
-        },
-      ],
-    }
-  }
->
-  <div
-    className="pf-c-simple-list"
-  >
-    <ul>
-      <SimpleListItem
-        className=""
-        component="button"
-        componentClassName=""
-        href=""
-        isActive={false}
-        isCurrent={false}
-        key="i1"
-        onClick={[Function]}
-        type="button"
-      >
-        <li
-          className=""
-        >
-          <button
-            className="pf-c-simple-list__item-link pf-m-current"
-            onClick={[Function]}
-            type="button"
-          >
-            Item 1
-          </button>
-        </li>
-      </SimpleListItem>
-      <SimpleListItem
-        className=""
-        component="button"
-        componentClassName=""
-        href=""
-        isActive={false}
-        isCurrent={false}
-        key="i2"
-        onClick={[Function]}
-        type="button"
-      >
-        <li
-          className=""
-        >
-          <button
-            className="pf-c-simple-list__item-link"
-            onClick={[Function]}
-            type="button"
-          >
-            Item 2
-          </button>
-        </li>
-      </SimpleListItem>
-      <SimpleListItem
-        className=""
-        component="button"
-        componentClassName=""
-        href=""
-        isActive={false}
-        isCurrent={false}
-        key="i3"
-        onClick={[Function]}
-        type="button"
-      >
-        <li
-          className=""
-        >
-          <button
-            className="pf-c-simple-list__item-link"
-            onClick={[Function]}
-            type="button"
-          >
-            Item 3
-          </button>
-        </li>
-      </SimpleListItem>
-    </ul>
-  </div>
-</SimpleList>
-`;
-
-exports[`SimpleList renders anchor content 1`] = `
-<div>
-  <div
-    class="pf-c-simple-list"
-  >
-    <ul>
-      <li
-        class=""
-      >
-        <a
-          class="pf-c-simple-list__item-link"
-          href=""
-          tabindex="0"
-        >
-          Item 1
-        </a>
-      </li>
-      <li
-        class=""
-      >
-        <a
-          class="pf-c-simple-list__item-link"
-          href=""
-          tabindex="0"
-        >
-          Item 2
-        </a>
-      </li>
-      <li
-        class=""
-      >
-        <a
-          class="pf-c-simple-list__item-link"
-          href=""
-          tabindex="0"
-        >
-          Item 3
-        </a>
-      </li>
-    </ul>
-  </div>
-</div>
-`;
-
 exports[`SimpleList renders content 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-simple-list"
   >
@@ -318,11 +38,11 @@ exports[`SimpleList renders content 1`] = `
       </li>
     </ul>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`SimpleList renders grouped content 1`] = `
-<div>
+<DocumentFragment>
   <div
     class="pf-c-simple-list"
   >
@@ -373,87 +93,5 @@ exports[`SimpleList renders grouped content 1`] = `
       </ul>
     </section>
   </div>
-</div>
-`;
-
-exports[`SimpleListGroup renders content 1`] = `
-<div>
-  <section
-    class="pf-c-simple-list__section"
-  >
-    <h2
-      aria-hidden="true"
-      class="pf-c-simple-list__title"
-      id=""
-    >
-      Group 1
-    </h2>
-    <ul
-      aria-labelledby=""
-      class=""
-    >
-      <li
-        class=""
-      >
-        <button
-          class="pf-c-simple-list__item-link"
-          type="button"
-        >
-          Item 1
-        </button>
-      </li>
-      <li
-        class=""
-      >
-        <button
-          class="pf-c-simple-list__item-link"
-          type="button"
-        >
-          Item 2
-        </button>
-      </li>
-      <li
-        class=""
-      >
-        <button
-          class="pf-c-simple-list__item-link"
-          type="button"
-        >
-          Item 3
-        </button>
-      </li>
-    </ul>
-  </section>
-</div>
-`;
-
-exports[`SimpleListItem renders anchor 1`] = `
-<div>
-  <li
-    class=""
-  >
-    <a
-      class="pf-c-simple-list__item-link"
-      href=""
-      tabindex="0"
-    >
-      Item 1
-    </a>
-  </li>
-</div>
-`;
-
-exports[`SimpleListItem renders content 1`] = `
-<div>
-  <li
-    class=""
-  >
-    <button
-      class="pf-c-simple-list__item-link"
-      type="button"
-    >
-      Item 1
-    </button>
-  </li>
-</div>
+</DocumentFragment>
 `;

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

@@ -1,6 +1,9 @@
 import * as 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 '@testing-library/jest-dom';
+
 import { Switch } from '../Switch';
 
 const props = {
@@ -8,90 +11,97 @@ const props = {
   isChecked: false
 };
 
-test('switch label for attribute equals input id attribute', () => {
-  const view = mount(<Switch id="foo" />);
-  expect(view.find('input').prop('id')).toBe('foo');
-  expect(view.find('label').prop('htmlFor')).toBe('foo');
-});
+describe('Switch', () => {
+  test('switch label for attribute equals input id attribute', () => {
+    render(<Switch id="foo" aria-label="Switch label" />);
 
-test('switch label id is auto generated', () => {
-  const view = mount(<Switch aria-label="..." />);
-  expect(view.find('input').prop('id')).toBeDefined();
-});
+    const switchElement = screen.getByLabelText('Switch label');
 
-test('switch is checked', () => {
-  const view = render(<Switch id="switch-is-checked" label="On" labelOff="Off" isChecked />);
-  expect(view.container).toMatchSnapshot();
-});
+    expect(switchElement).toHaveAttribute('id', 'foo');
+    expect(switchElement.parentElement).toHaveAttribute('for', 'foo');
+  });
 
-test('switch is not checked', () => {
-  const view = render(<Switch id="switch-is-not-checked" label="On" labelOff="Off" isChecked={false} />);
-  expect(view.container).toMatchSnapshot();
-});
+  test('switch label id is auto generated', () => {
+    render(<Switch aria-label="Switch label" />);
+    expect(screen.getByLabelText('Switch label')).toHaveAttribute('id');
+  });
 
-test('switch with only label is checked', () => {
-  const check = true;
-  const view = render(<Switch id="switch-is-checked" label={check ? 'On' : 'Off'} isChecked={check} />);
-  expect(view.container).toMatchSnapshot();
-});
+  test('switch is checked', () => {
+    const { asFragment } = render(<Switch id="switch-is-checked" label="On" labelOff="Off" isChecked aria-label="Switch label" />);
+    expect(asFragment()).toMatchSnapshot();
+  });
 
-test('switch with only label is not checked', () => {
-  const check = false;
-  const view = render(<Switch id="switch-is-not-checked" label={check ? 'On' : 'Off'} isChecked={check} />);
-  expect(view.container).toMatchSnapshot();
-});
+  test('switch is not checked', () => {
+    const { asFragment } = render(<Switch id="switch-is-not-checked" label="On" labelOff="Off" isChecked={false} aria-label="Switch label" />);
+    expect(asFragment()).toMatchSnapshot();
+  });
 
-test('no label switch is checked', () => {
-  const view = render(<Switch id="no-label-switch-is-checked" isChecked />);
-  expect(view.container).toMatchSnapshot();
-});
+  test('switch with only label is checked', () => {
+    const { asFragment } = render(<Switch id="switch-is-checked" label="On" isChecked={true} />);
+    expect(asFragment()).toMatchSnapshot();
+  });
 
-test('no label switch is not checked', () => {
-  const view = render(<Switch id="no-label-switch-is-not-checked" isChecked={false} />);
-  expect(view.container).toMatchSnapshot();
-});
+  test('switch with only label is not checked', () => {
+    const { asFragment } = render(<Switch id="switch-is-not-checked" label="Off" isChecked={false} />);
+    expect(asFragment()).toMatchSnapshot();
+  });
 
-test('switch is checked and disabled', () => {
-  const view = render(<Switch id="switch-is-checked-and-disabled" isChecked isDisabled />);
-  expect(view.container).toMatchSnapshot();
-});
+  test('no label switch is checked', () => {
+    const { asFragment } = render(<Switch id="no-label-switch-is-checked" isChecked aria-label="Switch label" />);
+    expect(asFragment()).toMatchSnapshot();
+  });
 
-test('switch is not checked and disabled', () => {
-  const view = render(<Switch id="switch-is-not-checked-and-disabled" isChecked={false} isDisabled />);
-  expect(view.container).toMatchSnapshot();
-});
+  test('no label switch is not checked', () => {
+    const { asFragment } = render(<Switch id="no-label-switch-is-not-checked" isChecked={false} aria-label="Switch label" />);
+    expect(asFragment()).toMatchSnapshot();
+  });
 
-test('switch passes value and event to onChange handler', () => {
-  const view = mount(<Switch id="onChange-switch" {...props} />);
-  const input = view.find('input');
-  expect(input.prop('checked')).toBe(false);
-  input.simulate('change', { target: { checked: true } });
-  expect(props.onChange.mock.calls[0][0]).toBe(true);
-});
+  test('switch is checked and disabled', () => {
+    const { asFragment } = render(<Switch id="switch-is-checked-and-disabled" isChecked isDisabled aria-label="Switch label" />);
+    expect(asFragment()).toMatchSnapshot();
+  });
 
-test('should throw console error when no aria-label or label is given', () => {
-  const myMock = jest.fn();
-  global.console = { ...global.console, error: myMock };
-  mount(<Switch {...props} />);
-  expect(myMock).toBeCalled();
-});
+  test('switch is not checked and disabled', () => {
+    const { asFragment } = render(<Switch id="switch-is-not-checked-and-disabled" isChecked={false} isDisabled aria-label="Switch label" />);
+    expect(asFragment()).toMatchSnapshot();
+  });
 
-test('should not throw console error when label is given but no aria-label', () => {
-  const myMock = jest.fn();
-  global.console = { ...global.console, error: myMock };
-  mount(<Switch {...props} label="test switch" />);
-  expect(myMock).not.toBeCalled();
-});
+  test('switch passes value and event to onChange handler', () => {
+    render(<Switch id="onChange-switch" {...props} aria-label="Switch label" />);
 
-test('should not throw console error when aria-label is given but no label', () => {
-  const myMock = jest.fn();
-  global.console = { ...global.console, error: myMock };
-  mount(<Switch {...props} aria-label="test switch" />);
-  expect(myMock).not.toBeCalled();
-});
+    userEvent.click(screen.getByLabelText('Switch label'));
+    expect(props.onChange).toHaveBeenCalledWith(true, expect.any(Object));
+  });
+
+  test('should throw console error when no aria-label or label is given', () => {
+    const myMock = jest.fn();
+
+    global.console = { ...global.console, error: myMock };
+
+    render(<Switch {...props} />);
+    expect(myMock).toBeCalled();
+  });
+
+  test('should not throw console error when label is given but no aria-label', () => {
+    const myMock = jest.fn();
+    global.console = { ...global.console, error: myMock };
 
-test('should apply reversed modifier', () => {
-  const view = mount(<Switch id="reversed-switch" label="reversed switch" isReversed />);
-  const label = view.find('label')
-  expect(label.prop('className')).toContain('pf-m-reverse')
-})
+    render(<Switch {...props} label="test switch" />);
+
+    expect(myMock).not.toBeCalled();
+  });
+
+  test('should not throw console error when aria-label is given but no label', () => {
+    const myMock = jest.fn();
+    global.console = { ...global.console, error: myMock };
+
+    render(<Switch {...props} aria-label="test switch" />);
+
+    expect(myMock).not.toBeCalled();
+  });
+
+  test('should apply reversed modifier', () => {
+    render(<Switch id="reversed-switch" label="reversed switch" isReversed aria-label="Switch label" />);
+    expect(screen.getByLabelText('Switch label').parentElement).toHaveClass('pf-m-reverse');
+  });
+});