@startsimpli/ui 0.4.7 → 0.4.8

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

@@ -0,0 +1,191 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import { IntegrationCard } from '../IntegrationCard'
+import { ConnectionStatus } from '../ConnectionStatus'
+
+// Simple icon stub usable as React.ElementType
+const TestIcon = () => <svg data-testid="test-icon" />
+
+// ---------------------------------------------------------------------------
+// IntegrationCard
+// ---------------------------------------------------------------------------
+
+describe('IntegrationCard', () => {
+  const baseProps = {
+    name: 'Salesforce',
+    description: 'Sync leads and deals from Salesforce CRM.',
+    icon: TestIcon,
+    status: 'available' as const,
+  }
+
+  it('renders name and description', () => {
+    render(<IntegrationCard {...baseProps} />)
+    expect(screen.getByText('Salesforce')).toBeInTheDocument()
+    expect(screen.getByText('Sync leads and deals from Salesforce CRM.')).toBeInTheDocument()
+  })
+
+  it('shows "Available" badge for available status', () => {
+    render(<IntegrationCard {...baseProps} />)
+    expect(screen.getByText('Available')).toBeInTheDocument()
+  })
+
+  it('shows "Connected" badge for connected status', () => {
+    render(<IntegrationCard {...baseProps} status="connected" />)
+    expect(screen.getByText('Connected')).toBeInTheDocument()
+  })
+
+  it('shows "Coming Soon" badge for coming-soon status', () => {
+    render(<IntegrationCard {...baseProps} status="coming-soon" />)
+    expect(screen.getByText('Coming Soon')).toBeInTheDocument()
+  })
+
+  it('renders icon', () => {
+    render(<IntegrationCard {...baseProps} />)
+    expect(screen.getByTestId('test-icon')).toBeInTheDocument()
+  })
+
+  it('shows Configure link for clickable statuses', () => {
+    render(<IntegrationCard {...baseProps} onClick={jest.fn()} />)
+    expect(screen.getByText('Configure')).toBeInTheDocument()
+  })
+
+  it('does not show Configure link for coming-soon status', () => {
+    render(<IntegrationCard {...baseProps} status="coming-soon" />)
+    expect(screen.queryByText('Configure')).not.toBeInTheDocument()
+  })
+
+  it('calls onClick when clicked for available status', () => {
+    const onClick = jest.fn()
+    render(<IntegrationCard {...baseProps} onClick={onClick} />)
+    fireEvent.click(screen.getByRole('button'))
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('calls onClick on Enter key press for clickable cards', () => {
+    const onClick = jest.fn()
+    render(<IntegrationCard {...baseProps} onClick={onClick} />)
+    fireEvent.keyDown(screen.getByRole('button'), { key: 'Enter' })
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('calls onClick on Space key press for clickable cards', () => {
+    const onClick = jest.fn()
+    render(<IntegrationCard {...baseProps} onClick={onClick} />)
+    fireEvent.keyDown(screen.getByRole('button'), { key: ' ' })
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not have role=button for coming-soon', () => {
+    render(<IntegrationCard {...baseProps} status="coming-soon" />)
+    expect(screen.queryByRole('button')).not.toBeInTheDocument()
+  })
+
+  it('shows lastSync when provided', () => {
+    render(<IntegrationCard {...baseProps} status="connected" lastSync="2 hours ago" />)
+    expect(screen.getByText('Last synced: 2 hours ago')).toBeInTheDocument()
+  })
+
+  it('does not show lastSync when not provided', () => {
+    render(<IntegrationCard {...baseProps} />)
+    expect(screen.queryByText(/last synced/i)).not.toBeInTheDocument()
+  })
+
+  it('applies custom className', () => {
+    const { container } = render(
+      <IntegrationCard {...baseProps} className="my-class" />
+    )
+    expect(container.firstChild).toHaveClass('my-class')
+  })
+
+  it('applies opacity for coming-soon status', () => {
+    const { container } = render(
+      <IntegrationCard {...baseProps} status="coming-soon" />
+    )
+    expect(container.firstChild).toHaveClass('opacity-75')
+  })
+})
+
+// ---------------------------------------------------------------------------
+// ConnectionStatus
+// ---------------------------------------------------------------------------
+
+describe('ConnectionStatus', () => {
+  const baseProps = {
+    providerName: 'Gmail',
+    providerIcon: TestIcon,
+    connected: false,
+  }
+
+  it('renders provider name', () => {
+    render(<ConnectionStatus {...baseProps} />)
+    expect(screen.getByText('Gmail')).toBeInTheDocument()
+  })
+
+  it('renders provider icon', () => {
+    render(<ConnectionStatus {...baseProps} />)
+    expect(screen.getByTestId('test-icon')).toBeInTheDocument()
+  })
+
+  it('shows "Not connected" when connected is false', () => {
+    render(<ConnectionStatus {...baseProps} />)
+    expect(screen.getByText('Not connected')).toBeInTheDocument()
+  })
+
+  it('shows Connect button when not connected', () => {
+    render(<ConnectionStatus {...baseProps} onConnect={jest.fn()} />)
+    expect(screen.getByRole('button', { name: /connect/i })).toBeInTheDocument()
+  })
+
+  it('shows Disconnect button when connected', () => {
+    render(<ConnectionStatus {...baseProps} connected onDisconnect={jest.fn()} />)
+    expect(screen.getByRole('button', { name: /disconnect/i })).toBeInTheDocument()
+  })
+
+  it('shows accountLabel when connected', () => {
+    render(
+      <ConnectionStatus
+        {...baseProps}
+        connected
+        accountLabel="jane@example.com"
+      />
+    )
+    expect(screen.getByText('jane@example.com')).toBeInTheDocument()
+  })
+
+  it('does not show accountLabel when not connected', () => {
+    render(
+      <ConnectionStatus
+        {...baseProps}
+        connected={false}
+        accountLabel="jane@example.com"
+      />
+    )
+    expect(screen.queryByText('jane@example.com')).not.toBeInTheDocument()
+  })
+
+  it('calls onConnect when Connect is clicked', () => {
+    const onConnect = jest.fn()
+    render(<ConnectionStatus {...baseProps} onConnect={onConnect} />)
+    fireEvent.click(screen.getByRole('button', { name: /connect/i }))
+    expect(onConnect).toHaveBeenCalledTimes(1)
+  })
+
+  it('calls onDisconnect when Disconnect is clicked', () => {
+    const onDisconnect = jest.fn()
+    render(<ConnectionStatus {...baseProps} connected onDisconnect={onDisconnect} />)
+    fireEvent.click(screen.getByRole('button', { name: /disconnect/i }))
+    expect(onDisconnect).toHaveBeenCalledTimes(1)
+  })
+
+  it('shows loading state when isLoading is true', () => {
+    render(<ConnectionStatus {...baseProps} isLoading />)
+    expect(screen.getByText('Loading...')).toBeInTheDocument()
+    expect(screen.getByText('Loading...').closest('button')).toBeDisabled()
+  })
+
+  it('applies custom className', () => {
+    const { container } = render(
+      <ConnectionStatus {...baseProps} className="my-class" />
+    )
+    expect(container.firstChild).toHaveClass('my-class')
+  })
+})

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

@@ -0,0 +1,157 @@
+import { render, screen } from '@testing-library/react'
+import { KanbanBoard } from '../KanbanBoard'
+
+interface Card {
+  id: string
+  title: string
+}
+
+const columns = [
+  { id: 'todo', label: 'To Do', color: '#6366f1' },
+  { id: 'in-progress', label: 'In Progress', color: '#f59e0b' },
+  { id: 'done', label: 'Done' },
+]
+
+const items: Record<string, Card[]> = {
+  todo: [{ id: '1', title: 'Task One' }, { id: '2', title: 'Task Two' }],
+  'in-progress': [{ id: '3', title: 'Task Three' }],
+  done: [],
+}
+
+describe('KanbanBoard', () => {
+  const renderCard = (item: Card) => (
+    <div key={item.id} data-testid={`card-${item.id}`}>
+      {item.title}
+    </div>
+  )
+
+  it('renders all column labels', () => {
+    render(
+      <KanbanBoard columns={columns} items={items} renderCard={renderCard} />
+    )
+    expect(screen.getByText('To Do')).toBeInTheDocument()
+    expect(screen.getByText('In Progress')).toBeInTheDocument()
+    expect(screen.getByText('Done')).toBeInTheDocument()
+  })
+
+  it('renders all card items', () => {
+    render(
+      <KanbanBoard columns={columns} items={items} renderCard={renderCard} />
+    )
+    expect(screen.getByText('Task One')).toBeInTheDocument()
+    expect(screen.getByText('Task Two')).toBeInTheDocument()
+    expect(screen.getByText('Task Three')).toBeInTheDocument()
+  })
+
+  it('shows item counts per column in the default header', () => {
+    render(
+      <KanbanBoard columns={columns} items={items} renderCard={renderCard} />
+    )
+    // todo has 2, in-progress has 1, done has 0
+    const counts = screen.getAllByText(/^[0-9]+$/)
+    const countValues = counts.map((el) => el.textContent)
+    expect(countValues).toContain('2')
+    expect(countValues).toContain('1')
+    expect(countValues).toContain('0')
+  })
+
+  it('shows empty column message when column has no items', () => {
+    render(
+      <KanbanBoard columns={columns} items={items} renderCard={renderCard} />
+    )
+    expect(screen.getByText('No items')).toBeInTheDocument()
+  })
+
+  it('shows custom empty column message', () => {
+    render(
+      <KanbanBoard
+        columns={columns}
+        items={items}
+        renderCard={renderCard}
+        emptyColumnMessage="Nothing here yet"
+      />
+    )
+    expect(screen.getByText('Nothing here yet')).toBeInTheDocument()
+  })
+
+  it('renders color dot for columns that have a color', () => {
+    const { container } = render(
+      <KanbanBoard columns={columns} items={items} renderCard={renderCard} />
+    )
+    // Two columns have colors (todo, in-progress), one does not (done)
+    const colorDots = container.querySelectorAll('[aria-hidden="true"]')
+    expect(colorDots.length).toBe(2)
+  })
+
+  it('uses custom column header when renderColumnHeader is provided', () => {
+    const renderColumnHeader = (col: typeof columns[0]) => (
+      <div data-testid={`custom-header-${col.id}`}>Custom: {col.label}</div>
+    )
+    render(
+      <KanbanBoard
+        columns={columns}
+        items={items}
+        renderCard={renderCard}
+        renderColumnHeader={renderColumnHeader}
+      />
+    )
+    expect(screen.getByTestId('custom-header-todo')).toBeInTheDocument()
+    expect(screen.getByText('Custom: To Do')).toBeInTheDocument()
+  })
+
+  it('renders column footer when renderColumnFooter is provided', () => {
+    const renderColumnFooter = (col: typeof columns[0]) => (
+      <div data-testid={`footer-${col.id}`}>Footer for {col.label}</div>
+    )
+    render(
+      <KanbanBoard
+        columns={columns}
+        items={items}
+        renderCard={renderCard}
+        renderColumnFooter={renderColumnFooter}
+      />
+    )
+    expect(screen.getByTestId('footer-todo')).toBeInTheDocument()
+    expect(screen.getByText('Footer for To Do')).toBeInTheDocument()
+  })
+
+  it('handles missing items for a column gracefully', () => {
+    // Only provide items for one column
+    const partialItems: Record<string, Card[]> = {
+      todo: [{ id: '1', title: 'Task One' }],
+    }
+    render(
+      <KanbanBoard columns={columns} items={partialItems} renderCard={renderCard} />
+    )
+    // The other two columns should show the empty message
+    const emptyMessages = screen.getAllByText('No items')
+    expect(emptyMessages.length).toBe(2)
+  })
+
+  it('applies custom className to container', () => {
+    const { container } = render(
+      <KanbanBoard
+        columns={columns}
+        items={items}
+        renderCard={renderCard}
+        className="my-board"
+      />
+    )
+    expect(container.firstChild).toHaveClass('my-board')
+  })
+
+  it('applies ring styles to column that isColumnOver returns true for', () => {
+    const isColumnOver = (id: string) => id === 'todo'
+    const { container } = render(
+      <KanbanBoard
+        columns={columns}
+        items={items}
+        renderCard={renderCard}
+        isColumnOver={isColumnOver}
+      />
+    )
+    // The first column div should have ring classes
+    const firstCol = container.querySelector('[style*="320"]')
+    expect(firstCol).toHaveClass('ring-2')
+  })
+})

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

@@ -0,0 +1,263 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import { ListCard } from '../ListCard'
+import { CreateListDialog } from '../CreateListDialog'
+
+// ---------------------------------------------------------------------------
+// ListCard
+// ---------------------------------------------------------------------------
+
+describe('ListCard', () => {
+  const baseProps = {
+    name: 'My Prospect List',
+    sourceType: 'static',
+    memberCount: 42,
+    createdAt: 'Jan 1, 2025',
+  }
+
+  it('renders the list name', () => {
+    render(<ListCard {...baseProps} />)
+    expect(screen.getByText('My Prospect List')).toBeInTheDocument()
+  })
+
+  it('renders member count with singular "member"', () => {
+    render(<ListCard {...baseProps} memberCount={1} />)
+    expect(screen.getByText('1 member')).toBeInTheDocument()
+  })
+
+  it('renders member count with plural "members"', () => {
+    render(<ListCard {...baseProps} memberCount={42} />)
+    expect(screen.getByText('42 members')).toBeInTheDocument()
+  })
+
+  it('renders zero members correctly', () => {
+    render(<ListCard {...baseProps} memberCount={0} />)
+    expect(screen.getByText('0 members')).toBeInTheDocument()
+  })
+
+  it('renders large member count with locale formatting', () => {
+    render(<ListCard {...baseProps} memberCount={1500} />)
+    expect(screen.getByText('1,500 members')).toBeInTheDocument()
+  })
+
+  it('renders the source type badge', () => {
+    render(<ListCard {...baseProps} />)
+    expect(screen.getByText('static')).toBeInTheDocument()
+  })
+
+  it('renders the createdAt text', () => {
+    render(<ListCard {...baseProps} />)
+    expect(screen.getByText('Created Jan 1, 2025')).toBeInTheDocument()
+  })
+
+  it('applies blue badge styles for static source type', () => {
+    render(<ListCard {...baseProps} sourceType="static" />)
+    const badge = screen.getByText('static')
+    expect(badge).toHaveClass('bg-blue-100', 'text-blue-700')
+  })
+
+  it('applies purple badge styles for funnel source type', () => {
+    render(<ListCard {...baseProps} sourceType="funnel" />)
+    const badge = screen.getByText('funnel')
+    expect(badge).toHaveClass('bg-purple-100', 'text-purple-700')
+  })
+
+  it('applies green badge styles for query source type', () => {
+    render(<ListCard {...baseProps} sourceType="query" />)
+    const badge = screen.getByText('query')
+    expect(badge).toHaveClass('bg-green-100', 'text-green-700')
+  })
+
+  it('applies gray badge for unknown source type', () => {
+    render(<ListCard {...baseProps} sourceType="unknown-type" />)
+    const badge = screen.getByText('unknown-type')
+    expect(badge).toHaveClass('bg-gray-100', 'text-gray-700')
+  })
+
+  it('has role=button when onClick is provided', () => {
+    render(<ListCard {...baseProps} onClick={jest.fn()} />)
+    expect(screen.getByRole('button')).toBeInTheDocument()
+  })
+
+  it('does not have role=button when onClick is not provided', () => {
+    render(<ListCard {...baseProps} />)
+    expect(screen.queryByRole('button')).not.toBeInTheDocument()
+  })
+
+  it('calls onClick when clicked', () => {
+    const onClick = jest.fn()
+    render(<ListCard {...baseProps} onClick={onClick} />)
+    fireEvent.click(screen.getByRole('button'))
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('calls onClick when Enter key is pressed', () => {
+    const onClick = jest.fn()
+    render(<ListCard {...baseProps} onClick={onClick} />)
+    fireEvent.keyDown(screen.getByRole('button'), { key: 'Enter' })
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('calls onClick when Space key is pressed', () => {
+    const onClick = jest.fn()
+    render(<ListCard {...baseProps} onClick={onClick} />)
+    fireEvent.keyDown(screen.getByRole('button'), { key: ' ' })
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('applies custom className', () => {
+    const { container } = render(<ListCard {...baseProps} className="custom-card" />)
+    expect(container.firstChild).toHaveClass('custom-card')
+  })
+})
+
+// ---------------------------------------------------------------------------
+// CreateListDialog
+// ---------------------------------------------------------------------------
+
+describe('CreateListDialog', () => {
+  const baseProps = {
+    open: true,
+    onClose: jest.fn(),
+    onSubmit: jest.fn(),
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('renders nothing when open is false', () => {
+    render(<CreateListDialog {...baseProps} open={false} />)
+    expect(screen.queryByText('Create List')).not.toBeInTheDocument()
+  })
+
+  it('renders dialog when open is true', () => {
+    render(<CreateListDialog {...baseProps} />)
+    expect(screen.getByText('Create List')).toBeInTheDocument()
+  })
+
+  it('renders name, description, and source type fields', () => {
+    render(<CreateListDialog {...baseProps} />)
+    expect(screen.getByLabelText(/name/i)).toBeInTheDocument()
+    expect(screen.getByLabelText(/description/i)).toBeInTheDocument()
+    expect(screen.getByLabelText(/source type/i)).toBeInTheDocument()
+  })
+
+  it('renders default source type options', () => {
+    render(<CreateListDialog {...baseProps} />)
+    expect(screen.getByRole('option', { name: 'Static' })).toBeInTheDocument()
+    expect(screen.getByRole('option', { name: 'Funnel' })).toBeInTheDocument()
+    expect(screen.getByRole('option', { name: 'Query' })).toBeInTheDocument()
+  })
+
+  it('renders custom source types when provided', () => {
+    render(
+      <CreateListDialog
+        {...baseProps}
+        sourceTypes={[{ value: 'csv', label: 'CSV Upload' }]}
+      />
+    )
+    expect(screen.getByRole('option', { name: 'CSV Upload' })).toBeInTheDocument()
+    expect(screen.queryByRole('option', { name: 'Static' })).not.toBeInTheDocument()
+  })
+
+  it('Create button is disabled when name is empty', () => {
+    render(<CreateListDialog {...baseProps} />)
+    expect(screen.getByRole('button', { name: /^create$/i })).toBeDisabled()
+  })
+
+  it('Create button is enabled after entering a name', () => {
+    render(<CreateListDialog {...baseProps} />)
+    fireEvent.change(screen.getByLabelText(/name/i), { target: { value: 'New List' } })
+    expect(screen.getByRole('button', { name: /^create$/i })).toBeEnabled()
+  })
+
+  it('calls onSubmit with correct data', () => {
+    const onSubmit = jest.fn()
+    render(<CreateListDialog {...baseProps} onSubmit={onSubmit} />)
+
+    fireEvent.change(screen.getByLabelText(/name/i), { target: { value: 'Sales Leads' } })
+    fireEvent.change(screen.getByLabelText(/description/i), { target: { value: 'Top prospects' } })
+
+    fireEvent.click(screen.getByRole('button', { name: /^create$/i }))
+
+    expect(onSubmit).toHaveBeenCalledWith({
+      name: 'Sales Leads',
+      description: 'Top prospects',
+      sourceType: 'static',
+    })
+  })
+
+  it('trims name and description on submit', () => {
+    const onSubmit = jest.fn()
+    render(<CreateListDialog {...baseProps} onSubmit={onSubmit} />)
+
+    fireEvent.change(screen.getByLabelText(/name/i), { target: { value: '  Trimmed  ' } })
+    fireEvent.click(screen.getByRole('button', { name: /^create$/i }))
+
+    expect(onSubmit).toHaveBeenCalledWith(
+      expect.objectContaining({ name: 'Trimmed' })
+    )
+  })
+
+  it('does not call onSubmit when name is only whitespace', () => {
+    const onSubmit = jest.fn()
+    render(<CreateListDialog {...baseProps} onSubmit={onSubmit} />)
+
+    fireEvent.change(screen.getByLabelText(/name/i), { target: { value: '   ' } })
+    fireEvent.submit(screen.getByLabelText(/name/i).closest('form')!)
+
+    expect(onSubmit).not.toHaveBeenCalled()
+  })
+
+  it('calls onClose when Cancel is clicked', () => {
+    const onClose = jest.fn()
+    render(<CreateListDialog {...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(<CreateListDialog {...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 during submit', () => {
+    const onClose = jest.fn()
+    const { container } = render(
+      <CreateListDialog {...baseProps} onClose={onClose} isSubmitting />
+    )
+    const backdrop = container.querySelector('[aria-hidden="true"]')
+    fireEvent.click(backdrop!)
+    expect(onClose).not.toHaveBeenCalled()
+  })
+
+  it('shows Creating... and disables fields when isSubmitting', () => {
+    render(<CreateListDialog {...baseProps} isSubmitting />)
+    expect(screen.getByText('Creating...')).toBeInTheDocument()
+    expect(screen.getByLabelText(/name/i)).toBeDisabled()
+    expect(screen.getByLabelText(/description/i)).toBeDisabled()
+  })
+
+  it('resets fields when dialog reopens', () => {
+    const { rerender } = render(<CreateListDialog {...baseProps} open={false} />)
+    rerender(<CreateListDialog {...baseProps} open />)
+    expect(screen.getByLabelText(/name/i)).toHaveValue('')
+    expect(screen.getByLabelText(/description/i)).toHaveValue('')
+  })
+
+  it('submits the selected source type', () => {
+    const onSubmit = jest.fn()
+    render(<CreateListDialog {...baseProps} onSubmit={onSubmit} />)
+
+    fireEvent.change(screen.getByLabelText(/name/i), { target: { value: 'My List' } })
+    fireEvent.change(screen.getByLabelText(/source type/i), { target: { value: 'funnel' } })
+    fireEvent.click(screen.getByRole('button', { name: /^create$/i }))
+
+    expect(onSubmit).toHaveBeenCalledWith(
+      expect.objectContaining({ sourceType: 'funnel' })
+    )
+  })
+})