@pattern-stack/frontend-patterns 0.0.6 → 0.1.0

package/src/__tests__/README.md

@@ -1,221 +0,0 @@
-# Frontend Testing Strategy
-
-> Atomic design testing that mirrors your backend testing architecture
-
-## 🏗️ Testing Architecture
-
-Our frontend tests follow the **same atomic structure** as your backend tests:
-
-```
-src/__tests__/
-├── atoms/              # Unit tests (like backend atoms/)
-│   ├── ui/            # UI component tests
-│   ├── business/      # Business component tests  
-│   ├── hooks/         # React hooks tests
-│   ├── utils/         # Utility function tests
-│   └── services/      # API client tests
-├── molecules/         # Component integration tests
-│   ├── forms/         # Form component tests
-│   ├── layout/        # Layout component tests
-│   └── navigation/    # Navigation tests
-├── organisms/         # Page/complex component tests
-│   └── showcase/      # Full page tests
-├── features/          # Feature integration tests
-│   └── auth/          # Auth system tests
-├── setup.ts           # Test setup (like conftest.py)
-└── utils.tsx          # Test utilities (like pytest fixtures)
-```
-
-## 🧪 Testing Stack
-
-**Framework**: Vitest (Vite-native, fast)
-**React Testing**: @testing-library/react
-**User Interaction**: @testing-library/user-event  
-**Environment**: jsdom (browser simulation)
-**Assertions**: jest-dom matchers
-
-## 📋 Test Commands
-
-```bash
-# Run all tests
-npm run test
-
-# Run with UI (visual test runner)
-npm run test:ui
-
-# Run once (CI mode)
-npm run test:run
-
-# Watch mode (development)
-npm run test:watch
-
-# Coverage report
-npm run test:coverage
-
-# Test by atomic level (like backend)
-npm run test:atoms       # Unit tests
-npm run test:molecules   # Component integration
-npm run test:organisms   # Page tests  
-npm run test:features    # Feature integration
-```
-
-## 🎯 Testing Patterns
-
-### Atoms (Unit Tests)
-```typescript
-// UI Components
-describe('Button (Atom)', () => {
-  it('renders with correct variant styles', () => {
-    render(<Button variant="primary">Click me</Button>)
-    expect(screen.getByRole('button')).toHaveClass('bg-primary')
-  })
-})
-
-// Hooks
-describe('useApi (Atom)', () => {
-  it('handles API calls correctly', async () => {
-    const { result } = renderHook(() => useApiQuery(['test'], mockFn))
-    await waitFor(() => expect(result.current.isSuccess).toBe(true))
-  })
-})
-
-// Utils
-describe('cn utility (Atom)', () => {
-  it('merges classes correctly', () => {
-    expect(cn('px-4', 'py-2')).toBe('px-4 py-2')
-  })
-})
-```
-
-### Molecules (Component Integration)
-```typescript
-describe('AppHeader (Molecule)', () => {
-  it('integrates auth, navigation, and UI atoms', () => {
-    render(<AppHeader />)
-    expect(screen.getByRole('banner')).toBeInTheDocument()
-    expect(screen.getByTestId('user-menu')).toBeInTheDocument()
-  })
-})
-```
-
-### Organisms (Page Tests)
-```typescript
-describe('ComponentShowcasePage (Organism)', () => {
-  it('renders complete page with all sections', () => {
-    render(<ComponentShowcasePage />)
-    expect(screen.getByRole('main')).toBeInTheDocument()
-    // Test full page functionality
-  })
-})
-```
-
-### Features (Integration Tests)
-```typescript
-describe('useAuth (Feature)', () => {
-  it('handles complete auth flow', async () => {
-    const { result } = renderHook(() => useAuth())
-    await act(() => result.current.login(credentials))
-    expect(result.current.isAuthenticated).toBe(true)
-  })
-})
-```
-
-## 🛠️ Test Utilities
-
-### Setup (`setup.ts`)
-- Global test configuration
-- Mock browser APIs
-- Environment setup
-- Like your `conftest.py`
-
-### Utils (`utils.tsx`)
-- Custom render with providers
-- Mock factories (users, API clients)
-- Test helpers and fixtures
-- Like your pytest fixtures
-
-### Example Usage
-```typescript
-import { render, createMockUser, createMockApiClient } from '../utils'
-
-describe('MyComponent', () => {
-  it('works with test utilities', () => {
-    const mockUser = createMockUser({ name: 'Test User' })
-    const mockApi = createMockApiClient()
-    
-    render(<MyComponent />, {
-      initialRoute: '/dashboard',
-      queryClient: new QueryClient()
-    })
-  })
-})
-```
-
-## 🎨 Design System Testing
-
-Our tests enforce design system compliance:
-
-```typescript
-it('uses design system classes only', () => {
-  render(<Component />)
-  const element = screen.getByRole('button')
-  
-  // ✅ Should use design system
-  expect(element).toHaveClass('bg-primary')
-  
-  // ❌ Should NOT use hardcoded colors
-  expect(element.className).not.toMatch(/bg-blue-\d+/)
-})
-```
-
-## 📊 Coverage Goals
-
-- **Atoms**: 90%+ (pure functions, UI components)
-- **Molecules**: 80%+ (component integration)
-- **Organisms**: 70%+ (complex pages)
-- **Features**: 85%+ (business logic)
-
-## 🔄 CI/CD Integration
-
-Tests run in pre-commit hooks:
-```bash
-npm run pre-commit  # style:check + test:run + build
-```
-
-## 🚀 Running Tests
-
-```bash
-# Development workflow
-npm run test:watch        # Watch mode while coding
-
-# Before committing  
-npm run test:run          # Full test suite
-npm run test:coverage     # Check coverage
-
-# Debugging specific areas
-npm run test:atoms        # Just unit tests
-npm run test:features     # Just integration tests
-
-# Visual debugging
-npm run test:ui           # Vitest UI runner
-```
-
-## 🎯 Best Practices
-
-1. **Mirror Backend Structure**: Tests follow atomic design
-2. **Design System Compliance**: Test CSS class usage
-3. **Integration Focus**: Test component interactions
-4. **User-Centric**: Test user workflows, not implementation
-5. **Mock External Dependencies**: API calls, localStorage, etc.
-6. **Accessibility**: Test keyboard navigation, ARIA attributes
-
-## 🔧 Configuration
-
-- **vitest.config.ts**: Main test configuration
-- **setup.ts**: Global test setup and mocks
-- **utils.tsx**: Reusable test utilities and providers
-- **package.json**: Test scripts and atomic-level commands
-
----
-
-**Result**: Frontend testing that mirrors your backend's atomic architecture with comprehensive coverage and design system enforcement! 🧪⚛️

