Skip to content

Commit 7300c1f

Browse files
tmorehousetmorehouse
authored
chore(unit testing): convert jumbotron test (#2973)
1 parent afde4c8 commit 7300c1f

File tree

1 file changed

+151
-186
lines changed

1 file changed

+151
-186
lines changed

‎src/components/jumbotron/jumbotron.spec.js

Lines changed: 151 additions & 186 deletions
Original file line numberDiff line numberDiff line change
@@ -1,211 +1,176 @@
1-
import { loadFixture, testVM } from '../../../tests/utils'
1+
import Jumbotron from './jumbotron'
2+
import { mount } from '@vue/test-utils'
23

34
describe('jumbotron', () => {
4-
beforeEach(loadFixture(__dirname, 'jumbotron'))
5-
testVM()
6-
7-
it('All examples should contain base class', async () => {
8-
const {
9-
app: { $refs }
10-
} = window
11-
;['default', 'tags', 'level', 'slots', 'content', 'fluid', 'containerFluid'].forEach(ref => {
12-
expect($refs[ref]).toHaveClass('jumbotron')
13-
})
14-
})
5+
it('has expected default structure', async () => {
6+
const wrapper = mount(Jumbotron)
157

16-
it('fluid and containerFluid should contain jumbotron-fluid class', async () => {
17-
const {
18-
app: { $refs }
19-
} = window
20-
;['fluid', 'containerFluid'].forEach(ref => {
21-
expect($refs[ref]).toHaveClass('jumbotron-fluid')
22-
})
8+
expect(wrapper.is('div')).toBe(true)
9+
expect(wrapper.classes()).toContain('jumbotron')
10+
expect(wrapper.classes().length).toBe(1)
11+
expect(wrapper.text()).toEqual('')
2312
})
2413

25-
it('All others should not contain jumbotron-fluid class', async () => {
26-
const {
27-
app: { $refs }
28-
} = window
29-
;['default', 'tags', 'level', 'slots', 'content'].forEach(ref => {
30-
expect($refs[ref]).not.toHaveClass('jumbotron-fluid')
14+
it('renders with custom root element when props tag is set', async () => {
15+
const wrapper = mount(Jumbotron, {
16+
propsData: {
17+
tag: 'article'
18+
}
3119
})
32-
})
33-
34-
it("All examples except tags should have root elemwnt of type 'div'", async () => {
35-
const {
36-
app: { $refs }
37-
} = window
38-
;['default', 'level', 'slots', 'content', 'fluid', 'containerFluid'].forEach(ref => {
39-
expect($refs[ref]).toBeElement('div')
40-
})
41-
expect($refs.tags).not.toBeElement('div')
42-
})
4320

44-
it("default should have first child h1 with content and class 'display-3'", async () => {
45-
const {
46-
app: { $refs }
47-
} = window
48-
const h1 = $refs.default.children[0]
49-
expect(h1).toBeDefined()
50-
expect(h1).toBeElement('h1')
51-
expect(h1).toHaveClass('display-3')
52-
expect(h1.textContent).toContain('header prop')
21+
expect(wrapper.is('article')).toBe(true)
22+
expect(wrapper.classes()).toContain('jumbotron')
23+
expect(wrapper.classes().length).toBe(1)
24+
expect(wrapper.text()).toEqual('')
5325
})
5426

55-
it('default should have second child with tag p with class lead and have content', async () => {
56-
const {
57-
app: { $refs }
58-
} = window
59-
const p = $refs.default.children[1]
60-
expect(p).toBeDefined()
61-
expect(p).toBeElement('p')
62-
expect(p).toHaveClass('lead')
63-
expect(p.textContent).toContain('lead prop')
64-
})
65-
66-
it('default should have third child with content', async () => {
67-
const {
68-
app: { $refs }
69-
} = window
70-
const p = $refs.default.children[2]
71-
expect(p).toBeDefined()
72-
expect(p).toBeElement('p')
73-
expect(p.textContent).toContain('content')
74-
})
75-
76-
it('slots should have first child h1 with content', async () => {
77-
const {
78-
app: { $refs }
79-
} = window
80-
const h1 = $refs.slots.children[0]
81-
expect(h1).toBeDefined()
82-
expect(h1).toBeElement('h1')
83-
expect(h1.textContent).toContain('header slot')
84-
})
27+
it('has border when prop border-variant is set', async () => {
28+
const wrapper = mount(Jumbotron, {
29+
propsData: {
30+
borderVariant: 'danger'
31+
}
32+
})
8533

86-
it('slots should have second child with tag p with class lead and have content', async () => {
87-
const {
88-
app: { $refs }
89-
} = window
90-
const p = $refs.slots.children[1]
91-
expect(p).toBeDefined()
92-
expect(p).toBeElement('p')
93-
expect(p).toHaveClass('lead')
94-
expect(p.textContent).toContain('lead slot')
34+
expect(wrapper.is('div')).toBe(true)
35+
expect(wrapper.classes()).toContain('jumbotron')
36+
expect(wrapper.classes()).toContain('border')
37+
expect(wrapper.classes()).toContain('border-danger')
38+
expect(wrapper.classes().length).toBe(3)
9539
})
9640

97-
it('slots should have third child with content', async () => {
98-
const {
99-
app: { $refs }
100-
} = window
101-
const p = $refs.slots.children[2]
102-
expect(p).toBeDefined()
103-
expect(p).toBeElement('p')
104-
expect(p.textContent).toContain('content')
105-
})
41+
it('has background variant when prop bg-variant is set', async () => {
42+
const wrapper = mount(Jumbotron, {
43+
propsData: {
44+
bgVariant: 'info'
45+
}
46+
})
10647

107-
it("level should have first child h1 with content and class 'display-4'", async () => {
108-
const {
109-
app: { $refs }
110-
} = window
111-
const level = $refs.level
112-
expect(level).toBeDefined()
113-
const h1 = level.children[0]
114-
expect(h1).toBeDefined()
115-
expect(h1).toBeElement('h1')
116-
expect(h1).toHaveClass('display-4')
117-
expect(h1.textContent).toContain('header prop')
48+
expect(wrapper.is('div')).toBe(true)
49+
expect(wrapper.classes()).toContain('jumbotron')
50+
expect(wrapper.classes()).toContain('bg-info')
51+
expect(wrapper.classes().length).toBe(2)
11852
})
11953

120-
it("tags should have custom root tag of 'article'", async () => {
121-
const {
122-
app: { $refs }
123-
} = window
124-
const tags = $refs.tags
125-
expect(tags).toBeDefined()
126-
expect(tags).toBeElement('article')
127-
})
54+
it('has text variant when prop text-variant is set', async () => {
55+
const wrapper = mount(Jumbotron, {
56+
propsData: {
57+
textVariant: 'primary'
58+
}
59+
})
12860

129-
it("tags should have custom header tag of 'h2' with content", async () => {
130-
const {
131-
app: { $refs }
132-
} = window
133-
const header = $refs.tags.children[0]
134-
expect(header).toBeDefined()
135-
expect(header).toBeElement('h2')
136-
expect(header).toHaveClass('display-3')
137-
expect(header.textContent).toContain('header prop')
61+
expect(wrapper.is('div')).toBe(true)
62+
expect(wrapper.classes()).toContain('jumbotron')
63+
expect(wrapper.classes()).toContain('text-primary')
64+
expect(wrapper.classes().length).toBe(2)
13865
})
13966

140-
it("tags should have custom lead tag of 'div' with content and class 'lead'", async () => {
141-
const {
142-
app: { $refs }
143-
} = window
144-
const lead = $refs.tags.children[1]
145-
expect(lead).toBeDefined()
146-
expect(lead).toBeElement('div')
147-
expect(lead).toHaveClass('lead')
148-
expect(lead.textContent).toContain('lead prop')
149-
})
67+
it('renders default slot content', async () => {
68+
const wrapper = mount(Jumbotron, {
69+
slots: {
70+
default: 'foobar'
71+
}
72+
})
15073

151-
it("content should have one child with tag p and text 'content'", async () => {
152-
const {
153-
app: { $refs }
154-
} = window
155-
const content = $refs.content
156-
expect(content).toBeDefined()
157-
expect(content.children.length).toBe(1)
158-
expect(content.children[0]).toBeElement('p')
159-
expect(content.children[0].textContent).toContain('content')
160-
})
74+
expect(wrapper.is('div')).toBe(true)
75+
expect(wrapper.classes()).toContain('jumbotron')
76+
expect(wrapper.classes().length).toBe(1)
77+
expect(wrapper.text()).toEqual('foobar')
78+
expect(wrapper.findAll('.jumbotron > *').length).toBe(0)
79+
})
80+
81+
it('renders default slot content inside container when fluid prop set', async () => {
82+
const wrapper = mount(Jumbotron, {
83+
propsData: {
84+
fluid: true
85+
},
86+
slots: {
87+
default: 'foobar'
88+
}
89+
})
16190

162-
it("fluid should have child with class 'container`", async () => {
163-
const {
164-
app: { $refs }
165-
} = window
166-
const fluid = $refs.fluid
167-
expect(fluid).toBeDefined()
168-
expect(fluid.children.length).toBe(1)
169-
const container = fluid.children[0]
170-
expect(container).toBeDefined()
171-
expect(container).toBeElement('div')
172-
expect(container).toHaveClass('container')
173-
})
91+
expect(wrapper.is('div')).toBe(true)
92+
expect(wrapper.classes()).toContain('jumbotron')
93+
expect(wrapper.classes()).toContain('jumbotron-fluid')
94+
expect(wrapper.classes().length).toBe(2)
95+
expect(wrapper.findAll('.jumbotron > *').length).toBe(1)
96+
expect(wrapper.findAll('.container').length).toBe(1)
97+
expect(wrapper.find('.container').is('div')).toBe(true)
98+
expect(wrapper.find('.container').text()).toEqual('foobar')
99+
expect(wrapper.text()).toEqual('foobar')
100+
})
101+
102+
it('renders default slot content inside container-fluid when fluid prop and container-fluid set', async () => {
103+
const wrapper = mount(Jumbotron, {
104+
propsData: {
105+
fluid: true,
106+
containerFluid: true
107+
},
108+
slots: {
109+
default: 'foobar'
110+
}
111+
})
174112

175-
it("containerFluid should have child with class 'container-fluid`", async () => {
176-
const {
177-
app: { $refs }
178-
} = window
179-
const fluid = $refs.containerFluid
180-
expect(fluid).toBeDefined()
181-
expect(fluid.children.length).toBe(1)
182-
const container = fluid.children[0]
183-
expect(container).toBeDefined()
184-
expect(container).toBeElement('div')
185-
expect(container).toHaveClass('container-fluid')
186-
})
113+
expect(wrapper.is('div')).toBe(true)
114+
expect(wrapper.classes()).toContain('jumbotron')
115+
expect(wrapper.classes()).toContain('jumbotron-fluid')
116+
expect(wrapper.classes().length).toBe(2)
117+
expect(wrapper.findAll('.jumbotron > *').length).toBe(1)
118+
expect(wrapper.findAll('.container').length).toBe(0)
119+
expect(wrapper.findAll('.container-fluid').length).toBe(1)
120+
expect(wrapper.find('.container-fluid').is('div')).toBe(true)
121+
expect(wrapper.find('.container-fluid').text()).toEqual('foobar')
122+
expect(wrapper.text()).toEqual('foobar')
123+
})
124+
125+
it('renders header lead and content when using props', async () => {
126+
const wrapper = mount(Jumbotron, {
127+
propsData: {
128+
header: 'foo',
129+
lead: 'bar'
130+
},
131+
slots: {
132+
default: '<span>baz</span>'
133+
}
134+
})
187135

188-
it("fluid should have child 'container' with content", async () => {
189-
const {
190-
app: { $refs }
191-
} = window
192-
const fluid = $refs.fluid
193-
const container = fluid.children[0]
194-
expect(container.children.length).toBe(3)
195-
expect(container.children[0].textContent).toContain('header')
196-
expect(container.children[1].textContent).toContain('lead')
197-
expect(container.children[2].textContent).toContain('content')
198-
})
136+
expect(wrapper.is('div')).toBe(true)
137+
expect(wrapper.classes()).toContain('jumbotron')
138+
expect(wrapper.classes().length).toBe(1)
139+
expect(wrapper.findAll('h1').length).toBe(1)
140+
expect(wrapper.find('h1').classes()).toContain('display-3')
141+
expect(wrapper.find('h1').classes().length).toBe(1)
142+
expect(wrapper.find('h1').text()).toEqual('foo')
143+
expect(wrapper.findAll('p').length).toBe(1)
144+
expect(wrapper.find('p').classes()).toContain('lead')
145+
expect(wrapper.find('p').classes().length).toBe(1)
146+
expect(wrapper.find('p').text()).toEqual('bar')
147+
expect(wrapper.findAll('span').length).toBe(1)
148+
expect(wrapper.find('span').text()).toEqual('baz')
149+
expect(wrapper.find('.jumbotron > h1 + p + span').exists()).toBe(true)
150+
})
151+
152+
it('renders header lead and content when using slots', async () => {
153+
const wrapper = mount(Jumbotron, {
154+
slots: {
155+
header: 'foo',
156+
lead: 'bar',
157+
default: '<span>baz</span>'
158+
}
159+
})
199160

200-
it("containerFluid should have child 'container-fluid' with content", async () => {
201-
const {
202-
app: { $refs }
203-
} = window
204-
const fluid = $refs.containerFluid
205-
const container = fluid.children[0]
206-
expect(container.children.length).toBe(3)
207-
expect(container.children[0].textContent).toContain('header')
208-
expect(container.children[1].textContent).toContain('lead')
209-
expect(container.children[2].textContent).toContain('content')
161+
expect(wrapper.is('div')).toBe(true)
162+
expect(wrapper.classes()).toContain('jumbotron')
163+
expect(wrapper.classes().length).toBe(1)
164+
expect(wrapper.findAll('h1').length).toBe(1)
165+
expect(wrapper.find('h1').classes()).toContain('display-3')
166+
expect(wrapper.find('h1').classes().length).toBe(1)
167+
expect(wrapper.find('h1').text()).toEqual('foo')
168+
expect(wrapper.findAll('p').length).toBe(1)
169+
expect(wrapper.find('p').classes()).toContain('lead')
170+
expect(wrapper.find('p').classes().length).toBe(1)
171+
expect(wrapper.find('p').text()).toEqual('bar')
172+
expect(wrapper.findAll('span').length).toBe(1)
173+
expect(wrapper.find('span').text()).toEqual('baz')
174+
expect(wrapper.find('.jumbotron > h1 + p + span').exists()).toBe(true)
210175
})
211176
})

0 commit comments

Comments
 (0)