create-fullstack-scaffold 0.1.0

package/template/src/client/pages/__tests__/ContentDetailPage.test.tsx

@@ -0,0 +1,176 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen, waitFor } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { MemoryRouter, Route, Routes } from 'react-router-dom'
+import { ContentDetailPage } from '../ContentDetailPage'
+import type { Content } from '@shared/modules/content'
+
+const mockContent: Content = {
+  id: 'content-1',
+  title: 'Test Article',
+  content:
+    'This is a test article content that is long enough to be meaningful for testing purposes.',
+  category: 'article',
+  status: 'published',
+  author: 'Test Author',
+  tags: ['test', 'article'],
+  viewCount: 100,
+  likeCount: 10,
+  createdAt: '2024-01-15T10:30:00.000Z',
+  updatedAt: '2024-01-15T10:30:00.000Z',
+  publishedAt: '2024-01-15T10:30:00.000Z',
+}
+
+const mockApiGet = vi.fn()
+
+vi.mock('@client/services/apiClient', () => ({
+  apiClient: {
+    api: {
+      public: {
+        contents: {
+          ':id': {
+            $get: (...args: unknown[]) => mockApiGet(...args),
+          },
+        },
+      },
+    },
+  },
+}))
+
+function renderWithRouter(id: string) {
+  return render(
+    <MemoryRouter initialEntries={[`/content/${id}`]}>
+      <Routes>
+        <Route path="/content/:id" element={<ContentDetailPage />} />
+      </Routes>
+    </MemoryRouter>
+  )
+}
+
+describe('ContentDetailPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('Loading State', () => {
+    it('should show loading indicator on initial render', () => {
+      mockApiGet.mockReturnValue(new Promise(() => {}))
+      renderWithRouter('content-1')
+      expect(screen.getByText('加载中...')).toBeInTheDocument()
+    })
+  })
+
+  describe('Success State', () => {
+    it('should display content title and body', async () => {
+      mockApiGet.mockResolvedValue({
+        ok: true,
+        status: 200,
+        json: async () => ({ success: true, data: mockContent }),
+      })
+      renderWithRouter('content-1')
+      await waitFor(() => {
+        expect(screen.getByText('Test Article')).toBeInTheDocument()
+        expect(screen.getByText(mockContent.content)).toBeInTheDocument()
+      })
+    })
+
+    it('should display content category and tags', async () => {
+      mockApiGet.mockResolvedValue({
+        ok: true,
+        status: 200,
+        json: async () => ({ success: true, data: mockContent }),
+      })
+      renderWithRouter('content-1')
+      await waitFor(() => {
+        const articleElements = screen.getAllByText('article')
+        expect(articleElements.length).toBeGreaterThanOrEqual(2)
+        expect(screen.getByText('test')).toBeInTheDocument()
+      })
+    })
+
+    it('should display author and view/like counts', async () => {
+      mockApiGet.mockResolvedValue({
+        ok: true,
+        status: 200,
+        json: async () => ({ success: true, data: mockContent }),
+      })
+      renderWithRouter('content-1')
+      await waitFor(() => {
+        expect(screen.getByText(/Test Author/)).toBeInTheDocument()
+        expect(screen.getByText(/100 阅读/)).toBeInTheDocument()
+        expect(screen.getByText(/10 喜欢/)).toBeInTheDocument()
+      })
+    })
+
+    it('should render with data-testid', async () => {
+      mockApiGet.mockResolvedValue({
+        ok: true,
+        status: 200,
+        json: async () => ({ success: true, data: mockContent }),
+      })
+      renderWithRouter('content-1')
+      await waitFor(() => {
+        expect(screen.getByTestId('content-detail-page')).toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('Error State', () => {
+    it('should show error when content not found (404)', async () => {
+      mockApiGet.mockResolvedValue({
+        ok: false,
+        status: 404,
+      })
+      renderWithRouter('nonexistent')
+      await waitFor(() => {
+        expect(screen.getByText('内容不存在')).toBeInTheDocument()
+      })
+    })
+
+    it('should show error on server error', async () => {
+      mockApiGet.mockResolvedValue({
+        ok: false,
+        status: 500,
+      })
+      renderWithRouter('content-1')
+      await waitFor(() => {
+        expect(screen.getByText('加载失败')).toBeInTheDocument()
+      })
+    })
+
+    it('should show network error on fetch failure', async () => {
+      mockApiGet.mockRejectedValue(new Error('Network error'))
+      renderWithRouter('content-1')
+      await waitFor(() => {
+        expect(screen.getByText('Network error')).toBeInTheDocument()
+      })
+    })
+
+    it('should show back link on error', async () => {
+      mockApiGet.mockResolvedValue({
+        ok: false,
+        status: 404,
+      })
+      renderWithRouter('nonexistent')
+      await waitFor(() => {
+        expect(screen.getByText(/返回内容列表/)).toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('API Call', () => {
+    it('should call API with correct content id', async () => {
+      mockApiGet.mockResolvedValue({
+        ok: true,
+        status: 200,
+        json: async () => ({ success: true, data: mockContent }),
+      })
+      renderWithRouter('content-42')
+      await waitFor(() => {
+        expect(mockApiGet).toHaveBeenCalledWith({
+          param: { id: 'content-42' },
+        })
+      })
+    })
+  })
+})

package/template/src/client/pages/__tests__/ContentListPage.test.tsx

@@ -0,0 +1,202 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { MemoryRouter } from 'react-router-dom'
+import { ContentListPage } from '../ContentListPage'
+import type { Content } from '@shared/modules/content'
+
+const mockContents: Content[] = [
+  {
+    id: 'content-1',
+    title: 'First Article',
+    content: 'First article content body that is long enough for testing purposes.',
+    category: 'article',
+    status: 'published',
+    author: 'Author A',
+    tags: ['tag1'],
+    viewCount: 50,
+    likeCount: 5,
+    createdAt: '2024-01-10T10:00:00.000Z',
+    updatedAt: '2024-01-10T10:00:00.000Z',
+    publishedAt: '2024-01-10T10:00:00.000Z',
+  },
+  {
+    id: 'content-2',
+    title: 'Second Announcement',
+    content: 'Second announcement content body for testing.',
+    category: 'announcement',
+    status: 'published',
+    author: 'Author B',
+    tags: [],
+    viewCount: 200,
+    likeCount: 20,
+    createdAt: '2024-01-12T10:00:00.000Z',
+    updatedAt: '2024-01-12T10:00:00.000Z',
+    publishedAt: '2024-01-12T10:00:00.000Z',
+  },
+]
+
+const mockApiGet = vi.fn()
+
+vi.mock('@client/services/apiClient', () => ({
+  apiClient: {
+    api: {
+      public: {
+        contents: {
+          $get: (...args: unknown[]) => mockApiGet(...args),
+        },
+      },
+    },
+  },
+}))
+
+function renderPage() {
+  return render(
+    <MemoryRouter>
+      <ContentListPage />
+    </MemoryRouter>
+  )
+}
+
+describe('ContentListPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('Loading State', () => {
+    it('should show loading indicator on initial render', () => {
+      mockApiGet.mockReturnValue(new Promise(() => {}))
+      renderPage()
+      expect(screen.getByText('加载中...')).toBeInTheDocument()
+    })
+  })
+
+  describe('Success State', () => {
+    beforeEach(() => {
+      mockApiGet.mockResolvedValue({
+        ok: true,
+        json: async () => ({ success: true, data: mockContents }),
+      })
+    })
+
+    it('should display page title and description', async () => {
+      renderPage()
+      expect(screen.getByText('内容中心')).toBeInTheDocument()
+      expect(screen.getByText(/浏览最新的文章/)).toBeInTheDocument()
+      await waitFor(() => {
+        expect(screen.getByTestId('content-list-page')).toBeInTheDocument()
+      })
+    })
+
+    it('should display content items', async () => {
+      renderPage()
+      await waitFor(() => {
+        expect(screen.getByText('First Article')).toBeInTheDocument()
+        expect(screen.getByText('Second Announcement')).toBeInTheDocument()
+      })
+    })
+
+    it('should display content categories', async () => {
+      renderPage()
+      await waitFor(() => {
+        expect(screen.getByText('文章')).toBeInTheDocument()
+        expect(screen.getByText('公告')).toBeInTheDocument()
+      })
+    })
+
+    it('should display category filter buttons', () => {
+      renderPage()
+      expect(screen.getByText('全部')).toBeInTheDocument()
+      expect(screen.getByText('文章')).toBeInTheDocument()
+      expect(screen.getByText('公告')).toBeInTheDocument()
+      expect(screen.getByText('教程')).toBeInTheDocument()
+    })
+  })
+
+  describe('Empty State', () => {
+    it('should show empty state when no contents', async () => {
+      mockApiGet.mockResolvedValue({
+        ok: true,
+        json: async () => ({ success: true, data: [] }),
+      })
+      renderPage()
+      await waitFor(() => {
+        expect(screen.getByText('暂无内容')).toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('Error State', () => {
+    it('should show error message on API failure', async () => {
+      mockApiGet.mockResolvedValue({
+        ok: true,
+        json: async () => ({ success: false }),
+      })
+      renderPage()
+      await waitFor(() => {
+        expect(screen.getByText('Failed to fetch contents')).toBeInTheDocument()
+      })
+    })
+
+    it('should show network error on fetch rejection', async () => {
+      mockApiGet.mockRejectedValue(new Error('Network error'))
+      renderPage()
+      await waitFor(() => {
+        expect(screen.getByText('Network error')).toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('Filter Functionality', () => {
+    beforeEach(() => {
+      mockApiGet.mockResolvedValue({
+        ok: true,
+        json: async () => ({ success: true, data: mockContents }),
+      })
+    })
+
+    it('should call API with category filter when category button clicked', async () => {
+      renderPage()
+      const articleButton = screen
+        .getAllByText('文章')
+        .find(el => el.closest('button') !== null) as HTMLElement
+      fireEvent.click(articleButton)
+      await waitFor(() => {
+        expect(mockApiGet).toHaveBeenCalledWith(
+          expect.objectContaining({
+            query: expect.objectContaining({ category: 'article' }),
+          })
+        )
+      })
+    })
+  })
+
+  describe('Search', () => {
+    beforeEach(() => {
+      mockApiGet.mockResolvedValue({
+        ok: true,
+        json: async () => ({ success: true, data: mockContents }),
+      })
+    })
+
+    it('should render search input and button', () => {
+      renderPage()
+      expect(screen.getByPlaceholderText('搜索内容...')).toBeInTheDocument()
+      expect(screen.getByText('搜索')).toBeInTheDocument()
+    })
+
+    it('should call API with search query on form submit', async () => {
+      renderPage()
+      const input = screen.getByPlaceholderText('搜索内容...')
+      fireEvent.change(input, { target: { value: 'test query' } })
+      fireEvent.click(screen.getByText('搜索'))
+      await waitFor(() => {
+        expect(mockApiGet).toHaveBeenCalledWith(
+          expect.objectContaining({
+            query: expect.objectContaining({ search: 'test query' }),
+          })
+        )
+      })
+    })
+  })
+})

package/template/src/client/pages/__tests__/NotificationPage.test.tsx

@@ -0,0 +1,246 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { NotificationPage } from '../NotificationPage'
+import type { AppNotification } from '@shared/schemas'
+
+interface MockNotificationStore {
+  notifications: AppNotification[]
+  unreadCount: number
+  sseConnected: boolean
+  loading: boolean
+  error: string | null
+  fetchNotifications: ReturnType<typeof vi.fn>
+  createNotification: ReturnType<typeof vi.fn>
+  markAsRead: ReturnType<typeof vi.fn>
+  markAllAsRead: ReturnType<typeof vi.fn>
+  deleteNotification: ReturnType<typeof vi.fn>
+  connectSSE: ReturnType<typeof vi.fn>
+  disconnectSSE: ReturnType<typeof vi.fn>
+}
+
+const mockStore: MockNotificationStore = {
+  notifications: [],
+  unreadCount: 0,
+  sseConnected: false,
+  loading: false,
+  error: null,
+  fetchNotifications: vi.fn(),
+  createNotification: vi.fn().mockResolvedValue(undefined),
+  markAsRead: vi.fn(),
+  markAllAsRead: vi.fn(),
+  deleteNotification: vi.fn(),
+  connectSSE: vi.fn(),
+  disconnectSSE: vi.fn(),
+}
+
+vi.mock('@client/stores/notificationStore', () => ({
+  useNotificationStore: vi.fn((selector?: (state: MockNotificationStore) => unknown) => {
+    if (selector) {
+      return selector(mockStore)
+    }
+    return mockStore
+  }),
+}))
+
+const createMockNotification = (overrides: Partial<AppNotification> = {}): AppNotification => ({
+  id: '123e4567-e89b-12d3-a456-426614174000',
+  type: 'info',
+  title: 'Test Notification',
+  message: 'Test message',
+  read: false,
+  createdAt: new Date().toISOString(),
+  ...overrides,
+})
+
+describe('NotificationPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockStore.notifications = []
+    mockStore.unreadCount = 0
+    mockStore.sseConnected = false
+    mockStore.loading = false
+    mockStore.error = null
+  })
+
+  describe('Initial Render', () => {
+    it('should render page title', () => {
+      render(<NotificationPage />)
+      expect(screen.getByText('Notifications')).toBeInTheDocument()
+    })
+
+    it('should render page description', () => {
+      render(<NotificationPage />)
+      expect(screen.getByText(/SSE \(Server-Sent Events\)/)).toBeInTheDocument()
+    })
+
+    it('should call fetchNotifications on mount', () => {
+      render(<NotificationPage />)
+      expect(mockStore.fetchNotifications).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe('SSE Connection Status', () => {
+    it('should show disconnected status by default', () => {
+      render(<NotificationPage />)
+      expect(screen.getByText('Disconnected')).toBeInTheDocument()
+    })
+
+    it('should show connected status when SSE is connected', () => {
+      mockStore.sseConnected = true
+      render(<NotificationPage />)
+      expect(screen.getByText('Connected')).toBeInTheDocument()
+    })
+
+    it('should call connectSSE when connect button is clicked', () => {
+      render(<NotificationPage />)
+      const connectButtons = screen.getAllByText('Connect')
+      fireEvent.click(connectButtons[0])
+      expect(mockStore.connectSSE).toHaveBeenCalledTimes(1)
+    })
+
+    it('should call disconnectSSE when disconnect button is clicked', () => {
+      mockStore.sseConnected = true
+      render(<NotificationPage />)
+      const disconnectButtons = screen.getAllByText('Disconnect')
+      fireEvent.click(disconnectButtons[0])
+      expect(mockStore.disconnectSSE).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe('Unread Count', () => {
+    it('should display unread count', () => {
+      mockStore.unreadCount = 5
+      render(<NotificationPage />)
+      expect(screen.getByText('5')).toBeInTheDocument()
+    })
+  })
+
+  describe('Create Notification Form', () => {
+    it('should render form inputs', () => {
+      render(<NotificationPage />)
+      expect(screen.getByPlaceholderText('Title...')).toBeInTheDocument()
+      expect(screen.getByPlaceholderText('Message...')).toBeInTheDocument()
+    })
+
+    it('should render type selector', () => {
+      render(<NotificationPage />)
+      expect(screen.getByRole('combobox')).toBeInTheDocument()
+    })
+
+    it('should have info type selected by default', () => {
+      render(<NotificationPage />)
+      const select = screen.getByRole('combobox')
+      expect(select).toHaveValue('info')
+    })
+
+    it('should create notification on form submit', async () => {
+      render(<NotificationPage />)
+
+      const titleInput = screen.getByPlaceholderText('Title...')
+      const messageInput = screen.getByPlaceholderText('Message...')
+      const submitButton = screen.getByText('Create Notification')
+
+      fireEvent.change(titleInput, { target: { value: 'Test Title' } })
+      fireEvent.change(messageInput, { target: { value: 'Test Message' } })
+      fireEvent.click(submitButton)
+
+      await waitFor(() => {
+        expect(mockStore.createNotification).toHaveBeenCalledWith({
+          type: 'info',
+          title: 'Test Title',
+          message: 'Test Message',
+        })
+      })
+    })
+
+    it('should not create notification with empty fields', () => {
+      render(<NotificationPage />)
+
+      const submitButton = screen.getByText('Create Notification')
+      fireEvent.click(submitButton)
+
+      expect(mockStore.createNotification).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('Notification List', () => {
+    it('should display notifications when available', () => {
+      mockStore.notifications = [
+        createMockNotification({ title: 'Test Notification', message: 'Test message' }),
+      ]
+
+      render(<NotificationPage />)
+      expect(screen.getByText('Test Notification')).toBeInTheDocument()
+      expect(screen.getByText('Test message')).toBeInTheDocument()
+    })
+
+    it('should display notification type badge', () => {
+      mockStore.notifications = [
+        createMockNotification({ type: 'warning', title: 'Warning', message: 'Warning message' }),
+      ]
+
+      render(<NotificationPage />)
+      expect(screen.getByText('WARNING')).toBeInTheDocument()
+    })
+
+    it('should call markAsRead when mark as read button is clicked', () => {
+      mockStore.notifications = [
+        createMockNotification({ id: '123e4567-e89b-12d3-a456-426614174001' }),
+      ]
+
+      render(<NotificationPage />)
+      const markReadButton = screen.getByTitle('Mark as read')
+      fireEvent.click(markReadButton)
+
+      expect(mockStore.markAsRead).toHaveBeenCalledWith('123e4567-e89b-12d3-a456-426614174001')
+    })
+
+    it('should call deleteNotification when delete button is clicked', () => {
+      mockStore.notifications = [
+        createMockNotification({ id: '123e4567-e89b-12d3-a456-426614174002' }),
+      ]
+
+      render(<NotificationPage />)
+      const deleteButtons = screen.getAllByRole('button')
+      const deleteButton = deleteButtons.find(btn => btn.querySelector('svg.lucide-trash-2'))
+      fireEvent.click(deleteButton!)
+
+      expect(mockStore.deleteNotification).toHaveBeenCalledWith(
+        '123e4567-e89b-12d3-a456-426614174002'
+      )
+    })
+
+    it('should call markAllAsRead when mark all read button is clicked', () => {
+      render(<NotificationPage />)
+      const markAllButton = screen.getByText('Mark All Read')
+      fireEvent.click(markAllButton)
+
+      expect(mockStore.markAllAsRead).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe('Empty State', () => {
+    it('should display empty state when no notifications', () => {
+      render(<NotificationPage />)
+      expect(screen.getByText('No notifications yet. Create one above!')).toBeInTheDocument()
+    })
+  })
+
+  describe('Error State', () => {
+    it('should display error message when error exists', () => {
+      mockStore.error = 'Test error message'
+      render(<NotificationPage />)
+      expect(screen.getByText('Test error message')).toBeInTheDocument()
+    })
+  })
+
+  describe('Loading State', () => {
+    it('should show loading spinner when creating notification', () => {
+      mockStore.loading = true
+      render(<NotificationPage />)
+      const spinner = document.querySelector('.animate-spin')
+      expect(spinner).toBeInTheDocument()
+    })
+  })
+})