@startsimpli/ui 0.4.7 → 0.4.8

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

@@ -0,0 +1,114 @@
+import { render, screen } from '@testing-library/react'
+import { DashboardSkeleton } from '../DashboardSkeleton'
+import { TableSkeleton } from '../TableSkeleton'
+
+// ---------------------------------------------------------------------------
+// DashboardSkeleton
+// ---------------------------------------------------------------------------
+
+describe('DashboardSkeleton', () => {
+  it('renders 4 skeleton cards by default', () => {
+    const { container } = render(<DashboardSkeleton />)
+    // Each card is a direct child of the grid container
+    const grid = container.firstChild as HTMLElement
+    expect(grid.children).toHaveLength(4)
+  })
+
+  it('renders the specified number of cards', () => {
+    const { container } = render(<DashboardSkeleton cards={3} />)
+    const grid = container.firstChild as HTMLElement
+    expect(grid.children).toHaveLength(3)
+  })
+
+  it('renders 0 cards when cards=0', () => {
+    const { container } = render(<DashboardSkeleton cards={0} />)
+    const grid = container.firstChild as HTMLElement
+    expect(grid.children).toHaveLength(0)
+  })
+
+  it('renders animated pulse elements inside each card', () => {
+    const { container } = render(<DashboardSkeleton cards={1} />)
+    const pulseEls = container.querySelectorAll('.animate-pulse')
+    // Each card has 4 pulse elements
+    expect(pulseEls.length).toBe(4)
+  })
+
+  it('applies custom className to the grid', () => {
+    const { container } = render(<DashboardSkeleton className="my-skeleton" />)
+    expect(container.firstChild).toHaveClass('my-skeleton')
+  })
+
+  it('renders with 8 cards', () => {
+    const { container } = render(<DashboardSkeleton cards={8} />)
+    const grid = container.firstChild as HTMLElement
+    expect(grid.children).toHaveLength(8)
+  })
+})
+
+// ---------------------------------------------------------------------------
+// TableSkeleton
+// ---------------------------------------------------------------------------
+
+describe('TableSkeleton', () => {
+  it('renders a table', () => {
+    render(<TableSkeleton />)
+    expect(screen.getByRole('table')).toBeInTheDocument()
+  })
+
+  it('renders default 5 rows', () => {
+    render(<TableSkeleton />)
+    const rows = screen.getAllByRole('row')
+    // 1 header row + 5 body rows
+    expect(rows).toHaveLength(6)
+  })
+
+  it('renders the specified number of body rows', () => {
+    render(<TableSkeleton rows={3} />)
+    const rows = screen.getAllByRole('row')
+    // 1 header row + 3 body rows
+    expect(rows).toHaveLength(4)
+  })
+
+  it('renders default 4 columns in the header', () => {
+    render(<TableSkeleton />)
+    const headerCells = screen.getAllByRole('columnheader')
+    expect(headerCells).toHaveLength(4)
+  })
+
+  it('renders the specified number of columns', () => {
+    render(<TableSkeleton columns={6} />)
+    const headerCells = screen.getAllByRole('columnheader')
+    expect(headerCells).toHaveLength(6)
+  })
+
+  it('renders correct number of data cells (rows * columns)', () => {
+    render(<TableSkeleton rows={3} columns={2} />)
+    const cells = screen.getAllByRole('cell')
+    expect(cells).toHaveLength(6)
+  })
+
+  it('renders animated pulse elements in header cells', () => {
+    const { container } = render(<TableSkeleton columns={2} rows={0} />)
+    const headerPulse = container.querySelectorAll('thead .animate-pulse')
+    expect(headerPulse.length).toBe(2)
+  })
+
+  it('applies custom className to the container', () => {
+    const { container } = render(<TableSkeleton className="my-table-skeleton" />)
+    expect(container.firstChild).toHaveClass('my-table-skeleton')
+  })
+
+  it('renders a header skeleton area above the table', () => {
+    const { container } = render(<TableSkeleton />)
+    // Header search/filter area has a border-b
+    const headerArea = container.querySelector('.p-4.border-b')
+    expect(headerArea).toBeInTheDocument()
+  })
+
+  it('renders a pagination skeleton area below the table', () => {
+    const { container } = render(<TableSkeleton />)
+    // Pagination area has border-t
+    const paginationArea = container.querySelector('.p-4.border-t')
+    expect(paginationArea).toBeInTheDocument()
+  })
+})

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

