create-fullstack-scaffold 0.1.0

package/template/src/client/components/__tests__/ConnectionStatus.test.tsx

@@ -0,0 +1,188 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { ConnectionStatus } from '../ConnectionStatus'
+
+describe('ConnectionStatus', () => {
+  const mockOnConnect = vi.fn()
+  const mockOnDisconnect = vi.fn()
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render connection status container', () => {
+      render(
+        <ConnectionStatus
+          connected={false}
+          onConnect={mockOnConnect}
+          onDisconnect={mockOnDisconnect}
+        />
+      )
+      expect(screen.getByTestId('connection-status')).toBeInTheDocument()
+    })
+
+    it('should render connect and disconnect buttons', () => {
+      render(
+        <ConnectionStatus
+          connected={false}
+          onConnect={mockOnConnect}
+          onDisconnect={mockOnDisconnect}
+        />
+      )
+      expect(screen.getByTestId('connect-button')).toBeInTheDocument()
+      expect(screen.getByTestId('disconnect-button')).toBeInTheDocument()
+    })
+  })
+
+  describe('Status Display', () => {
+    it('should show disconnected status when not connected', () => {
+      render(
+        <ConnectionStatus
+          connected={false}
+          onConnect={mockOnConnect}
+          onDisconnect={mockOnDisconnect}
+        />
+      )
+      expect(screen.getByText('Disconnected')).toBeInTheDocument()
+    })
+
+    it('should show connected status when connected', () => {
+      render(
+        <ConnectionStatus
+          connected={true}
+          onConnect={mockOnConnect}
+          onDisconnect={mockOnDisconnect}
+        />
+      )
+      expect(screen.getByText('Connected')).toBeInTheDocument()
+    })
+
+    it('should show custom status text', () => {
+      render(
+        <ConnectionStatus
+          connected={true}
+          status="Reconnecting"
+          onConnect={mockOnConnect}
+          onDisconnect={mockOnDisconnect}
+        />
+      )
+      expect(screen.getByText('Reconnecting')).toBeInTheDocument()
+    })
+  })
+
+  describe('Button States', () => {
+    it('should disable connect button when connected', () => {
+      render(
+        <ConnectionStatus
+          connected={true}
+          onConnect={mockOnConnect}
+          onDisconnect={mockOnDisconnect}
+        />
+      )
+      expect(screen.getByTestId('connect-button')).toBeDisabled()
+    })
+
+    it('should enable connect button when disconnected', () => {
+      render(
+        <ConnectionStatus
+          connected={false}
+          onConnect={mockOnConnect}
+          onDisconnect={mockOnDisconnect}
+        />
+      )
+      expect(screen.getByTestId('connect-button')).not.toBeDisabled()
+    })
+
+    it('should disable disconnect button when disconnected', () => {
+      render(
+        <ConnectionStatus
+          connected={false}
+          onConnect={mockOnConnect}
+          onDisconnect={mockOnDisconnect}
+        />
+      )
+      expect(screen.getByTestId('disconnect-button')).toBeDisabled()
+    })
+
+    it('should enable disconnect button when connected', () => {
+      render(
+        <ConnectionStatus
+          connected={true}
+          onConnect={mockOnConnect}
+          onDisconnect={mockOnDisconnect}
+        />
+      )
+      expect(screen.getByTestId('disconnect-button')).not.toBeDisabled()
+    })
+
+    it('should disable connect button when loading', () => {
+      render(
+        <ConnectionStatus
+          connected={false}
+          loading={true}
+          onConnect={mockOnConnect}
+          onDisconnect={mockOnDisconnect}
+        />
+      )
+      expect(screen.getByTestId('connect-button')).toBeDisabled()
+    })
+  })
+
+  describe('Button Interactions', () => {
+    it('should call onConnect when connect button is clicked', () => {
+      render(
+        <ConnectionStatus
+          connected={false}
+          onConnect={mockOnConnect}
+          onDisconnect={mockOnDisconnect}
+        />
+      )
+      fireEvent.click(screen.getByTestId('connect-button'))
+      expect(mockOnConnect).toHaveBeenCalledTimes(1)
+    })
+
+    it('should call onDisconnect when disconnect button is clicked', () => {
+      render(
+        <ConnectionStatus
+          connected={true}
+          onConnect={mockOnConnect}
+          onDisconnect={mockOnDisconnect}
+        />
+      )
+      fireEvent.click(screen.getByTestId('disconnect-button'))
+      expect(mockOnDisconnect).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe('Loading State', () => {
+    it('should show loading spinner when loading', () => {
+      render(
+        <ConnectionStatus
+          connected={false}
+          loading={true}
+          onConnect={mockOnConnect}
+          onDisconnect={mockOnDisconnect}
+        />
+      )
+      const container = screen.getByTestId('connection-status')
+      const spinner = container.querySelector('.animate-spin')
+      expect(spinner).toBeInTheDocument()
+    })
+  })
+
+  describe('Custom ClassName', () => {
+    it('should apply custom className', () => {
+      render(
+        <ConnectionStatus
+          connected={false}
+          onConnect={mockOnConnect}
+          onDisconnect={mockOnDisconnect}
+          className="custom-class"
+        />
+      )
+      expect(screen.getByTestId('connection-status')).toHaveClass('custom-class')
+    })
+  })
+})

package/template/src/client/components/__tests__/EmptyState.test.tsx

@@ -0,0 +1,70 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { EmptyState } from '../EmptyState'
+import { Inbox, FileX, Search } from 'lucide-react'
+
+describe('EmptyState', () => {
+  describe('Rendering', () => {
+    it('should render with icon and title', () => {
+      render(<EmptyState icon={Inbox} title="No items" />)
+      expect(screen.getByTestId('empty-state')).toBeInTheDocument()
+      expect(screen.getByText('No items')).toBeInTheDocument()
+    })
+
+    it('should render with description', () => {
+      render(
+        <EmptyState
+          icon={Inbox}
+          title="No items"
+          description="Add your first item to get started"
+        />
+      )
+      expect(screen.getByText('Add your first item to get started')).toBeInTheDocument()
+    })
+
+    it('should render without description', () => {
+      render(<EmptyState icon={Inbox} title="No items" />)
+      expect(screen.getByText('No items')).toBeInTheDocument()
+    })
+  })
+
+  describe('Icon Display', () => {
+    it('should display the provided icon', () => {
+      render(<EmptyState icon={FileX} title="File not found" />)
+      const container = screen.getByTestId('empty-state')
+      const icon = container.querySelector('svg')
+      expect(icon).toBeInTheDocument()
+    })
+
+    it('should apply correct icon size', () => {
+      render(<EmptyState icon={Search} title="No results" />)
+      const container = screen.getByTestId('empty-state')
+      const icon = container.querySelector('svg')
+      expect(icon).toHaveClass('w-16', 'h-16')
+    })
+
+    it('should apply correct icon color', () => {
+      render(<EmptyState icon={Inbox} title="Empty" />)
+      const container = screen.getByTestId('empty-state')
+      const icon = container.querySelector('svg')
+      expect(icon).toHaveClass('text-gray-300')
+    })
+  })
+
+  describe('Custom ClassName', () => {
+    it('should apply custom className', () => {
+      render(<EmptyState icon={Inbox} title="Empty" className="custom-class" />)
+      const container = screen.getByTestId('empty-state')
+      expect(container).toHaveClass('custom-class')
+    })
+  })
+
+  describe('Layout', () => {
+    it('should have flex column layout', () => {
+      render(<EmptyState icon={Inbox} title="Empty" />)
+      const container = screen.getByTestId('empty-state')
+      expect(container).toHaveClass('flex', 'flex-col', 'items-center', 'justify-center')
+    })
+  })
+})

package/template/src/client/components/__tests__/Footer.test.tsx

@@ -0,0 +1,22 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { Footer } from '../Footer'
+
+describe('Footer', () => {
+  it('should render footer with copyright text', () => {
+    render(<Footer />)
+
+    expect(screen.getByText(/Built with/i)).toBeInTheDocument()
+    expect(screen.getByText(/Hono RPC/i)).toBeInTheDocument()
+    expect(screen.getByText(/React/i)).toBeInTheDocument()
+    expect(screen.getByText(/TypeScript/i)).toBeInTheDocument()
+  })
+
+  it('should have correct styling classes', () => {
+    const { container } = render(<Footer />)
+
+    const footer = container.querySelector('footer')
+    expect(footer).toHaveClass('bg-white')
+    expect(footer).toHaveClass('border-t')
+  })
+})

package/template/src/client/components/__tests__/LoadingSpinner.test.tsx

@@ -0,0 +1,75 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { LoadingSpinner } from '../LoadingSpinner'
+
+describe('LoadingSpinner', () => {
+  describe('Rendering', () => {
+    it('should render spinner element', () => {
+      render(<LoadingSpinner />)
+      expect(screen.getByTestId('loading-spinner')).toBeInTheDocument()
+    })
+  })
+
+  describe('Sizes', () => {
+    it('should apply small size by default', () => {
+      render(<LoadingSpinner size="sm" />)
+      const spinner = screen.getByTestId('loading-spinner')
+      expect(spinner).toHaveClass('w-4', 'h-4')
+    })
+
+    it('should apply medium size by default', () => {
+      render(<LoadingSpinner size="md" />)
+      const spinner = screen.getByTestId('loading-spinner')
+      expect(spinner).toHaveClass('w-6', 'h-6')
+    })
+
+    it('should apply large size', () => {
+      render(<LoadingSpinner size="lg" />)
+      const spinner = screen.getByTestId('loading-spinner')
+      expect(spinner).toHaveClass('w-8', 'h-8')
+    })
+
+    it('should use medium size by default', () => {
+      render(<LoadingSpinner />)
+      const spinner = screen.getByTestId('loading-spinner')
+      expect(spinner).toHaveClass('w-6', 'h-6')
+    })
+  })
+
+  describe('Colors', () => {
+    it('should apply blue color by default', () => {
+      render(<LoadingSpinner />)
+      const spinner = screen.getByTestId('loading-spinner')
+      expect(spinner).toHaveClass('text-blue-500')
+    })
+
+    it('should apply custom color', () => {
+      render(<LoadingSpinner color="text-red-500" />)
+      const spinner = screen.getByTestId('loading-spinner')
+      expect(spinner).toHaveClass('text-red-500')
+    })
+
+    it('should apply green color', () => {
+      render(<LoadingSpinner color="text-green-500" />)
+      const spinner = screen.getByTestId('loading-spinner')
+      expect(spinner).toHaveClass('text-green-500')
+    })
+  })
+
+  describe('Animation', () => {
+    it('should have animate-spin class', () => {
+      render(<LoadingSpinner />)
+      const spinner = screen.getByTestId('loading-spinner')
+      expect(spinner).toHaveClass('animate-spin')
+    })
+  })
+
+  describe('Custom ClassName', () => {
+    it('should apply custom className', () => {
+      render(<LoadingSpinner className="custom-class" />)
+      const spinner = screen.getByTestId('loading-spinner')
+      expect(spinner).toHaveClass('custom-class')
+    })
+  })
+})

package/template/src/client/components/__tests__/MessageCard.test.tsx

@@ -0,0 +1,142 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { MessageCard } from '../MessageCard'
+import { Send } from 'lucide-react'
+
+describe('MessageCard', () => {
+  describe('Rendering', () => {
+    it('should render message card container', () => {
+      render(<MessageCard type="test" payload={{ message: 'hello' }} />)
+      expect(screen.getByTestId('message-card')).toBeInTheDocument()
+    })
+
+    it('should render message type', () => {
+      render(<MessageCard type="echo" payload={{ message: 'hello' }} />)
+      expect(screen.getByText('ECHO')).toBeInTheDocument()
+    })
+
+    it('should convert underscore type to spaced format', () => {
+      render(<MessageCard type="echo_request" payload={{ message: 'hello' }} />)
+      expect(screen.getByText('ECHO REQUEST')).toBeInTheDocument()
+    })
+
+    it('should render payload as JSON', () => {
+      render(<MessageCard type="test" payload={{ key: 'value', count: 42 }} />)
+      expect(screen.getByText(/"key"/)).toBeInTheDocument()
+      expect(screen.getByText(/"value"/)).toBeInTheDocument()
+      expect(screen.getByText(/"count"/)).toBeInTheDocument()
+      expect(screen.getByText(/42/)).toBeInTheDocument()
+    })
+  })
+
+  describe('Timestamp', () => {
+    it('should render timestamp when provided', () => {
+      const timestamp = new Date('2024-01-15T10:30:00').getTime()
+      render(<MessageCard type="test" payload={{}} timestamp={timestamp} />)
+      expect(screen.getByText(/10:30/)).toBeInTheDocument()
+    })
+
+    it('should not render timestamp when not provided', () => {
+      render(<MessageCard type="test" payload={{}} />)
+      const card = screen.getByTestId('message-card')
+      const timeElement = card.querySelector('.text-gray-400.text-xs')
+      expect(timeElement).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Icon Display', () => {
+    it('should display icon when provided', () => {
+      render(<MessageCard type="test" payload={{}} icon={Send} />)
+      const card = screen.getByTestId('message-card')
+      const icon = card.querySelector('svg')
+      expect(icon).toBeInTheDocument()
+    })
+
+    it('should not display icon when not provided', () => {
+      render(<MessageCard type="test" payload={{}} />)
+      const badge = screen.getByText('TEST')
+      const icon = badge.querySelector('svg')
+      expect(icon).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Color Schemes', () => {
+    it('should apply gray color scheme by default', () => {
+      render(<MessageCard type="test" payload={{}} />)
+      const badge = screen.getByText('TEST')
+      expect(badge).toHaveClass('bg-gray-500')
+    })
+
+    it('should apply cyan color scheme', () => {
+      render(<MessageCard type="ping" payload={{}} colorScheme="cyan" />)
+      const badge = screen.getByText('PING')
+      expect(badge).toHaveClass('bg-cyan-500')
+    })
+
+    it('should apply purple color scheme', () => {
+      render(<MessageCard type="echo" payload={{}} colorScheme="purple" />)
+      const badge = screen.getByText('ECHO')
+      expect(badge).toHaveClass('bg-purple-500')
+    })
+
+    it('should apply orange color scheme', () => {
+      render(<MessageCard type="broadcast" payload={{}} colorScheme="orange" />)
+      const badge = screen.getByText('BROADCAST')
+      expect(badge).toHaveClass('bg-orange-500')
+    })
+
+    it('should apply green color scheme', () => {
+      render(<MessageCard type="notification" payload={{}} colorScheme="green" />)
+      const badge = screen.getByText('NOTIFICATION')
+      expect(badge).toHaveClass('bg-green-500')
+    })
+  })
+
+  describe('Border Color', () => {
+    it('should apply custom border color via style', () => {
+      render(<MessageCard type="test" payload={{}} borderColor="#ff0000" />)
+      const card = screen.getByTestId('message-card')
+      expect(card).toHaveStyle({ borderLeftColor: '#ff0000' })
+    })
+  })
+
+  describe('Custom ClassName', () => {
+    it('should apply custom className', () => {
+      render(<MessageCard type="test" payload={{}} className="custom-class" />)
+      expect(screen.getByTestId('message-card')).toHaveClass('custom-class')
+    })
+  })
+
+  describe('Complex Payloads', () => {
+    it('should render nested objects', () => {
+      render(
+        <MessageCard
+          type="test"
+          payload={{
+            user: {
+              name: 'John',
+              age: 30,
+            },
+            items: [1, 2, 3],
+          }}
+        />
+      )
+      expect(screen.getByText(/"user"/)).toBeInTheDocument()
+      expect(screen.getByText(/"name"/)).toBeInTheDocument()
+      expect(screen.getByText(/"John"/)).toBeInTheDocument()
+    })
+
+    it('should render arrays', () => {
+      render(<MessageCard type="test" payload={[1, 2, 3]} />)
+      expect(screen.getByText(/1/)).toBeInTheDocument()
+      expect(screen.getByText(/2/)).toBeInTheDocument()
+      expect(screen.getByText(/3/)).toBeInTheDocument()
+    })
+
+    it('should render primitive values', () => {
+      render(<MessageCard type="test" payload="simple string" />)
+      expect(screen.getByText(/"simple string"/)).toBeInTheDocument()
+    })
+  })
+})

package/template/src/client/components/__tests__/Navigation.test.tsx

@@ -0,0 +1,40 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { BrowserRouter } from 'react-router-dom'
+import { Navigation } from '../Navigation'
+
+vi.mock('@client/stores/todoStore', () => ({
+  useTodoStore: () => ({
+    todos: [{ id: 1, title: 'Test Todo', status: 'pending' }],
+  }),
+}))
+
+const renderWithRouter = (component: React.ReactNode) => {
+  return render(<BrowserRouter>{component}</BrowserRouter>)
+}
+
+describe('Navigation', () => {
+  it('should render navigation links', () => {
+    renderWithRouter(<Navigation />)
+
+    expect(screen.getByText('Biomimic App')).toBeInTheDocument()
+    expect(screen.getByText('Todo List')).toBeInTheDocument()
+    expect(screen.getByText('Notifications')).toBeInTheDocument()
+    expect(screen.getByText('WebSocket')).toBeInTheDocument()
+  })
+
+  it('should display todo count badge', () => {
+    renderWithRouter(<Navigation />)
+
+    // 组件中没有显示待办数量的徽章
+    expect(screen.getByTestId('app-nav')).toBeInTheDocument()
+  })
+
+  it('should have correct styling classes', () => {
+    const { container } = renderWithRouter(<Navigation />)
+
+    const nav = container.querySelector('nav')
+    expect(nav).toHaveClass('bg-white')
+    expect(nav).toHaveClass('border-b')
+  })
+})

package/template/src/client/components/__tests__/StatusBadge.test.tsx

@@ -0,0 +1,107 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { StatusBadge } from '../StatusBadge'
+import { CheckCircle, AlertTriangle } from 'lucide-react'
+
+describe('StatusBadge', () => {
+  describe('Rendering', () => {
+    it('should render with label', () => {
+      render(<StatusBadge label="Test Badge" />)
+      expect(screen.getByTestId('status-badge')).toBeInTheDocument()
+      expect(screen.getByText('Test Badge')).toBeInTheDocument()
+    })
+
+    it('should render with icon', () => {
+      render(<StatusBadge label="Success" icon={CheckCircle} />)
+      expect(screen.getByTestId('status-badge')).toBeInTheDocument()
+      expect(screen.getByText('Success')).toBeInTheDocument()
+    })
+
+    it('should render without icon', () => {
+      render(<StatusBadge label="No Icon" />)
+      expect(screen.getByTestId('status-badge')).toBeInTheDocument()
+      expect(screen.getByText('No Icon')).toBeInTheDocument()
+    })
+  })
+
+  describe('Color Schemes', () => {
+    it('should apply gray color scheme by default', () => {
+      render(<StatusBadge label="Default" />)
+      const badge = screen.getByTestId('status-badge')
+      expect(badge).toHaveClass('bg-gray-500')
+    })
+
+    it('should apply blue color scheme', () => {
+      render(<StatusBadge label="Blue" colorScheme="blue" />)
+      const badge = screen.getByTestId('status-badge')
+      expect(badge).toHaveClass('bg-blue-500')
+    })
+
+    it('should apply green color scheme', () => {
+      render(<StatusBadge label="Green" colorScheme="green" />)
+      const badge = screen.getByTestId('status-badge')
+      expect(badge).toHaveClass('bg-green-500')
+    })
+
+    it('should apply red color scheme', () => {
+      render(<StatusBadge label="Red" colorScheme="red" />)
+      const badge = screen.getByTestId('status-badge')
+      expect(badge).toHaveClass('bg-red-500')
+    })
+
+    it('should apply yellow color scheme', () => {
+      render(<StatusBadge label="Yellow" colorScheme="yellow" />)
+      const badge = screen.getByTestId('status-badge')
+      expect(badge).toHaveClass('bg-yellow-500')
+    })
+
+    it('should apply purple color scheme', () => {
+      render(<StatusBadge label="Purple" colorScheme="purple" />)
+      const badge = screen.getByTestId('status-badge')
+      expect(badge).toHaveClass('bg-purple-500')
+    })
+
+    it('should apply orange color scheme', () => {
+      render(<StatusBadge label="Orange" colorScheme="orange" />)
+      const badge = screen.getByTestId('status-badge')
+      expect(badge).toHaveClass('bg-orange-500')
+    })
+
+    it('should apply cyan color scheme', () => {
+      render(<StatusBadge label="Cyan" colorScheme="cyan" />)
+      const badge = screen.getByTestId('status-badge')
+      expect(badge).toHaveClass('bg-cyan-500')
+    })
+
+    it('should apply indigo color scheme', () => {
+      render(<StatusBadge label="Indigo" colorScheme="indigo" />)
+      const badge = screen.getByTestId('status-badge')
+      expect(badge).toHaveClass('bg-indigo-500')
+    })
+  })
+
+  describe('Custom ClassName', () => {
+    it('should apply custom className', () => {
+      render(<StatusBadge label="Custom" className="custom-class" />)
+      const badge = screen.getByTestId('status-badge')
+      expect(badge).toHaveClass('custom-class')
+    })
+  })
+
+  describe('Icon Display', () => {
+    it('should display icon when provided', () => {
+      render(<StatusBadge label="With Icon" icon={AlertTriangle} />)
+      const badge = screen.getByTestId('status-badge')
+      const icon = badge.querySelector('svg')
+      expect(icon).toBeInTheDocument()
+    })
+
+    it('should not display icon when not provided', () => {
+      render(<StatusBadge label="No Icon" />)
+      const badge = screen.getByTestId('status-badge')
+      const icon = badge.querySelector('svg')
+      expect(icon).not.toBeInTheDocument()
+    })
+  })
+})

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

@@ -0,0 +1,6 @@
+export { StatusBadge, type ColorScheme } from './StatusBadge'
+export { LoadingSpinner } from './LoadingSpinner'
+export { EmptyState } from './EmptyState'
+export { ConnectionStatus } from './ConnectionStatus'
+export { MessageCard } from './MessageCard'
+export { AuthButton } from './AuthButton'

package/template/src/client/index.css

@@ -0,0 +1,27 @@
+@import "tailwindcss";
+
+/**
+ * Global styles
+ */
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
+
+#root {
+  min-height: 100vh;
+}