Skip to content

Commit afde4c8

Browse files
tmorehousetmorehouse
authored
chore(unit testing): img, nav and form test conversion (#2971)
1 parent 0417f7b commit afde4c8

16 files changed

+499
-368
lines changed

‎src/components/form/fixtures/form-row.html

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

‎src/components/form/fixtures/form-row.js

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

‎src/components/form/fixtures/form-text.html

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

‎src/components/form/fixtures/form-text.js

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

‎src/components/form/fixtures/form.html

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

‎src/components/form/fixtures/form.js

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

‎src/components/form/form-row.spec.js

Lines changed: 8 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,12 @@
1-
import { loadFixture, testVM } from '../../../tests/utils'
1+
import FormRow from './form-row'
2+
import { mount } from '@vue/test-utils'
23

3-
describe('form-row', () => {
4-
beforeEach(loadFixture(__dirname, 'form-row'))
5-
testVM()
4+
// This component is also fully tested under the layout tests
65

7-
it('default should contain base class', async () => {
8-
const {
9-
app: { $refs }
10-
} = window
11-
expect($refs.default).toHaveClass('form-row')
12-
})
13-
14-
it('custom should contain base class', async () => {
15-
const {
16-
app: { $refs }
17-
} = window
18-
expect($refs.custom).toHaveClass('form-row')
19-
})
20-
21-
it('default should have content', async () => {
22-
const {
23-
app: { $refs }
24-
} = window
25-
expect($refs.default.textContent).toContain('default')
26-
})
27-
28-
it('custom should have content', async () => {
29-
const {
30-
app: { $refs }
31-
} = window
32-
expect($refs.custom.textContent).toContain('custom')
33-
})
34-
35-
it('default should have tag div', async () => {
36-
const {
37-
app: { $refs }
38-
} = window
39-
expect($refs.default).toBeElement('div')
40-
})
41-
42-
it('custom should have tag p', async () => {
43-
const {
44-
app: { $refs }
45-
} = window
46-
expect($refs.custom).toBeElement('p')
6+
describe('form > form-row', () => {
7+
it('works', () => {
8+
const wrapper = mount(FormRow)
9+
expect(wrapper.is('div')).toBe(true)
10+
expect(wrapper.classes()).toContain('form-row')
4711
})
4812
})

‎src/components/form/form-text.spec.js

Lines changed: 62 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,81 @@
1-
import { loadFixture, testVM } from '../../../tests/utils'
1+
import FormText from './form-text'
2+
import { mount } from '@vue/test-utils'
23

3-
describe('form-text', () => {
4-
beforeEach(loadFixture(__dirname, 'form-text'))
5-
testVM()
4+
describe('form > form-text', () => {
5+
it('has expected default structure', async () => {
6+
const wrapper = mount(FormText)
67

7-
it('default should be tag small', async () => {
8-
const {
9-
app: { $refs }
10-
} = window
11-
expect($refs.default).toBeElement('small')
8+
expect(wrapper.is('small')).toBe(true)
9+
expect(wrapper.classes()).toContain('form-text')
10+
expect(wrapper.classes()).toContain('text-muted')
11+
expect(wrapper.classes().length).toBe(2)
12+
expect(wrapper.text()).toEqual('')
1213
})
1314

14-
it('default should have id', async () => {
15-
const {
16-
app: { $refs }
17-
} = window
18-
expect($refs.default.getAttribute('id')).toBe('default')
19-
})
20-
21-
it('default should have base class', async () => {
22-
const {
23-
app: { $refs }
24-
} = window
25-
expect($refs.default).toHaveClass('form-text')
26-
})
15+
it('renders default slot content', async () => {
16+
const wrapper = mount(FormText, {
17+
slots: {
18+
default: 'foobar'
19+
}
20+
})
2721

28-
it('default should have muted variant', async () => {
29-
const {
30-
app: { $refs }
31-
} = window
32-
expect($refs.default).toHaveClass('text-muted')
22+
expect(wrapper.is('small')).toBe(true)
23+
expect(wrapper.classes()).toContain('form-text')
24+
expect(wrapper.classes()).toContain('text-muted')
25+
expect(wrapper.classes().length).toBe(2)
26+
expect(wrapper.text()).toEqual('foobar')
3327
})
3428

35-
it('default should have content', async () => {
36-
const {
37-
app: { $refs }
38-
} = window
39-
expect($refs.default.textContent).toContain('default')
40-
})
29+
it('renders custom root element when prop tag set', async () => {
30+
const wrapper = mount(FormText, {
31+
propsData: {
32+
tag: 'p'
33+
}
34+
})
4135

42-
it('custom should be tag p', async () => {
43-
const {
44-
app: { $refs }
45-
} = window
46-
expect($refs.custom).toBeElement('p')
36+
expect(wrapper.is('p')).toBe(true)
37+
expect(wrapper.classes()).toContain('form-text')
38+
expect(wrapper.classes()).toContain('text-muted')
39+
expect(wrapper.classes().length).toBe(2)
40+
expect(wrapper.text()).toEqual('')
4741
})
4842

49-
it('custom should have base class', async () => {
50-
const {
51-
app: { $refs }
52-
} = window
53-
expect($refs.custom).toHaveClass('form-text')
54-
})
43+
it('has user supplied ID', async () => {
44+
const wrapper = mount(FormText, {
45+
propsData: {
46+
id: 'foo'
47+
}
48+
})
5549

56-
it('custom should have content', async () => {
57-
const {
58-
app: { $refs }
59-
} = window
60-
expect($refs.custom.textContent).toContain('custom')
50+
expect(wrapper.is('small')).toBe(true)
51+
expect(wrapper.attributes('id')).toBeDefined()
52+
expect(wrapper.attributes('id')).toEqual('foo')
6153
})
6254

63-
it('variant should have base class', async () => {
64-
const {
65-
app: { $refs }
66-
} = window
67-
expect($refs.variant).toHaveClass('form-text')
68-
})
55+
it('does not have class form-text when prop inline set', async () => {
56+
const wrapper = mount(FormText, {
57+
propsData: {
58+
inline: true
59+
}
60+
})
6961

70-
it('variant should have danger variant', async () => {
71-
const {
72-
app: { $refs }
73-
} = window
74-
expect($refs.variant).toHaveClass('text-danger')
62+
expect(wrapper.is('small')).toBe(true)
63+
expect(wrapper.classes()).not.toContain('form-text')
64+
expect(wrapper.classes()).toContain('text-muted')
65+
expect(wrapper.classes().length).toBe(1)
7566
})
7667

77-
it('variant should have danger variant', async () => {
78-
const {
79-
app: { $refs }
80-
} = window
81-
expect($refs.variant.textContent).toContain('variant')
82-
})
83-
84-
it('inline should not have base class', async () => {
85-
const {
86-
app: { $refs }
87-
} = window
88-
expect($refs.inline).not.toHaveClass('form-text')
89-
})
90-
91-
it('inline should have variant muted', async () => {
92-
const {
93-
app: { $refs }
94-
} = window
95-
expect($refs.inline).toHaveClass('text-muted')
96-
})
68+
it('has variant class applied when prop text-variant is set', async () => {
69+
const wrapper = mount(FormText, {
70+
propsData: {
71+
textVariant: 'info'
72+
}
73+
})
9774

98-
it('inline should have content', async () => {
99-
const {
100-
app: { $refs }
101-
} = window
102-
expect($refs.inline.textContent).toContain('inline')
75+
expect(wrapper.is('small')).toBe(true)
76+
expect(wrapper.classes()).toContain('form-text')
77+
expect(wrapper.classes()).toContain('text-info')
78+
expect(wrapper.classes().length).toBe(2)
79+
expect(wrapper.text()).toEqual('')
10380
})
10481
})

‎src/components/form/form.spec.js

Lines changed: 82 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,85 @@
1-
import { loadFixture, testVM } from '../../../tests/utils'
1+
import Form from './form'
2+
import { mount } from '@vue/test-utils'
23

34
describe('form', () => {
4-
beforeEach(loadFixture(__dirname, 'form'))
5-
testVM()
5+
it('has expected default structure', async () => {
6+
const wrapper = mount(Form)
7+
8+
expect(wrapper.is('form')).toBe(true)
9+
expect(wrapper.classes().length).toBe(0)
10+
expect(wrapper.text()).toEqual('')
11+
})
12+
13+
it('renders default slot content', async () => {
14+
const wrapper = mount(Form, {
15+
slots: {
16+
default: 'foobar'
17+
}
18+
})
19+
20+
expect(wrapper.is('form')).toBe(true)
21+
expect(wrapper.classes().length).toBe(0)
22+
expect(wrapper.attributes('id')).not.toBeDefined()
23+
expect(wrapper.attributes('novalidate')).not.toBeDefined()
24+
expect(wrapper.text()).toEqual('foobar')
25+
})
26+
27+
it('has class form-inline when prop inline set', async () => {
28+
const wrapper = mount(Form, {
29+
propsData: {
30+
inline: true
31+
}
32+
})
33+
34+
expect(wrapper.is('form')).toBe(true)
35+
expect(wrapper.classes()).toContain('form-inline')
36+
expect(wrapper.classes().length).toBe(1)
37+
expect(wrapper.attributes('id')).not.toBeDefined()
38+
expect(wrapper.attributes('novalidate')).not.toBeDefined()
39+
expect(wrapper.text()).toEqual('')
40+
})
41+
42+
it('has class was-validation when prop validated set', async () => {
43+
const wrapper = mount(Form, {
44+
propsData: {
45+
validated: true
46+
}
47+
})
48+
49+
expect(wrapper.is('form')).toBe(true)
50+
expect(wrapper.classes()).toContain('was-validated')
51+
expect(wrapper.classes().length).toBe(1)
52+
expect(wrapper.attributes('id')).not.toBeDefined()
53+
expect(wrapper.attributes('novalidate')).not.toBeDefined()
54+
expect(wrapper.text()).toEqual('')
55+
})
56+
57+
it('has user supplied id', async () => {
58+
const wrapper = mount(Form, {
59+
propsData: {
60+
id: 'foo'
61+
}
62+
})
63+
64+
expect(wrapper.is('form')).toBe(true)
65+
expect(wrapper.classes().length).toBe(0)
66+
expect(wrapper.attributes('id')).toBeDefined()
67+
expect(wrapper.attributes('id')).toEqual('foo')
68+
expect(wrapper.attributes('novalidate')).not.toBeDefined()
69+
expect(wrapper.text()).toEqual('')
70+
})
71+
72+
it('has attribute novalidate when prop novalidate set', async () => {
73+
const wrapper = mount(Form, {
74+
propsData: {
75+
novalidate: true
76+
}
77+
})
78+
79+
expect(wrapper.is('form')).toBe(true)
80+
expect(wrapper.classes().length).toBe(0)
81+
expect(wrapper.attributes('id')).not.toBeDefined()
82+
expect(wrapper.attributes('novalidate')).toBeDefined()
83+
expect(wrapper.text()).toEqual('')
84+
})
685
})

‎src/components/image/img-lazy.spec.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,21 @@ describe('img-lazy', () => {
1515
wrapper.destroy()
1616
})
1717

18+
it('is initially shown show prop is set', async () => {
19+
const wrapper = mount(ImgLazy, {
20+
propsData: {
21+
src: src,
22+
show: true
23+
}
24+
})
25+
expect(wrapper.is('img')).toBe(true)
26+
27+
expect(wrapper.attributes('src')).toBeDefined()
28+
expect(wrapper.attributes('src')).toBe(src)
29+
30+
wrapper.destroy()
31+
})
32+
1833
it('shows when show prop is set', async () => {
1934
const wrapper = mount(ImgLazy, {
2035
propsData: {

0 commit comments

Comments
 (0)