got rid of enzyme in Dropdown tests

kafka-ui-react-app/src/components/common/Dropdown/__tests__/Dropdown.spec.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
-import { mount } from 'enzyme';
 import Dropdown, { DropdownProps } from 'components/common/Dropdown/Dropdown';
 import DropdownItem from 'components/common/Dropdown/DropdownItem';
 import DropdownDivider from 'components/common/Dropdown/DropdownDivider';
+import { fireEvent } from '@testing-library/dom';
+import { render } from 'lib/testHelpers';
 
 const dummyLable = 'My Test Label';
 const dummyChildren = (
@@ -25,45 +26,47 @@ describe('Dropdown', () => {
   );
 
   it('renders Dropdown with initial props', () => {
-    const wrapper = mount(setupWrapper());
-    expect(wrapper.exists('.dropdown')).toBeTruthy();
+    const wrapper = render(setupWrapper()).baseElement;
+    expect(wrapper.querySelector('.dropdown')).toBeTruthy();
 
-    expect(wrapper.exists('.dropdown.is-active')).toBeFalsy();
-    expect(wrapper.exists('.dropdown.is-right')).toBeFalsy();
-    expect(wrapper.exists('.dropdown.is-up')).toBeFalsy();
+    expect(wrapper.querySelector('.dropdown.is-active')).toBeFalsy();
+    expect(wrapper.querySelector('.dropdown.is-right')).toBeFalsy();
+    expect(wrapper.querySelector('.dropdown.is-up')).toBeFalsy();
 
-    expect(wrapper.exists('.dropdown-content')).toBeTruthy();
-    expect(wrapper.find('.dropdown-content').text()).toEqual('');
+    expect(wrapper.querySelector('.dropdown-content')).toBeTruthy();
+    expect(wrapper.querySelector('.dropdown-content')).toHaveTextContent('');
   });
 
   it('renders custom children', () => {
-    const wrapper = mount(setupWrapper({}, dummyChildren));
-    expect(wrapper.exists('.dropdown-content')).toBeTruthy();
-    expect(wrapper.find('.dropdown-item').length).toEqual(3);
-    expect(wrapper.find('.dropdown-divider').length).toEqual(1);
+    const wrapper = render(setupWrapper({}, dummyChildren)).baseElement;
+    expect(wrapper.querySelector('.dropdown-content')).toBeTruthy();
+    expect(wrapper.querySelectorAll('.dropdown-item').length).toEqual(3);
+    expect(wrapper.querySelectorAll('.dropdown-divider').length).toEqual(1);
   });
 
   it('renders dropdown with a right-aligned menu', () => {
-    const wrapper = mount(setupWrapper({ right: true }));
-    expect(wrapper.exists('.dropdown.is-right')).toBeTruthy();
+    const wrapper = render(setupWrapper({ right: true })).baseElement;
+    expect(wrapper.querySelector('.dropdown.is-right')).toBeTruthy();
   });
 
   it('renders dropdown with a popup menu', () => {
-    const wrapper = mount(setupWrapper({ up: true }));
-    expect(wrapper.exists('.dropdown.is-up')).toBeTruthy();
+    const wrapper = render(setupWrapper({ up: true })).baseElement;
+    expect(wrapper.querySelector('.dropdown.is-up')).toBeTruthy();
   });
 
   it('handles click', () => {
-    const wrapper = mount(setupWrapper());
-    expect(wrapper.exists('button')).toBeTruthy();
-    expect(wrapper.exists('.dropdown.is-active')).toBeFalsy();
+    const wrapper = render(setupWrapper()).baseElement;
+    const button = wrapper.querySelector('button') as HTMLElement;
 
-    wrapper.find('button').simulate('click');
-    expect(wrapper.exists('.dropdown.is-active')).toBeTruthy();
+    expect(button).toBeTruthy();
+    expect(wrapper.querySelector('.dropdown.is-active')).toBeFalsy();
+
+    fireEvent.click(button);
+    expect(wrapper.querySelector('.dropdown.is-active')).toBeTruthy();
   });
 
   it('matches snapshot', () => {
-    const wrapper = mount(
+    const wrapper = render(
       setupWrapper(
         {
           right: true,
@@ -72,6 +75,6 @@ describe('Dropdown', () => {
         dummyChildren
       )
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.baseElement).toMatchSnapshot();
   });
 });

kafka-ui-react-app/src/components/common/Dropdown/__tests__/DropdownItem.spec.tsx

@@ -1,23 +1,27 @@
 import React from 'react';
-import { mount } from 'enzyme';
 import DropdownItem from 'components/common/Dropdown/DropdownItem';
+import { render } from 'lib/testHelpers';
+import { fireEvent } from '@testing-library/dom';
 
 const onClick = jest.fn();
 
 describe('DropdownItem', () => {
   it('matches snapshot', () => {
-    const wrapper = mount(
+    const wrapper = render(
       <DropdownItem onClick={jest.fn()}>Item 1</DropdownItem>
     );
     expect(onClick).not.toHaveBeenCalled();
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.baseElement).toMatchSnapshot();
   });
 
   it('handles Click', () => {
-    const wrapper = mount(
+    const wrapper = render(
       <DropdownItem onClick={onClick}>Item 1</DropdownItem>
     );
-    wrapper.simulate('click');
+
+    const dropDown = wrapper.getByText('Item 1');
+
+    fireEvent.click(dropDown);
     expect(onClick).toHaveBeenCalled();
   });
 });

kafka-ui-react-app/src/components/common/Dropdown/__tests__/__snapshots__/Dropdown.spec.tsx.snap

@@ -32,92 +32,61 @@ exports[`Dropdown matches snapshot 1`] = `
   align-self: center;
 }
 
-<Dropdown
-  label="My Test Label"
-  right={true}
-  up={true}
->
-  <div
-    className="dropdown is-right is-up"
-  >
-    <styled.div>
+<body>
+  <div>
+    <div
+      class="dropdown is-right is-up"
+    >
       <div
-        className="c0"
+        class="c0"
       >
-        <Styled(DropdownTrigger)
-          onClick={[Function]}
+        <button
+          aria-controls="dropdown-menu"
+          aria-haspopup="true"
+          class="c1"
+          type="button"
         >
-          <DropdownTrigger
-            className="c1"
-            onClick={[Function]}
-          >
-            <button
-              aria-controls="dropdown-menu"
-              aria-haspopup="true"
-              className="c1"
-              onClick={[Function]}
-              type="button"
-            >
-              My Test Label
-            </button>
-          </DropdownTrigger>
-        </Styled(DropdownTrigger)>
+          My Test Label
+        </button>
       </div>
-    </styled.div>
-    <div
-      className="dropdown-menu"
-      id="dropdown-menu"
-      role="menu"
-    >
       <div
-        className="dropdown-content has-text-left"
+        class="dropdown-menu"
+        id="dropdown-menu"
+        role="menu"
       >
-        <DropdownItem
-          onClick={[MockFunction]}
+        <div
+          class="dropdown-content has-text-left"
         >
           <a
-            className="dropdown-item is-link"
+            class="dropdown-item is-link"
             href="#end"
-            onClick={[Function]}
             role="menuitem"
             type="button"
           >
             Child 1
           </a>
-        </DropdownItem>
-        <DropdownItem
-          onClick={[MockFunction]}
-        >
           <a
-            className="dropdown-item is-link"
+            class="dropdown-item is-link"
             href="#end"
-            onClick={[Function]}
             role="menuitem"
             type="button"
           >
             Child 2
           </a>
-        </DropdownItem>
-        <DropdownDivider>
           <hr
-            className="dropdown-divider"
+            class="dropdown-divider"
           />
-        </DropdownDivider>
-        <DropdownItem
-          onClick={[MockFunction]}
-        >
           <a
-            className="dropdown-item is-link"
+            class="dropdown-item is-link"
             href="#end"
-            onClick={[Function]}
             role="menuitem"
             type="button"
           >
             Child 3
           </a>
-        </DropdownItem>
+        </div>
       </div>
     </div>
   </div>
-</Dropdown>
+</body>
 `;

kafka-ui-react-app/src/components/common/Dropdown/__tests__/__snapshots__/DropdownItem.spec.tsx.snap

@@ -1,17 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DropdownItem matches snapshot 1`] = `
-<DropdownItem
-  onClick={[MockFunction]}
->
-  <a
-    className="dropdown-item is-link"
-    href="#end"
-    onClick={[Function]}
-    role="menuitem"
-    type="button"
-  >
-    Item 1
-  </a>
-</DropdownItem>
+<body>
+  <div>
+    <a
+      class="dropdown-item is-link"
+      href="#end"
+      role="menuitem"
+      type="button"
+    >
+      Item 1
+    </a>
+  </div>
+</body>
 `;