From 166100ee1bde0b0d1755f1a4454ad23293ad0473 Mon Sep 17 00:00:00 2001
From: yykoypj <601924094@qq.com>
Date: Wed, 1 Jun 2022 09:40:25 +0800
Subject: [PATCH] test: move test cases to @testing/library for Drawer (#35839)

---
 components/drawer/__tests__/Drawer.test.js    | 55 +++++++------
 .../drawer/__tests__/MultiDrawer.test.js      | 80 +++++++++----------
 2 files changed, 67 insertions(+), 68 deletions(-)

diff --git a/components/drawer/__tests__/Drawer.test.js b/components/drawer/__tests__/Drawer.test.js
index 35ad2c9f63..8f5a8447e8 100644
--- a/components/drawer/__tests__/Drawer.test.js
+++ b/components/drawer/__tests__/Drawer.test.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import { mount } from 'enzyme';
 import { render } from '../../../tests/utils';
 import Drawer from '..';
 import ConfigProvider from '../../config-provider';
@@ -19,71 +18,71 @@ describe('Drawer', () => {
   rtlTest(Drawer);
 
   it('render correctly', () => {
-    const wrapper = mount(
+    const { container: wrapper } = render(
       <Drawer visible width={400} getContainer={false}>
         Here is content of Drawer
       </Drawer>,
     );
-    expect(wrapper.render()).toMatchSnapshot();
+    expect(wrapper.firstChild).toMatchSnapshot();
   });
 
   it('getContainer return undefined', () => {
-    let wrapper = mount(<DrawerTest getContainer={() => undefined} />);
-    expect(wrapper.render()).toMatchSnapshot();
-    wrapper = mount(<DrawerTest getContainer={false} />);
-    expect(wrapper.render()).toMatchSnapshot();
+    const { container: wrapper, rerender } = render(<DrawerTest getContainer={() => undefined} />);
+    expect(wrapper.firstChild).toMatchSnapshot();
+    rerender(<DrawerTest getContainer={false} />);
+    expect(wrapper.firstChild).toMatchSnapshot();
   });
 
   it('render top drawer', () => {
-    const wrapper = mount(
+    const { container: wrapper } = render(
       <Drawer visible height={400} placement="top" getContainer={false}>
         Here is content of Drawer
       </Drawer>,
     );
-    expect(wrapper.render()).toMatchSnapshot();
+    expect(wrapper.firstChild).toMatchSnapshot();
   });
 
   it('have a title', () => {
-    const wrapper = mount(
+    const { container: wrapper } = render(
       <Drawer visible title="Test Title" getContainer={false}>
         Here is content of Drawer
       </Drawer>,
     );
-    expect(wrapper.render()).toMatchSnapshot();
+    expect(wrapper.firstChild).toMatchSnapshot();
   });
 
   it('closable is false', () => {
-    const wrapper = mount(
+    const { container: wrapper } = render(
       <Drawer visible closable={false} getContainer={false}>
         Here is content of Drawer
       </Drawer>,
     );
-    expect(wrapper.render()).toMatchSnapshot();
+    expect(wrapper.firstChild).toMatchSnapshot();
   });
 
   it('destroyOnClose is true', () => {
-    const wrapper = mount(
+    const { container: wrapper } = render(
       <Drawer destroyOnClose visible={false} getContainer={false}>
         Here is content of Drawer
       </Drawer>,
     );
-    expect(wrapper.render()).toMatchSnapshot();
+    expect(wrapper.firstChild).toMatchSnapshot();
   });
 
   it('className is test_drawer', () => {
-    const wrapper = mount(
+    const { container: wrapper } = render(
       <Drawer destroyOnClose visible={false} className="test_drawer" getContainer={false}>
         Here is content of Drawer
       </Drawer>,
     );
-    expect(wrapper.render()).toMatchSnapshot();
+    expect(wrapper.firstChild).toMatchSnapshot();
   });
 
   it('style/drawerStyle/headerStyle/bodyStyle should work', () => {
     const style = {
       backgroundColor: '#08c',
     };
-    const wrapper = mount(
+    const { container: wrapper } = render(
       <Drawer
         visible
         style={style}
@@ -95,44 +94,44 @@ describe('Drawer', () => {
         Here is content of Drawer
       </Drawer>,
     );
-    expect(wrapper.render()).toMatchSnapshot();
+    expect(wrapper.firstChild).toMatchSnapshot();
   });
 
   it('have a footer', () => {
-    const wrapper = mount(
+    const { container: wrapper } = render(
       <Drawer visible footer="Test Footer" getContainer={false}>
         Here is content of Drawer
       </Drawer>,
     );
-    expect(wrapper.render()).toMatchSnapshot();
+    expect(wrapper.firstChild).toMatchSnapshot();
   });
 
   it('forceRender works', () => {
-    const wrapper = mount(
+    const { baseElement, rerender } = render(
       <Drawer>
         <button type="button" className="forceRender">
           should not be rendered
         </button>
       </Drawer>,
     );
-    expect(wrapper.find('button.forceRender').length).toBe(0);
-    const wrapper2 = mount(
+    expect(baseElement.querySelectorAll('button.forceRender').length).toBe(0);
+    rerender(
       <Drawer forceRender>
         <button type="button" className="forceRender">
           should be rendered
         </button>
       </Drawer>,
     );
-    expect(wrapper2.find('button.forceRender').length).toBe(1);
+    expect(baseElement.querySelectorAll('button.forceRender').length).toBe(1);
   });
 
   it('support closeIcon', () => {
-    const wrapper = mount(
+    const { container: wrapper } = render(
       <Drawer visible closable closeIcon={<span>close</span>} width={400} getContainer={false}>
         Here is content of Drawer
       </Drawer>,
     );
-    expect(wrapper.render()).toMatchSnapshot();
+    expect(wrapper.firstChild).toMatchSnapshot();
   });
 
   it('ConfigProvider should not warning', () => {
@@ -151,7 +150,7 @@ describe('Drawer', () => {
 
   it('should support ref', () => {
     const ref = React.createRef();
-    mount(
+    render(
       <Drawer visible ref={ref} width={400}>
         Here is content of Drawer
       </Drawer>,
diff --git a/components/drawer/__tests__/MultiDrawer.test.js b/components/drawer/__tests__/MultiDrawer.test.js
index 601ac19a7f..0dbe3a0ee6 100644
--- a/components/drawer/__tests__/MultiDrawer.test.js
+++ b/components/drawer/__tests__/MultiDrawer.test.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import { mount } from 'enzyme';
 import Drawer from '..';
 import Button from '../../button';
+import { render, fireEvent } from '../../../tests/utils';
 
 class MultiDrawer extends React.Component {
   state = { visible: false, childrenDrawer: false, hasChildren: true };
@@ -110,68 +110,68 @@ class MultiDrawer extends React.Component {
 
 describe('Drawer', () => {
   it('render right MultiDrawer', () => {
-    const wrapper = mount(<MultiDrawer placement="right" />);
-    wrapper.find('button#open_drawer').simulate('click');
-    wrapper.find('button#open_two_drawer').simulate('click');
-    const translateX = wrapper.find('.ant-drawer.test_drawer').get(0).props.style.transform;
+    const { container: wrapper } = render(<MultiDrawer placement="right" />);
+    fireEvent.click(wrapper.querySelector('button#open_drawer'));
+    fireEvent.click(wrapper.querySelector('button#open_two_drawer'));
+    const translateX = wrapper.querySelectorAll('.ant-drawer.test_drawer')[0].style.transform;
     expect(translateX).toEqual('translateX(-180px)');
-    expect(wrapper.find('#two_drawer_text').exists()).toBe(true);
+    expect(wrapper.querySelectorAll('#two_drawer_text').length).toBe(1);
   });
 
   it('render left MultiDrawer', () => {
-    const wrapper = mount(<MultiDrawer placement="left" />);
-    wrapper.find('button#open_drawer').simulate('click');
-    wrapper.find('button#open_two_drawer').simulate('click');
-    const translateX = wrapper.find('.ant-drawer.test_drawer').get(0).props.style.transform;
+    const { container: wrapper } = render(<MultiDrawer placement="left" />);
+    fireEvent.click(wrapper.querySelector('button#open_drawer'));
+    fireEvent.click(wrapper.querySelector('button#open_two_drawer'));
+    const translateX = wrapper.querySelectorAll('.ant-drawer.test_drawer')[0].style.transform;
     expect(translateX).toEqual('translateX(180px)');
-    expect(wrapper.find('#two_drawer_text').exists()).toBe(true);
-    wrapper.find('.Two-level .ant-drawer-close').simulate('click');
-    expect(wrapper.find('.childrenDrawer').text()).toEqual('false');
+    expect(wrapper.querySelectorAll('#two_drawer_text').length).toBe(1);
+    fireEvent.click(wrapper.querySelector('.Two-level .ant-drawer-close'));
+    expect(wrapper.querySelector('.childrenDrawer').innerHTML).toEqual('false');
   });
 
   it('render top MultiDrawer', () => {
-    const wrapper = mount(<MultiDrawer placement="top" />);
-    wrapper.find('button#open_drawer').simulate('click');
-    wrapper.find('button#open_two_drawer').simulate('click');
-    const translateX = wrapper.find('.ant-drawer.test_drawer').get(0).props.style.transform;
+    const { container: wrapper } = render(<MultiDrawer placement="top" />);
+    fireEvent.click(wrapper.querySelector('button#open_drawer'));
+    fireEvent.click(wrapper.querySelector('button#open_two_drawer'));
+    const translateX = wrapper.querySelectorAll('.ant-drawer.test_drawer')[0].style.transform;
     expect(translateX).toEqual('translateY(180px)');
-    expect(wrapper.find('#two_drawer_text').exists()).toBe(true);
+    expect(wrapper.querySelectorAll('#two_drawer_text').length).toBe(1);
   });
 
   it('render MultiDrawer is child in unmount', () => {
-    const wrapper = mount(<MultiDrawer placement="top" mask={false} />);
-    wrapper.find('button#open_drawer').simulate('click');
-    wrapper.find('button#open_two_drawer').simulate('click');
-    wrapper.find('button#remove_drawer').simulate('click');
-    let translateX = wrapper.find('.ant-drawer.test_drawer').get(0).props.style.transform;
-    expect(translateX).toEqual(undefined);
-    wrapper.find('button#open_two_drawer').simulate('click');
-    translateX = wrapper.find('.ant-drawer.test_drawer').get(0).props.style.transform;
+    const { container: wrapper } = render(<MultiDrawer placement="top" mask={false} />);
+    fireEvent.click(wrapper.querySelector('button#open_drawer'));
+    fireEvent.click(wrapper.querySelector('button#open_two_drawer'));
+    fireEvent.click(wrapper.querySelector('button#remove_drawer'));
+    let translateX = wrapper.querySelectorAll('.ant-drawer.test_drawer')[0].style.transform;
+    expect(translateX).toEqual('');
+    fireEvent.click(wrapper.querySelector('button#open_two_drawer'));
+    translateX = wrapper.querySelectorAll('.ant-drawer.test_drawer')[0].style.transform;
     expect(translateX).toEqual('translateY(180px)');
-    expect(wrapper.find('#two_drawer_text').exists()).toBe(true);
+    expect(wrapper.querySelectorAll('#two_drawer_text').length).toBe(1);
   });
 
   it('custom MultiDrawer push distance', () => {
-    const wrapper = mount(<MultiDrawer push={{ distance: 256 }} />);
-    wrapper.find('button#open_drawer').simulate('click');
-    wrapper.find('button#open_two_drawer').simulate('click');
-    const translateX = wrapper.find('.ant-drawer.test_drawer').get(0).props.style.transform;
+    const { container: wrapper } = render(<MultiDrawer push={{ distance: 256 }} />);
+    fireEvent.click(wrapper.querySelector('button#open_drawer'));
+    fireEvent.click(wrapper.querySelector('button#open_two_drawer'));
+    const translateX = wrapper.querySelectorAll('.ant-drawer.test_drawer')[0].style.transform;
     expect(translateX).toEqual('translateX(-256px)');
   });
 
   it('custom MultiDrawer push with true', () => {
-    const wrapper = mount(<MultiDrawer push />);
-    wrapper.find('button#open_drawer').simulate('click');
-    wrapper.find('button#open_two_drawer').simulate('click');
-    const translateX = wrapper.find('.ant-drawer.test_drawer').get(0).props.style.transform;
+    const { container: wrapper } = render(<MultiDrawer push />);
+    fireEvent.click(wrapper.querySelector('button#open_drawer'));
+    fireEvent.click(wrapper.querySelector('button#open_two_drawer'));
+    const translateX = wrapper.querySelectorAll('.ant-drawer.test_drawer')[0].style.transform;
     expect(translateX).toEqual('translateX(-180px)');
   });
 
   it('custom MultiDrawer push with false', () => {
-    const wrapper = mount(<MultiDrawer push={false} />);
-    wrapper.find('button#open_drawer').simulate('click');
-    wrapper.find('button#open_two_drawer').simulate('click');
-    const translateX = wrapper.find('.ant-drawer.test_drawer').get(0).props.style.transform;
-    expect(translateX).toBeUndefined();
+    const { container: wrapper } = render(<MultiDrawer push={false} />);
+    fireEvent.click(wrapper.querySelector('button#open_drawer'));
+    fireEvent.click(wrapper.querySelector('button#open_two_drawer'));
+    const translateX = wrapper.querySelectorAll('.ant-drawer.test_drawer')[0].style.transform;
+    expect(translateX).toEqual('');
   });
 });