@startsimpli/ui 0.4.6 → 0.4.8

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

@@ -0,0 +1,181 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import { SettingsLayout } from '../SettingsLayout'
+import { SettingsNav } from '../SettingsNav'
+import { SettingsCard } from '../SettingsCard'
+
+const TestIcon = () => <svg data-testid="settings-icon" />
+
+// ---------------------------------------------------------------------------
+// SettingsLayout
+// ---------------------------------------------------------------------------
+
+describe('SettingsLayout', () => {
+  it('renders children', () => {
+    render(
+      <SettingsLayout>
+        <div>Child content</div>
+      </SettingsLayout>
+    )
+    expect(screen.getByText('Child content')).toBeInTheDocument()
+  })
+
+  it('renders title when provided', () => {
+    render(
+      <SettingsLayout title="Settings">
+        <div />
+      </SettingsLayout>
+    )
+    expect(screen.getByText('Settings')).toBeInTheDocument()
+  })
+
+  it('does not render title element when title is not provided', () => {
+    render(
+      <SettingsLayout>
+        <div />
+      </SettingsLayout>
+    )
+    expect(screen.queryByRole('heading')).not.toBeInTheDocument()
+  })
+
+  it('renders description when both title and description are provided', () => {
+    render(
+      <SettingsLayout title="Settings" description="Manage your preferences">
+        <div />
+      </SettingsLayout>
+    )
+    expect(screen.getByText('Manage your preferences')).toBeInTheDocument()
+  })
+
+  it('does not render description when description is not provided', () => {
+    render(
+      <SettingsLayout title="Settings">
+        <div />
+      </SettingsLayout>
+    )
+    expect(screen.queryByText(/manage/i)).not.toBeInTheDocument()
+  })
+})
+
+// ---------------------------------------------------------------------------
+// SettingsNav
+// ---------------------------------------------------------------------------
+
+const navItems = [
+  { id: 'account', label: 'Account', href: '/settings/account' },
+  { id: 'billing', label: 'Billing', href: '/settings/billing', icon: TestIcon },
+  { id: 'integrations', label: 'Integrations', href: '/settings/integrations' },
+]
+
+describe('SettingsNav', () => {
+  it('renders all nav items', () => {
+    render(
+      <SettingsNav items={navItems} onNavigate={jest.fn()} />
+    )
+    expect(screen.getByText('Account')).toBeInTheDocument()
+    expect(screen.getByText('Billing')).toBeInTheDocument()
+    expect(screen.getByText('Integrations')).toBeInTheDocument()
+  })
+
+  it('renders icons for items that have icons', () => {
+    render(
+      <SettingsNav items={navItems} onNavigate={jest.fn()} />
+    )
+    expect(screen.getByTestId('settings-icon')).toBeInTheDocument()
+  })
+
+  it('marks active item with active styles', () => {
+    render(
+      <SettingsNav items={navItems} activeId="account" onNavigate={jest.fn()} />
+    )
+    const accountBtn = screen.getByRole('button', { name: 'Account' })
+    expect(accountBtn).toHaveClass('bg-gray-100', 'text-gray-900')
+  })
+
+  it('inactive items do not have active styles', () => {
+    render(
+      <SettingsNav items={navItems} activeId="account" onNavigate={jest.fn()} />
+    )
+    const billingBtn = screen.getByRole('button', { name: 'Billing' })
+    expect(billingBtn).not.toHaveClass('bg-gray-100')
+    expect(billingBtn).toHaveClass('text-gray-600')
+  })
+
+  it('calls onNavigate with the correct href on click', () => {
+    const onNavigate = jest.fn()
+    render(
+      <SettingsNav items={navItems} onNavigate={onNavigate} />
+    )
+    fireEvent.click(screen.getByRole('button', { name: 'Billing' }))
+    expect(onNavigate).toHaveBeenCalledWith('/settings/billing')
+  })
+
+  it('renders all items as buttons', () => {
+    render(
+      <SettingsNav items={navItems} onNavigate={jest.fn()} />
+    )
+    expect(screen.getAllByRole('button')).toHaveLength(navItems.length)
+  })
+
+  it('renders inside a nav element', () => {
+    render(
+      <SettingsNav items={navItems} onNavigate={jest.fn()} />
+    )
+    expect(screen.getByRole('navigation')).toBeInTheDocument()
+  })
+})
+
+// ---------------------------------------------------------------------------
+// SettingsCard
+// ---------------------------------------------------------------------------
+
+describe('SettingsCard', () => {
+  it('renders the title', () => {
+    render(<SettingsCard title="API Keys" />)
+    expect(screen.getByText('API Keys')).toBeInTheDocument()
+  })
+
+  it('renders description when provided', () => {
+    render(<SettingsCard title="API Keys" description="Manage your API tokens." />)
+    expect(screen.getByText('Manage your API tokens.')).toBeInTheDocument()
+  })
+
+  it('does not render description when not provided', () => {
+    render(<SettingsCard title="API Keys" />)
+    expect(screen.queryByText(/manage/i)).not.toBeInTheDocument()
+  })
+
+  it('renders icon when provided', () => {
+    render(<SettingsCard title="API Keys" icon={TestIcon} />)
+    expect(screen.getByTestId('settings-icon')).toBeInTheDocument()
+  })
+
+  it('does not render icon when not provided', () => {
+    render(<SettingsCard title="API Keys" />)
+    expect(screen.queryByTestId('settings-icon')).not.toBeInTheDocument()
+  })
+
+  it('renders action node when provided', () => {
+    render(
+      <SettingsCard
+        title="API Keys"
+        action={<button>Add Key</button>}
+      />
+    )
+    expect(screen.getByRole('button', { name: 'Add Key' })).toBeInTheDocument()
+  })
+
+  it('renders children content', () => {
+    render(
+      <SettingsCard title="API Keys">
+        <p>Card body content</p>
+      </SettingsCard>
+    )
+    expect(screen.getByText('Card body content')).toBeInTheDocument()
+  })
+
+  it('does not render children section when children is not provided', () => {
+    const { container } = render(<SettingsCard title="API Keys" />)
+    // The children container (px-6 pb-6 pt-0) should not be present
+    expect(container.querySelector('.px-6.pb-6.pt-0')).not.toBeInTheDocument()
+  })
+})

package/src/components/settings/index.ts

@@ -0,0 +1,6 @@
+export { SettingsLayout } from './SettingsLayout'
+export type { SettingsLayoutProps, SettingsNavItem as SettingsLayoutNavItem } from './SettingsLayout'
+export { SettingsNav } from './SettingsNav'
+export type { SettingsNavProps, SettingsNavItem } from './SettingsNav'
+export { SettingsCard } from './SettingsCard'
+export type { SettingsCardProps } from './SettingsCard'

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')
+  })
+})