// NOTE: PillStatus reconciled to the published Figma `Pill Status` set in
// CANONICAL-028 (new enum / active axis / token-driven hues). Its coverage now
// lives in tests/PillStatus.test.ts. This file keeps PillCounter coverage,
// which is unaffected by that change.
import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import PillCounter from '../src/canonical/PillCounter.vue'

describe('PillCounter', () => {
  it('renders neutral by default', () => {
    const wrapper = mount(PillCounter, { slots: { default: '42' } })
    expect(wrapper.text()).toBe('42')
    expect(wrapper.attributes('data-figma-component')).toBe('Pill/Counter')
    expect(wrapper.attributes('data-figma-kind')).toBe('neutral')
  })
  it('success → brand bg', () => {
    const wrapper = mount(PillCounter, { props: { kind: 'success' }, slots: { default: '3' } })
    expect(wrapper.html()).toContain('--pill-bg: var(--msg-bg-brand)')
  })
  it('warning → red bg', () => {
    const wrapper = mount(PillCounter, { props: { kind: 'warning' }, slots: { default: '!' } })
    expect(wrapper.html()).toContain('--pill-bg: var(--msg-bg-red)')
  })
  it('info → blue bg', () => {
    const wrapper = mount(PillCounter, { props: { kind: 'info' }, slots: { default: 'i' } })
    expect(wrapper.html()).toContain('--pill-bg: var(--msg-bg-blue)')
  })
})