test(contact-section): 为测试文件添加类型定义并改进mock实现
为contact-section测试文件添加了类型定义接口,包括MotionComponentProps、InputComponentProps和ToastComponentProps 替换了原有的any类型,使用更严格的类型定义来改进mock实现
This commit is contained in:
@@ -335,3 +335,9 @@ e2e/storage-state.json
|
|||||||
*.trace.zip
|
*.trace.zip
|
||||||
trace.zip
|
trace.zip
|
||||||
network-logs/
|
network-logs/
|
||||||
|
|
||||||
|
#trae
|
||||||
|
.trae/
|
||||||
|
|
||||||
|
#docs
|
||||||
|
docs
|
||||||
|
|||||||
@@ -4,6 +4,33 @@ import { render, screen, fireEvent, waitFor } from '@testing-library/react';
|
|||||||
import '@testing-library/jest-dom';
|
import '@testing-library/jest-dom';
|
||||||
import userEvent from '@testing-library/user-event';
|
import userEvent from '@testing-library/user-event';
|
||||||
|
|
||||||
|
interface MotionComponentProps {
|
||||||
|
children?: React.ReactNode;
|
||||||
|
className?: string;
|
||||||
|
disabled?: boolean;
|
||||||
|
[key: string]: unknown;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface InputComponentProps {
|
||||||
|
label?: string;
|
||||||
|
id?: string;
|
||||||
|
placeholder?: string;
|
||||||
|
required?: boolean;
|
||||||
|
value?: string;
|
||||||
|
onChange?: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
|
||||||
|
onBlur?: () => void;
|
||||||
|
error?: string;
|
||||||
|
rows?: number;
|
||||||
|
[key: string]: unknown;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ToastComponentProps {
|
||||||
|
message?: string;
|
||||||
|
type?: string;
|
||||||
|
onClose?: () => void;
|
||||||
|
[key: string]: unknown;
|
||||||
|
}
|
||||||
|
|
||||||
global.fetch = jest.fn(() =>
|
global.fetch = jest.fn(() =>
|
||||||
Promise.resolve({
|
Promise.resolve({
|
||||||
ok: true,
|
ok: true,
|
||||||
@@ -13,18 +40,18 @@ global.fetch = jest.fn(() =>
|
|||||||
|
|
||||||
jest.mock('framer-motion', () => ({
|
jest.mock('framer-motion', () => ({
|
||||||
motion: {
|
motion: {
|
||||||
div: ({ children, className, ...props }: any) => (
|
div: ({ children, className, ...props }: MotionComponentProps) => (
|
||||||
<div className={className} {...props}>
|
<div className={className} {...props}>
|
||||||
{children}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
section: ({ children, className, ...props }: any) => (
|
section: ({ children, className, ...props }: MotionComponentProps) => (
|
||||||
<section className={className} {...props}>
|
<section className={className} {...props}>
|
||||||
{children}
|
{children}
|
||||||
</section>
|
</section>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
AnimatePresence: ({ children }: any) => <>{children}</>,
|
AnimatePresence: ({ children }: MotionComponentProps) => <>{children}</>,
|
||||||
}));
|
}));
|
||||||
|
|
||||||
jest.mock('lucide-react', () => ({
|
jest.mock('lucide-react', () => ({
|
||||||
@@ -49,7 +76,10 @@ jest.mock('@/lib/csrf', () => ({
|
|||||||
getCSRFTokenFromStorage: jest.fn(() => 'test-csrf-token'),
|
getCSRFTokenFromStorage: jest.fn(() => 'test-csrf-token'),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
const { generateCSRFToken, setCSRFTokenToStorage } = jest.requireMock('@/lib/csrf') as any;
|
const { generateCSRFToken, setCSRFTokenToStorage } = jest.requireMock('@/lib/csrf') as {
|
||||||
|
generateCSRFToken: jest.Mock;
|
||||||
|
setCSRFTokenToStorage: jest.Mock;
|
||||||
|
};
|
||||||
|
|
||||||
jest.mock('@/lib/security/captcha', () => ({
|
jest.mock('@/lib/security/captcha', () => ({
|
||||||
generateCaptcha: jest.fn(() => ({
|
generateCaptcha: jest.fn(() => ({
|
||||||
@@ -60,7 +90,9 @@ jest.mock('@/lib/security/captcha', () => ({
|
|||||||
})),
|
})),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
const { generateCaptcha } = jest.requireMock('@/lib/security/captcha') as any;
|
const { generateCaptcha } = jest.requireMock('@/lib/security/captcha') as {
|
||||||
|
generateCaptcha: jest.Mock;
|
||||||
|
};
|
||||||
|
|
||||||
jest.mock('@/lib/constants', () => ({
|
jest.mock('@/lib/constants', () => ({
|
||||||
COMPANY_INFO: {
|
COMPANY_INFO: {
|
||||||
@@ -72,7 +104,7 @@ jest.mock('@/lib/constants', () => ({
|
|||||||
}));
|
}));
|
||||||
|
|
||||||
jest.mock('@/components/ui/button', () => ({
|
jest.mock('@/components/ui/button', () => ({
|
||||||
Button: ({ children, className, disabled, ...props }: any) => (
|
Button: ({ children, className, disabled, ...props }: MotionComponentProps) => (
|
||||||
<button className={className} disabled={disabled} {...props}>
|
<button className={className} disabled={disabled} {...props}>
|
||||||
{children}
|
{children}
|
||||||
</button>
|
</button>
|
||||||
@@ -80,7 +112,7 @@ jest.mock('@/components/ui/button', () => ({
|
|||||||
}));
|
}));
|
||||||
|
|
||||||
jest.mock('@/components/ui/input', () => ({
|
jest.mock('@/components/ui/input', () => ({
|
||||||
Input: ({ label, id, placeholder, required, value, onChange, onBlur, error, ...props }: any) => (
|
Input: ({ label, id, placeholder, required, value, onChange, onBlur, error, ...props }: InputComponentProps) => (
|
||||||
<div>
|
<div>
|
||||||
<label htmlFor={id}>{label}{required && '*'}</label>
|
<label htmlFor={id}>{label}{required && '*'}</label>
|
||||||
<input
|
<input
|
||||||
@@ -98,7 +130,7 @@ jest.mock('@/components/ui/input', () => ({
|
|||||||
}));
|
}));
|
||||||
|
|
||||||
jest.mock('@/components/ui/textarea', () => ({
|
jest.mock('@/components/ui/textarea', () => ({
|
||||||
Textarea: ({ label, id, placeholder, rows, required, value, onChange, onBlur, error, ...props }: any) => (
|
Textarea: ({ label, id, placeholder, rows, required, value, onChange, onBlur, error, ...props }: InputComponentProps) => (
|
||||||
<div>
|
<div>
|
||||||
<label htmlFor={id}>{label}{required && '*'}</label>
|
<label htmlFor={id}>{label}{required && '*'}</label>
|
||||||
<textarea
|
<textarea
|
||||||
@@ -117,7 +149,7 @@ jest.mock('@/components/ui/textarea', () => ({
|
|||||||
}));
|
}));
|
||||||
|
|
||||||
jest.mock('@/components/ui/toast', () => ({
|
jest.mock('@/components/ui/toast', () => ({
|
||||||
Toast: ({ message, type, onClose, ...props }: any) => (
|
Toast: ({ message, type, onClose, ...props }: ToastComponentProps) => (
|
||||||
<div data-testid="toast-notification" data-type={type} {...props}>
|
<div data-testid="toast-notification" data-type={type} {...props}>
|
||||||
{message}
|
{message}
|
||||||
<button onClick={onClose}>关闭</button>
|
<button onClick={onClose}>关闭</button>
|
||||||
|
|||||||
Reference in New Issue
Block a user