Skip to content

Commit d30fafe

Browse files
tmorehousejacobmllr95
authored andcommitted
chore: more unit test conversion (#2964)
* Delete progress.html * Delete progress.js * Delete navbar.html * Delete navbar.js * Delete navbar-dropdown.spec.js * Create nav-item-dropdown.spec.js * Update collapse.html * Update nav-item-dropdown.spec.js * Create media-aside.spec.js * Update media-aside.spec.js * Create media-body.spec.js * Update media.spec.js * Delete media.html * Delete media.js * Update media.spec.js * Update media.spec.js * Update media.spec.js * Update media.spec.js * Create input-group-text.spec.js * Update input-group-text.spec.js * Update input-group-text.spec.js * Update input-group-text.spec.js * Create input-group-append.spec.js * Create input-group-prepend.spec.js * Update input-group.spec.js * Delete input-group.html * Delete input-group.js * Update input-group.spec.js * Update input-group.spec.js * Update input-group.spec.js * Update container.spec.js * Update container.spec.js * Update row.spec.js * Create form-row.spec.js * Update container.spec.js * Update row.spec.js * Update list-group-item.spec.js * Update input-group-append.spec.js * Update input-group-prepend.spec.js * Update input-group-text.spec.js * Update form-row.spec.js * Update row.spec.js * Update form-row.spec.js * Update col.spec.js * Update col.spec.js * Update col.spec.js * Update col.spec.js * Update col.js * Update col.spec.js * Delete row.html * Delete container.html * Delete col.html * Delete col.js * Delete container.js * Delete row.js
1 parent cbf24c3 commit d30fafe

30 files changed

+987
-734
lines changed
Lines changed: 126 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -1,118 +1,129 @@
11
<div id="app">
2-
<!-- Directive Modifiers -->
3-
<h2>Basic example - Directive Modifiers</h2>
4-
<p>
5-
<b-btn ref="collapse_mod_btn"
6-
variant="primary"
7-
v-b-toggle.collapse1>
8-
Toggle Collapse 1
9-
</b-btn>
10-
</p>
11-
<b-collapse ref="collapse_mod"
12-
id="collapse1">
13-
<b-card>Collapse 1 contents Here</b-card>
14-
</b-collapse>
15-
<!-- Directive Argument -->
16-
<h2>Basic example - Directive Argument</h2>
17-
<p>
18-
<b-btn ref="collapse_arg_btn"
19-
variant="primary"
20-
v-b-toggle="'collapse2'">
21-
Toggle Collapse 2
22-
</b-btn>
23-
</p>
24-
<b-collapse ref="collapse_arg"
25-
id="collapse2">
26-
<b-card>Collapse 2 contents Here</b-card>
27-
</b-collapse>
28-
<!-- Initially Open -->
29-
<h2>Initially Open Example</h2>
30-
<p>
31-
<b-btn ref="collapse_open_btn"
32-
variant="primary"
33-
v-b-toggle.collapse3>
34-
Toggle Collapse 3
35-
</b-btn>
36-
</p>
37-
<b-collapse ref="collapse_open"
38-
visible
39-
id="collapse3">
40-
<b-card>
41-
Initially visible Collapse 3 contents Here
42-
</b-card>
43-
</b-collapse>
44-
<!-- v-model -->
45-
<h2><code>v-model</code> Example</h2>
46-
<p>
47-
<b-btn ref="collapse_vmod_btn"
48-
variant="primary"
49-
aria-controls="collapse4"
50-
:aria-expanded="showCollapse ? 'true' : 'false'"
51-
@click="showCollapse = !showCollapse">
52-
Toggle Collapse 4
53-
</b-btn>
54-
</p>
55-
<b-collapse ref="collapse_vmod"
56-
v-model="showCollapse"
57-
id="collapse4">
58-
<b-card>
59-
Initially visible Collapse 4 contents Here
60-
</b-card>
61-
</b-collapse>
62-
<!-- Multiple Targets -->
63-
<h2>Multiple Targets Example</h2>
64-
<p>
65-
<b-btn ref="collapse_multi_btn"
66-
variant="primary"
67-
v-b-toggle.multi1.multi2>
68-
Toggle Multi Collapse 1 &amp; 2
69-
</b-btn>
70-
</p>
71-
<b-collapse ref="collapse_multi_1"
72-
id="multi1">
73-
<b-card>Multi-Collapse 1 contents Here</b-card>
74-
</b-collapse>
75-
<p>This paragraph doesn't collapse</p>
76-
<b-collapse ref="collapse_multi_2"
77-
id="multi2">
78-
<b-card>Multi-Collapse 2 contents Here</b-card>
79-
</b-collapse>
80-
<!-- Accordion -->
81-
<h2>Accordion example</h2>
82-
<b-btn block
83-
ref="accordion_1_btn"
84-
variant="primary"
85-
v-b-toggle.accordion1>Toggle Accordion 1</b-btn>
86-
<b-collapse ref="accordion_1"
87-
id="accordion1"
88-
visible
89-
accordion="my-accordion">
90-
<b-card>
91-
Accordion 1 contents Here
92-
</b-card>
93-
</b-collapse>
94-
<b-btn block
95-
ref="accordion_2_btn"
96-
variant="primary"
97-
v-b-toggle.accordion2
98-
class="mt-2">Toggle Accordion 2</b-btn>
99-
<b-collapse ref="accordion_2"
100-
id="accordion2"
101-
accordion="my-accordion">
102-
<b-card>
103-
Accordion 2 contents Here
104-
</b-card>
105-
</b-collapse>
106-
<b-btn block
107-
ref="accordion_3_btn"
108-
variant="primary"
109-
v-b-toggle.accordion3
110-
class="mt-2">Toggle Accordion 3</b-btn>
111-
<b-collapse ref="accordion_3"
112-
id="accordion3"
113-
accordion="my-accordion">
114-
<b-card>
115-
Accordion 3 contents Here
116-
</b-card>
2+
<!-- Directive Modifiers -->
3+
<h2>Basic example - Directive Modifiers</h2>
4+
<p>
5+
<b-btn ref="collapse_mod_btn" variant="primary" v-b-toggle.collapse1>
6+
Toggle Collapse 1
7+
</b-btn>
8+
</p>
9+
<b-collapse ref="collapse_mod" id="collapse1">
10+
<b-card>Collapse 1 contents Here</b-card>
11+
</b-collapse>
12+
13+
<!-- Directive Argument -->
14+
<h2>Basic example - Directive Argument</h2>
15+
<p>
16+
<b-btn ref="collapse_arg_btn" variant="primary" v-b-toggle="'collapse2'">
17+
Toggle Collapse 2
18+
</b-btn>
19+
</p>
20+
<b-collapse ref="collapse_arg" id="collapse2">
21+
<b-card>Collapse 2 contents Here</b-card>
22+
</b-collapse>
23+
24+
<!-- Initially Open -->
25+
<h2>Initially Open Example</h2>
26+
<p>
27+
<b-btn ref="collapse_open_btn" variant="primary" v-b-toggle.collapse3>
28+
Toggle Collapse 3
29+
</b-btn>
30+
</p>
31+
<b-collapse ref="collapse_open" visible id="collapse3">
32+
<b-card>Initially visible Collapse 3 contents Here</b-card>
33+
</b-collapse>
34+
35+
<!-- v-model -->
36+
<h2><code>v-model</code> Example</h2>
37+
<p>
38+
<b-btn
39+
ref="collapse_vmod_btn"
40+
variant="primary"
41+
aria-controls="collapse4"
42+
:aria-expanded="showCollapse ? 'true' : 'false'"
43+
@click="showCollapse = !showCollapse"
44+
>
45+
Toggle Collapse 4
46+
</b-btn>
47+
</p>
48+
<b-collapse
49+
ref="collapse_vmod"
50+
v-model="showCollapse"
51+
id="collapse4"
52+
>
53+
<b-card>Initially visible Collapse 4 contents Here</b-card>
54+
</b-collapse>
55+
56+
<!-- Multiple Targets -->
57+
<h2>Multiple Targets Example</h2>
58+
<p>
59+
<b-btn ref="collapse_multi_btn" variant="primary" v-b-toggle.multi1.multi2>
60+
Toggle Multi Collapse 1 &amp; 2
61+
</b-btn>
62+
</p>
63+
<b-collapse ref="collapse_multi_1" id="multi1">
64+
<b-card>Multi-Collapse 1 contents Here</b-card>
65+
</b-collapse>
66+
<p>This paragraph doesn't collapse</p>
67+
<b-collapse ref="collapse_multi_2" id="multi2">
68+
<b-card>Multi-Collapse 2 contents Here</b-card>
69+
</b-collapse>
70+
71+
<!-- Accordion -->
72+
<h2>Accordion example</h2>
73+
<b-btn
74+
block
75+
ref="accordion_1_btn"
76+
variant="primary"
77+
v-b-toggle.accordion1
78+
>
79+
Toggle Accordion 1
80+
</b-btn>
81+
<b-collapse
82+
ref="accordion_1"
83+
id="accordion1"
84+
visible
85+
accordion="my-accordion"
86+
>
87+
<b-card>Accordion 1 contents Here</b-card>
88+
</b-collapse>
89+
<b-btn
90+
block
91+
ref="accordion_2_btn"
92+
variant="primary"
93+
v-b-toggle.accordion2
94+
class="mt-2"
95+
>
96+
Toggle Accordion 2
97+
</b-btn>
98+
<b-collapse
99+
ref="accordion_2"
100+
id="accordion2"
101+
accordion="my-accordion"
102+
>
103+
<b-card>Accordion 2 contents Here</b-card>
104+
</b-collapse>
105+
<b-btn
106+
block
107+
ref="accordion_3_btn"
108+
variant="primary"
109+
v-b-toggle.accordion3
110+
class="mt-2"
111+
>
112+
Toggle Accordion 3
113+
</b-btn>
114+
<b-collapse ref="accordion_3"
115+
id="accordion3"
116+
accordion="my-accordion"
117+
>
118+
<b-card>Accordion 3 contents Here</b-card>
119+
</b-collapse>
120+
121+
<!-- In NavBar -->
122+
<h2>Inside Navbar</h2>
123+
<b-navbar toggleable>
124+
<b-navbar-toggle target="collapse-nav"></b-navbar-toggle>
125+
<b-collapse ref="collapse_nav" id="collapse-nav" is-nav>
126+
<p>Nav Collapse contents Here</p>
117127
</b-collapse>
128+
</b-navbar>
118129
</div>

src/components/input-group/fixtures/input-group.html

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

src/components/input-group/fixtures/input-group.js

Lines changed: 0 additions & 3 deletions
This file was deleted.
Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import InputGroupAppend from './input-group-append'
2+
import { mount } from '@vue/test-utils'
3+
4+
describe('input-group > input-group-append', () => {
5+
it('has expected default structure', async () => {
6+
const wrapper = mount(InputGroupAppend)
7+
8+
expect(wrapper.is('div')).toBe(true)
9+
expect(wrapper.classes()).toContain('input-group-append')
10+
expect(wrapper.classes().length).toBe(1)
11+
expect(wrapper.findAll('.input-group-append > *').length).toBe(0)
12+
expect(wrapper.text()).toEqual('')
13+
})
14+
15+
it('renders custom root element when tag prop is set', async () => {
16+
const wrapper = mount(InputGroupAppend, {
17+
propsData: {
18+
tag: 'span'
19+
}
20+
})
21+
22+
expect(wrapper.is('span')).toBe(true)
23+
expect(wrapper.classes()).toContain('input-group-append')
24+
expect(wrapper.classes().length).toBe(1)
25+
expect(wrapper.findAll('.input-group-append > *').length).toBe(0)
26+
expect(wrapper.text()).toEqual('')
27+
})
28+
29+
it('renders content of default slot', async () => {
30+
const wrapper = mount(InputGroupAppend, {
31+
slots: {
32+
default: 'foobar'
33+
}
34+
})
35+
36+
expect(wrapper.is('div')).toBe(true)
37+
expect(wrapper.classes()).toContain('input-group-append')
38+
expect(wrapper.classes().length).toBe(1)
39+
expect(wrapper.text()).toEqual('foobar')
40+
})
41+
42+
it('renders child input-group-text when prop is-text set', async () => {
43+
const wrapper = mount(InputGroupAppend, {
44+
propsData: {
45+
isText: true
46+
}
47+
})
48+
49+
expect(wrapper.is('div')).toBe(true)
50+
expect(wrapper.classes()).toContain('input-group-append')
51+
expect(wrapper.classes().length).toBe(1)
52+
expect(wrapper.findAll('.input-group-text').length).toBe(1)
53+
expect(wrapper.findAll('.input-group-append > .input-group-text').length).toBe(1)
54+
expect(wrapper.text()).toEqual('')
55+
})
56+
57+
it('renders default slot inside child input-group-text when prop is-text set', async () => {
58+
const wrapper = mount(InputGroupAppend, {
59+
propsData: {
60+
isText: true
61+
},
62+
slots: {
63+
default: 'foobar'
64+
}
65+
})
66+
67+
expect(wrapper.is('div')).toBe(true)
68+
expect(wrapper.classes()).toContain('input-group-append')
69+
expect(wrapper.classes().length).toBe(1)
70+
expect(wrapper.findAll('.input-group-text').length).toBe(1)
71+
expect(wrapper.text()).toEqual('foobar')
72+
expect(wrapper.find('.input-group-text').text()).toEqual('foobar')
73+
})
74+
})

0 commit comments

Comments
 (0)