CheckinCard.test.js
2.58 KB
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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
import { mount } from '@vue/test-utils'
import { describe, it, expect } from 'vitest'
import CheckinCard from '../CheckinCard.vue'
describe('CheckinCard.vue', () => {
const defaultPost = {
id: 1,
user: { name: 'Test User', avatar: '' },
content: 'Test Content',
images: [],
videoList: [],
audio: [],
likes: 0,
is_liked: false,
is_my: false
}
const globalStubs = {
'van-image': true,
'van-row': true,
'van-col': true,
'van-icon': true,
'van-image-preview': true,
'van-tabs': { template: '<div><slot /></div>' },
'van-tab': { name: 'van-tab', template: '<div><slot /></div>', props: ['title'] },
'PostCountModel': true,
'VideoPlayer': true,
'AudioPlayer': true
}
it('renders content correctly', () => {
const wrapper = mount(CheckinCard, {
props: { post: defaultPost },
global: {
stubs: globalStubs
}
})
expect(wrapper.text()).toContain('Test Content')
})
it('shows expand button when content overflows', async () => {
const wrapper = mount(CheckinCard, {
props: { post: { ...defaultPost, content: 'Long content...' } },
global: {
stubs: globalStubs
}
})
const textEl = wrapper.find('.post-text').element
Object.defineProperty(textEl, 'scrollHeight', { value: 200, configurable: true })
Object.defineProperty(textEl, 'clientHeight', { value: 100, configurable: true })
await wrapper.setProps({ post: { ...defaultPost, content: 'Updated Long Content' } })
await wrapper.vm.$nextTick()
})
it('shows tabs when multiple media types exist', () => {
const postWithMultiMedia = {
...defaultPost,
images: ['img1.jpg'],
videoList: [{ id: 1, video: 'vid1.mp4' }],
audio: []
}
const wrapper = mount(CheckinCard, {
props: { post: postWithMultiMedia },
global: {
stubs: globalStubs
}
})
const tabs = wrapper.findAllComponents({ name: 'van-tab' })
expect(tabs.length).toBe(2)
expect(tabs[0].props('title')).toBe('图片')
expect(tabs[1].props('title')).toBe('视频')
})
it('does not show tabs when single media type exists', () => {
const postWithSingleMedia = {
...defaultPost,
images: ['img1.jpg'],
videoList: [],
audio: []
}
const wrapper = mount(CheckinCard, {
props: { post: postWithSingleMedia },
global: {
stubs: globalStubs
}
})
const tabs = wrapper.findAllComponents({ name: 'van-tab' })
expect(tabs.length).toBe(0)
expect(wrapper.find('.post-images').exists()).toBe(true)
})
})