/
Icon.spec.js
125 lines (104 loc) · 3.77 KB
/
Icon.spec.js
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
import { shallowMount } from '@vue/test-utils'
import BIcon from '@components/icon/Icon'
describe('BIcon', () => {
it('render correctly', () => {
const wrapper = shallowMount(BIcon)
expect(wrapper.html()).toMatchSnapshot()
})
it('is vue instance', () => {
const wrapper = shallowMount(BIcon)
expect(wrapper.name()).toBe('BIcon')
expect(wrapper.isVueInstance()).toBeTruthy()
})
it('render icon when icon property is passed', () => {
const wrapper = shallowMount(BIcon, {
propsData: { icon: 'eye' }
})
expect(wrapper.classes()).toContain('icon')
expect(wrapper.find('i').classes()).toContain('mdi', 'mdi-eye', 'mdi-24px')
})
it('render a colored icon when type is passed', () => {
const wrapper = shallowMount(BIcon, {
propsData: {
icon: 'eye',
type: 'is-primary'
}
})
expect(wrapper.classes()).toContain('has-text-primary')
})
it('render icon package correctly when the pack property is is passed.', () => {
const wrapper = shallowMount(BIcon, {
propsData: {
icon: 'eye',
pack: 'fa'
}
})
expect(wrapper.find('i').classes()).toContain('fa-eye')
})
it('use both packages when the both property is is passed', () => {
const wrapper = shallowMount(BIcon, {
propsData: {
icon: 'eye',
both: true
}
})
expect(wrapper.find('i').classes()).toContain('mdi-eye')
wrapper.setProps({ pack: 'fa' })
const equivalentIcons = {
'check': 'check',
'information': 'info-circle',
'check-circle': 'check-circle',
'alert': 'exclamation-triangle',
'alert-circle': 'exclamation-circle',
'arrow-up': 'arrow-up',
'chevron-right': 'angle-right',
'chevron-left': 'angle-left',
'chevron-down': 'angle-down',
'eye': 'eye',
'eye-off': 'eye-slash',
'menu-down': 'caret-down',
'menu-up': 'caret-up',
'other': 'other'
}
const expectEquivalentIcon = (icon, expected) => {
wrapper.setProps({ icon })
expect(wrapper.find('i').classes()).toContain(`fa-${expected}`)
}
Object.keys(equivalentIcons).forEach((icon) => {
expectEquivalentIcon(icon, equivalentIcons[icon])
})
})
it('display size when size propery is passed', () => {
const wrapper = shallowMount(BIcon, {
propsData: {
icon: 'eye'
}
})
expect(wrapper.find('i').classes()).toContain('mdi-24px')
wrapper.setProps({ size: 'is-small' })
expect(wrapper.find('i').classes()).toContainEqual('mdi', 'mdi-eye')
wrapper.setProps({ size: 'is-medium' })
expect(wrapper.find('i').classes()).toContain('mdi-36px')
wrapper.setProps({ size: 'is-large' })
expect(wrapper.find('i').classes()).toContain('mdi-48px')
})
it('overrides icon font size when customSize property is passed', () => {
const wrapper = shallowMount(BIcon, {
propsData: {
icon: 'eye',
pack: 'fa',
customSize: 'fa-2x'
}
})
expect(wrapper.find('i').classes()).toContainEqual('fa', 'fa-2x')
})
it('render custom classes when customClass property is passed', () => {
const wrapper = shallowMount(BIcon, {
propsData: {
icon: 'eye',
customClass: 'foo-bar'
}
})
expect(wrapper.find('i').classes()).toContain('foo-bar')
})
})