Krishya | 57cc17b | 2025-05-26 16:43:34 +0800 | [diff] [blame^] | 1 | |
| 2 | import React from 'react'; |
| 3 | import { render, screen, fireEvent, waitFor } from '@testing-library/react'; |
| 4 | import CreatePost from '../pages/Forum/posts-create/CreatePost'; |
| 5 | import axios from 'axios'; |
| 6 | |
| 7 | // mock axios |
| 8 | jest.mock('axios'); |
| 9 | |
| 10 | describe('CreatePost Component', () => { |
| 11 | const mockUserId = 123; |
| 12 | |
| 13 | beforeEach(() => { |
| 14 | axios.post.mockClear(); |
| 15 | }); |
| 16 | |
| 17 | test('renders form inputs and button', () => { |
| 18 | render(<CreatePost user_id={mockUserId} />); |
| 19 | |
| 20 | expect(screen.getByLabelText(/标题/)).toBeInTheDocument(); |
| 21 | expect(screen.getByLabelText(/内容/)).toBeInTheDocument(); |
| 22 | expect(screen.getByLabelText(/图片链接/)).toBeInTheDocument(); |
| 23 | expect(screen.getByRole('button', { name: '发布' })).toBeInTheDocument(); |
| 24 | }); |
| 25 | |
| 26 | test('shows error when title and content are empty', async () => { |
| 27 | render(<CreatePost user_id={mockUserId} />); |
| 28 | |
| 29 | fireEvent.click(screen.getByRole('button', { name: '发布' })); |
| 30 | |
| 31 | expect(await screen.findByText('标题和内容不能为空')).toBeInTheDocument(); |
| 32 | }); |
| 33 | |
| 34 | test('submits post and shows success message', async () => { |
| 35 | axios.post.mockResolvedValueOnce({ |
| 36 | data: { post_id: 456 }, |
| 37 | }); |
| 38 | |
| 39 | render(<CreatePost user_id={mockUserId} />); |
| 40 | |
| 41 | fireEvent.change(screen.getByLabelText(/标题/), { |
| 42 | target: { value: '测试标题' }, |
| 43 | }); |
| 44 | fireEvent.change(screen.getByLabelText(/内容/), { |
| 45 | target: { value: '测试内容' }, |
| 46 | }); |
| 47 | fireEvent.change(screen.getByLabelText(/图片链接/), { |
| 48 | target: { value: 'http://example.com/image.jpg' }, |
| 49 | }); |
| 50 | |
| 51 | fireEvent.click(screen.getByRole('button', { name: '发布' })); |
| 52 | |
| 53 | await waitFor(() => |
| 54 | expect(axios.post).toHaveBeenCalledWith( |
| 55 | `http://localhost:8080/echo/forum/posts/${mockUserId}/createPost`, |
| 56 | { |
| 57 | title: '测试标题', |
| 58 | post_content: '测试内容', |
| 59 | image_url: 'http://example.com/image.jpg', |
| 60 | } |
| 61 | ) |
| 62 | ); |
| 63 | |
| 64 | expect(await screen.findByText(/发帖成功,帖子ID:456/)).toBeInTheDocument(); |
| 65 | }); |
| 66 | |
| 67 | test('shows error message on submission failure', async () => { |
| 68 | axios.post.mockRejectedValueOnce({ |
| 69 | response: { |
| 70 | data: { |
| 71 | error: '服务器内部错误', |
| 72 | }, |
| 73 | }, |
| 74 | }); |
| 75 | |
| 76 | render(<CreatePost user_id={mockUserId} />); |
| 77 | |
| 78 | fireEvent.change(screen.getByLabelText(/标题/), { |
| 79 | target: { value: '测试标题' }, |
| 80 | }); |
| 81 | fireEvent.change(screen.getByLabelText(/内容/), { |
| 82 | target: { value: '测试内容' }, |
| 83 | }); |
| 84 | |
| 85 | fireEvent.click(screen.getByRole('button', { name: '发布' })); |
| 86 | |
| 87 | expect(await screen.findByText('服务器内部错误')).toBeInTheDocument(); |
| 88 | }); |
| 89 | |
| 90 | test('shows fallback error message when no response', async () => { |
| 91 | axios.post.mockRejectedValueOnce(new Error('Network error')); |
| 92 | |
| 93 | render(<CreatePost user_id={mockUserId} />); |
| 94 | |
| 95 | fireEvent.change(screen.getByLabelText(/标题/), { |
| 96 | target: { value: '测试标题' }, |
| 97 | }); |
| 98 | fireEvent.change(screen.getByLabelText(/内容/), { |
| 99 | target: { value: '测试内容' }, |
| 100 | }); |
| 101 | |
| 102 | fireEvent.click(screen.getByRole('button', { name: '发布' })); |
| 103 | |
| 104 | expect(await screen.findByText('发帖失败,请稍后重试')).toBeInTheDocument(); |
| 105 | }); |
| 106 | }); |