添加了postsPanel作为通用帖子显示板,增加了对jest测试的配置,添加了论坛主页,设定了论坛全局框架,设定了论坛基础主题色及主题切换、字号切换逻辑
Change-Id: I9fad0cf577088adb00c9850d405ccd23e6072413
diff --git a/test/postsPanel.test.tsx b/test/postsPanel.test.tsx
new file mode 100644
index 0000000..cd753fc
--- /dev/null
+++ b/test/postsPanel.test.tsx
@@ -0,0 +1,75 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { useApi } from '@/hooks/request';
+import PostsPanel from '@/components/postsPanel/postsPanel';
+
+// 模拟 useApi
+jest.mock('@/hooks/request', () => ({
+ useApi: jest.fn(() => ({
+ data: [], // 默认返回空数组
+ loading: false,
+ error: null,
+ })),
+}));
+describe('PostsPanel Component', () => {
+ const mockUseApi = useApi as jest.MockedFunction<typeof useApi>;
+
+ it('renders the component with a title', () => {
+ // 渲染组件
+ render(<PostsPanel name="热门帖子" url="/api/posts" limit={5} />);
+
+ // 验证标题是否正确渲染
+ expect(screen.getByText('热门帖子')).toBeInTheDocument();
+ expect(screen.getByText('更多')).toBeInTheDocument();
+ });
+
+ it('renders posts when data is available', async () => {
+ // 模拟 API 返回数据
+ mockUseApi.mockReturnValue({
+ data: [
+ { title: 'Post 1', date: '2025-04-01' },
+ { title: 'Post 2', date: '2025-04-02' },
+ ],
+ });
+
+ // 渲染组件
+ render(<PostsPanel name="热门帖子" url="/api/posts" limit={5} />);
+
+ // 验证数据是否正确渲染
+ await waitFor(() => {
+ expect(screen.getByText('Post 1')).toBeInTheDocument();
+ expect(screen.getByText('2025-04-01')).toBeInTheDocument();
+ expect(screen.getByText('Post 2')).toBeInTheDocument();
+ expect(screen.getByText('2025-04-02')).toBeInTheDocument();
+ });
+ });
+
+ it('renders a message when no data is available', async () => {
+ // 模拟 API 返回空数据
+ mockUseApi.mockReturnValue({
+ data: [],
+ });
+
+ // 渲染组件
+ render(<PostsPanel name="热门帖子" url="/api/posts" limit={5} />);
+
+ // 验证无数据时的提示信息
+ await waitFor(() => {
+ expect(screen.getByText('未查询到相关记录')).toBeInTheDocument();
+ });
+ });
+
+ it('handles loading state', () => {
+ // 模拟加载状态
+ mockUseApi.mockReturnValue({
+ data: null,
+ });
+
+ // 渲染组件
+ render(<PostsPanel name="热门帖子" url="/api/posts" limit={5} />);
+
+ // 验证组件是否正确渲染(可以根据需求添加加载状态的测试)
+ expect(screen.getByText('未查询到相关记录')).toBeInTheDocument();
+ });
+});
\ No newline at end of file