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

HTMLCanvasElement.prototype.getContext = (() => ({ measureText: () => ({ width: 0 }) })) as unknown as typeof HTMLCanvasElement.prototype.getContext

describe('Cluster', () => {
  it('renders children', () => {
    render(
      <Cluster data-testid="cluster">
        <span>One</span>
        <span>Two</span>
      </Cluster>,
    )
    expect(screen.getByText('One')).toBeTruthy()
    expect(screen.getByText('Two')).toBeTruthy()
  })

  it('applies the gap token var and min-width overflow guard', () => {
    render(<Cluster data-testid="cluster" gap="3">Body</Cluster>)
    const cluster = screen.getByTestId('cluster')
    expect(cluster.style.getPropertyValue('--cluster-gap')).toBe('var(--mod-space-3)')
    expect(cluster.style.gap).toBe('var(--cluster-gap)')
    expect(cluster.style.minWidth).toBe('0px')
  })

  it('stays axe-clean', async () => {
    const { container } = render(<Cluster><span>Item</span></Cluster>)
    await expect(axe(container)).resolves.toHaveNoViolations()
  })
})