import { describe, it, expect } from 'vitest'
import { compareVisibleText, assertSlotTokensPresent, compareComputedStyle } from './parity-compare'

describe('compareVisibleText', () => {
  it('splits pipe-joined text into token sets and diffs', () => {
    const r = compareVisibleText('Logo | Menu | Title', 'Title')
    expect(r.vueOnly.sort()).toEqual(['Logo', 'Menu'])
    expect(r.reactOnly).toEqual([])
    expect(r.shared).toEqual(['Title'])
  })
})

describe('assertSlotTokensPresent', () => {
  it('reports missing slot tokens', () => {
    expect(assertSlotTokensPresent('Title', ['Logo', 'Menu', 'Title']).missing.sort()).toEqual(['Logo', 'Menu'])
    expect(assertSlotTokensPresent('Logo | Menu | Title', ['Logo', 'Menu']).missing).toEqual([])
  })
})

describe('compareComputedStyle', () => {
  it('flags color diff by normalized hex, ignores sub-px numeric noise', () => {
    const vue = { width: 100.2, backgroundColor: 'rgb(255, 0, 0)', color: '#141414' }
    const react = { width: 100.0, backgroundColor: '#ff0000', color: 'rgb(20, 20, 20)' }
    const diffs = compareComputedStyle(vue, react)
    expect(diffs).toEqual([]) // width within closeEnough, colors equal after hex-normalize
  })
  it('flags a real background mismatch', () => {
    const diffs = compareComputedStyle({ backgroundColor: '#ffffff' }, { backgroundColor: '#000000' })
    expect(diffs.map(d => d.field)).toContain('backgroundColor')
  })
})