create-fullstack-scaffold 0.1.0

package/template/src/admin/components/__tests__/ProtectedRoute.test.tsx

@@ -0,0 +1,129 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, screen, cleanup } from '@testing-library/react'
+import { MemoryRouter, Route, Routes } from 'react-router-dom'
+import { ProtectedRoute } from '../ProtectedRoute'
+import { Role } from '@shared/modules/permission'
+
+const mockInitPermissions = vi.fn()
+const mockFetchStaticData = vi.fn()
+
+const mockAdminState = {
+  isAuthenticated: false as boolean,
+  user: null as { id: string; role: string } | null,
+}
+
+const mockPermState = {
+  initialized: false as boolean,
+  initPermissions: mockInitPermissions,
+  fetchStaticData: mockFetchStaticData,
+}
+
+vi.mock('@admin/stores/adminStore', () => ({
+  useAdminStore: () => mockAdminState,
+}))
+
+vi.mock('@admin/hooks/usePermissions', () => ({
+  usePermissionStore: () => mockPermState,
+}))
+
+function renderWithRouter(ui: React.ReactElement, initialPath = '/protected') {
+  return render(
+    <MemoryRouter initialEntries={[initialPath]}>
+      <Routes>
+        <Route path="/login" element={<div data-testid="login-page">Login</div>} />
+        <Route path="/dashboard" element={<div data-testid="dashboard">Dashboard</div>} />
+        <Route path="/protected" element={ui} />
+      </Routes>
+    </MemoryRouter>
+  )
+}
+
+describe('ProtectedRoute', () => {
+  beforeEach(() => {
+    mockAdminState.isAuthenticated = false
+    mockAdminState.user = null
+    mockPermState.initialized = false
+    vi.clearAllMocks()
+  })
+
+  afterEach(() => {
+    cleanup()
+  })
+
+  it('should redirect to /login when not authenticated', () => {
+    renderWithRouter(
+      <ProtectedRoute>
+        <div>Protected Content</div>
+      </ProtectedRoute>
+    )
+
+    expect(screen.getByTestId('login-page')).toBeInTheDocument()
+  })
+
+  it('should render children when authenticated', () => {
+    mockAdminState.isAuthenticated = true
+    mockAdminState.user = { id: '1', role: Role.SUPER_ADMIN }
+
+    renderWithRouter(
+      <ProtectedRoute>
+        <div data-testid="protected">Protected Content</div>
+      </ProtectedRoute>
+    )
+
+    expect(screen.getByTestId('protected')).toBeInTheDocument()
+  })
+
+  it('should redirect to /dashboard when user lacks required role', () => {
+    mockAdminState.isAuthenticated = true
+    mockAdminState.user = { id: '1', role: Role.USER }
+
+    renderWithRouter(
+      <ProtectedRoute requiredRole={Role.SUPER_ADMIN}>
+        <div>Protected Content</div>
+      </ProtectedRoute>
+    )
+
+    expect(screen.getByTestId('dashboard')).toBeInTheDocument()
+  })
+
+  it('should allow access for super admin regardless of required role', () => {
+    mockAdminState.isAuthenticated = true
+    mockAdminState.user = { id: '1', role: Role.SUPER_ADMIN }
+
+    renderWithRouter(
+      <ProtectedRoute requiredRole={Role.CUSTOMER_SERVICE}>
+        <div data-testid="protected">Protected Content</div>
+      </ProtectedRoute>
+    )
+
+    expect(screen.getByTestId('protected')).toBeInTheDocument()
+  })
+
+  it('should init permissions when authenticated and not initialized', () => {
+    mockAdminState.isAuthenticated = true
+    mockAdminState.user = { id: '1', role: Role.SUPER_ADMIN }
+
+    renderWithRouter(
+      <ProtectedRoute>
+        <div data-testid="protected">Protected Content</div>
+      </ProtectedRoute>
+    )
+
+    expect(mockInitPermissions).toHaveBeenCalled()
+    expect(mockFetchStaticData).toHaveBeenCalled()
+  })
+
+  it('should not init permissions when already initialized', () => {
+    mockAdminState.isAuthenticated = true
+    mockAdminState.user = { id: '1', role: Role.SUPER_ADMIN }
+    mockPermState.initialized = true
+
+    renderWithRouter(
+      <ProtectedRoute>
+        <div data-testid="protected">Protected Content</div>
+      </ProtectedRoute>
+    )
+
+    expect(mockInitPermissions).not.toHaveBeenCalled()
+  })
+})

