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

import { BrandLockup, CounterMeasureBrandLockup } from './index'

describe('React brand lockup', () => {
  it('renders the shared CounterMeasure lockup with split brand text', () => {
    const { container } = render(<BrandLockup />)
    const lockup = container.querySelector('.cmm-brand-lockup')

    expect(lockup).toBeTruthy()
    expect(lockup?.getAttribute('role')).toBe('img')
    expect(lockup?.getAttribute('aria-label')).toBe('CounterMeasure')
    expect(lockup?.querySelector('.cmm-diamond')).toBeTruthy()
    expect(lockup?.textContent).toBe('COUNTERMEASURE')
    expect(lockup?.querySelector('.cmm-brand-lockup__counter')?.textContent).toBe('COUNTER')
    expect(lockup?.querySelector('.cmm-brand-lockup__measure')?.textContent).toBe('MEASURE')
  })

  it('can render mark-only for collapsed sidebars', () => {
    const { container } = render(<CounterMeasureBrandLockup showWordmark={false} decorative />)
    const lockup = container.querySelector('.cmm-brand-lockup')

    expect(lockup?.getAttribute('aria-hidden')).toBe('true')
    expect(lockup?.querySelector('.cmm-diamond')).toBeTruthy()
    expect(lockup?.querySelector('.cmm-brand-lockup__wordmark')).toBeNull()
  })
})
