import { describe, it, expect, vi } from 'vitest'
import { render } from '@testing-library/react'
import ChartContainer from '@/components/ChartContainer'

describe('ChartContainer', () => {
  it('should call onInit with container element on mount', () => {
    const onInit = vi.fn()
    render(<ChartContainer onInit={onInit} />)
    expect(onInit).toHaveBeenCalledTimes(1)
    expect(onInit).toHaveBeenCalledWith(expect.any(HTMLElement))
  })

  it('should call onDestroy on unmount', () => {
    const onDestroy = vi.fn()
    const onInit = vi.fn()
    const { unmount } = render(<ChartContainer onInit={onInit} onDestroy={onDestroy} />)
    expect(onDestroy).not.toHaveBeenCalled()
    unmount()
    expect(onDestroy).toHaveBeenCalledTimes(1)
  })

  it('should not crash when onDestroy is not provided', () => {
    const onInit = vi.fn()
    const { unmount } = render(<ChartContainer onInit={onInit} />)
    expect(() => unmount()).not.toThrow()
  })

  it('should apply custom style', () => {
    const onInit = vi.fn()
    const { container } = render(
      <ChartContainer onInit={onInit} style={{ backgroundColor: 'red' }} />
    )
    const div = container.firstChild as HTMLElement
    expect(div.style.backgroundColor).toBe('red')
  })

  it('should have default width and height 100%', () => {
    const onInit = vi.fn()
    const { container } = render(<ChartContainer onInit={onInit} />)
    const div = container.firstChild as HTMLElement
    expect(div.style.width).toBe('100%')
    expect(div.style.height).toBe('100%')
  })
})