package/template/src/admin/components/__tests__/StatsCard.test.tsx

@@ -0,0 +1,44 @@
+import { describe, it, expect, afterEach } from 'vitest'
+import { render, screen, cleanup } from '@testing-library/react'
+import { StatsCard } from '../StatsCard'
+import { UserOutlined } from '@ant-design/icons'
+
+describe('StatsCard', () => {
+  afterEach(() => {
+    cleanup()
+  })
+
+  it('should render title and value', () => {
+    render(<StatsCard title="Total Users" value={42} />)
+
+    expect(screen.getByText('Total Users')).toBeInTheDocument()
+    expect(screen.getByText('42')).toBeInTheDocument()
+  })
+
+  it('should render prefix icon when provided', () => {
+    render(
+      <StatsCard title="Users" value={100} prefix={<UserOutlined data-testid="prefix-icon" />} />
+    )
+
+    expect(screen.getByTestId('prefix-icon')).toBeInTheDocument()
+  })
+
+  it('should render trend when provided', () => {
+    render(<StatsCard title="Users" value={100} trend={{ value: 12, isUp: true }} />)
+
+    expect(screen.getByText('12%')).toBeInTheDocument()
+    expect(screen.getByText('vs last month')).toBeInTheDocument()
+  })
+
+  it('should render downward trend', () => {
+    render(<StatsCard title="Users" value={100} trend={{ value: -5, isUp: false }} />)
+
+    expect(screen.getByText('5%')).toBeInTheDocument()
+  })
+
+  it('should not render trend section when trend is undefined', () => {
+    render(<StatsCard title="Users" value={100} />)
+
+    expect(screen.queryByText('vs last month')).not.toBeInTheDocument()
+  })
+})

package/template/src/admin/components/__tests__/UserFormModal.test.tsx

@@ -0,0 +1,125 @@
+import { describe, it, expect, vi, afterEach } from 'vitest'
+import { render, screen, cleanup, fireEvent, waitFor } from '@testing-library/react'
+import { UserFormModal } from '../UserFormModal'
+import { Role } from '@shared/modules/permission'
+
+describe('UserFormModal', () => {
+  const defaultProps = {
+    open: true,
+    title: 'Create User',
+    onOk: vi.fn(),
+    onCancel: vi.fn(),
+  }
+
+  afterEach(() => {
+    cleanup()
+    vi.clearAllMocks()
+  })
+
+  it('should render modal with title when open', () => {
+    render(<UserFormModal {...defaultProps} />)
+
+    expect(screen.getByText('Create User')).toBeInTheDocument()
+  })
+
+  it('should not render modal content when closed', () => {
+    render(<UserFormModal {...defaultProps} open={false} />)
+
+    expect(screen.queryByText('Create User')).not.toBeInTheDocument()
+  })
+
+  it('should render form fields', () => {
+    render(<UserFormModal {...defaultProps} />)
+
+    expect(screen.getByText('Username')).toBeInTheDocument()
+    expect(screen.getByText('Email')).toBeInTheDocument()
+    expect(screen.getByText('Role')).toBeInTheDocument()
+    expect(screen.getByText('Active')).toBeInTheDocument()
+  })
+
+  it('should pre-fill values when initialValues provided', () => {
+    render(
+      <UserFormModal
+        {...defaultProps}
+        title="Edit User"
+        initialValues={
+          {
+            username: 'existing-user',
+            email: 'existing@test.com',
+            role: Role.SUPER_ADMIN,
+            status: true,
+          } as unknown as React.ComponentProps<typeof UserFormModal>['initialValues']
+        }
+      />
+    )
+
+    expect(screen.getByDisplayValue('existing-user')).toBeInTheDocument()
+    expect(screen.getByDisplayValue('existing@test.com')).toBeInTheDocument()
+  })
+
+  it('should call onCancel when cancel button clicked', () => {
+    render(<UserFormModal {...defaultProps} />)
+
+    const cancelButtons = screen.getAllByRole('button').filter(btn => btn.textContent === 'Cancel')
+    if (cancelButtons.length > 0) {
+      fireEvent.click(cancelButtons[0])
+      expect(defaultProps.onCancel).toHaveBeenCalled()
+    }
+  })
+
+  it('should show validation errors for empty required fields', async () => {
+    render(<UserFormModal {...defaultProps} />)
+
+    const okButtons = screen.getAllByRole('button').filter(btn => btn.textContent === 'OK')
+    if (okButtons.length > 0) {
+      fireEvent.click(okButtons[0])
+
+      await waitFor(() => {
+        const errorEl = screen.queryByText(/required/i)
+        expect(errorEl).toBeInTheDocument()
+      })
+    }
+  })
+
+  it('should call onOk when form is submitted with valid data', async () => {
+    const onOk = vi.fn()
+    render(
+      <UserFormModal
+        {...defaultProps}
+        onOk={onOk}
+        initialValues={
+          {
+            username: 'testuser',
+            email: 'test@test.com',
+            role: Role.SUPER_ADMIN,
+            status: true,
+          } as unknown as React.ComponentProps<typeof UserFormModal>['initialValues']
+        }
+      />
+    )
+
+    const okButtons = screen.getAllByRole('button').filter(btn => btn.textContent === 'OK')
+    if (okButtons.length > 0) {
+      fireEvent.click(okButtons[0])
+    }
+
+    await waitFor(() => {
+      expect(onOk).toHaveBeenCalledWith(
+        expect.objectContaining({
+          username: 'testuser',
+          email: 'test@test.com',
+          role: Role.SUPER_ADMIN,
+        })
+      )
+    })
+  })
+
+  it('should update username field', () => {
+    render(<UserFormModal {...defaultProps} />)
+
+    const usernameInput = screen.getByPlaceholderText('Enter username')
+    fireEvent.change(usernameInput, { target: { value: 'newuser' } })
+
+    expect(screen.getByDisplayValue('newuser')).toBeInTheDocument()
+  })
+})

