30 lines
1.4 KiB
TypeScript
30 lines
1.4 KiB
TypeScript
import { mount } from '@vue/test-utils'
|
|
import { describe, expect, it } from 'vitest'
|
|
import { defineComponent } from 'vue'
|
|
import StatCard from '@/components-v2/shared/StatCard.vue'
|
|
|
|
const CardStub = defineComponent({ name: 'CardStub', template: '<div class="card-stub"><slot name="content" /></div>' })
|
|
const IconStub = defineComponent({ name: 'Icon', props: ['name', 'size'], template: '<i class="icon-stub" :data-icon="name" />' })
|
|
|
|
const mountCard = (props: { icon: string; label: string; value: string | number; trend?: string; trendDir?: 'up' | 'down' }) =>
|
|
mount(StatCard, { props, global: { stubs: { Card: CardStub, Icon: IconStub } } })
|
|
|
|
describe('StatCard', () => {
|
|
it('renders label, value and the leading icon', () => {
|
|
const w = mountCard({ icon: 'tabler-users', label: 'Vrijwilligers', value: 128 })
|
|
|
|
expect(w.text()).toContain('Vrijwilligers')
|
|
expect(w.text()).toContain('128')
|
|
expect(w.get('.icon-stub').attributes('data-icon')).toBe('tabler-users')
|
|
})
|
|
|
|
it('shows the trend row with direction class only when trend is set', () => {
|
|
expect(mountCard({ icon: 'tabler-users', label: 'X', value: 1 }).find('[data-trend]').exists()).toBe(false)
|
|
|
|
const up = mountCard({ icon: 'tabler-users', label: 'X', value: 1, trend: '+12%', trendDir: 'up' })
|
|
|
|
expect(up.get('[data-trend]').attributes('data-trend')).toBe('up')
|
|
expect(up.text()).toContain('+12%')
|
|
})
|
|
})
|