@patternfly/react-core 4.202.28 → 4.202.31

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

@@ -1,148 +1,86 @@
 import React from 'react';
-import { render } from '@testing-library/react';
-import { mount } from 'enzyme';
-import { SelectToggle } from '../SelectToggle';
-
-describe('API', () => {
-  test('click on closed', () => {
-    const mockToggle = jest.fn();
-    const view = mount(
-      <SelectToggle id="Select Toggle" onToggle={mockToggle} parentRef={{ current: document.createElement('div') }}>
-        Select
-      </SelectToggle>
-    );
 
-    view
-      .find('button')
-      .first()
-      .simulate('click');
-    expect(mockToggle.mock.calls[0][0]).toBe(true);
-  });
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
-  test('click on opened', () => {
-    const mockToggle = jest.fn();
-    const view = mount(
-      <SelectToggle
-        id="Select Toggle"
-        onToggle={mockToggle}
-        isOpen
-        parentRef={{ current: document.createElement('div') }}
-      >
-        Select
-      </SelectToggle>
-    );
+import { SelectToggle } from '../SelectToggle';
 
-    view
-      .find('button')
-      .first()
-      .simulate('click');
-    expect(mockToggle.mock.calls[0][0]).toBe(false);
-  });
+describe('SelectToggle', () => {
+  describe('API', () => {
+    test('click on closed', () => {
+      const mockToggle = jest.fn();
+      render(
+        <SelectToggle id="Select Toggle" onToggle={mockToggle} parentRef={{ current: document.createElement('div') }}>
+          Select
+        </SelectToggle>
+      );
 
-  test('click on document', () => {
-    const map = {} as any;
-    document.addEventListener = jest.fn((event, cb) => {
-      map[event] = cb;
+      userEvent.click(screen.getByRole('button'));
+      expect(mockToggle).toHaveBeenCalledWith(true, expect.any(Object));
     });
-    const mockToggle = jest.fn();
-    mount(
-      <SelectToggle
-        id="Select Toggle"
-        onToggle={mockToggle}
-        isOpen
-        parentRef={{ current: document.createElement('div') }}
-      >
-        Select
-      </SelectToggle>
-    );
 
-    map.click({ target: document });
-    expect(mockToggle.mock.calls[0][0]).toBe(false);
-  });
+    test('click on opened', () => {
+      const mockToggle = jest.fn();
+      render(
+        <SelectToggle
+          id="Select Toggle"
+          onToggle={mockToggle}
+          isOpen
+          parentRef={{ current: document.createElement('div') }}
+        >
+          Select
+        </SelectToggle>
+      );
 
-  test('touch on document', () => {
-    const map = {} as any;
-    document.addEventListener = jest.fn((event, cb) => {
-      map[event] = cb;
+      userEvent.click(screen.getByRole('button'));
+      expect(mockToggle).toHaveBeenCalledWith(false, expect.any(MouseEvent));
     });
-    const mockToggle = jest.fn();
-    mount(
-      <SelectToggle
-        id="Select Toggle"
-        onToggle={mockToggle}
-        isOpen
-        parentRef={{ current: document.createElement('div') }}
-      >
-        Select
-      </SelectToggle>
-    );
 
-    map.touchstart({ target: document });
-    expect(mockToggle.mock.calls[0][0]).toBe(false);
-  });
+    test('click on document', () => {
+      const mockToggle = jest.fn();
 
-  test('on click outside has been removed', () => {
-    const map = {} as any;
-    document.addEventListener = jest.fn((event, cb) => {
-      map[event] = cb;
-    });
-    document.removeEventListener = jest.fn((event, cb) => {
-      if (map[event] === cb) {
-        map[event] = () => {};
-      }
-    });
-    const mockToggle = jest.fn();
-    const view = render(
-      <SelectToggle
-        id="Select Toggle"
-        onToggle={mockToggle}
-        isOpen
-        parentRef={{ current: document.createElement('div') }}
-      >
-        Select
-      </SelectToggle>
-    );
-    view.unmount();
-    map.click({ target: document });
-    expect(mockToggle.mock.calls).toHaveLength(0);
-    expect(document.removeEventListener).toHaveBeenCalledWith('click', expect.any(Function));
-  });
+      render(
+        <SelectToggle
+          id="Select Toggle"
+          onToggle={mockToggle}
+          isOpen
+          parentRef={{ current: document.createElement('div') }}
+        >
+          Select
+        </SelectToggle>
+      );
 
-  test('on touch outside has been removed', () => {
-    const map = {} as any;
-    document.addEventListener = jest.fn((event, cb) => {
-      map[event] = cb;
+      userEvent.click(screen.getByText('Select').parentElement);
+      expect(mockToggle).toHaveBeenCalledWith(false, expect.any(MouseEvent));
     });
-    document.removeEventListener = jest.fn((event, cb) => {
-      if (map[event] === cb) {
-        map[event] = () => {};
-      }
+
+    test('on click outside has been removed', () => {
+      const mockToggle = jest.fn();
+
+      render(
+        <SelectToggle
+          id="Select Toggle"
+          onToggle={mockToggle}
+          isOpen={false}
+          parentRef={{ current: document.createElement('div') }}
+        >
+          Select
+        </SelectToggle>
+      );
+
+      userEvent.click(screen.getByText('Select').parentElement);
+      expect(mockToggle).not.toHaveBeenCalled();
     });
-    const mockToggle = jest.fn();
-    const view = render(
-      <SelectToggle
-        id="Select Toggle"
-        onToggle={mockToggle}
-        isOpen
-        parentRef={{ current: document.createElement('div') }}
-      >
-        Select
-      </SelectToggle>
-    );
-    view.unmount();
-    map.touchstart({ target: document });
-    expect(mockToggle.mock.calls).toHaveLength(0);
-    expect(document.removeEventListener).toHaveBeenCalledWith('touchstart', expect.any(Function));
   });
-});
 
-describe('state', () => {
-  test('active', () => {
-    const view = render(
-      <SelectToggle id="Select Toggle" isActive parentRef={{ current: document.createElement('div') }}>
-        Select
-      </SelectToggle>
-    );
-    expect(view.container).toMatchSnapshot();
+  describe('state', () => {
+    test('active', () => {
+      const { asFragment } = render(
+        <SelectToggle id="Select Toggle" isActive parentRef={{ current: document.createElement('div') }}>
+          Select
+        </SelectToggle>
+      );
+      expect(asFragment()).toMatchSnapshot();
+    });
   });
 });