From 990a6026361366b08a09b3cb3936e53b834e39c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A4=BE=E9=95=BF=E9=95=BF?= <ischenkan@outlook.com>
Date: Wed, 25 May 2022 20:31:36 +0800
Subject: [PATCH] test: Replace alert part test with testing lib (#35736)

Co-authored-by: chenkan1 <chenkan1@huya.com>
---
 components/alert/__tests__/index.test.tsx | 61 ++++++++++++-----------
 1 file changed, 32 insertions(+), 29 deletions(-)

diff --git a/components/alert/__tests__/index.test.tsx b/components/alert/__tests__/index.test.tsx
index c25f6191da..8bebb5ecb0 100644
--- a/components/alert/__tests__/index.test.tsx
+++ b/components/alert/__tests__/index.test.tsx
@@ -1,13 +1,12 @@
 import React from 'react';
-import { mount } from 'enzyme';
 import { act } from 'react-dom/test-utils';
-import Button from '../../button';
-import Tooltip from '../../tooltip';
-import Popconfirm from '../../popconfirm';
-import rtlTest from '../../../tests/shared/rtlTest';
-import accessibilityTest from '../../../tests/shared/accessibilityTest';
-import { sleep } from '../../../tests/utils';
 import Alert from '..';
+import accessibilityTest from '../../../tests/shared/accessibilityTest';
+import rtlTest from '../../../tests/shared/rtlTest';
+import { fireEvent, render, sleep } from '../../../tests/utils';
+import Button from '../../button';
+import Popconfirm from '../../popconfirm';
+import Tooltip from '../../tooltip';
 
 const { ErrorBoundary } = Alert;
 
@@ -25,7 +24,7 @@ describe('Alert', () => {
 
   it('could be closed', () => {
     const onClose = jest.fn();
-    const wrapper = mount(
+    const { container } = render(
       <Alert
         message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
         type="warning"
@@ -33,9 +32,10 @@ describe('Alert', () => {
         onClose={onClose}
       />,
     );
+
     act(() => {
       jest.useFakeTimers();
-      wrapper.find('.ant-alert-close-icon').simulate('click');
+      fireEvent.click(container.querySelector('.ant-alert-close-icon')!);
       jest.runAllTimers();
       jest.useRealTimers();
     });
@@ -44,7 +44,7 @@ describe('Alert', () => {
 
   describe('action of Alert', () => {
     it('custom action', () => {
-      const wrapper = mount(
+      const { container } = render(
         <Alert
           message="Success Tips"
           type="success"
@@ -57,12 +57,12 @@ describe('Alert', () => {
           closable
         />,
       );
-      expect(wrapper.render()).toMatchSnapshot();
+      expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   it('support closeIcon', () => {
-    const wrapper = mount(
+    const { container } = render(
       <Alert
         closable
         closeIcon={<span>close</span>}
@@ -70,26 +70,26 @@ describe('Alert', () => {
         type="warning"
       />,
     );
-    expect(wrapper.render()).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   describe('data and aria props', () => {
     it('sets data attributes on input', () => {
-      const wrapper = mount(<Alert data-test="test-id" data-id="12345" message={null} />);
-      const input = wrapper.find('.ant-alert').getDOMNode();
+      const { container } = render(<Alert data-test="test-id" data-id="12345" message={null} />);
+      const input = container.querySelector('.ant-alert')!;
       expect(input.getAttribute('data-test')).toBe('test-id');
       expect(input.getAttribute('data-id')).toBe('12345');
     });
 
     it('sets aria attributes on input', () => {
-      const wrapper = mount(<Alert aria-describedby="some-label" message={null} />);
-      const input = wrapper.find('.ant-alert').getDOMNode();
+      const { container } = render(<Alert aria-describedby="some-label" message={null} />);
+      const input = container.querySelector('.ant-alert')!;
       expect(input.getAttribute('aria-describedby')).toBe('some-label');
     });
 
     it('sets role attribute on input', () => {
-      const wrapper = mount(<Alert role="status" message={null} />);
-      const input = wrapper.find('.ant-alert').getDOMNode();
+      const { container } = render(<Alert role="status" message={null} />);
+      const input = container.querySelector('.ant-alert')!;
       expect(input.getAttribute('role')).toBe('status');
     });
   });
@@ -101,13 +101,13 @@ describe('Alert', () => {
     // @ts-expect-error
     // eslint-disable-next-line react/jsx-no-undef
     const ThrowError = () => <NotExisted />;
-    const wrapper = mount(
+    const { container } = render(
       <ErrorBoundary>
         <ThrowError />
       </ErrorBoundary>,
     );
     // eslint-disable-next-line jest/no-standalone-expect
-    expect(wrapper.text()).toContain('ReferenceError: NotExisted is not defined');
+    expect(container.textContent).toContain('ReferenceError: NotExisted is not defined');
     // eslint-disable-next-line no-console
     (console.error as any).mockRestore();
   });
@@ -115,7 +115,7 @@ describe('Alert', () => {
   it('could be used with Tooltip', async () => {
     const ref = React.createRef<any>();
     jest.useRealTimers();
-    const wrapper = mount(
+    const { container } = render(
       <Tooltip title="xxx" mouseEnterDelay={0} ref={ref}>
         <Alert
           message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
@@ -123,7 +123,8 @@ describe('Alert', () => {
         />
       </Tooltip>,
     );
-    wrapper.find('.ant-alert').simulate('mouseenter');
+    // wrapper.find('.ant-alert').simulate('mouseenter');
+    fireEvent.mouseEnter(container.querySelector('.ant-alert')!);
     await sleep(0);
     expect(ref.current.getPopupDomNode()).toBeTruthy();
     jest.useFakeTimers();
@@ -132,7 +133,7 @@ describe('Alert', () => {
   it('could be used with Popconfirm', async () => {
     const ref = React.createRef<any>();
     jest.useRealTimers();
-    const wrapper = mount(
+    const { container } = render(
       <Popconfirm ref={ref} title="xxx">
         <Alert
           message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
@@ -140,19 +141,21 @@ describe('Alert', () => {
         />
       </Popconfirm>,
     );
-    wrapper.find('.ant-alert').simulate('click');
+    fireEvent.click(container.querySelector('.ant-alert')!);
     await sleep(0);
     expect(ref.current.getPopupDomNode()).toBeTruthy();
     jest.useFakeTimers();
   });
 
   it('could accept none react element icon', () => {
-    const wrapper = mount(<Alert message="Success Tips" type="success" showIcon icon="icon" />);
-    expect(wrapper.render()).toMatchSnapshot();
+    const { container } = render(
+      <Alert message="Success Tips" type="success" showIcon icon="icon" />,
+    );
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it('should not render message div when no message', () => {
-    const wrapper = mount(<Alert description="description" />);
-    expect(wrapper.exists('.ant-alert-message')).toBe(false);
+    const { container } = render(<Alert description="description" />);
+    expect(!!container.querySelector('.ant-alert-message')).toBe(false);
   });
 });