File size: 2,344 Bytes
8a428e5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | import { describe, it, expect } from 'vitest'
import { mount, RouterLinkStub } from '@vue/test-utils'
import { setActivePinia, createPinia } from 'pinia'
import PostCard from './PostCard.vue'
import { useLayoutStore } from '../stores/layout'
const post = {
id: 1,
slug: 'hello-world',
title: 'Hello World',
excerpt: 'An excerpt',
createdAt: '2026-01-15T00:00:00.000Z',
readTime: 4,
views: 120,
authorName: 'Jane Doe',
category: { name: 'Tech', icon: '💻', color: '#3B82F6' },
featuredImage: null,
}
function mountCard(props, variant = 'a') {
localStorage.setItem('meridian_ab_variant', variant)
setActivePinia(createPinia())
return mount(PostCard, {
props,
global: { stubs: { RouterLink: RouterLinkStub } },
})
}
describe('PostCard', () => {
it('renders the layout-A vertical card by default', () => {
const wrapper = mountCard({ post })
expect(wrapper.text()).toContain('Hello World')
expect(wrapper.text()).toContain('Jane Doe')
expect(wrapper.text()).toContain('Tech')
expect(wrapper.text()).toContain('120')
})
it('links to the post detail page', () => {
const wrapper = mountCard({ post })
const link = wrapper.findComponent(RouterLinkStub)
expect(link.props('to')).toBe('/blog/hello-world')
})
it('renders a category placeholder icon when there is no featured image', () => {
const wrapper = mountCard({ post })
expect(wrapper.text()).toContain('💻')
})
it('renders the featured image when present', () => {
const wrapper = mountCard({ post: { ...post, featuredImage: '/uploads/a.jpg' } })
expect(wrapper.find('img').attributes('src')).toBe('/uploads/a.jpg')
})
it('uses a bigger heading size when featured is true', () => {
const wrapper = mountCard({ post, featured: true })
expect(wrapper.find('h3').classes()).toContain('text-xl')
})
it('renders the layout-B horizontal card when the B variant is active', () => {
const wrapper = mountCard({ post }, 'b')
const layout = useLayoutStore()
expect(layout.variant).toBe('b')
expect(wrapper.find('article').classes()).toContain('bg-[#162236]')
})
it('falls back to a default post icon when there is no category', () => {
const wrapper = mountCard({ post: { ...post, category: null } })
expect(wrapper.text()).toContain('📝')
})
})
|