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

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

describe('Container', () => {
  it('renders children', () => {
    render(<Container data-testid="container">Body</Container>)
    expect(screen.getByText('Body')).toBeTruthy()
  })

  it('applies logical padding with token vars and min-width overflow guard', () => {
    render(<Container data-testid="container" gap="8">Body</Container>)
    const container = screen.getByTestId('container')
    expect(container.style.getPropertyValue('--container-gap')).toBe('var(--mod-space-8)')
    expect(container.style.paddingInline).toBe('var(--container-gap)')
    expect(container.style.minWidth).toBe('0px')
  })

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