skeleton.spec.js
3.03 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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
import { mount } from '@vue/test-utils'
import { BSkeleton } from './skeleton'
describe('skeleton', () => {
it('default has root element of div, and default classes', async () => {
const wrapper = mount(BSkeleton)
expect(wrapper).toBeDefined()
expect(wrapper.element.tagName).toBe('DIV')
expect(wrapper.classes().length).toBe(3)
expect(wrapper.classes()).toContain('b-skeleton')
expect(wrapper.classes()).toContain('b-skeleton-text')
expect(wrapper.classes()).toContain('b-skeleton-animate-wave')
wrapper.destroy()
})
it('has class `b-skeleton-button` when `type="button"` is set', async () => {
const wrapper = mount(BSkeleton, {
propsData: {
type: 'button'
}
})
expect(wrapper).toBeDefined()
expect(wrapper.classes()).toContain('b-skeleton-button')
wrapper.destroy()
})
it('has class `b-skeleton-animate-fade` when `animation="fade"` is set', async () => {
const wrapper = mount(BSkeleton, {
propsData: {
animation: 'fade'
}
})
expect(wrapper).toBeDefined()
expect(wrapper.classes()).toContain('b-skeleton-animate-fade')
wrapper.destroy()
})
it('has no animate class when `animation` prop has falsy value', async () => {
const wrapper = mount(BSkeleton, {
propsData: {
animation: null
}
})
expect(wrapper).toBeDefined()
expect(wrapper.classes()).not.toContain('b-skeleton-animate-wave')
wrapper.destroy()
})
it('has `width` style set when `width` prop is used', async () => {
const wrapper = mount(BSkeleton, {
propsData: {
width: '50px'
}
})
expect(wrapper).toBeDefined()
expect(wrapper.element.style.width).toBe('50px')
wrapper.destroy()
})
it('has `height` style set when `height` prop is used', async () => {
const wrapper = mount(BSkeleton, {
propsData: {
height: '50px'
}
})
expect(wrapper).toBeDefined()
expect(wrapper.element.style.height).toBe('50px')
wrapper.destroy()
})
it('has `width` and `height` styles set when `size` prop is used', async () => {
const wrapper = mount(BSkeleton, {
propsData: {
size: '50px'
}
})
expect(wrapper).toBeDefined()
expect(wrapper.element.style.height).toBe('50px')
expect(wrapper.element.style.width).toBe('50px')
wrapper.destroy()
})
it('`size` prop overrules the `width` and `height` props', async () => {
const wrapper = mount(BSkeleton, {
propsData: {
height: '25px',
width: '40px',
size: '50px'
}
})
expect(wrapper).toBeDefined()
expect(wrapper.element.style.height).toBe('50px')
expect(wrapper.element.style.width).toBe('50px')
wrapper.destroy()
})
it('has `bg-[variant]` class applied when `variant` prop is used', async () => {
const wrapper = mount(BSkeleton, {
propsData: {
variant: 'primary'
}
})
expect(wrapper).toBeDefined()
expect(wrapper.classes()).toContain('bg-primary')
wrapper.destroy()
})
})