package/template/src/admin/components/__tests__/UserTable.test.tsx

@@ -0,0 +1,89 @@
+import { describe, it, expect, vi, afterEach } from 'vitest'
+import { render, screen, cleanup, fireEvent } from '@testing-library/react'
+import { UserTable } from '../UserTable'
+import { Role } from '@shared/modules/permission'
+import type { User } from '@shared/modules/admin'
+
+const mockUsers: User[] = [
+  {
+    id: '1',
+    username: 'alice',
+    email: 'alice@test.com',
+    role: Role.SUPER_ADMIN,
+    status: 'active',
+    avatar: null,
+    createdAt: '2024-01-01',
+    updatedAt: '2024-01-01',
+  },
+  {
+    id: '2',
+    username: 'bob',
+    email: 'bob@test.com',
+    role: Role.USER,
+    status: 'inactive',
+    avatar: null,
+    createdAt: '2024-01-02',
+    updatedAt: '2024-01-02',
+  },
+]
+
+describe('UserTable', () => {
+  afterEach(() => {
+    cleanup()
+  })
+
+  it('should render table with user data', () => {
+    render(<UserTable data={mockUsers} />)
+
+    expect(screen.getByText('alice')).toBeInTheDocument()
+    expect(screen.getByText('bob')).toBeInTheDocument()
+    expect(screen.getByText('alice@test.com')).toBeInTheDocument()
+    expect(screen.getByText('bob@test.com')).toBeInTheDocument()
+  })
+
+  it('should render role tags', () => {
+    render(<UserTable data={mockUsers} />)
+
+    expect(screen.getByText(Role.SUPER_ADMIN)).toBeInTheDocument()
+    expect(screen.getByText(Role.USER)).toBeInTheDocument()
+  })
+
+  it('should render status tags', () => {
+    render(<UserTable data={mockUsers} />)
+
+    expect(screen.getByText('active')).toBeInTheDocument()
+    expect(screen.getByText('inactive')).toBeInTheDocument()
+  })
+
+  it('should render action buttons', () => {
+    render(<UserTable data={mockUsers} />)
+
+    const editButtons = screen.getAllByText('Edit')
+    const deleteButtons = screen.getAllByText('Delete')
+    expect(editButtons.length).toBe(2)
+    expect(deleteButtons.length).toBe(2)
+  })
+
+  it('should call onEdit when Edit button clicked', () => {
+    const onEdit = vi.fn()
+    render(<UserTable data={mockUsers} onEdit={onEdit} />)
+
+    fireEvent.click(screen.getAllByText('Edit')[0])
+    expect(onEdit).toHaveBeenCalledWith(mockUsers[0])
+  })
+
+  it('should call onDelete when Delete button clicked', () => {
+    const onDelete = vi.fn()
+    render(<UserTable data={mockUsers} onDelete={onDelete} />)
+
+    fireEvent.click(screen.getAllByText('Delete')[0])
+    expect(onDelete).toHaveBeenCalledWith('1')
+  })
+
+  it('should render empty table when no data', () => {
+    render(<UserTable data={[]} />)
+
+    const noDataElements = screen.getAllByText('No data')
+    expect(noDataElements.length).toBeGreaterThan(0)
+  })
+})

