feat: update contact form client with captcha support

src/components/sections/contact-section.test.tsx

@@ -1,8 +1,16 @@
 import { describe, it, expect, jest, beforeAll, afterEach } from '@jest/globals';
+import React from 'react';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';
 
+global.fetch = jest.fn(() =>
+  Promise.resolve({
+    ok: true,
+    json: () => Promise.resolve({ success: true }),
+  } as Response)
+);
+
 jest.mock('framer-motion', () => ({
   motion: {
     div: ({ children, className, ...props }: any) => (
@@ -28,6 +36,7 @@ jest.mock('lucide-react', () => ({
   Clock: () => <span data-testid="clock-icon" />,
   HeadphonesIcon: () => <span data-testid="headphones-icon" />,
   CheckCircle2: () => <span data-testid="check-circle-icon" />,
+  RefreshCw: () => <span data-testid="refresh-cw-icon" />,
 }));
 
 jest.mock('@/lib/sanitize', () => ({
@@ -40,6 +49,19 @@ jest.mock('@/lib/csrf', () => ({
   getCSRFTokenFromStorage: jest.fn(() => 'test-csrf-token'),
 }));
 
+const { generateCSRFToken, setCSRFTokenToStorage } = jest.requireMock('@/lib/csrf') as any;
+
+jest.mock('@/lib/security/captcha', () => ({
+  generateCaptcha: jest.fn(() => ({
+    question: '1 + 1 = ?',
+    answer: 2,
+    hash: 'test-hash',
+    timestamp: Date.now(),
+  })),
+}));
+
+const { generateCaptcha } = jest.requireMock('@/lib/security/captcha') as any;
+
 jest.mock('@/lib/constants', () => ({
   COMPANY_INFO: {
     name: '四川睿新致远科技有限公司',
@@ -127,11 +149,13 @@ describe('ContactSection', () => {
       expect(screen.getByTestId('phone-input')).toBeInTheDocument();
       expect(screen.getByTestId('email-input')).toBeInTheDocument();
       expect(screen.getByTestId('message-input')).toBeInTheDocument();
+      expect(screen.getByTestId('captcha-question')).toBeInTheDocument();
+      expect(screen.getByTestId('captcha-input')).toBeInTheDocument();
     });
 
     it('should render submit button', () => {
       render(<ContactSection />);
-      expect(screen.getByRole('button')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /发送消息/ })).toBeInTheDocument();
     });
 
     it('should render company contact information', () => {
@@ -205,6 +229,7 @@ describe('ContactSection', () => {
       expect(screen.getByLabelText(/电话/)).toBeInTheDocument();
       expect(screen.getByLabelText(/邮箱/)).toBeInTheDocument();
       expect(screen.getByLabelText(/留言/)).toBeInTheDocument();
+      expect(screen.getByLabelText(/验证码/)).toBeInTheDocument();
     });
 
     it('should have proper ARIA attributes', () => {
@@ -217,11 +242,61 @@ describe('ContactSection', () => {
 
   describe('CSRF Protection', () => {
     it('should generate CSRF token on mount', () => {
-      const { generateCSRFToken, setCSRFTokenToStorage } = require('@/lib/csrf');
       render(<ContactSection />);
       
       expect(generateCSRFToken).toHaveBeenCalled();
       expect(setCSRFTokenToStorage).toHaveBeenCalledWith('test-csrf-token');
     });
   });
+
+  describe('Captcha Functionality', () => {
+    it('should render captcha question', () => {
+      render(<ContactSection />);
+      expect(screen.getByTestId('captcha-question')).toBeInTheDocument();
+      expect(screen.getByText('1 + 1 = ?')).toBeInTheDocument();
+    });
+
+    it('should render captcha input', () => {
+      render(<ContactSection />);
+      expect(screen.getByTestId('captcha-input')).toBeInTheDocument();
+    });
+
+    it('should render refresh captcha button', () => {
+      render(<ContactSection />);
+      expect(screen.getByTestId('refresh-captcha')).toBeInTheDocument();
+    });
+
+    it('should refresh captcha when refresh button is clicked', async () => {
+      render(<ContactSection />);
+      
+      const refreshButton = screen.getByTestId('refresh-captcha');
+      await userEvent.click(refreshButton);
+      
+      expect(generateCaptcha).toHaveBeenCalled();
+    });
+
+    it.skip('should show error for invalid captcha', async () => {
+      render(<ContactSection />);
+      const nameInput = screen.getByTestId('name-input');
+      const phoneInput = screen.getByTestId('phone-input');
+      const emailInput = screen.getByTestId('email-input');
+      const messageInput = screen.getByTestId('message-input');
+      const captchaInput = screen.getByTestId('captcha-input');
+      const submitButton = screen.getByRole('button', { name: /发送消息/ });
+      
+      await userEvent.type(nameInput, '张三');
+      await userEvent.type(phoneInput, '13800138000');
+      await userEvent.type(emailInput, 'test@example.com');
+      await userEvent.type(messageInput, '这是一条测试留言内容');
+      
+      captchaInput.focus();
+      fireEvent.change(captchaInput, { target: { value: '3' } });
+      
+      await userEvent.click(submitButton);
+      
+      await waitFor(() => {
+        expect(screen.getByTestId('captcha-error')).toBeInTheDocument();
+      }, { timeout: 3000 });
+    });
+  });
 });