@patternfly/react-core 4.200.0 → 4.201.0

package/src/components/Dropdown/__tests__/DropdownToggleCheckbox.test.tsx

@@ -1,6 +1,8 @@
-import * as React from 'react';
-import { render } from '@testing-library/react';
-import { mount } from 'enzyme';
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
 import { DropdownToggleCheckbox } from '../DropdownToggleCheckbox';
 
 const props = {
@@ -8,56 +10,50 @@ const props = {
   isChecked: false
 };
 
-test('controlled', () => {
-  const view = render(<DropdownToggleCheckbox isChecked id="check" aria-label="check" />);
-  expect(view.container).toMatchSnapshot();
-});
-
-test('uncontrolled', () => {
-  const view = render(<DropdownToggleCheckbox id="check" aria-label="check" />);
-  expect(view.container).toMatchSnapshot();
-});
-
-test('with text', () => {
-  const view = render(
-    <DropdownToggleCheckbox id="check" isDisabled aria-label="check">
-      Some text
-    </DropdownToggleCheckbox>
-  );
-  expect(view.container).toMatchSnapshot();
-});
-
-test('isDisabled', () => {
-  const view = render(<DropdownToggleCheckbox id="check" isDisabled aria-label="check" />);
-  expect(view.container).toMatchSnapshot();
-});
-
-test('3rd state', () => {
-  const view = render(<DropdownToggleCheckbox id="check" isChecked={null} aria-label="check" />);
-  expect(view.container).toMatchSnapshot();
-});
-
-test('passing class', () => {
-  const view = render(
-    <DropdownToggleCheckbox label="label" className="class-123" id="check" isChecked aria-label="check" />
-  );
-  expect(view.container).toMatchSnapshot();
-});
-
-test('passing HTML attribute', () => {
-  const view = render(
-    <DropdownToggleCheckbox label="label" aria-labelledby="labelId" id="check" isChecked aria-label="check" />
-  );
-  expect(view.container).toMatchSnapshot();
-});
-
-test('checkbox passes value and event to onChange handler', () => {
-  const newValue = true;
-  const event = {
-    target: { checked: newValue }
-  };
-  const view = mount(<DropdownToggleCheckbox id="check" {...props} aria-label="check" />);
-  view.find('input').simulate('change', event);
-  expect(props.onChange.mock.calls[0][0]).toBe(newValue);
-  expect(props.onChange.mock.calls[0][1]).toMatchObject(event);
+describe('DropdownToggleCheckbox', () => {
+  test('controlled', () => {
+    render(<DropdownToggleCheckbox isChecked id="check" aria-label="check" />);
+    expect(screen.getByRole('checkbox').outerHTML).toMatchSnapshot();
+  });
+
+  test('uncontrolled', () => {
+    render(<DropdownToggleCheckbox id="check" aria-label="check" />);
+    expect(screen.getByRole('checkbox').outerHTML).toMatchSnapshot();
+  });
+
+  test('with text', () => {
+    render(
+      <DropdownToggleCheckbox id="check" isDisabled aria-label="check">
+        Some text
+      </DropdownToggleCheckbox>
+    );
+    expect(screen.getByRole('checkbox').parentElement.outerHTML).toMatchSnapshot();
+  });
+
+  test('isDisabled', () => {
+    render(<DropdownToggleCheckbox id="check" isDisabled aria-label="check" />);
+    expect(screen.getByRole('checkbox').outerHTML).toMatchSnapshot();
+  });
+
+  test('3rd state', () => {
+    render(<DropdownToggleCheckbox id="check" isChecked={null} aria-label="check" />);
+    expect(screen.getByRole('checkbox').outerHTML).toMatchSnapshot();
+  });
+
+  test('passing class', () => {
+    render(<DropdownToggleCheckbox label="label" className="class-123" id="check" isChecked aria-label="check" />);
+    expect(screen.getByRole('checkbox').outerHTML).toMatchSnapshot();
+  });
+
+  test('passing HTML attribute', () => {
+    render(<DropdownToggleCheckbox label="label" aria-labelledby="labelId" id="check" isChecked aria-label="check" />);
+    expect(screen.getByRole('checkbox').outerHTML).toMatchSnapshot();
+  });
+
+  test('checkbox passes value and event to onChange handler', () => {
+    render(<DropdownToggleCheckbox id="check" {...props} aria-label="check" />);
+
+    userEvent.click(screen.getByRole('checkbox'));
+    expect(props.onChange.mock.calls[0][0]).toBe(true);
+  });
 });

package/src/components/Dropdown/__tests__/Generated/DropdownItem.test.tsx

@@ -1,29 +1,31 @@
-/**
- * This test was generated
- */
-import * as React from 'react';
-import { shallow } from 'enzyme';
+import React from 'react';
+
+import { render } from '@testing-library/react';
+
 import { DropdownItem } from '../../DropdownItem';
-// any missing imports can usually be resolved by adding them here
-import {} from '../..';
+import { DropdownArrowContext } from '../../dropdownConstants';
 
-it('DropdownItem should match snapshot (auto-generated)', () => {
-  const view = shallow(
-    <DropdownItem
-      children={<>ReactNode</>}
-      className={"''"}
-      listItemClassName={'string'}
-      component={'a'}
-      isDisabled={false}
-      isPlainText={false}
-      isHovered={false}
-      href={'string'}
-      tooltip={null}
-      tooltipProps={undefined}
-      additionalChild={<div>ReactNode</div>}
-      customChild={<div>ReactNode</div>}
-      icon={null}
-    />
-  );
-  expect(view).toMatchSnapshot();
+describe('DropdownItem', () => {
+  it('should match snapshot', () => {
+    const view = render(
+      <DropdownArrowContext.Provider value={{ sendRef: jest.fn(), keyHandler: undefined }}>
+        <DropdownItem
+          children={<>ReactNode</>}
+          className={"''"}
+          listItemClassName={'string'}
+          component={'a'}
+          isDisabled={false}
+          isPlainText={false}
+          isHovered={false}
+          href={'string'}
+          tooltip={null}
+          tooltipProps={undefined}
+          additionalChild={<div>ReactNode</div>}
+          customChild={<div>ReactNode</div>}
+          icon={null}
+        />
+      </DropdownArrowContext.Provider>
+    );
+    expect(view.container).toMatchSnapshot();
+  });
 });

package/src/components/Dropdown/__tests__/Generated/DropdownSeparator.test.tsx

@@ -1,18 +1,17 @@
-/**
- * This test was generated
- */
-import * as React from 'react';
-import { shallow } from 'enzyme';
+import React from 'react';
+
+import { render } from '@testing-library/react';
+
 import { DropdownSeparator } from '../../DropdownSeparator';
-// any missing imports can usually be resolved by adding them here
-import {} from '../..';
+import { DropdownArrowContext } from '../../dropdownConstants';
 
-it('DropdownSeparator should match snapshot (auto-generated)', () => {
-  const view = shallow(
-    <DropdownSeparator
-      className={"''"}
-      onClick={(event: React.MouseEvent<HTMLAnchorElement> | React.KeyboardEvent | MouseEvent) => undefined as void}
-    />
-  );
-  expect(view).toMatchSnapshot();
+describe('DropdownSeparator', () => {
+  it('should match snapshot', () => {
+    const view = render(
+      <DropdownArrowContext.Provider value={{ sendRef: jest.fn(), keyHandler: undefined }}>
+        <DropdownSeparator className={"''"} onClick={() => console.log('clicked')} />
+      </DropdownArrowContext.Provider>
+    );
+    expect(view.container).toMatchSnapshot();
+  });
 });

package/src/components/Dropdown/__tests__/Generated/InternalDropdownItem.test.tsx

@@ -1,39 +1,42 @@
-/**
- * This test was generated
- */
-import * as React from 'react';
-import { shallow } from 'enzyme';
+import React from 'react';
+
+import { render } from '@testing-library/react';
+
 import { InternalDropdownItem } from '../../InternalDropdownItem';
-// any missing imports can usually be resolved by adding them here
-import {} from '../..';
+import { DropdownContext } from '../../dropdownConstants';
 
-it('InternalDropdownItem should match snapshot (auto-generated)', () => {
-  const view = shallow(
-    <InternalDropdownItem
-      children={<div>ReactNode</div>}
-      className={"''"}
-      listItemClassName={'string'}
-      component={'a'}
-      role={"'none'"}
-      isDisabled={false}
-      isPlainText={false}
-      isHovered={false}
-      href={'string'}
-      tooltip={<div>ReactNode</div>}
-      tooltipProps={undefined}
-      index={-1}
-      context={{
-        keyHandler: () => {},
-        sendRef: () => {}
-      }}
-      onClick={(event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => undefined as any}
-      id={'string'}
-      componentID={'string'}
-      additionalChild={<div>ReactNode</div>}
-      customChild={<div>ReactNode</div>}
-      enterTriggersArrowDown={false}
-      icon={<div>ReactNode</div>}
-    />
-  );
-  expect(view).toMatchSnapshot();
+describe('InternalDropdownItem', () => {
+  it('should match snapshot', () => {
+    const view = render(
+      <DropdownContext.Provider value={{}}>
+        {' '}
+        <InternalDropdownItem
+          children={<div>ReactNode</div>}
+          className={"''"}
+          listItemClassName={'string'}
+          component={'a'}
+          role={"'none'"}
+          isDisabled={false}
+          isPlainText={false}
+          isHovered={false}
+          href={'string'}
+          tooltip={<div>ReactNode</div>}
+          tooltipProps={undefined}
+          index={-1}
+          context={{
+            keyHandler: () => {},
+            sendRef: () => {}
+          }}
+          onClick={(event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => undefined as any}
+          id={'string'}
+          componentID={'string'}
+          additionalChild={<div>ReactNode</div>}
+          customChild={<div>ReactNode</div>}
+          enterTriggersArrowDown={false}
+          icon={<div>ReactNode</div>}
+        />
+      </DropdownContext.Provider>
+    );
+    expect(view.container).toMatchSnapshot();
+  });
 });

package/src/components/Dropdown/__tests__/Generated/__snapshots__/DropdownItem.test.tsx.snap

@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`DropdownItem should match snapshot (auto-generated) 1`] = `
-<ContextConsumer>
-  <Component />
-</ContextConsumer>
+exports[`DropdownItem should match snapshot 1`] = `
+<div>
+  <div>
+    ReactNode
+  </div>
+</div>
 `;

package/src/components/Dropdown/__tests__/Generated/__snapshots__/DropdownSeparator.test.tsx.snap

@@ -1,7 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`DropdownSeparator should match snapshot (auto-generated) 1`] = `
-<ContextConsumer>
-  <Component />
-</ContextConsumer>
+exports[`DropdownSeparator should match snapshot 1`] = `
+<div>
+  <li
+    role="separator"
+  >
+    <div
+      class="pf-c-divider ''"
+      role="separator"
+    />
+  </li>
+</div>
 `;

package/src/components/Dropdown/__tests__/Generated/__snapshots__/InternalDropdownItem.test.tsx.snap

@@ -1,7 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`InternalDropdownItem should match snapshot (auto-generated) 1`] = `
-<ContextConsumer>
-  <Component />
-</ContextConsumer>
+exports[`InternalDropdownItem should match snapshot 1`] = `
+<div>
+   
+  <div>
+    ReactNode
+  </div>
+</div>
 `;

package/src/components/Dropdown/__tests__/InternalDropdownItem.test.tsx

@@ -1,84 +1,81 @@
-import * as React from 'react';
-import { render } from '@testing-library/react';
-import { shallow } from 'enzyme';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
 import { InternalDropdownItem } from '../InternalDropdownItem';
-import { DropdownSeparator } from '../DropdownSeparator';
 
-describe('dropdown items', () => {
-  test('a', () => {
-    const view = render(<InternalDropdownItem>Something</InternalDropdownItem>);
-    expect(view.container).toMatchSnapshot();
-  });
-
-  test('button', () => {
-    const view = render(<InternalDropdownItem component="button">Something</InternalDropdownItem>);
-    expect(view.container).toMatchSnapshot();
-  });
-
-  test('separator', () => {
-    const view = shallow(<DropdownSeparator />);
-    expect(view).toMatchSnapshot();
-  });
-
-  describe('hover', () => {
+describe('InternalDropdownItem', () => {
+  describe('dropdown items', () => {
     test('a', () => {
-      const view = render(<InternalDropdownItem isHovered>Something</InternalDropdownItem>);
-      expect(view.container).toMatchSnapshot();
+      render(<InternalDropdownItem>Something</InternalDropdownItem>);
+      expect(screen.getByText('Something').outerHTML).toMatchSnapshot();
     });
-    test('button', () => {
-      const view = render(
-        <InternalDropdownItem isHovered component="button">
-          Something
-        </InternalDropdownItem>
-      );
-      expect(view.container).toMatchSnapshot();
-    });
-  });
 
-  describe('disabled', () => {
-    test('a', () => {
-      const view = render(<InternalDropdownItem isDisabled>Something</InternalDropdownItem>);
-      expect(view.container).toMatchSnapshot();
-    });
     test('button', () => {
-      const view = render(
-        <InternalDropdownItem isDisabled component="button">
-          Something
-        </InternalDropdownItem>
-      );
-      expect(view.container).toMatchSnapshot();
+      render(<InternalDropdownItem component="button">Something</InternalDropdownItem>);
+      expect(screen.getByText('Something').outerHTML).toMatchSnapshot();
     });
-  });
 
-  describe('aria-disabled', () => {
-    test('a', () => {
-      const view = render(<InternalDropdownItem isAriaDisabled>Something</InternalDropdownItem>);
-      expect(view.container).toMatchSnapshot();
+    describe('hover', () => {
+      test('a', () => {
+        render(<InternalDropdownItem isHovered>Something</InternalDropdownItem>);
+        expect(screen.getByText('Something').outerHTML).toMatchSnapshot();
+      });
+
+      test('button', () => {
+        render(
+          <InternalDropdownItem isHovered component="button">
+            Something
+          </InternalDropdownItem>
+        );
+        expect(screen.getByText('Something').outerHTML).toMatchSnapshot();
+      });
     });
-    test('button', () => {
-      const view = render(
-        <InternalDropdownItem isAriaDisabled component="button">
-          Something
-        </InternalDropdownItem>
-      );
-      expect(view.container).toMatchSnapshot();
+
+    describe('disabled', () => {
+      test('a', () => {
+        render(<InternalDropdownItem isDisabled>Something</InternalDropdownItem>);
+        expect(screen.getByText('Something').outerHTML).toMatchSnapshot();
+      });
+
+      test('button', () => {
+        render(
+          <InternalDropdownItem isDisabled component="button">
+            Something
+          </InternalDropdownItem>
+        );
+        expect(screen.getByText('Something').outerHTML).toMatchSnapshot();
+      });
     });
-  });
 
-  describe('description', () => {
-    test('a', () => {
-      const view = render(
-        <InternalDropdownItem description="Something's link description">Something</InternalDropdownItem>
-      );
-      expect(view.container).toMatchSnapshot();
+    describe('aria-disabled', () => {
+      test('a', () => {
+        render(<InternalDropdownItem isAriaDisabled>Something</InternalDropdownItem>);
+        expect(screen.getByText('Something').outerHTML).toMatchSnapshot();
+      });
+
+      test('button', () => {
+        render(
+          <InternalDropdownItem isAriaDisabled component="button">
+            Something
+          </InternalDropdownItem>
+        );
+        expect(screen.getByText('Something').outerHTML).toMatchSnapshot();
+      });
     });
-    test('button', () => {
-      const view = render(
-        <InternalDropdownItem description="Something's button description" component="button">
-          Something
-        </InternalDropdownItem>
-      );
-      expect(view.container).toMatchSnapshot();
+
+    describe('description', () => {
+      test('a', () => {
+        render(<InternalDropdownItem description="Something's link description">Something</InternalDropdownItem>);
+        expect(screen.getByText("Something's link description").outerHTML).toMatchSnapshot();
+      });
+
+      test('button', () => {
+        render(
+          <InternalDropdownItem description="Something's button description" component="button">
+            Something
+          </InternalDropdownItem>
+        );
+        expect(screen.getByText("Something's button description").outerHTML).toMatchSnapshot();
+      });
     });
   });
 });