40 lines
1.5 KiB
TypeScript
40 lines
1.5 KiB
TypeScript
import { describe, it, expect } from 'vitest'
|
|
import { h } from 'vue'
|
|
import { mount } from '@vue/test-utils'
|
|
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '../src/lib'
|
|
|
|
describe('Card', () => {
|
|
it('renders header, title, description, content, and footer together', () => {
|
|
const wrapper = mount(Card, {
|
|
slots: {
|
|
default: () => [
|
|
h(CardHeader, undefined, {
|
|
default: () => [
|
|
h(CardTitle, undefined, { default: () => 'Elysium' }),
|
|
h(CardDescription, undefined, { default: () => 'The blessed fields' }),
|
|
],
|
|
}),
|
|
h(CardContent, undefined, { default: () => 'A resting place for the virtuous.' }),
|
|
h(CardFooter, undefined, { default: () => 'Enter' }),
|
|
],
|
|
},
|
|
})
|
|
expect(wrapper.text()).toContain('Elysium')
|
|
expect(wrapper.text()).toContain('The blessed fields')
|
|
expect(wrapper.text()).toContain('A resting place for the virtuous.')
|
|
expect(wrapper.text()).toContain('Enter')
|
|
})
|
|
|
|
it('exposes a data-slot attribute for styling hooks', () => {
|
|
const wrapper = mount(Card)
|
|
expect(wrapper.attributes('data-slot')).toBe('card')
|
|
})
|
|
|
|
it('resolves size classes through cva instead of data-[size=] selectors', () => {
|
|
const wrapper = mount(Card, { props: { size: 'sm' } })
|
|
const classes = wrapper.classes()
|
|
expect(classes).toContain('gap-3')
|
|
expect(classes).toContain('py-3')
|
|
expect(classes.some((c) => c.includes('data-[size='))).toBe(false)
|
|
})
|
|
})
|