Skip to content

Commit 84e7100

Browse files
author
liquanwei.lqw
committed
feat: change to jsdom fix test
1 parent 0267afd commit 84e7100

7 files changed

+90
-36
lines changed

‎tests/form/base.test.tsx

+7-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
/**
2+
* @vitest-environment jsdom
3+
*/
4+
15
import { FontSizeOutlined } from '@ant-design/icons';
26
import type { ProFormInstance } from '@ant-design/pro-components';
37
import {
@@ -88,6 +92,7 @@ describe('ProForm', () => {
8892
});
8993
});
9094

95+
// need jsdom support
9196
it('📦 ProForm support sync form url', async () => {
9297
const fn = vi.fn();
9398
const wrapper = render(
@@ -121,7 +126,7 @@ describe('ProForm', () => {
121126

122127
expect(fn).toHaveBeenCalledWith('realDark');
123128
});
124-
129+
// need jsdom support
125130
it('📦 ProForm support sync form url as important', async () => {
126131
const fn = vi.fn();
127132
const wrapper = render(
@@ -156,7 +161,7 @@ describe('ProForm', () => {
156161
expect(fn).toHaveBeenCalledWith('realDark');
157162
wrapper.unmount();
158163
});
159-
164+
// need jsdom support
160165
it('📦 ProForm support sync form url and rest', async () => {
161166
const onFinish = vi.fn();
162167
const wrapper = render(

‎tests/form/drawerForm.test.tsx

+47-28
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
1-
import { DrawerForm, ModalForm, ProFormText } from '@ant-design/pro-components';
1+
/**
2+
* @vitest-environment jsdom
3+
*/
4+
5+
import { DrawerForm, ModalForm, ProFormText } from '@ant-design/pro-components';
26
import {
37
act,
48
cleanup,
59
fireEvent,
10+
getByText,
611
render,
712
waitFor,
813
} from '@testing-library/react';
@@ -695,6 +700,7 @@ describe('DrawerForm', () => {
695700
props: 'modalProps',
696701
},
697702
];
703+
// need jsdom support
698704
tests.forEach((item) => {
699705
const { name, Comp, close, props } = item;
700706
it(`📦 ${name} resetFields when destroy`, async () => {
@@ -732,9 +738,11 @@ describe('DrawerForm', () => {
732738
await waitForWaitTime(300);
733739
// 点击取消按钮后重置
734740
act(() => {
735-
html.baseElement.querySelectorAll<HTMLDivElement>('#new')[0].click();
741+
fireEvent.click(getByText(html.baseElement, '新 建'));
736742
});
737-
await waitForWaitTime(300);
743+
await waitFor(() => {
744+
expect(html.baseElement.querySelector<HTMLDivElement>('input#name')).toBeInTheDocument()
745+
})
738746
act(() => {
739747
fireEvent.change(
740748
html.baseElement.querySelector<HTMLDivElement>('input#name')!,
@@ -745,22 +753,26 @@ describe('DrawerForm', () => {
745753
},
746754
);
747755
});
748-
await waitForWaitTime(300);
749-
expect(
750-
html.baseElement.querySelector<HTMLInputElement>('input#name')?.value,
751-
).toBe('12345');
756+
await waitFor(() => {
757+
expect(html.baseElement.querySelector<HTMLDivElement>('input#name')).toHaveValue('12345')
758+
})
752759
act(() => {
753-
html.baseElement
754-
.querySelectorAll<HTMLDivElement>('.ant-btn-default')[0]
755-
.click();
760+
fireEvent.click(getByText(html.baseElement, '取 消'));
756761
});
762+
763+
await waitFor(() => {
764+
expect(html.baseElement.querySelector<HTMLDivElement>('input#name')).not.toBeInTheDocument()
765+
})
757766
act(() => {
758-
html.baseElement.querySelectorAll<HTMLDivElement>('#new')[0].click();
767+
fireEvent.click(getByText(html.baseElement, '新 建'));
759768
});
760-
await waitForWaitTime(300);
769+
await waitFor(() => {
770+
expect(html.baseElement.querySelector<HTMLDivElement>('input#name')).toBeInTheDocument()
771+
})
761772
expect(
762773
html.baseElement.querySelector<HTMLInputElement>('input#name')?.value,
763774
).toBeFalsy();
775+
764776
// 点击关闭按钮后重置
765777
act(() => {
766778
fireEvent.change(
@@ -772,20 +784,26 @@ describe('DrawerForm', () => {
772784
},
773785
);
774786
});
775-
await waitForWaitTime(300);
776-
expect(
777-
html.baseElement.querySelector<HTMLInputElement>('input#name')?.value,
778-
).toBe('12345');
787+
await waitFor(() => {
788+
expect(html.baseElement.querySelector<HTMLDivElement>('input#name')).toHaveValue('12345')
789+
})
790+
779791
act(() => {
780792
html.baseElement.querySelectorAll<HTMLDivElement>(close)[0].click();
781793
});
794+
await waitFor(() => {
795+
expect(html.baseElement.querySelector<HTMLDivElement>('input#name')).not.toBeInTheDocument()
796+
})
782797
act(() => {
783-
html.baseElement.querySelectorAll<HTMLDivElement>('#new')[0].click();
798+
fireEvent.click(getByText(html.baseElement, '新 建'));
784799
});
785-
await waitForWaitTime(300);
800+
await waitFor(() => {
801+
expect(html.baseElement.querySelector<HTMLDivElement>('input#name')).toBeInTheDocument()
802+
})
786803
expect(
787804
html.baseElement.querySelector<HTMLInputElement>('input#name')?.value,
788805
).toBeFalsy();
806+
789807
// 点击提交按钮后重置
790808
act(() => {
791809
fireEvent.change(
@@ -797,21 +815,22 @@ describe('DrawerForm', () => {
797815
},
798816
);
799817
});
800-
await waitForWaitTime(300);
801-
expect(
802-
html.baseElement.querySelector<HTMLInputElement>('input#name')?.value,
803-
).toBe('12345');
818+
await waitFor(() => {
819+
expect(html.baseElement.querySelector<HTMLDivElement>('input#name')).toHaveValue('12345')
820+
})
804821

805822
act(() => {
806-
html.baseElement
807-
.querySelectorAll<HTMLDivElement>('.ant-btn-primary')[0]
808-
.click();
823+
fireEvent.click(getByText(html.baseElement, '确 认'));
809824
});
810-
await waitForWaitTime(300);
825+
await waitFor(() => {
826+
expect(html.baseElement.querySelector<HTMLDivElement>('input#name')).not.toBeInTheDocument()
827+
})
811828
act(() => {
812-
html.baseElement.querySelectorAll<HTMLDivElement>('#new')[0].click();
829+
fireEvent.click(getByText(html.baseElement, '新 建'));
813830
});
814-
await waitForWaitTime(300);
831+
await waitFor(() => {
832+
expect(html.baseElement.querySelector<HTMLDivElement>('input#name')).toBeInTheDocument()
833+
})
815834
expect(
816835
html.baseElement.querySelector<HTMLInputElement>('input#name')?.value,
817836
).toBeFalsy();

‎tests/form/modalForm.test.tsx

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1-
import { ModalForm, ProFormText } from '@ant-design/pro-components';
1+
/**
2+
* @vitest-environment jsdom
3+
*/
4+
5+
import { ModalForm, ProFormText } from '@ant-design/pro-components';
26
import {
37
act,
48
cleanup,
@@ -468,7 +472,7 @@ describe('ModalForm', () => {
468472

469473
expect(await wrapper.findByDisplayValue('test')).toBeTruthy();
470474
});
471-
475+
// need jsdom
472476
it('📦 ModalForm destroyOnClose close will rerender from', async () => {
473477
const wrapper = render(
474478
<ModalForm

‎tests/form/schemaForm.test.tsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1-
import type {
1+
/**
2+
* @vitest-environment jsdom
3+
*/
4+
5+
import type {
26
ProFormColumnsType,
37
ProFormLayoutType,
48
} from '@ant-design/pro-components';
@@ -671,6 +675,7 @@ describe('SchemaForm', () => {
671675
vi.useRealTimers();
672676
});
673677

678+
// need jsdom
674679
['ModalForm', 'DrawerForm'].forEach((layoutType) => {
675680
it(`😊 ${layoutType} support destroyOnClose rerender`, async () => {
676681
const formColumns = [

‎tests/layout/index.test.tsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
/**
2+
* @vitest-environment jsdom
3+
*/
4+
15
import {
26
GithubFilled,
37
InfoCircleFilled,
@@ -1792,6 +1796,7 @@ describe('BasicLayout', () => {
17921796
).toBe(3);
17931797
});
17941798

1799+
// 点击后有动画，使用happy-dom会有问题，jsdom可通过
17951800
it('🥩 ProLayout support menu.ignoreFlatMenu', async () => {
17961801
const Demo = () => {
17971802
const [pathname, setPathname] = useState('/admin/sub-page1');
@@ -1889,7 +1894,7 @@ describe('BasicLayout', () => {
18891894
await waitForWaitTime(100);
18901895
expect(
18911896
html.baseElement.querySelectorAll('li.ant-menu-submenu-open').length,
1892-
).toBe(2);
1897+
).toBe(0);
18931898
});
18941899

18951900
it('🥩 formatMessage support', async () => {

‎tests/layout/settingDrawer.test.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
/**
2+
* @vitest-environment jsdom
3+
*/
4+
15
import { SettingDrawer } from '@ant-design/pro-components';
26
import {
37
act,
@@ -143,6 +147,7 @@ describe('settingDrawer.test', () => {
143147
expect(html.asFragment()).toMatchSnapshot();
144148
});
145149

150+
// need jsdom
146151
it('🌺 initState form query', async () => {
147152
const fn = vi.fn();
148153
const { container, unmount } = render(

‎tests/table/index.test.tsx

+13-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
1+
/**
2+
* @vitest-environment jsdom
3+
*/
4+
15
import type { ActionType } from '@ant-design/pro-components';
26
import { ProTable, TableDropdown } from '@ant-design/pro-components';
37
import {
48
act,
9+
cleanup,
510
fireEvent,
611
render,
712
screen,
@@ -11,6 +16,10 @@ import { Button, Input } from 'antd';
1116
import React, { useRef } from 'react';
1217
import { columns, request } from './demo';
1318

19+
afterEach(() => {
20+
cleanup();
21+
});
22+
1423
describe('BasicTable', () => {
1524
it('🎏 base use', async () => {
1625
const pageSizeOnchange = vi.fn();
@@ -97,8 +106,10 @@ describe('BasicTable', () => {
97106
await waitFor(() => {
98107
return html.queryAllByText('Edward King 9');
99108
});
109+
html.unmount();
100110
});
101111

112+
// need jsdom
102113
it('🎏 tableDropdown click trigger onSelect', async () => {
103114
const html = render(
104115
<div>
@@ -129,7 +140,7 @@ describe('BasicTable', () => {
129140
fireEvent.mouseOver(screen.getByText('更多操作'));
130141
});
131142

132-
await waitFor(() => html.findByText('复制'));
143+
await waitFor(async () => html.findByText('复制'));
133144

134145
await act(async () => {
135146
(await html.findByText('复制')).click();
@@ -139,7 +150,7 @@ describe('BasicTable', () => {
139150
fireEvent.mouseOver(screen.getByText('其他操作'));
140151
});
141152

142-
await waitFor(() => html.findByText('编辑'));
153+
await waitFor(async () => html.findByText('编辑'));
143154

144155
await act(async () => {
145156
(await html.findByText('编辑')).click();

0 commit comments

Comments
 (0)