import { describe, expect, it } from 'vitest'
import { defineComponent, h } from 'vue'
import { mountWithVuexy } from '../utils/mountWithVuexy'

describe('mountWithVuexy harness', () => {
  it('mounts a trivial component with the full Vuexy stack', () => {
    const Trivial = defineComponent({
      setup() {
        return () => h('div', { 'data-test': 'ok' }, 'hello')
      },
    })

    const { wrapper, queryClient, pinia, router, notificationMock } = mountWithVuexy(Trivial)

    expect(wrapper.find('[data-test="ok"]').text()).toBe('hello')
    expect(queryClient).toBeDefined()
    expect(pinia).toBeDefined()
    expect(router).toBeDefined()
    expect(notificationMock.show).toBeTypeOf('function')
  })

  it('loads the timetable CSS token sheet so var(--tt-…) resolves on :root', () => {
    const Probe = defineComponent({
      setup() {
        return () => h('div', { id: 'probe' })
      },
    })

    mountWithVuexy(Probe)

    // The CSS file is imported at module load time inside mountWithVuexy.
    // Resolving against documentElement (=:root) avoids ambiguity around
    // jsdom's default style-cascade behaviour on arbitrary elements.
    const value = getComputedStyle(document.documentElement).getPropertyValue('--tt-status-confirmed-bg').trim()

    expect(value).toBe('#e8f8f0')
  })
})