朱子纯 / test6

Commit 15170cb26e3c1666bd08c8a9aff675adcacf6d90

Authored by zichun
1 parent f6f886c1

feat(fe-login): 登录表单必填校验与提交装配 REQ-USR-004

Inline Side-by-side
Showing 1 changed file with 69 additions and 0 deletions
frontend/tests/unit/LoginPage.validation.test.tsx 0 → 100644
  View file @15170cb
  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 +async function selectVersion(user: ReturnType<typeof userEvent.setup>, label: string) {
  18 + const combobox = screen.getByRole('combobox');
  19 + await user.click(combobox);
  20 + const option = await screen.findByText(label);
  21 + await user.click(option);
  22 +}
  23 +
  24 +describe('LoginPage 必填校验', () => {
  25 + beforeEach(() => {
  26 + vi.clearAllMocks();
  27 + localStorage.clear();
  28 + mockedFetch.mockResolvedValue([
  29 + { id: 1, sCompanyName: '甲公司', sVersion: '标准版' },
  30 + { id: 2, sCompanyName: '乙公司', sVersion: null },
  31 + ]);
  32 + });
  33 +
  34 + it('blocks submit and shows required messages when empty', async () => {
  35 + renderWithProviders(<LoginPage />);
  36 + // 等待版本加载完成
  37 + expect(await screen.findByText('请选择版本')).toBeInTheDocument();
  38 + const user = userEvent.setup();
  39 + await user.click(screen.getByRole('button', { name: /登\s*录/ }));
  40 + // 校验错误文案渲染在 .ant-form-item-explain-error，逐条断言（避免与 Select placeholder 文案冲突）
  41 + await waitFor(() => {
  42 + const errors = Array.from(
  43 + document.querySelectorAll('.ant-form-item-explain-error'),
  44 + ).map((el) => el.textContent);
  45 + expect(errors).toContain('请输入用户名');
  46 + expect(errors).toContain('请输入密码');
  47 + expect(errors).toContain('请选择版本');
  48 + });
  49 + expect(mockedLogin).not.toHaveBeenCalled();
  50 + });
  51 +
  52 + it('submits with payload when all filled', async () => {
  53 + mockedLogin.mockReturnValue(new Promise(() => {})); // 挂起，只断言入参
  54 + renderWithProviders(<LoginPage />);
  55 + expect(await screen.findByText('请选择版本')).toBeInTheDocument();
  56 + const user = userEvent.setup();
  57 + await user.type(screen.getByPlaceholderText('请输入你的用户名'), 'admin');
  58 + await user.type(screen.getByPlaceholderText('请输入你的密码'), 'secret');
  59 + await selectVersion(user, '乙公司');
  60 + await user.click(screen.getByRole('button', { name: /登\s*录/ }));
  61 + await waitFor(() =>
  62 + expect(mockedLogin).toHaveBeenCalledWith({
  63 + sUserName: 'admin',
  64 + password: 'secret',
  65 + companyId: 2,
  66 + }),
  67 + );
  68 + });
  69 +});
... ...