import { mount } from '@vue/test-utils'
import { describe, expect, it } from 'vitest'

import ChartContainer from '../../components/ChartContainer.vue'

describe('ChartContainer', () => {
  it('renders workbench header, subhead, and footer slots in a filling frame', () => {
    const wrapper = mount(ChartContainer, {
      props: { variant: 'frame' },
      slots: {
        header: 'Header',
        subhead: 'Subhead',
        default: 'Chart',
        footer: 'Footer',
      },
    })

    expect(wrapper.classes()).toContain('mint-chart--frame')
    expect(wrapper.text()).toContain('Header')
    expect(wrapper.text()).toContain('Subhead')
    expect(wrapper.text()).toContain('Chart')
    expect(wrapper.get('.mint-chart__footer').text()).toBe('Footer')
  })
})

describe('ChartContainer header legend (9a)', () => {
  const legendItems = [
    { label: 'Control', color: 'var(--mint-sample-1)' },
    { label: 'Treatment A', color: 'var(--mint-sample-2)', hidden: true },
  ]

  it('should render legend items in the header when legendItems are given', () => {
    const wrapper = mount(ChartContainer, { props: { legendItems } })
    expect(wrapper.findAll('.mint-chart__header .mint-chart__legend-item')).toHaveLength(2)
  })

  it('should emit legend-toggle with the index when a legend item is clicked', async () => {
    const wrapper = mount(ChartContainer, { props: { legendItems } })
    await wrapper.findAll('.mint-chart__legend-item')[1].trigger('click')
    expect(wrapper.emitted('legend-toggle')?.[0]).toEqual([1])
  })

  it('should mark a hidden series as not pressed when its item is hidden', () => {
    const wrapper = mount(ChartContainer, { props: { legendItems } })
    expect(wrapper.findAll('.mint-chart__legend-item')[1].attributes('aria-pressed')).toBe('false')
  })
})