/**
 * Space 间距组件：容器方向 / 间距 gap / 对齐 / 换行 / 分隔符 / 空子节点。
 * 只断言渲染出的 class、内联 gap 与包裹结构，不涉及真实布局尺寸。
 */
import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import Space from '@/components/ui/space/space.vue'

/** 便捷挂载：默认塞两个子元素 */
function mountSpace(props = {}, slots = {}) {
  return mount(Space, {
    props,
    slots: { default: '<span>A</span><span>B</span>', ...slots },
  })
}

describe('Space 组件', () => {
  it('默认水平：容器带方向类，每个子元素包一层 .space-item', () => {
    const wrapper = mountSpace()
    expect(wrapper.classes()).toContain('space')
    expect(wrapper.classes()).toContain('space-horizontal')
    expect(wrapper.findAll('.space-item')).toHaveLength(2)
    expect(wrapper.attributes('data-slot')).toBe('space')
  })

  it('水平默认对齐 center；显式 align 覆盖', () => {
    expect(mountSpace().classes()).toContain('space-align-center')
    expect(mountSpace({ align: 'start' }).classes()).toContain('space-align-start')
    expect(mountSpace({ align: 'baseline' }).classes()).toContain('space-align-baseline')
  })

  it('size 预设映射为对应 px 的 gap', () => {
    const style = mountSpace({ size: 'middle' }).attributes('style')
    expect(style).toContain('column-gap: 16px')
    expect(style).toContain('row-gap: 16px')
  })

  it('size 数字按 px 处理', () => {
    const style = mountSpace({ size: 20 }).attributes('style')
    expect(style).toContain('column-gap: 20px')
    expect(style).toContain('row-gap: 20px')
  })

  it('size 数组 [水平, 垂直] 分别设 column-gap / row-gap', () => {
    const style = mountSpace({ size: [12, 24] }).attributes('style')
    expect(style).toContain('column-gap: 12px')
    expect(style).toContain('row-gap: 24px')
  })

  it('vertical 简写切换为纵向且不设默认对齐', () => {
    const wrapper = mountSpace({ vertical: true })
    expect(wrapper.classes()).toContain('space-vertical')
    expect(wrapper.classes()).not.toContain('space-align-center')
  })

  it('orientation 优先于 vertical', () => {
    const wrapper = mountSpace({ orientation: 'horizontal', vertical: true })
    expect(wrapper.classes()).toContain('space-horizontal')
    expect(wrapper.classes()).not.toContain('space-vertical')
  })

  it('wrap 仅水平方向生效', () => {
    expect(mountSpace({ wrap: true }).classes()).toContain('space-wrap')
    expect(mountSpace({ wrap: true, vertical: true }).classes()).not.toContain('space-wrap')
  })

  it('separator 插槽：分隔符数量 = 子元素数 - 1，末尾不加', () => {
    const wrapper = mountSpace(
      {},
      { default: '<span>A</span><span>B</span><span>C</span>', separator: '|' },
    )
    expect(wrapper.findAll('.space-item')).toHaveLength(3)
    expect(wrapper.findAll('.space-separator')).toHaveLength(2)
    expect(wrapper.text()).toContain('|')
  })

  it('无 separator 插槽时不渲染分隔符', () => {
    expect(mountSpace().findAll('.space-separator')).toHaveLength(0)
  })

  it('无有效子元素时不渲染容器', () => {
    const wrapper = mount(Space, { slots: { default: '' } })
    expect(wrapper.find('.space').exists()).toBe(false)
  })

  it('过滤子元素之间的空白文本节点', () => {
    const wrapper = mount(Space, {
      slots: { default: '<span>A</span>\n   <span>B</span>\n' },
    })
    expect(wrapper.findAll('.space-item')).toHaveLength(2)
  })
})