card.test.js
1.21 KB
import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import { Card } from '../src/index.js'
describe('Card', () => {
it('renders default slot and is padded by default', () => {
const w = mount(Card, { slots: { default: 'Drama synopsis' } })
expect(w.text()).toContain('Drama synopsis')
expect(w.classes()).toContain('is-padded')
expect(w.classes()).not.toContain('is-interactive')
})
it('renders header and footer slots when provided', () => {
const w = mount(Card, {
slots: { default: 'body', header: 'Cast', footer: 'Up next' },
})
expect(w.find('.drama-card__header').text()).toBe('Cast')
expect(w.find('.drama-card__footer').text()).toBe('Up next')
})
it('omits header/footer when no slot', () => {
const w = mount(Card, { slots: { default: 'body' } })
expect(w.find('.drama-card__header').exists()).toBe(false)
expect(w.find('.drama-card__footer').exists()).toBe(false)
})
it('applies interactive class and drops padding when configured', () => {
const w = mount(Card, { props: { interactive: true, padded: false } })
expect(w.classes()).toContain('is-interactive')
expect(w.classes()).not.toContain('is-padded')
})
})