@startsimpli/ui 0.4.7 → 0.4.8

package/src/components/wizard/__tests__/wizard.test.tsx

@@ -0,0 +1,97 @@
+import { render, screen } from '@testing-library/react'
+import { StepIndicator } from '../StepIndicator'
+
+const steps = [
+  { label: 'Account', description: 'Set up your account' },
+  { label: 'Profile', description: 'Complete your profile' },
+  { label: 'Review', description: 'Review and confirm' },
+]
+
+describe('StepIndicator', () => {
+  it('renders all step labels', () => {
+    render(<StepIndicator steps={steps} currentIndex={0} />)
+    expect(screen.getByText('Account')).toBeInTheDocument()
+    expect(screen.getByText('Profile')).toBeInTheDocument()
+    expect(screen.getByText('Review')).toBeInTheDocument()
+  })
+
+  it('renders step numbers for non-completed steps', () => {
+    render(<StepIndicator steps={steps} currentIndex={0} />)
+    // Step 1 is active (no check icon), steps 2 and 3 are upcoming
+    expect(screen.getByText('2')).toBeInTheDocument()
+    expect(screen.getByText('3')).toBeInTheDocument()
+  })
+
+  it('renders as an ordered list', () => {
+    render(<StepIndicator steps={steps} currentIndex={0} />)
+    expect(screen.getByRole('list')).toBeInTheDocument()
+    expect(screen.getAllByRole('listitem')).toHaveLength(3)
+  })
+
+  it('applies active styles to the current step label', () => {
+    render(<StepIndicator steps={steps} currentIndex={1} />)
+    const profileLabel = screen.getByText('Profile')
+    expect(profileLabel).toHaveClass('text-primary-600')
+  })
+
+  it('applies completed styles to past step labels', () => {
+    render(<StepIndicator steps={steps} currentIndex={2} />)
+    const accountLabel = screen.getByText('Account')
+    expect(accountLabel).toHaveClass('text-gray-600')
+    const profileLabel = screen.getByText('Profile')
+    expect(profileLabel).toHaveClass('text-gray-600')
+  })
+
+  it('applies upcoming styles to future step labels', () => {
+    render(<StepIndicator steps={steps} currentIndex={0} />)
+    const reviewLabel = screen.getByText('Review')
+    expect(reviewLabel).toHaveClass('text-gray-400')
+  })
+
+  it('does not render a connector after the last step', () => {
+    const { container } = render(<StepIndicator steps={steps} currentIndex={0} />)
+    // Connectors are h-0.5 divs between steps; should be n-1 = 2 connectors
+    const connectors = container.querySelectorAll('.h-0\\.5')
+    expect(connectors.length).toBe(steps.length - 1)
+  })
+
+  it('completed step connectors have primary color', () => {
+    const { container } = render(<StepIndicator steps={steps} currentIndex={2} />)
+    const connectors = container.querySelectorAll('.h-0\\.5')
+    // Both connectors (between steps 1-2 and 2-3) should be completed
+    connectors.forEach((connector) => {
+      expect(connector).toHaveClass('bg-primary-600')
+    })
+  })
+
+  it('incomplete step connectors have gray color', () => {
+    const { container } = render(<StepIndicator steps={steps} currentIndex={0} />)
+    const connectors = container.querySelectorAll('.h-0\\.5')
+    connectors.forEach((connector) => {
+      expect(connector).toHaveClass('bg-gray-200')
+    })
+  })
+
+  it('applies custom className', () => {
+    const { container } = render(
+      <StepIndicator steps={steps} currentIndex={0} className="my-wizard" />
+    )
+    expect(container.firstChild).toHaveClass('my-wizard')
+  })
+
+  it('renders correctly with a single step', () => {
+    render(<StepIndicator steps={[{ label: 'Only Step' }]} currentIndex={0} />)
+    expect(screen.getByText('Only Step')).toBeInTheDocument()
+    // No connector for a single step
+    const { container } = render(
+      <StepIndicator steps={[{ label: 'Only Step' }]} currentIndex={0} />
+    )
+    expect(container.querySelectorAll('.h-0\\.5')).toHaveLength(0)
+  })
+
+  it('renders with currentIndex at last step', () => {
+    render(<StepIndicator steps={steps} currentIndex={2} />)
+    // "Review" should be active
+    expect(screen.getByText('Review')).toHaveClass('text-primary-600')
+  })
+})