@@ -0,0 +1,194 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import { Sidebar, SidebarLayout } from '../sidebar'
+
+// next/link and next/navigation are mocked via jest.config.js moduleNameMapper
+
+const sections = [
+  {
+    title: 'Main',
+    links: [
+      { href: '/', label: 'Dashboard', icon: <span data-testid="icon-dashboard" /> },
+      { href: '/contacts', label: 'Contacts' },
+    ],
+  },
+  {
+    title: 'Admin',
+    links: [
+      { href: '/settings', label: 'Account Settings' },
+    ],
+  },
+]
+
+describe('Sidebar', () => {
+  it('renders app name', () => {
+    render(<Sidebar appName="MarketSimpli" sections={sections} />)
+    expect(screen.getByText('MarketSimpli')).toBeInTheDocument()
+  })
+
+  it('renders section titles', () => {
+    render(<Sidebar appName="MarketSimpli" sections={sections} />)
+    expect(screen.getByText('Main')).toBeInTheDocument()
+    expect(screen.getByText('Admin')).toBeInTheDocument()
+  })
+
+  it('renders all nav links', () => {
+    render(<Sidebar appName="MarketSimpli" sections={sections} />)
+    expect(screen.getByText('Dashboard')).toBeInTheDocument()
+    expect(screen.getByText('Contacts')).toBeInTheDocument()
+    expect(screen.getByText('Account Settings')).toBeInTheDocument()
+  })
+
+  it('renders icons for links that have icons', () => {
+    render(<Sidebar appName="MarketSimpli" sections={sections} />)
+    expect(screen.getByTestId('icon-dashboard')).toBeInTheDocument()
+  })
+
+  it('renders collapse toggle button when collapsible is true (default)', () => {
+    render(<Sidebar appName="MarketSimpli" sections={sections} />)
+    expect(screen.getByText('Collapse')).toBeInTheDocument()
+  })
+
+  it('does not render collapse toggle when collapsible is false', () => {
+    render(<Sidebar appName="MarketSimpli" sections={sections} collapsible={false} />)
+    expect(screen.queryByText('Collapse')).not.toBeInTheDocument()
+  })
+
+  it('collapses when toggle button is clicked', () => {
+    const { container } = render(
+      <Sidebar appName="MarketSimpli" sections={sections} />
+    )
+    fireEvent.click(screen.getByText('Collapse'))
+    // After collapse, the sidebar should have w-20 class
+    expect(container.firstChild).toHaveClass('w-20')
+  })
+
+  it('expands back when toggle is clicked again', () => {
+    const { container } = render(
+      <Sidebar appName="MarketSimpli" sections={sections} />
+    )
+    // Collapse
+    fireEvent.click(screen.getByText('Collapse'))
+    // Expand — the chevron button is still present, click it
+    const expandBtn = screen.getByRole('button')
+    fireEvent.click(expandBtn)
+    expect(container.firstChild).toHaveClass('w-64')
+  })
+
+  it('hides link labels when collapsed', () => {
+    render(
+      <Sidebar appName="MarketSimpli" sections={sections} defaultCollapsed />
+    )
+    // Labels are wrapped in a <span> that only renders when not collapsed
+    expect(screen.queryByText('Dashboard')).not.toBeInTheDocument()
+    expect(screen.queryByText('Contacts')).not.toBeInTheDocument()
+  })
+
+  it('hides section titles when collapsed', () => {
+    render(
+      <Sidebar appName="MarketSimpli" sections={sections} defaultCollapsed />
+    )
+    expect(screen.queryByText('Main')).not.toBeInTheDocument()
+  })
+
+  it('shows abbreviated app name when collapsed', () => {
+    render(
+      <Sidebar appName="MarketSimpli" sections={sections} defaultCollapsed />
+    )
+    expect(screen.getByText('MA')).toBeInTheDocument()
+  })
+
+  it('renders user dropdown when provided', () => {
+    render(
+      <Sidebar
+        appName="App"
+        sections={sections}
+        userDropdown={<div data-testid="user-menu">User Menu</div>}
+      />
+    )
+    expect(screen.getByTestId('user-menu')).toBeInTheDocument()
+  })
+
+  it('applies custom className', () => {
+    const { container } = render(
+      <Sidebar appName="App" sections={sections} className="my-sidebar" />
+    )
+    expect(container.firstChild).toHaveClass('my-sidebar')
+  })
+
+  it('active link uses primary background (pathname matches)', () => {
+    // The mock usePathname returns '/test-path'
+    // We add a link with that href
+    const customSections = [
+      {
+        links: [
+          { href: '/test-path', label: 'Active Link' },
+          { href: '/other', label: 'Inactive Link' },
+        ],
+      },
+    ]
+    render(<Sidebar appName="App" sections={customSections} />)
+    const activeLink = screen.getByText('Active Link').closest('a')
+    expect(activeLink).toHaveClass('bg-primary-600')
+  })
+
+  it('inactive link uses gray text', () => {
+    const customSections = [
+      {
+        links: [
+          { href: '/test-path', label: 'Active Link' },
+          { href: '/other', label: 'Inactive Link' },
+        ],
+      },
+    ]
+    render(<Sidebar appName="App" sections={customSections} />)
+    const inactiveLink = screen.getByText('Inactive Link').closest('a')
+    expect(inactiveLink).toHaveClass('text-gray-300')
+  })
+
+  it('root href "/" is active only for exact match', () => {
+    // usePathname returns '/test-path', so '/' should not be active
+    const customSections = [
+      {
+        links: [{ href: '/', label: 'Home' }],
+      },
+    ]
+    render(<Sidebar appName="App" sections={customSections} />)
+    const homeLink = screen.getByText('Home').closest('a')
+    expect(homeLink).not.toHaveClass('bg-primary-600')
+  })
+})
+
+// ---------------------------------------------------------------------------
+// SidebarLayout
+// ---------------------------------------------------------------------------
+
+describe('SidebarLayout', () => {
+  it('renders children', () => {
+    render(
+      <SidebarLayout>
+        <p>Page content</p>
+      </SidebarLayout>
+    )
+    expect(screen.getByText('Page content')).toBeInTheDocument()
+  })
+
+  it('applies expanded width spacer by default', () => {
+    const { container } = render(
+      <SidebarLayout>
+        <p>Content</p>
+      </SidebarLayout>
+    )
+    const spacer = container.querySelector('.w-64')
+    expect(spacer).toBeInTheDocument()
+  })
+
+  it('applies collapsed width spacer when collapsed is true', () => {
+    const { container } = render(
+      <SidebarLayout collapsed>
+        <p>Content</p>
+      </SidebarLayout>
+    )
+    const spacer = container.querySelector('.w-20')
+    expect(spacer).toBeInTheDocument()
+  })
+})

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

