LoginPage.submitting.test.tsx
2.67 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
import { describe, it, expect, vi, beforeEach } from 'vitest';
import { screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
vi.mock('../../src/api/usrApi', () => ({
fetchCompanies: vi.fn(),
login: vi.fn(),
}));
import { fetchCompanies, login } from '../../src/api/usrApi';
import LoginPage from '../../src/pages/usr/Login/LoginPage';
import { renderWithProviders } from './renderLogin';
const mockedFetch = fetchCompanies as unknown as ReturnType<typeof vi.fn>;
const mockedLogin = login as unknown as ReturnType<typeof vi.fn>;
// 单项版本已自动选中（spec § 6.3），只需填用户名 / 密码即构成可提交表单
async function fillForm(user: ReturnType<typeof userEvent.setup>) {
await user.type(screen.getByPlaceholderText('请输入你的用户名'), 'admin');
await user.type(screen.getByPlaceholderText('请输入你的密码'), 'secret');
}
describe('LoginPage 提交中态', () => {
beforeEach(() => {
vi.clearAllMocks();
localStorage.clear();
mockedFetch.mockResolvedValue([{ id: 1, sCompanyName: '甲公司', sVersion: '标准版' }]);
});
it('button loading and fields disabled while submitting', async () => {
mockedLogin.mockReturnValue(new Promise(() => {})); // pending
renderWithProviders(<LoginPage />);
expect(await screen.findByText('甲公司（标准版）')).toBeInTheDocument();
const user = userEvent.setup();
await user.type(screen.getByPlaceholderText('请输入你的用户名'), 'admin');
await user.type(screen.getByPlaceholderText('请输入你的密码'), 'secret');
const submit = screen.getByRole('button', { name: /登\s*录/ });
await user.click(submit);
// 按钮 loading
await waitFor(() => expect(submit).toHaveClass('ant-btn-loading'));
// 字段禁用
expect(screen.getByPlaceholderText('请输入你的用户名')).toBeDisabled();
expect(screen.getByPlaceholderText('请输入你的密码')).toBeDisabled();
});
it('ignores duplicate submit while pending', async () => {
mockedLogin.mockReturnValue(new Promise(() => {})); // pending
renderWithProviders(<LoginPage />);
expect(await screen.findByText('甲公司（标准版）')).toBeInTheDocument();
const user = userEvent.setup();
await fillForm(user);
const submit = screen.getByRole('button', { name: /登\s*录/ });
await user.click(submit);
await waitFor(() => expect(mockedLogin).toHaveBeenCalledTimes(1));
// pending 期间再次点击 + 回车
await user.click(submit);
await user.keyboard('{Enter}');
// 仍只调用一次
await new Promise((r) => setTimeout(r, 50));
expect(mockedLogin).toHaveBeenCalledTimes(1);
});
});