package/src/__tests__/atoms/composed/databadge.test.tsx

@@ -1,106 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { render, screen } from '../../utils'
-import { DataBadge } from '../../../atoms/composed/DataBadge'
-
-describe('DataBadge (Composed)', () => {
-  describe('status variant', () => {
-    it('renders success status badge', () => {
-      render(<DataBadge variant="status" status="success">Active</DataBadge>)
-      
-      const badge = screen.getByText('Active')
-      expect(badge).toBeInTheDocument()
-      expect(badge.className).toContain('status-success')
-    })
-
-    it('renders warning status badge', () => {
-      render(<DataBadge variant="status" status="warning">Pending</DataBadge>)
-      
-      const badge = screen.getByText('Pending')
-      expect(badge.className).toContain('status-warning')
-    })
-
-    it('renders error status badge', () => {
-      render(<DataBadge variant="status" status="error">Failed</DataBadge>)
-      
-      const badge = screen.getByText('Failed')
-      expect(badge.className).toContain('status-error')
-    })
-
-    it('renders info status badge', () => {
-      render(<DataBadge variant="status" status="info">Processing</DataBadge>)
-      
-      const badge = screen.getByText('Processing')
-      expect(badge.className).toContain('status-info')
-    })
-
-    it('renders neutral status badge', () => {
-      render(<DataBadge variant="status" status="neutral">Draft</DataBadge>)
-      
-      const badge = screen.getByText('Draft')
-      expect(badge.className).toContain('status-neutral')
-    })
-  })
-
-  describe('category variant', () => {
-    it('renders category 1 badge', () => {
-      render(<DataBadge variant="category" category={1}>Category 1</DataBadge>)
-      
-      const badge = screen.getByText('Category 1')
-      expect(badge).toBeInTheDocument()
-      expect(badge.className).toContain('badge-category-1')
-    })
-
-    it('renders category 5 badge', () => {
-      render(<DataBadge variant="category" category={5}>Category 5</DataBadge>)
-      
-      const badge = screen.getByText('Category 5')
-      expect(badge.className).toContain('badge-category-5')
-    })
-
-    it('renders category 8 badge', () => {
-      render(<DataBadge variant="category" category={8}>Category 8</DataBadge>)
-      
-      const badge = screen.getByText('Category 8')
-      expect(badge.className).toContain('badge-category-8')
-    })
-  })
-
-  it('applies additional className props', () => {
-    render(
-      <DataBadge variant="status" status="success" className="custom-class">
-        Custom
-      </DataBadge>
-    )
-    
-    const badge = screen.getByText('Custom')
-    expect(badge.className).toContain('custom-class')
-  })
-
-  it('renders with component data attribute', () => {
-    render(
-      <DataBadge variant="status" status="info">
-        Test
-      </DataBadge>
-    )
-    
-    expect(screen.getByText('Test')).toHaveAttribute('data-component-name', 'DataBadge')
-  })
-
-  it('automatically uses default category', () => {
-    render(<DataBadge>Default</DataBadge>)
-    
-    const badge = screen.getByText('Default')
-    expect(badge.className).toContain('badge-category-1')
-  })
-
-  it('handles string and number status values', () => {
-    const { rerender } = render(
-      <DataBadge variant="status" status="success">String Status</DataBadge>
-    )
-    
-    expect(screen.getByText('String Status')).toBeInTheDocument()
-    
-    rerender(<DataBadge variant="category" category={3}>Number Category</DataBadge>)
-    expect(screen.getByText('Number Category')).toBeInTheDocument()
-  })
-})

