Skip to content

Commit 2e2542f

Browse files
tmorehousetmorehouse
authored
chore(unit testing): convert more tests to vue-test-utils (#2926)
1 parent 0910b22 commit 2e2542f

File tree

8 files changed

+456
-215
lines changed

8 files changed

+456
-215
lines changed

‎src/components/badge/badge.spec.js

Lines changed: 103 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,117 @@
1-
import { loadFixture, testVM } from '../../../tests/utils'
2-
3-
const variantList = [
4-
'secondary',
5-
'primary',
6-
'success',
7-
'info',
8-
'warning',
9-
'danger',
10-
'dark',
11-
'light'
12-
].map(variant => {
13-
return { ref: `badge_${variant}`, variant }
14-
})
1+
import Badge from './badge'
2+
import { mount } from '@vue/test-utils'
153

164
describe('badge', () => {
17-
beforeEach(loadFixture(__dirname, 'badge'))
18-
testVM()
5+
it('should have base classes', async () => {
6+
const wrapper = mount(Badge)
7+
expect(wrapper.is('span')).toBe(true)
8+
expect(wrapper.classes()).toContain('badge')
9+
expect(wrapper.classes()).toContain('badge-secondary')
10+
expect(wrapper.classes()).not.toContain('badge-pill')
11+
expect(wrapper.classes()).not.toContain('active')
12+
expect(wrapper.classes()).not.toContain('disabled')
13+
expect(wrapper.attributes('href')).not.toBeDefined()
14+
})
1915

20-
it('should apply variant classes', async () => {
21-
const {
22-
app: { $refs }
23-
} = window
16+
it('should have default slot content', async () => {
17+
const wrapper = mount(Badge, {
18+
slots: {
19+
default: 'foobar'
20+
}
21+
})
22+
expect(wrapper.is('span')).toBe(true)
23+
expect(wrapper.text()).toBe('foobar')
24+
expect(wrapper.classes()).toContain('badge')
25+
expect(wrapper.classes()).toContain('badge-secondary')
26+
expect(wrapper.classes()).not.toContain('badge-pill')
27+
expect(wrapper.classes()).not.toContain('active')
28+
expect(wrapper.classes()).not.toContain('disabled')
29+
expect(wrapper.attributes('href')).not.toBeDefined()
30+
})
2431

25-
expect($refs.badge_pill).toHaveAllClasses(['badge', 'badge-pill'])
32+
it('should apply variant class', async () => {
33+
const wrapper = mount(Badge, {
34+
propsData: {
35+
variant: 'danger'
36+
}
37+
})
38+
expect(wrapper.is('span')).toBe(true)
39+
expect(wrapper.classes()).toContain('badge-danger')
40+
expect(wrapper.classes()).toContain('badge')
41+
expect(wrapper.classes()).not.toContain('badge-pill')
42+
expect(wrapper.classes()).not.toContain('active')
43+
expect(wrapper.classes()).not.toContain('disabled')
44+
})
2645

27-
variantList.forEach(({ ref, variant }) => {
28-
const vm = $refs[ref][0]
29-
expect(vm).toHaveAllClasses(['badge', `badge-${variant}`])
46+
it('should apply pill class', async () => {
47+
const wrapper = mount(Badge, {
48+
propsData: {
49+
pill: true
50+
}
3051
})
52+
expect(wrapper.is('span')).toBe(true)
53+
expect(wrapper.classes()).toContain('badge-pill')
54+
expect(wrapper.classes()).toContain('badge')
55+
expect(wrapper.classes()).toContain('badge-secondary')
56+
expect(wrapper.classes()).not.toContain('active')
57+
expect(wrapper.classes()).not.toContain('disabled')
3158
})
3259

33-
it('should apply secondary class when not passed variant', async () => {
34-
const {
35-
app: { $refs }
36-
} = window
60+
it('should have active class when prop active set', async () => {
61+
const wrapper = mount(Badge, {
62+
propsData: {
63+
active: true
64+
}
65+
})
66+
expect(wrapper.is('span')).toBe(true)
67+
expect(wrapper.classes()).toContain('active')
68+
expect(wrapper.classes()).toContain('badge-secondary')
69+
expect(wrapper.classes()).toContain('badge')
70+
expect(wrapper.classes()).not.toContain('badge-pill')
71+
expect(wrapper.classes()).not.toContain('disabled')
72+
})
3773

38-
const vm = $refs.no_props
39-
expect(vm).toHaveClass('badge-secondary')
74+
it('should have disabled class when prop disabled set', async () => {
75+
const wrapper = mount(Badge, {
76+
propsData: {
77+
disabled: true
78+
}
79+
})
80+
expect(wrapper.is('span')).toBe(true)
81+
expect(wrapper.classes()).toContain('disabled')
82+
expect(wrapper.classes()).toContain('badge-secondary')
83+
expect(wrapper.classes()).toContain('badge')
84+
expect(wrapper.classes()).not.toContain('badge-pill')
85+
expect(wrapper.classes()).not.toContain('active')
4086
})
4187

42-
it('should not apply pill class when not passed pill boolean prop', async () => {
43-
const {
44-
app: { $refs }
45-
} = window
88+
it('renders custom root element', async () => {
89+
const wrapper = mount(Badge, {
90+
propsData: {
91+
tag: 'small'
92+
}
93+
})
94+
expect(wrapper.is('small')).toBe(true)
95+
expect(wrapper.classes()).toContain('badge')
96+
expect(wrapper.classes()).toContain('badge-secondary')
97+
expect(wrapper.classes()).not.toContain('badge-pill')
98+
expect(wrapper.classes()).not.toContain('active')
99+
expect(wrapper.classes()).not.toContain('disabled')
100+
})
46101

47-
const vm = $refs.no_props
48-
expect(vm).not.toHaveClass('badge-pill')
102+
it('renders link when href provided', async () => {
103+
const wrapper = mount(Badge, {
104+
propsData: {
105+
href: '/foo/bar'
106+
}
107+
})
108+
expect(wrapper.is('a')).toBe(true)
109+
expect(wrapper.attributes('href')).toBeDefined()
110+
expect(wrapper.attributes('href')).toBe('/foo/bar')
111+
expect(wrapper.classes()).toContain('badge')
112+
expect(wrapper.classes()).toContain('badge-secondary')
113+
expect(wrapper.classes()).not.toContain('badge-pill')
114+
expect(wrapper.classes()).not.toContain('active')
115+
expect(wrapper.classes()).not.toContain('disabled')
49116
})
50117
})

‎src/components/badge/fixtures/badge.html

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎src/components/badge/fixtures/badge.js

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎src/components/breadcrumb/breadcrumb-item.spec.js

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import BreadcrumbItem from './breadcrumb-item'
2+
import { mount } from '@vue/test-utils'
3+
4+
describe('breadcrumb-item', () => {
5+
it('has default classes and structure', async () => {
6+
const wrapper = mount(BreadcrumbItem)
7+
expect(wrapper.is('li')).toBe(true)
8+
expect(wrapper.classes()).toContain('breadcrumb-item')
9+
expect(wrapper.classes()).not.toContain('active')
10+
expect(wrapper.classes().length).toBe(1)
11+
expect(wrapper.attributes('role')).toBeDefined()
12+
expect(wrapper.attributes('role')).toBe('presentation')
13+
})
14+
15+
it('has class active when prop active is set', async () => {
16+
const wrapper = mount(BreadcrumbItem, {
17+
propsData: {
18+
active: true
19+
}
20+
})
21+
expect(wrapper.is('li')).toBe(true)
22+
expect(wrapper.classes()).toContain('active')
23+
expect(wrapper.classes()).toContain('breadcrumb-item')
24+
expect(wrapper.classes().length).toBe(2)
25+
expect(wrapper.attributes('role')).toBeDefined()
26+
expect(wrapper.attributes('role')).toBe('presentation')
27+
})
28+
29+
it('has link as child', async () => {
30+
const wrapper = mount(BreadcrumbItem)
31+
expect(wrapper.is('li')).toBe(true)
32+
expect(wrapper.find('a').exists()).toBe(true)
33+
expect(wrapper.find('a').attributes('href')).toBe('#')
34+
})
35+
36+
it('has link as child and href', async () => {
37+
const wrapper = mount(BreadcrumbItem, {
38+
propsData: {
39+
href: '/foo/bar'
40+
}
41+
})
42+
expect(wrapper.is('li')).toBe(true)
43+
expect(wrapper.find('a').exists()).toBe(true)
44+
expect(wrapper.find('a').attributes('href')).toBe('/foo/bar')
45+
})
46+
47+
it('has child span and class active when prop active is set', async () => {
48+
const wrapper = mount(BreadcrumbItem, {
49+
propsData: {
50+
active: true
51+
}
52+
})
53+
expect(wrapper.is('li')).toBe(true)
54+
expect(wrapper.classes()).toContain('active')
55+
expect(wrapper.classes()).toContain('breadcrumb-item')
56+
expect(wrapper.classes().length).toBe(2)
57+
expect(wrapper.find('span').exists()).toBe(true)
58+
})
59+
60+
it('has child text content from prop text', async () => {
61+
const wrapper = mount(BreadcrumbItem, {
62+
propsData: {
63+
active: true,
64+
text: 'foobar'
65+
}
66+
})
67+
expect(wrapper.is('li')).toBe(true)
68+
expect(wrapper.classes()).toContain('active')
69+
expect(wrapper.classes()).toContain('breadcrumb-item')
70+
expect(wrapper.classes().length).toBe(2)
71+
expect(wrapper.text()).toBe('foobar')
72+
})
73+
74+
it('has child text content from prop html', async () => {
75+
const wrapper = mount(BreadcrumbItem, {
76+
propsData: {
77+
active: true,
78+
html: 'foobar'
79+
}
80+
})
81+
expect(wrapper.is('li')).toBe(true)
82+
expect(wrapper.classes()).toContain('active')
83+
expect(wrapper.classes()).toContain('breadcrumb-item')
84+
expect(wrapper.classes().length).toBe(2)
85+
expect(wrapper.text()).toBe('foobar')
86+
})
87+
88+
it('has child text content from default slot', async () => {
89+
const wrapper = mount(BreadcrumbItem, {
90+
propsData: {
91+
active: true
92+
},
93+
slots: {
94+
default: 'foobar'
95+
}
96+
})
97+
expect(wrapper.is('li')).toBe(true)
98+
expect(wrapper.classes()).toContain('active')
99+
expect(wrapper.classes()).toContain('breadcrumb-item')
100+
expect(wrapper.classes().length).toBe(2)
101+
expect(wrapper.text()).toBe('foobar')
102+
})
103+
})

‎src/components/breadcrumb/breadcrumb-link.spec.js

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
import BreadcrumbLink from './breadcrumb-link'
2+
import { mount } from '@vue/test-utils'
3+
4+
describe('breadcrumb-link', () => {
5+
it('has default classes and structure', async () => {
6+
const wrapper = mount(BreadcrumbLink)
7+
expect(wrapper.is('a')).toBe(true)
8+
expect(wrapper.attributes('href')).toBeDefined()
9+
expect(wrapper.attributes('href')).toBe('#')
10+
expect(wrapper.classes().length).toBe(0)
11+
expect(wrapper.attributes('aria-current')).not.toBeDefined()
12+
expect(wrapper.text()).toBe('')
13+
})
14+
15+
it('has content from default slot', async () => {
16+
const wrapper = mount(BreadcrumbLink, {
17+
slots: {
18+
default: 'foobar'
19+
}
20+
})
21+
expect(wrapper.text()).toBe('foobar')
22+
})
23+
24+
it('has content from text prop', async () => {
25+
const wrapper = mount(BreadcrumbLink, {
26+
propsData: {
27+
text: 'foobar'
28+
}
29+
})
30+
expect(wrapper.text()).toBe('foobar')
31+
})
32+
33+
it('has content from html prop', async () => {
34+
const wrapper = mount(BreadcrumbLink, {
35+
propsData: {
36+
html: 'foobar'
37+
}
38+
})
39+
expect(wrapper.text()).toBe('foobar')
40+
})
41+
42+
it('has attribute aria-current when active', async () => {
43+
const wrapper = mount(BreadcrumbLink, {
44+
propsData: {
45+
active: true
46+
}
47+
})
48+
expect(wrapper.is('span')).toBe(true)
49+
expect(wrapper.attributes('href')).not.toBeDefined()
50+
expect(wrapper.attributes('aria-current')).toBe('location')
51+
expect(wrapper.classes().length).toBe(0)
52+
})
53+
54+
it('has attribute aria-current with custom value when active', async () => {
55+
const wrapper = mount(BreadcrumbLink, {
56+
propsData: {
57+
active: true,
58+
ariaCurrent: 'foobar'
59+
}
60+
})
61+
expect(wrapper.is('span')).toBe(true)
62+
expect(wrapper.attributes('aria-current')).toBe('foobar')
63+
expect(wrapper.attributes('href')).not.toBeDefined()
64+
expect(wrapper.classes().length).toBe(0)
65+
})
66+
67+
it('renders link when href is set', async () => {
68+
const wrapper = mount(BreadcrumbLink, {
69+
propsData: {
70+
href: '/foo/bar'
71+
}
72+
})
73+
expect(wrapper.is('a')).toBe(true)
74+
expect(wrapper.attributes('href')).toBeDefined()
75+
expect(wrapper.attributes('href')).toBe('/foo/bar')
76+
expect(wrapper.attributes('aria-current')).not.toBeDefined()
77+
expect(wrapper.classes().length).toBe(0)
78+
})
79+
80+
it('does not render a link when href is set and active', async () => {
81+
const wrapper = mount(BreadcrumbLink, {
82+
propsData: {
83+
active: true,
84+
href: '/foo/bar'
85+
}
86+
})
87+
expect(wrapper.is('span')).toBe(true)
88+
expect(wrapper.attributes('href')).not.toBeDefined()
89+
expect(wrapper.attributes('aria-current')).toBeDefined()
90+
expect(wrapper.attributes('aria-current')).toBe('location')
91+
expect(wrapper.classes().length).toBe(0)
92+
})
93+
})

0 commit comments

Comments
 (0)