朱子纯 / test6

Commit f3bba97e8de88e1bc427db5014cbf75e5f0819b8

Authored by zichun
1 parent 15170cb2

feat(fe-login): 提交中态与防重复提交 REQ-USR-004

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