package/src/__tests__/atoms/composed/statcard.test.tsx

@@ -1,133 +0,0 @@
-import { describe, it, expect, vi } from 'vitest'
-import { render, screen, userEvent } from '../../utils'
-import { StatCard } from '../../../atoms/composed/StatCard'
-
-describe('StatCard (Composed)', () => {
-  it('renders basic stat card with title and value', () => {
-    render(<StatCard title="Total Users" value="1,234" />)
-    
-    expect(screen.getByText('Total Users')).toBeInTheDocument()
-    expect(screen.getByText('1,234')).toBeInTheDocument()
-  })
-
-  it('renders with subtitle', () => {
-    render(
-      <StatCard 
-        title="Revenue" 
-        value="$45,678" 
-        subtitle="+12% from last month" 
-      />
-    )
-    
-    expect(screen.getByText('Revenue')).toBeInTheDocument()
-    expect(screen.getByText('$45,678')).toBeInTheDocument()
-    expect(screen.getByText('+12% from last month')).toBeInTheDocument()
-  })
-
-  it('renders with icon', () => {
-    render(
-      <StatCard 
-        title="Orders" 
-        value="567" 
-        icon="ShoppingCart"
-      />
-    )
-    
-    expect(screen.getByText('Orders')).toBeInTheDocument()
-    expect(screen.getByText('567')).toBeInTheDocument()
-    // Icon should be rendered (we can't easily test the actual icon, but we can test it doesn't crash)
-  })
-
-  it('applies category theming', () => {
-    render(<StatCard title="Test" value="123" category={3} />)
-    
-    const card = screen.getByText('Test').closest('[data-component-name="StatCard"]')
-    expect(card).toBeInTheDocument()
-    expect(card).toHaveAttribute('data-component-name', 'StatCard')
-  })
-
-  it('handles click events', async () => {
-    const user = userEvent.setup()
-    const handleClick = vi.fn()
-    
-    render(
-      <StatCard 
-        title="Clickable Card" 
-        value="999" 
-        onClick={handleClick}
-      />
-    )
-    
-    const card = screen.getByText('Clickable Card').closest('[role="button"]')
-    expect(card).toBeInTheDocument()
-    
-    await user.click(card!)
-    expect(handleClick).toHaveBeenCalledOnce()
-  })
-
-  it('applies hover effects when clickable', () => {
-    render(
-      <StatCard 
-        title="Hoverable" 
-        value="555" 
-        onClick={() => {}}
-      />
-    )
-    
-    const card = screen.getByText('Hoverable').closest('[role="button"]')
-    expect(card).toHaveClass('cursor-pointer')
-    expect(card).toHaveClass('hover:shadow-md')
-  })
-
-  it('does not apply click styles when not clickable', () => {
-    render(<StatCard title="Static Card" value="111" />)
-    
-    const card = screen.getByText('Static Card').closest('div')
-    expect(card).not.toHaveAttribute('role', 'button')
-    expect(card).not.toHaveClass('cursor-pointer')
-  })
-
-  it('displays numbers as provided', () => {
-    render(<StatCard title="Big Number" value={1234567} />)
-    
-    expect(screen.getByText('1234567')).toBeInTheDocument()
-  })
-
-  it('handles string and number values', () => {
-    const { rerender } = render(<StatCard title="String" value="Custom Text" />)
-    expect(screen.getByText('Custom Text')).toBeInTheDocument()
-    
-    rerender(<StatCard title="Number" value={42} />)
-    expect(screen.getByText('42')).toBeInTheDocument()
-  })
-
-  it('applies custom className', () => {
-    render(
-      <StatCard 
-        title="Custom" 
-        value="123" 
-        className="custom-stat-card"
-      />
-    )
-    
-    const card = screen.getByText('Custom').closest('.custom-stat-card')
-    expect(card).toBeInTheDocument()
-  })
-
-  it('renders loading state', () => {
-    render(<StatCard title="Loading" value="..." isLoading={true} />)
-    
-    const card = screen.getByText('Loading').closest('[data-component-name="StatCard"]')
-    expect(card).toBeInTheDocument()
-    // Check for skeleton elements in loading state
-    const skeletons = card?.querySelectorAll('.animate-pulse')
-    expect(skeletons?.length).toBeGreaterThan(0)
-  })
-
-  it('renders with data component name', () => {
-    render(<StatCard title="Test Card" value="123" />)
-    
-    const card = screen.getByText('Test Card').closest('[data-component-name="StatCard"]')
-    expect(card).toHaveAttribute('data-component-name', 'StatCard')
-  })
-})