package/template/src/admin/components/index.ts

@@ -0,0 +1,7 @@
+export { UserTable } from './UserTable'
+export { StatsCard } from './StatsCard'
+export { PageHeader } from './PageHeader'
+export { UserFormModal } from './UserFormModal'
+export { ProtectedRoute } from './ProtectedRoute'
+export { CaptchaModal } from './CaptchaModal'
+export { PermissionGuard, PermissionButton, Can, Cannot } from './PermissionGuard'

package/template/src/admin/hooks/__tests__/useAuditLogs.test.ts

@@ -0,0 +1,109 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { useAuditLogStore } from '../useAuditLogs'
+
+vi.mock('@admin/services/apiClient', () => ({
+  apiClient: {
+    api: {
+      'audit-logs': {
+        $get: vi.fn(),
+      },
+    },
+  },
+}))
+
+describe('useAuditLogStore', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    useAuditLogStore.setState({
+      logs: [],
+      loading: false,
+      error: null,
+    })
+  })
+
+  it('should have correct initial state', () => {
+    const state = useAuditLogStore.getState()
+    expect(state.logs).toEqual([])
+    expect(state.loading).toBe(false)
+    expect(state.error).toBeNull()
+  })
+
+  it('should fetch logs successfully', async () => {
+    const mockLogs = [
+      {
+        id: '1',
+        action: 'create',
+        resourceType: 'user',
+        userId: 'u1',
+        timestamp: '2024-01-01',
+        details: {},
+      },
+    ]
+    const { apiClient } = await import('@admin/services/apiClient')
+    vi.mocked(apiClient.api['audit-logs'].$get).mockResolvedValueOnce({
+      json: async () => ({ success: true, data: mockLogs, timestamp: new Date().toISOString() }),
+    } as any)
+
+    await useAuditLogStore.getState().fetchLogs()
+
+    const state = useAuditLogStore.getState()
+    expect(state.logs).toEqual(mockLogs)
+    expect(state.loading).toBe(false)
+    expect(state.error).toBeNull()
+  })
+
+  it('should handle fetch with params', async () => {
+    const { apiClient } = await import('@admin/services/apiClient')
+    vi.mocked(apiClient.api['audit-logs'].$get).mockResolvedValueOnce({
+      json: async () => ({ success: true, data: [], timestamp: new Date().toISOString() }),
+    } as any)
+
+    await useAuditLogStore.getState().fetchLogs({
+      userId: 'user1',
+      action: 'create',
+      resourceType: 'user',
+    })
+
+    expect(apiClient.api['audit-logs'].$get).toHaveBeenCalledWith({
+      query: { userId: 'user1', action: 'create', resourceType: 'user' },
+    })
+  })
+
+  it('should handle failed response', async () => {
+    const { apiClient } = await import('@admin/services/apiClient')
+    vi.mocked(apiClient.api['audit-logs'].$get).mockResolvedValueOnce({
+      json: async () => ({ success: false, error: 'Failed' }),
+    } as any)
+
+    await useAuditLogStore.getState().fetchLogs()
+
+    const state = useAuditLogStore.getState()
+    expect(state.error).toBe('Failed to fetch audit logs')
+    expect(state.loading).toBe(false)
+  })
+
+  it('should handle network error', async () => {
+    const { apiClient } = await import('@admin/services/apiClient')
+    vi.mocked(apiClient.api['audit-logs'].$get).mockRejectedValueOnce(new Error('Network error'))
+
+    await useAuditLogStore.getState().fetchLogs()
+
+    const state = useAuditLogStore.getState()
+    expect(state.error).toBe('Network error')
+    expect(state.loading).toBe(false)
+  })
+
+  it('should handle fetch with partial params', async () => {
+    const { apiClient } = await import('@admin/services/apiClient')
+    vi.mocked(apiClient.api['audit-logs'].$get).mockResolvedValueOnce({
+      json: async () => ({ success: true, data: [], timestamp: new Date().toISOString() }),
+    } as any)
+
+    await useAuditLogStore.getState().fetchLogs({ userId: 'user1' })
+
+    expect(apiClient.api['audit-logs'].$get).toHaveBeenCalledWith({
+      query: { userId: 'user1' },
+    })
+  })
+})