design-system/src/design-system/composites/SplitPane/SplitPane.test.tsx

import { describe, it, expect } from 'vitest'
import { render, screen } from '@testing-library/react'
import { SplitPane } from './SplitPane'

describe('SplitPane', () => {
  it('renders list and detail content', () => {
    render(
      <SplitPane
        list={<div>List items</div>}
        detail={<div>Detail content</div>}
      />
    )
    expect(screen.getByText('List items')).toBeInTheDocument()
    expect(screen.getByText('Detail content')).toBeInTheDocument()
  })

  it('shows default empty message when detail is null', () => {
    render(
      <SplitPane
        list={<div>List items</div>}
        detail={null}
      />
    )
    expect(screen.getByText('Select an item to view details')).toBeInTheDocument()
  })

  it('shows custom empty message', () => {
    render(
      <SplitPane
        list={<div>List items</div>}
        detail={null}
        emptyMessage="Pick something"
      />
    )
    expect(screen.getByText('Pick something')).toBeInTheDocument()
  })

  it('renders with different ratios (checks --split-columns CSS property)', () => {
    const { container, rerender } = render(
      <SplitPane
        list={<div>List</div>}
        detail={<div>Detail</div>}
        ratio="1:1"
      />
    )
    const root = container.firstChild as HTMLElement
    expect(root.style.getPropertyValue('--split-columns')).toBe('1fr 1fr')

    rerender(
      <SplitPane
        list={<div>List</div>}
        detail={<div>Detail</div>}
        ratio="2:3"
      />
    )
    expect(root.style.getPropertyValue('--split-columns')).toBe('2fr 3fr')
  })

  it('accepts className', () => {
    const { container } = render(
      <SplitPane
        list={<div>List</div>}
        detail={<div>Detail</div>}
        className="custom-class"
      />
    )
    expect(container.firstChild).toHaveClass('custom-class')
  })
})