package/src/__tests__/atoms/hooks/simple-hooks.test.ts

@@ -1,44 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { renderHook } from '@testing-library/react'
-import { useState } from 'react'
-
-describe('Simple Hook Tests (Example)', () => {
-  it('useState hook works correctly', () => {
-    const { result } = renderHook(() => useState(0))
-    
-    const [count, setCount] = result.current
-    expect(count).toBe(0)
-    
-    // Test that hook function is returned
-    expect(typeof setCount).toBe('function')
-  })
-
-  it('useEffect-like behavior can be tested', () => {
-    const { result, rerender } = renderHook(
-      ({ initialValue }) => useState(initialValue),
-      { initialProps: { initialValue: 10 } }
-    )
-
-    expect(result.current[0]).toBe(10)
-
-    // Test re-render with new props
-    rerender({ initialValue: 20 })
-    // Note: useState doesn't re-initialize on prop changes, this is just testing the pattern
-    expect(result.current[0]).toBe(10) // Still 10 because useState doesn't re-init
-  })
-
-  it('custom hook pattern testing', () => {
-    const useCounter = (initial = 0) => {
-      const [count, setCount] = useState(initial)
-      const increment = () => setCount(c => c + 1)
-      const decrement = () => setCount(c => c - 1)
-      return { count, increment, decrement }
-    }
-
-    const { result } = renderHook(() => useCounter(5))
-
-    expect(result.current.count).toBe(5)
-    expect(typeof result.current.increment).toBe('function')
-    expect(typeof result.current.decrement).toBe('function')
-  })
-})

package/src/__tests__/atoms/ui/button.test.tsx

@@ -1,68 +0,0 @@
-import React from 'react'
-import { describe, it, expect } from 'vitest'
-import { render, screen, userEvent } from '../../utils'
-import { Button } from '../../../atoms/ui/button'
-
-describe('Button (Atom)', () => {
-  it('renders with default variant', () => {
-    render(<Button>Click me</Button>)
-    const button = screen.getByRole('button', { name: /click me/i })
-    expect(button).toBeInTheDocument()
-    // The button uses gradient, so check for primary color reference
-    expect(button.className).toContain('from-primary')
-  })
-
-  it('renders with different variants', () => {
-    const { rerender } = render(<Button variant="secondary">Secondary</Button>)
-    expect(screen.getByRole('button')).toHaveClass('bg-gray-100')
-
-    rerender(<Button variant="destructive">Destructive</Button>)
-    expect(screen.getByRole('button').className).toContain('from-destructive')
-  })
-
-  it('renders with different sizes', () => {
-    const { rerender } = render(<Button size="sm">Small</Button>)
-    expect(screen.getByRole('button')).toHaveClass('h-9')
-
-    rerender(<Button size="lg">Large</Button>)
-    expect(screen.getByRole('button')).toHaveClass('h-12')
-  })
-
-  it('handles click events', async () => {
-    const user = userEvent.setup()
-    const handleClick = vi.fn()
-    
-    render(<Button onClick={handleClick}>Click me</Button>)
-    
-    await user.click(screen.getByRole('button'))
-    expect(handleClick).toHaveBeenCalledOnce()
-  })
-
-  it('is disabled when disabled prop is true', () => {
-    render(<Button disabled>Disabled</Button>)
-    const button = screen.getByRole('button')
-    expect(button).toBeDisabled()
-    expect(button).toHaveClass('disabled:pointer-events-none')
-  })
-
-  it('renders as child component when asChild is true', () => {
-    render(
-      <Button asChild>
-        <a href="/test">Link button</a>
-      </Button>
-    )
-    
-    const link = screen.getByRole('link')
-    expect(link).toBeInTheDocument()
-    expect(link.className).toContain('from-primary')
-    expect(link).toHaveAttribute('href', '/test')
-  })
-
-  it('forwards ref correctly', () => {
-    const ref = React.createRef<HTMLButtonElement>()
-    render(<Button ref={ref}>Button</Button>)
-    
-    expect(ref.current).toBeInstanceOf(HTMLButtonElement)
-    expect(ref.current).toHaveTextContent('Button')
-  })
-})