test: transfer tooltip test case to testing library

ant-design · May 7, 2022 · 8545647 · 8545647
1 parent 1a788cf
commit 8545647
Showing 1 changed file with 60 additions and 51 deletions.
diff --git a/components/tooltip/__tests__/tooltip.test.js b/components/tooltip/__tests__/tooltip.test.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import { mount } from 'enzyme';
 import { spyElementPrototype } from 'rc-util/lib/test/domHook';
 import { fireEvent, render } from '@testing-library/react';
 import Tooltip from '..';
@@ -96,7 +95,7 @@ describe('Tooltip', () => {
     const onVisibleChange = jest.fn();
     const ref = React.createRef();
 
-    const wrapper = mount(
+    const { container } = render(
       <Tooltip
         title="xxxxx"
         mouseEnterDelay={0}
@@ -110,13 +109,14 @@ describe('Tooltip', () => {
       </Tooltip>,
     );
 
-    expect(wrapper.find('span')).toHaveLength(1);
-    const button = wrapper.find('span').at(0);
-    button.simulate('mouseenter');
+    expect(container.getElementsByTagName('span')).toHaveLength(1);
+    const button = container.getElementsByTagName('span')[0];
+
+    fireEvent.mouseEnter(button);
     expect(onVisibleChange).toHaveBeenCalledWith(true);
     expect(ref.current.props.visible).toBe(true);
 
-    button.simulate('mouseleave');
+    fireEvent.mouseLeave(button);
     expect(onVisibleChange).toHaveBeenCalledWith(false);
     expect(ref.current.props.visible).toBe(false);
   });
@@ -126,7 +126,7 @@ describe('Tooltip', () => {
       it(name, () => {
         const onVisibleChange = jest.fn();
         const ref = React.createRef();
-        const wrapper = mount(
+        const { container } = render(
           <Tooltip
             title="xxxxx"
             mouseEnterDelay={0}
@@ -138,13 +138,14 @@ describe('Tooltip', () => {
           </Tooltip>,
         );
 
-        expect(wrapper.render()).toMatchSnapshot();
-        const button = wrapper.find('span').at(0);
-        button.simulate('mouseenter');
+        expect(container.children[0]).toMatchSnapshot();
+        const button = container.getElementsByTagName('span')[0];
+
+        fireEvent.mouseEnter(button);
         expect(onVisibleChange).toHaveBeenCalledWith(true);
         expect(ref.current.props.visible).toBe(true);
 
-        button.simulate('mouseleave');
+        fireEvent.mouseLeave(button);
         expect(onVisibleChange).toHaveBeenCalledWith(false);
         expect(ref.current.props.visible).toBe(false);
       });
@@ -155,20 +156,20 @@ describe('Tooltip', () => {
   });
 
   it('should render disabled Button style properly', () => {
-    const wrapper1 = mount(
+    const { container: containerInline } = render(
       <Tooltip title="xxxxx">
         <Button disabled>Hello world!</Button>
       </Tooltip>,
     );
-    const wrapper2 = mount(
+    const { container: containerBlock } = render(
       <Tooltip title="xxxxx">
         <Button disabled style={{ display: 'block' }}>
           Hello world!
         </Button>
       </Tooltip>,
     );
-    expect(wrapper1.find('span').first().getDOMNode().style.display).toBe('inline-block');
-    expect(wrapper2.find('span').first().getDOMNode().style.display).toBe('block');
+    expect(containerInline.getElementsByTagName('span')[0].style.display).toBe('inline-block');
+    expect(containerBlock.getElementsByTagName('span')[0].style.display).toBe('block');
   });
 
   it('should works for arrowPointAtCenter', () => {
@@ -177,41 +178,43 @@ describe('Tooltip', () => {
     const triggerWidth = 200;
 
     const suit = () => {
-      const wrapper = mount(
+      const ref1 = React.createRef();
+      const ref2 = React.createRef();
+      const { container } = render(
         <Tooltip
           title="xxxxx"
           trigger="click"
           mouseEnterDelay={0}
           mouseLeaveDelay={0}
           placement="bottomLeft"
+          ref={ref1}
         >
           <button type="button" style={{ width: triggerWidth }}>
             Hello world!
           </button>
         </Tooltip>,
       );
-      wrapper.find('button').at(0).simulate('click');
-      const popupLeftDefault = parseInt(wrapper.instance().getPopupDomNode().style.left, 10);
+      fireEvent.click(container.getElementsByTagName('button')[0]);
 
-      const wrapper2 = mount(
+      const popupLeftDefault = parseInt(ref1.current.getPopupDomNode().style.left, 10);
+
+      const { container: container2 } = render(
         <Tooltip
           title="xxxxx"
           trigger="click"
           mouseEnterDelay={0}
           mouseLeaveDelay={0}
           placement="bottomLeft"
           arrowPointAtCenter
+          ref={ref2}
         >
           <button type="button" style={{ width: triggerWidth }}>
             Hello world!
           </button>
         </Tooltip>,
       );
-      wrapper2.find('button').at(0).simulate('click');
-      const popupLeftArrowPointAtCenter = parseInt(
-        wrapper2.instance().getPopupDomNode().style.left,
-        10,
-      );
+      fireEvent.click(container2.getElementsByTagName('button')[0]);
+      const popupLeftArrowPointAtCenter = parseInt(ref2.current.getPopupDomNode().style.left, 10);
       expect(popupLeftArrowPointAtCenter - popupLeftDefault).toBe(
         triggerWidth / 2 - horizontalArrowShift - arrowWidth,
       );
@@ -224,20 +227,21 @@ describe('Tooltip', () => {
     const onVisibleChange = jest.fn();
     const ref = React.createRef();
 
-    const wrapper = mount(
+    const { container } = render(
       <Tooltip title="date picker" onVisibleChange={onVisibleChange} ref={ref}>
         <DatePicker />
       </Tooltip>,
     );
 
-    expect(wrapper.find('.ant-picker')).toHaveLength(1);
-    const picker = wrapper.find('.ant-picker').at(0);
-    picker.simulate('mouseenter');
+    expect(container.getElementsByClassName('ant-picker')).toHaveLength(1);
+    const picker = container.getElementsByClassName('ant-picker')[0];
+
+    fireEvent.mouseEnter(picker);
     await sleep(100);
     expect(onVisibleChange).toHaveBeenCalledWith(true);
     expect(ref.current.props.visible).toBe(true);
 
-    picker.simulate('mouseleave');
+    fireEvent.mouseLeave(picker);
     await sleep(100);
     expect(onVisibleChange).toHaveBeenCalledWith(false);
     expect(ref.current.props.visible).toBe(false);
@@ -270,25 +274,25 @@ describe('Tooltip', () => {
 
   // https://github.com/ant-design/ant-design/issues/20891
   it('should display zero', () => {
-    const wrapper = mount(
+    const { container } = render(
       <Tooltip title={0} visible>
         <div />
       </Tooltip>,
     );
-    expect(wrapper.find('.ant-tooltip-inner').getDOMNode().innerHTML).toBe('0');
+    expect(container.querySelector('.ant-tooltip-inner').innerHTML).toBe('0');
   });
 
   it('autoAdjustOverflow should be object or undefined', () => {
     expect(() => {
-      mount(
+      render(
         <Tooltip title={0} visible autoAdjustOverflow={{ adjustX: 0, adjustY: 0 }}>
           <div />
         </Tooltip>,
       );
     }).not.toThrow();
 
     expect(() => {
-      mount(
+      render(
         <Tooltip title={0} visible autoAdjustOverflow={undefined}>
           <div />
         </Tooltip>,
@@ -297,30 +301,35 @@ describe('Tooltip', () => {
   });
 
   it('support other placement', done => {
-    const wrapper = mount(
+    const ref = React.createRef();
+    const { container } = render(
       <Tooltip
         title="xxxxx"
         placement="bottomLeft"
         transitionName=""
         mouseEnterDelay={0}
-        afterVisibleChange={visible => {
+        ref={ref}
+        afterVisibleChange={async visible => {
           if (visible) {
-            expect(wrapper.find('Trigger').props().popupPlacement).toBe('bottomLeft');
+            await sleep(500);
+            expect(ref.current.getPopupDomNode().className).toContain(
+              'ant-tooltip-placement-bottomLeft',
+            );
           }
           done();
         }}
       >
         <span>Hello world!</span>
       </Tooltip>,
     );
-    expect(wrapper.find('span')).toHaveLength(1);
-    const button = wrapper.find('span').at(0);
-    button.simulate('mouseenter');
+    expect(container.getElementsByTagName('span')).toHaveLength(1);
+    const button = container.getElementsByTagName('span')[0];
+    fireEvent.mouseEnter(button);
   });
 
   it('other placement when mouse enter', async () => {
     const ref = React.createRef();
-    const wrapper = mount(
+    const { container } = render(
       <Tooltip
         title="xxxxx"
         placement="topRight"
@@ -333,16 +342,16 @@ describe('Tooltip', () => {
       </Tooltip>,
     );
 
-    expect(wrapper.find('span')).toHaveLength(1);
-    const button = wrapper.find('span').at(0);
-    button.simulate('mouseenter');
+    expect(container.getElementsByTagName('span')).toHaveLength(1);
+    const button = container.getElementsByTagName('span')[0];
+    fireEvent.mouseEnter(button);
     await sleep(500);
     expect(ref.current.getPopupDomNode().className).toContain('placement-topRight');
   });
 
   it('should works for mismatch placement', async () => {
     const ref = React.createRef();
-    const wrapper = mount(
+    const { container } = render(
       <Tooltip
         title="xxxxx"
         align={{
@@ -354,24 +363,24 @@ describe('Tooltip', () => {
         <span>Hello world!</span>
       </Tooltip>,
     );
-    const button = wrapper.find('span').at(0);
-    button.simulate('mouseenter');
+    const button = container.getElementsByTagName('span')[0];
+    fireEvent.mouseEnter(button);
     await sleep(600);
     expect(ref.current.getPopupDomNode().className).toContain('ant-tooltip');
   });
 
   it('should pass overlayInnerStyle through to the inner component', () => {
-    const wrapper = mount(
+    const { container } = render(
       <Tooltip overlayInnerStyle={{ color: 'red' }} title="xxxxx" visible>
         <div />
       </Tooltip>,
     );
-    expect(wrapper.find('.ant-tooltip-inner').getDOMNode().style.color).toBe('red');
+    expect(container.querySelector('.ant-tooltip-inner').style.color).toBe('red');
   });
 
   it('should work with loading switch', () => {
     const onVisibleChange = jest.fn();
-    const wrapper = mount(
+    const { container } = render(
       <Tooltip
         title="loading tips"
         mouseEnterDelay={0}
@@ -381,9 +390,9 @@ describe('Tooltip', () => {
         <Switch loading defaultChecked />
       </Tooltip>,
     );
-    const wrapperEl = wrapper.find('.ant-tooltip-disabled-compatible-wrapper');
+    const wrapperEl = container.querySelectorAll('.ant-tooltip-disabled-compatible-wrapper');
     expect(wrapperEl).toHaveLength(1);
-    wrapper.find('span').first().simulate('mouseenter');
+    fireEvent.mouseEnter(container.getElementsByTagName('span')[0]);
     expect(onVisibleChange).toHaveBeenLastCalledWith(true);
   });
 });