添加了相关测试文件，引入Tailwindcss
Change-Id: I12054143571bb688590af0357125a0ed26ff2050
diff --git a/src/App.test.jsx b/src/App.test.jsx
new file mode 100644
index 0000000..de89c34
--- /dev/null
+++ b/src/App.test.jsx
@@ -0,0 +1,77 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App';
+
+// 模拟 react-router-dom 的 useNavigate
+vi.mock('react-router-dom', async () => {
+ const actual = await vi.importActual('react-router-dom');
+ return {
+ ...actual,
+ useNavigate: () => vi.fn(),
+ };
+});
+
+describe('App 组件', () => {
+ beforeEach(() => {
+ // 清除 localStorage
+ window.localStorage.clear();
+ });
+
+ it('应该渲染网站标题', () => {
+ render(
+ <BrowserRouter>
+ <App />
+ </BrowserRouter>
+ );
+
+ expect(screen.getByText('PT网站')).toBeInTheDocument();
+ expect(screen.getByText('欢迎来到PT网站')).toBeInTheDocument();
+ });
+
+ it('当用户未登录时应该显示游客角色', () => {
+ render(
+ <BrowserRouter>
+ <App />
+ </BrowserRouter>
+ );
+
+ expect(screen.getByText('(游客)')).toBeInTheDocument();
+ });
+
+ it('当用户是管理员时应该显示管理面板菜单', () => {
+ // 模拟管理员登录
+ window.localStorage.setItem('user', JSON.stringify({
+ username: 'admin',
+ role: 'admin',
+ avatar: 'avatar-url'
+ }));
+
+ render(
+ <BrowserRouter>
+ <App />
+ </BrowserRouter>
+ );
+
+ expect(screen.getByText('管理面板')).toBeInTheDocument();
+ expect(screen.getByText('管理员专区')).toBeInTheDocument();
+ });
+
+ it('当用户是版主时应该显示版主专区', () => {
+ // 模拟版主登录
+ window.localStorage.setItem('user', JSON.stringify({
+ username: 'moderator',
+ role: 'moderator',
+ avatar: 'avatar-url'
+ }));
+
+ render(
+ <BrowserRouter>
+ <App />
+ </BrowserRouter>
+ );
+
+ expect(screen.getByText('版主专区')).toBeInTheDocument();
+ });
+});
\ No newline at end of file