69 lines
2.6 KiB
TypeScript
69 lines
2.6 KiB
TypeScript
import { describe, it, expect } from 'vitest'
|
|
import { h } from 'vue'
|
|
import { mount } from '@vue/test-utils'
|
|
import { Primitive } from '../src/lib/primitive'
|
|
import SlotPassthrough from './fixtures/SlotPassthrough.vue'
|
|
|
|
describe('Primitive', () => {
|
|
it('renders the "as" tag with forwarded attrs when asChild is false', () => {
|
|
const wrapper = mount(Primitive, {
|
|
props: { as: 'a' },
|
|
attrs: { href: '/somewhere', class: 'link' },
|
|
slots: { default: () => 'Go' },
|
|
})
|
|
const el = wrapper.get('a')
|
|
expect(el.attributes('href')).toBe('/somewhere')
|
|
expect(el.classes()).toContain('link')
|
|
expect(el.text()).toBe('Go')
|
|
})
|
|
|
|
it('clones the single child and merges attrs onto it when asChild is true', async () => {
|
|
let clicked = false
|
|
const wrapper = mount(Primitive, {
|
|
props: { asChild: true },
|
|
attrs: { class: 'from-parent', 'data-slot': 'button', onClick: () => { clicked = true } },
|
|
slots: {
|
|
default: () => h('button', { class: 'from-child', type: 'button' }, 'Click'),
|
|
},
|
|
})
|
|
const el = wrapper.get('button')
|
|
expect(el.attributes('data-slot')).toBe('button')
|
|
expect(el.attributes('type')).toBe('button')
|
|
expect(el.classes()).toContain('from-parent')
|
|
expect(el.classes()).toContain('from-child')
|
|
await el.trigger('click')
|
|
expect(clicked).toBe(true)
|
|
})
|
|
|
|
it('throws if asChild is true with zero or multiple children', () => {
|
|
expect(() =>
|
|
mount(Primitive, {
|
|
props: { asChild: true },
|
|
slots: { default: () => [h('span', 'a'), h('span', 'b')] },
|
|
}),
|
|
).toThrow()
|
|
})
|
|
|
|
it('merges attrs through a real SFC that forwards `<slot />` as asChild content', async () => {
|
|
// Regression test: `<slot />` used as a passthrough outlet inside an SFC
|
|
// template resolves through Vue's renderSlot() helper, which wraps the
|
|
// forwarded content in a Fragment vnode even when there's exactly one
|
|
// real child. Slot must unwrap that Fragment before cloning, or the
|
|
// merged attrs silently vanish onto the inert wrapper instead of the
|
|
// real child element.
|
|
let clicked = false
|
|
const wrapper = mount(SlotPassthrough, {
|
|
props: { asChild: true },
|
|
attrs: { onClick: () => { clicked = true } },
|
|
slots: {
|
|
default: () => h('a', { href: '/somewhere' }, 'Click'),
|
|
},
|
|
})
|
|
const el = wrapper.get('a')
|
|
expect(el.attributes('data-slot')).toBe('passthrough-wrapper')
|
|
expect(el.attributes('type')).toBe('button')
|
|
expect(el.attributes('href')).toBe('/somewhere')
|
|
await el.trigger('click')
|
|
expect(clicked).toBe(true)
|
|
})
|
|
})
|