@@ -0,0 +1,169 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import { StageTransitionModal } from '../StageTransitionModal'
+
+const stages = [
+  { id: 'prospect', label: 'Prospect' },
+  { id: 'qualified', label: 'Qualified' },
+  { id: 'proposal', label: 'Proposal' },
+  { id: 'closed', label: 'Closed Won' },
+]
+
+const baseProps = {
+  open: true,
+  onClose: jest.fn(),
+  onConfirm: jest.fn(),
+  currentStage: 'prospect',
+  stages,
+}
+
+describe('StageTransitionModal', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('renders nothing when open is false', () => {
+    render(<StageTransitionModal {...baseProps} open={false} />)
+    expect(screen.queryByText(/move/i)).not.toBeInTheDocument()
+  })
+
+  it('renders dialog when open is true', () => {
+    render(<StageTransitionModal {...baseProps} />)
+    expect(screen.getByText('Move Item to Stage')).toBeInTheDocument()
+  })
+
+  it('includes entityName in dialog title when provided', () => {
+    render(<StageTransitionModal {...baseProps} entityName="ACME Deal" />)
+    expect(screen.getByText('Move "ACME Deal" to Stage')).toBeInTheDocument()
+  })
+
+  it('shows the current stage label', () => {
+    render(<StageTransitionModal {...baseProps} />)
+    expect(screen.getByText('Prospect')).toBeInTheDocument()
+  })
+
+  it('excludes the current stage from the new stage dropdown', () => {
+    render(<StageTransitionModal {...baseProps} />)
+    const options = screen.getAllByRole('option')
+    const optionValues = options.map((o) => (o as HTMLOptionElement).value)
+    expect(optionValues).not.toContain('prospect')
+    expect(optionValues).toContain('qualified')
+    expect(optionValues).toContain('proposal')
+    expect(optionValues).toContain('closed')
+  })
+
+  it('defaults to the first non-current stage', () => {
+    render(<StageTransitionModal {...baseProps} />)
+    const select = screen.getByLabelText('New Stage') as HTMLSelectElement
+    expect(select.value).toBe('qualified')
+  })
+
+  it('calls onConfirm with selected stage when Confirm is clicked', () => {
+    const onConfirm = jest.fn()
+    render(<StageTransitionModal {...baseProps} onConfirm={onConfirm} />)
+    fireEvent.click(screen.getByRole('button', { name: /confirm/i }))
+    expect(onConfirm).toHaveBeenCalledWith('qualified', undefined)
+  })
+
+  it('passes notes to onConfirm when notes are entered', () => {
+    const onConfirm = jest.fn()
+    render(<StageTransitionModal {...baseProps} onConfirm={onConfirm} />)
+
+    fireEvent.change(screen.getByLabelText(/notes/i), {
+      target: { value: 'Moving due to demo completed' },
+    })
+    fireEvent.click(screen.getByRole('button', { name: /confirm/i }))
+
+    expect(onConfirm).toHaveBeenCalledWith('qualified', 'Moving due to demo completed')
+  })
+
+  it('passes undefined for whitespace-only notes', () => {
+    const onConfirm = jest.fn()
+    render(<StageTransitionModal {...baseProps} onConfirm={onConfirm} />)
+
+    fireEvent.change(screen.getByLabelText(/notes/i), { target: { value: '   ' } })
+    fireEvent.click(screen.getByRole('button', { name: /confirm/i }))
+
+    expect(onConfirm).toHaveBeenCalledWith('qualified', undefined)
+  })
+
+  it('calls onClose when Cancel is clicked', () => {
+    const onClose = jest.fn()
+    render(<StageTransitionModal {...baseProps} onClose={onClose} />)
+    fireEvent.click(screen.getByRole('button', { name: /cancel/i }))
+    expect(onClose).toHaveBeenCalledTimes(1)
+  })
+
+  it('calls onClose when backdrop is clicked', () => {
+    const onClose = jest.fn()
+    const { container } = render(
+      <StageTransitionModal {...baseProps} onClose={onClose} />
+    )
+    const backdrop = container.querySelector('[aria-hidden="true"]')
+    fireEvent.click(backdrop!)
+    expect(onClose).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not call onClose when backdrop clicked while submitting', () => {
+    const onClose = jest.fn()
+    const { container } = render(
+      <StageTransitionModal {...baseProps} onClose={onClose} isSubmitting />
+    )
+    const backdrop = container.querySelector('[aria-hidden="true"]')
+    fireEvent.click(backdrop!)
+    expect(onClose).not.toHaveBeenCalled()
+  })
+
+  it('shows Moving... when isSubmitting', () => {
+    render(<StageTransitionModal {...baseProps} isSubmitting />)
+    expect(screen.getByText('Moving...')).toBeInTheDocument()
+  })
+
+  it('disables select and textarea when isSubmitting', () => {
+    render(<StageTransitionModal {...baseProps} isSubmitting />)
+    expect(screen.getByLabelText('New Stage')).toBeDisabled()
+    expect(screen.getByLabelText(/notes/i)).toBeDisabled()
+  })
+
+  it('disables Cancel when isSubmitting', () => {
+    render(<StageTransitionModal {...baseProps} isSubmitting />)
+    expect(screen.getByRole('button', { name: /cancel/i })).toBeDisabled()
+  })
+
+  it('Confirm button is disabled while submitting', () => {
+    render(<StageTransitionModal {...baseProps} isSubmitting />)
+    expect(screen.getByText('Moving...').closest('button')).toBeDisabled()
+  })
+
+  it('resets notes when dialog reopens', () => {
+    const { rerender } = render(
+      <StageTransitionModal {...baseProps} open={false} />
+    )
+    rerender(<StageTransitionModal {...baseProps} open />)
+    expect(screen.getByLabelText(/notes/i)).toHaveValue('')
+  })
+
+  it('allows changing the target stage via the select', () => {
+    render(<StageTransitionModal {...baseProps} />)
+    const select = screen.getByLabelText('New Stage') as HTMLSelectElement
+    fireEvent.change(select, { target: { value: 'closed' } })
+    expect(select.value).toBe('closed')
+  })
+
+  it('calls onConfirm with the newly selected stage', () => {
+    const onConfirm = jest.fn()
+    render(<StageTransitionModal {...baseProps} onConfirm={onConfirm} />)
+    fireEvent.change(screen.getByLabelText('New Stage'), { target: { value: 'closed' } })
+    fireEvent.click(screen.getByRole('button', { name: /confirm/i }))
+    expect(onConfirm).toHaveBeenCalledWith('closed', undefined)
+  })
+
+  it('renders Current Stage label', () => {
+    render(<StageTransitionModal {...baseProps} />)
+    expect(screen.getByText('Current Stage')).toBeInTheDocument()
+  })
+
+  it('renders New Stage label', () => {
+    render(<StageTransitionModal {...baseProps} />)
+    expect(screen.getByText('New Stage')).toBeInTheDocument()
+  })
+})

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