kdletters
1ad25e30f8
新增 PlatformUiKit 通用弹窗、按钮、状态、空态、媒体、表单和标签等公共组件 迁移结果页、创作工作台、认证入口、RPG 暗色面板和运行态弹窗的重复 UI chrome 补充组件测试、页面回归测试、技术文档和 Hermes 共享决策记录
54 lines
1.5 KiB
TypeScript
54 lines
1.5 KiB
TypeScript
/* @vitest-environment jsdom */
|
|
|
|
import { render, screen } from '@testing-library/react';
|
|
import userEvent from '@testing-library/user-event';
|
|
import { expect, test, vi } from 'vitest';
|
|
|
|
import { CaptchaChallengeField } from './CaptchaChallengeField';
|
|
|
|
const CAPTCHA_CHALLENGE = {
|
|
challengeId: 'captcha-1',
|
|
promptText: '请输入图中字符。',
|
|
imageDataUrl: 'data:image/png;base64,ZmFrZQ==',
|
|
expiresInSeconds: 120,
|
|
};
|
|
|
|
test('does not render without a captcha challenge', () => {
|
|
const { container } = render(
|
|
<CaptchaChallengeField
|
|
challenge={null}
|
|
answer=""
|
|
onAnswerChange={vi.fn()}
|
|
/>,
|
|
);
|
|
|
|
expect(container.firstChild).toBeNull();
|
|
});
|
|
|
|
test('reuses platform media frame and text field chrome', async () => {
|
|
const user = userEvent.setup();
|
|
const handleAnswerChange = vi.fn();
|
|
|
|
render(
|
|
<CaptchaChallengeField
|
|
challenge={CAPTCHA_CHALLENGE}
|
|
answer=""
|
|
onAnswerChange={handleAnswerChange}
|
|
/>,
|
|
);
|
|
|
|
const image = screen.getByAltText('图形验证码');
|
|
const imageFrame = image.closest('.platform-media-frame');
|
|
const input = screen.getByLabelText('图形验证码答案');
|
|
|
|
expect(screen.getByText('请输入图中字符。')).toBeTruthy();
|
|
expect(imageFrame?.className).toContain('platform-media-frame');
|
|
expect(imageFrame?.className).toContain('bg-white/68');
|
|
expect(input.className).toContain('border-[var(--platform-subpanel-border)]');
|
|
expect(input.className).toContain('h-11');
|
|
|
|
await user.type(input, '7');
|
|
|
|
expect(handleAnswerChange).toHaveBeenLastCalledWith('7');
|
|
});
|