@patternfly/react-core 4.200.0 → 4.201.0

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

@@ -1,12 +1,14 @@
-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 { Dropdown } from '../Dropdown';
 import { DropdownPosition, DropdownDirection } from '../dropdownConstants';
 import { InternalDropdownItem } from '../InternalDropdownItem';
 import { DropdownSeparator } from '../DropdownSeparator';
 import { DropdownToggle } from '../DropdownToggle';
 import { KebabToggle } from '../KebabToggle';
+import userEvent from '@testing-library/user-event';
 
 const dropdownItems = [
   <InternalDropdownItem key="link">Link</InternalDropdownItem>,
@@ -26,27 +28,27 @@ const dropdownItems = [
   </InternalDropdownItem>
 ];
 
-describe('dropdown', () => {
+describe('Dropdown', () => {
   test('regular', () => {
-    const view = render(
+    render(
       <Dropdown dropdownItems={dropdownItems} toggle={<DropdownToggle id="Dropdown Toggle">Dropdown</DropdownToggle>} />
     );
-    expect(view.container).toMatchSnapshot();
+    expect(screen.getByRole('button').outerHTML).toMatchSnapshot();
   });
 
   test('right aligned', () => {
-    const view = render(
+    render(
       <Dropdown
         dropdownItems={dropdownItems}
         position={DropdownPosition.right}
         toggle={<DropdownToggle id="Dropdown Toggle">Dropdown</DropdownToggle>}
       />
     );
-    expect(view.container).toMatchSnapshot();
+    expect(screen.getByRole('button').outerHTML).toMatchSnapshot();
   });
 
   test('alignment breakpoints', () => {
-    const view = render(
+    render(
       <Dropdown
         dropdownItems={dropdownItems}
         alignments={{
@@ -56,26 +58,27 @@ describe('dropdown', () => {
           xl: 'right',
           '2xl': 'left'
         }}
+        aria-label="Dropdown button"
         toggle={<DropdownToggle id="Dropdown Toggle">Dropdown</DropdownToggle>}
         isOpen
       />
     );
-    expect(view.container).toMatchSnapshot();
+    expect(screen.getByLabelText('Dropdown button').outerHTML).toMatchSnapshot();
   });
 
   test('dropup', () => {
-    const view = render(
+    render(
       <Dropdown
         dropdownItems={dropdownItems}
         direction={DropdownDirection.up}
         toggle={<DropdownToggle id="Dropdown Toggle">Dropdown</DropdownToggle>}
       />
     );
-    expect(view.container).toMatchSnapshot();
+    expect(screen.getByRole('button').outerHTML).toMatchSnapshot();
   });
 
   test('dropup + right aligned', () => {
-    const view = render(
+    render(
       <Dropdown
         dropdownItems={dropdownItems}
         direction={DropdownDirection.up}
@@ -83,22 +86,23 @@ describe('dropdown', () => {
         toggle={<DropdownToggle id="Dropdown Toggle">Dropdown</DropdownToggle>}
       />
     );
-    expect(view.container).toMatchSnapshot();
+    expect(screen.getByRole('button').outerHTML).toMatchSnapshot();
   });
 
   test('expanded', () => {
-    const view = render(
+    render(
       <Dropdown
         dropdownItems={dropdownItems}
         isOpen
+        aria-label="Dropdown button"
         toggle={<DropdownToggle id="Dropdown Toggle">Dropdown</DropdownToggle>}
       />
     );
-    expect(view.container).toMatchSnapshot();
+    expect(screen.getByLabelText('Dropdown button').outerHTML).toMatchSnapshot();
   });
 
   test('primary', () => {
-    const view = render(
+    render(
       <Dropdown
         dropdownItems={dropdownItems}
         toggle={
@@ -108,49 +112,55 @@ describe('dropdown', () => {
         }
       />
     );
-    expect(view.container).toMatchSnapshot();
+    expect(screen.getByRole('button').outerHTML).toMatchSnapshot();
   });
 
   test('basic', () => {
-    const view = render(
+    render(
       <Dropdown isOpen toggle={<DropdownToggle id="Dropdown Toggle">Dropdown</DropdownToggle>}>
         <div>BASIC</div>
       </Dropdown>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(screen.getByRole('button').outerHTML).toMatchSnapshot();
   });
 });
 
 describe('KebabToggle', () => {
   test('regular', () => {
-    const view = render(<Dropdown dropdownItems={dropdownItems} toggle={<KebabToggle id="Dropdown Toggle" />} />);
-    expect(view.container).toMatchSnapshot();
+    render(
+      <Dropdown
+        aria-label="Dropdown button"
+        dropdownItems={dropdownItems}
+        toggle={<KebabToggle id="Dropdown Toggle" />}
+      />
+    );
+    expect(screen.getByLabelText('Dropdown button').outerHTML).toMatchSnapshot();
   });
 
   test('right aligned', () => {
-    const view = render(
+    render(
       <Dropdown
         dropdownItems={dropdownItems}
         position={DropdownPosition.right}
         toggle={<KebabToggle id="Dropdown Toggle" />}
       />
     );
-    expect(view.container).toMatchSnapshot();
+    expect(screen.getByRole('button').outerHTML).toMatchSnapshot();
   });
 
   test('dropup', () => {
-    const view = render(
+    render(
       <Dropdown
         dropdownItems={dropdownItems}
         direction={DropdownDirection.up}
         toggle={<KebabToggle id="Dropdown Toggle" />}
       />
     );
-    expect(view.container).toMatchSnapshot();
+    expect(screen.getByRole('button').outerHTML).toMatchSnapshot();
   });
 
   test('dropup + right aligned', () => {
-    const view = render(
+    render(
       <Dropdown
         dropdownItems={dropdownItems}
         direction={DropdownDirection.up}
@@ -158,30 +168,33 @@ describe('KebabToggle', () => {
         toggle={<KebabToggle id="Dropdown Toggle" />}
       />
     );
-    expect(view.container).toMatchSnapshot();
+    expect(screen.getByRole('button').outerHTML).toMatchSnapshot();
   });
 
   test('expanded', () => {
-    const view = render(
-      <Dropdown dropdownItems={dropdownItems} isOpen toggle={<KebabToggle id="Dropdown Toggle" />} />
+    render(
+      <Dropdown
+        aria-label="Dropdown button"
+        dropdownItems={dropdownItems}
+        isOpen
+        toggle={<KebabToggle id="Dropdown Toggle" />}
+      />
     );
-    expect(view.container).toMatchSnapshot();
+    expect(screen.getByLabelText('Dropdown button').outerHTML).toMatchSnapshot();
   });
 
   test('plain', () => {
-    const view = render(
-      <Dropdown dropdownItems={dropdownItems} isPlain toggle={<KebabToggle id="Dropdown Toggle" />} />
-    );
-    expect(view.container).toMatchSnapshot();
+    render(<Dropdown dropdownItems={dropdownItems} isPlain toggle={<KebabToggle id="Dropdown Toggle" />} />);
+    expect(screen.getByRole('button').outerHTML).toMatchSnapshot();
   });
 
   test('basic', () => {
-    const view = render(
+    render(
       <Dropdown isOpen toggle={<KebabToggle id="Dropdown Toggle" />}>
         <div>BASIC</div>
       </Dropdown>
     );
-    expect(view.container).toMatchSnapshot();
+    expect(screen.getByRole('button').outerHTML).toMatchSnapshot();
   });
 });
 
@@ -189,7 +202,8 @@ describe('API', () => {
   test('click on item', () => {
     const mockToggle = jest.fn();
     const mockSelect = jest.fn();
-    const view = mount(
+
+    render(
       <Dropdown
         dropdownItems={dropdownItems}
         onSelect={mockSelect}
@@ -197,10 +211,8 @@ describe('API', () => {
         toggle={<DropdownToggle id="Dropdown Toggle">Dropdown</DropdownToggle>}
       />
     );
-    view
-      .find('a')
-      .first()
-      .simulate('click');
+
+    userEvent.click(screen.getByText('Link')); // "Link" is the text of the first item
     expect(mockToggle.mock.calls).toHaveLength(0);
     expect(mockSelect.mock.calls).toHaveLength(1);
   });

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

@@ -1,204 +1,206 @@
-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 '@testing-library/jest-dom';
+
 import { DropdownToggle } from '../DropdownToggle';
 import { DropdownContext } from '../dropdownConstants';
 
-describe('API', () => {
-  test('click on closed', () => {
-    const mockToggle = jest.fn();
-    const view = mount(
-      <DropdownToggle onToggle={mockToggle} parentRef={document.createElement('div')}>
-        Dropdown
-      </DropdownToggle>
-    );
-
-    view
-      .find('button')
-      .first()
-      .simulate('click');
-    expect(mockToggle.mock.calls[0][0]).toBe(true);
-  });
+describe('DropdownToggleCheckbox', () => {
+  describe('API', () => {
+    test('click on closed', () => {
+      const mockToggle = jest.fn();
 
-  test('click on opened', () => {
-    const mockToggle = jest.fn();
-    const view = mount(
-      <DropdownToggle id="Dropdown Toggle" onToggle={mockToggle} isOpen parentRef={document.createElement('div')}>
-        Dropdown
-      </DropdownToggle>
-    );
-
-    view
-      .find('button')
-      .first()
-      .simulate('click');
-    expect(mockToggle.mock.calls[0][0]).toBe(false);
-  });
+      render(
+        <DropdownToggle onToggle={mockToggle} parentRef={document.createElement('div')}>
+          Dropdown
+        </DropdownToggle>
+      );
 
-  test('on click outside has been removed', () => {
-    let mousedown: EventListenerOrEventListenerObject = () => {};
-    document.addEventListener = jest.fn((event, cb) => {
-      mousedown = cb;
+      userEvent.click(screen.getByRole('button'));
+      expect(mockToggle.mock.calls[0][0]).toBe(true);
     });
-    document.removeEventListener = jest.fn((event, cb) => {
-      if (mousedown === cb) {
-        mousedown = () => {};
-      }
+
+    test('click on opened', () => {
+      const mockToggle = jest.fn();
+
+      render(
+        <DropdownToggle id="Dropdown Toggle" onToggle={mockToggle} isOpen parentRef={document.createElement('div')}>
+          Dropdown
+        </DropdownToggle>
+      );
+
+      userEvent.click(screen.getByRole('button'));
+      expect(mockToggle.mock.calls[0][0]).toBe(false);
     });
-    const mockToggle = jest.fn();
-    const view = render(
-      <DropdownToggle id="Dropdown Toggle" onToggle={mockToggle} isOpen parentRef={document.createElement('div')}>
-        Dropdown
-      </DropdownToggle>
-    );
-    view.unmount();
-    mousedown({ target: document } as any);
-    expect(mockToggle.mock.calls).toHaveLength(0);
-    expect(document.removeEventListener).toHaveBeenCalledWith('click', expect.any(Function));
-  });
 
-  test('on touch outside has been removed', () => {
-    let touchstart: EventListenerOrEventListenerObject = () => {};
-    document.addEventListener = jest.fn((event, cb) => {
-      touchstart = cb;
+    test('on click outside has been removed', () => {
+      let mousedown: EventListenerOrEventListenerObject = () => {};
+      document.addEventListener = jest.fn((event, cb) => {
+        mousedown = cb;
+      });
+      document.removeEventListener = jest.fn((event, cb) => {
+        if (mousedown === cb) {
+          mousedown = () => {};
+        }
+      });
+      const mockToggle = jest.fn();
+      const view = render(
+        <DropdownToggle id="Dropdown Toggle" onToggle={mockToggle} isOpen parentRef={document.createElement('div')}>
+          Dropdown
+        </DropdownToggle>
+      );
+      view.unmount();
+      mousedown({ target: document } as any);
+      expect(mockToggle.mock.calls).toHaveLength(0);
+      expect(document.removeEventListener).toHaveBeenCalledWith('click', expect.any(Function));
     });
-    document.removeEventListener = jest.fn((event, cb) => {
-      if (touchstart === cb) {
-        touchstart = () => {};
-      }
+
+    test('on touch outside has been removed', () => {
+      let touchstart: EventListenerOrEventListenerObject = () => {};
+      document.addEventListener = jest.fn((event, cb) => {
+        touchstart = cb;
+      });
+      document.removeEventListener = jest.fn((event, cb) => {
+        if (touchstart === cb) {
+          touchstart = () => {};
+        }
+      });
+      const mockToggle = jest.fn();
+      const view = render(
+        <DropdownToggle id="Dropdown Toggle" onToggle={mockToggle} isOpen parentRef={document.createElement('div')}>
+          Dropdown
+        </DropdownToggle>
+      );
+      view.unmount();
+      touchstart({ target: document } as any);
+      expect(mockToggle.mock.calls).toHaveLength(0);
+      expect(document.removeEventListener).toHaveBeenCalledWith('touchstart', expect.any(Function));
     });
-    const mockToggle = jest.fn();
-    const view = render(
-      <DropdownToggle id="Dropdown Toggle" onToggle={mockToggle} isOpen parentRef={document.createElement('div')}>
-        Dropdown
-      </DropdownToggle>
-    );
-    view.unmount();
-    touchstart({ target: document } as any);
-    expect(mockToggle.mock.calls).toHaveLength(0);
-    expect(document.removeEventListener).toHaveBeenCalledWith('touchstart', expect.any(Function));
   });
-});
 
-describe('state', () => {
-  test('hover', () => {
-    const view = render(
-      <DropdownToggle id="Dropdown Toggle" parentRef={document.createElement('div')}>
-        Dropdown
-      </DropdownToggle>
-    );
-    expect(view.container).toMatchSnapshot();
-  });
+  describe('state', () => {
+    test('hover', () => {
+      const view = render(
+        <DropdownToggle id="Dropdown Toggle" parentRef={document.createElement('div')}>
+          Dropdown
+        </DropdownToggle>
+      );
+      expect(view.container).toMatchSnapshot();
+    });
 
-  test('active', () => {
-    const view = render(
-      <DropdownToggle id="Dropdown Toggle" isActive parentRef={document.createElement('div')}>
-        Dropdown
-      </DropdownToggle>
-    );
-    expect(view.container).toMatchSnapshot();
-  });
+    test('active', () => {
+      const view = render(
+        <DropdownToggle id="Dropdown Toggle" isActive parentRef={document.createElement('div')}>
+          Dropdown
+        </DropdownToggle>
+      );
+      expect(view.container).toMatchSnapshot();
+    });
 
-  test('focus', () => {
-    const view = render(
-      <DropdownToggle id="Dropdown Toggle" parentRef={document.createElement('div')}>
-        Dropdown
-      </DropdownToggle>
-    );
-    expect(view.container).toMatchSnapshot();
-  });
+    test('focus', () => {
+      const view = render(
+        <DropdownToggle id="Dropdown Toggle" parentRef={document.createElement('div')}>
+          Dropdown
+        </DropdownToggle>
+      );
+      expect(view.container).toMatchSnapshot();
+    });
 
-  test('button variant - primary', () => {
-    const view = mount(
-      <DropdownToggle id="Dropdown Toggle" toggleVariant="primary" parentRef={document.createElement('div')}>
-        Dropdown
-      </DropdownToggle>
-    );
-    expect(view.find('button').prop('className')).toMatch(/m-primary/);
-    expect(view).toMatchSnapshot();
-  });
+    test('button variant - primary', () => {
+      render(
+        <DropdownToggle id="Dropdown Toggle" toggleVariant="primary" parentRef={document.createElement('div')}>
+          Dropdown
+        </DropdownToggle>
+      );
 
-  test('button variant - secondary', () => {
-    const view = mount(
-      <DropdownToggle id="Dropdown Toggle" toggleVariant="secondary" parentRef={document.createElement('div')}>
-        Dropdown
-      </DropdownToggle>
-    );
-    expect(view.find('button').prop('className')).toMatch(/m-secondary/);
-    expect(view).toMatchSnapshot();
-  });
+      const button = screen.getByRole('button');
 
-  test('button variant - secondary', () => {
-    const view = mount(
-      <DropdownToggle id="Dropdown Toggle" isText isPlain parentRef={document.createElement('div')}>
-        Dropdown
-      </DropdownToggle>
-    );
-    expect(view.find('button').prop('className')).toMatch(/m-text/);
-    expect(view.find('button').prop('className')).toMatch(/m-plain/);
-    expect(view).toMatchSnapshot();
-  });
+      expect(button.className).toContain('primary');
+      expect(button.outerHTML).toMatchSnapshot();
+    });
 
-  test('action split button - renders primary variant', () => {
-    const view = mount(
-      <DropdownToggle
-        id="Dropdown Toggle"
-        toggleVariant="primary"
-        splitButtonItems={[<div key="1">test</div>]}
-        splitButtonVariant="action"
-        parentRef={document.createElement('div')}
-      >
-        Dropdown
-      </DropdownToggle>
-    );
-    expect(view.find('.pf-c-dropdown__toggle').prop('className')).toMatch(/m-primary/);
-    expect(view).toMatchSnapshot();
-  });
+    test('button variant - secondary', () => {
+      render(
+        <DropdownToggle id="Dropdown Toggle" toggleVariant="secondary" parentRef={document.createElement('div')}>
+          Dropdown
+        </DropdownToggle>
+      );
 
-  test('split button - does not render primary variant', () => {
-    const view = mount(
-      <DropdownToggle
-        id="Dropdown Toggle"
-        toggleVariant="primary"
-        splitButtonItems={[<div key="0">test</div>]}
-        parentRef={document.createElement('div')}
-      >
-        Dropdown
-      </DropdownToggle>
-    );
-    expect(view.find('.pf-c-dropdown__toggle').prop('className')).not.toMatch(/m-primary/);
-    expect(view).toMatchSnapshot();
-  });
+      const button = screen.getByRole('button');
 
-  test('class changes', () => {
-    const view = render(
-      <DropdownContext.Provider
-        value={{
-          toggleTextClass: 'some-test-class',
-          toggleIndicatorClass: 'another-test-class'
-        }}
-      >
-        <DropdownToggle id="Dropdown Toggle" parentRef={document.createElement('div')}>
+      expect(button.className).toContain('secondary');
+      expect(button.outerHTML).toMatchSnapshot();
+    });
+
+    test('button variant - plain with text', () => {
+      render(
+        <DropdownToggle id="Dropdown Toggle" isText isPlain parentRef={document.createElement('div')}>
           Dropdown
         </DropdownToggle>
-      </DropdownContext.Provider>
-    );
-    expect(view.container).toMatchSnapshot();
-  });
+      );
 
-  test('class changes', () => {
-    const view = render(
-      <DropdownContext.Provider
-        value={{
-          toggleTextClass: 'some-test-class',
-          toggleIndicatorClass: 'another-test-class'
-        }}
-      >
-        <DropdownToggle id="Dropdown Toggle" parentRef={document.createElement('div')}>
+      const button = screen.getByRole('button');
+
+      expect(button.className).toContain('text');
+      expect(button.className).toContain('plain');
+      expect(button.outerHTML).toMatchSnapshot();
+    });
+
+    test('action split button - renders primary variant', () => {
+      render(
+        <DropdownToggle
+          id="Dropdown Toggle"
+          toggleVariant="primary"
+          splitButtonItems={[<div key="1">test</div>]}
+          splitButtonVariant="action"
+          parentRef={document.createElement('div')}
+          data-testid="test-id"
+        >
           Dropdown
         </DropdownToggle>
-      </DropdownContext.Provider>
-    );
-    expect(view.container).toMatchSnapshot();
+      );
+
+      const dropdownToggle = screen.getByRole('button').parentElement;
+
+      expect(dropdownToggle).toHaveClass('pf-m-primary');
+      expect(dropdownToggle.outerHTML).toMatchSnapshot();
+    });
+
+    test('split button - does not render primary variant', () => {
+      render(
+        <DropdownToggle
+          id="Dropdown Toggle"
+          toggleVariant="primary"
+          splitButtonItems={[<div key="0">test</div>]}
+          parentRef={document.createElement('div')}
+          data-testid="test-id"
+        >
+          Dropdown
+        </DropdownToggle>
+      );
+
+      const dropdownToggle = screen.getByRole('button').parentElement;
+
+      expect(dropdownToggle).not.toHaveClass('pf-m-primary');
+      expect(dropdownToggle.outerHTML).toMatchSnapshot();
+    });
+
+    test('class changes', () => {
+      const view = render(
+        <DropdownContext.Provider
+          value={{
+            toggleTextClass: 'some-test-class',
+            toggleIndicatorClass: 'another-test-class'
+          }}
+        >
+          <DropdownToggle id="Dropdown Toggle" parentRef={document.createElement('div')}>
+            Dropdown
+          </DropdownToggle>
+        </DropdownContext.Provider>
+      );
+      expect(view.container).toMatchSnapshot();
+    });
   });
 });