@@ -25,35 +25,43 @@ module('Integration | Component | bs-accordion', function(hooks) {
25
25
} ) ;
26
26
27
27
testBS3 ( 'accordion has correct default markup' , async function ( assert ) {
28
- await render ( hbs `{{#bs-accordion as |acc|}}
29
- {{#acc.item value=1 title="TITLE1"}}CONTENT1{{/acc.item}}
30
- {{#acc.item value=2 title="TITLE2"}}CONTENT2{{/acc.item}}
31
- {{/bs-accordion}}` ) ;
28
+ await render ( hbs `
29
+ <BsAccordion as |acc|>
30
+ <acc.item @value={{1}} @title="TITLE1">CONTENT1</acc.item>
31
+ <acc.item @value={{2}} @title="TITLE2">CONTENT2</acc.item>
32
+ </BsAccordion>
33
+ ` ) ;
32
34
assert . dom ( '.panel-group' ) . exists ( 'accordion has panel-group class' ) ;
33
35
} ) ;
34
36
35
37
testBS4 ( 'accordion has correct default markup' , async function ( assert ) {
36
- await render ( hbs `{{#bs-accordion as |acc|}}
37
- {{#acc.item value=1 title="TITLE1"}}CONTENT1{{/acc.item}}
38
- {{#acc.item value=2 title="TITLE2"}}CONTENT2{{/acc.item}}
39
- {{/bs-accordion}}` ) ;
38
+ await render ( hbs `
39
+ <BsAccordion as |acc|>
40
+ <acc.item @value={{1}} @title="TITLE1">CONTENT1</acc.item>
41
+ <acc.item @value={{2}} @title="TITLE2">CONTENT2</acc.item>
42
+ </BsAccordion>
43
+ ` ) ;
40
44
assert . dom ( '.accordion .card' ) . exists ( 'accordion has card within accordion' ) ;
41
45
} ) ;
42
46
43
47
test ( 'accordion yields items' , async function ( assert ) {
44
- await render ( hbs `{{#bs-accordion as |acc|}}
45
- {{#acc.item value=1 title="TITLE1"}}CONTENT1{{/acc.item}}
46
- {{#acc.item value=2 title="TITLE2"}}CONTENT2{{/acc.item}}
47
- {{/bs-accordion}}` ) ;
48
+ await render ( hbs `
49
+ <BsAccordion as |acc|>
50
+ <acc.item @value={{1}} @title="TITLE1">CONTENT1</acc.item>
51
+ <acc.item @value={{2}} @title="TITLE2">CONTENT2</acc.item>
52
+ </BsAccordion>
53
+ ` ) ;
48
54
assert . dom ( `.${ accordionClassFor ( ) } ` ) . exists ( { count : 2 } , 'accordion yields item' ) ;
49
55
} ) ;
50
56
51
57
test ( 'accordion with preselected item has this item expanded' , async function ( assert ) {
52
58
this . set ( 'selected' , 1 ) ;
53
- await render ( hbs `{{#bs-accordion selected=selected as |acc|}}
54
- {{#acc.item value=1 title="TITLE1"}}CONTENT1{{/acc.item}}
55
- {{#acc.item value=2 title="TITLE2"}}CONTENT2{{/acc.item}}
56
- {{/bs-accordion}}` ) ;
59
+ await render ( hbs `
60
+ <BsAccordion @selected={{selected}} as |acc|>
61
+ <acc.item @value={{1}} @title="TITLE1">CONTENT1</acc.item>
62
+ <acc.item @value={{2}} @title="TITLE2">CONTENT2</acc.item>
63
+ </BsAccordion>
64
+ ` ) ;
57
65
58
66
assert . dom ( `.${ accordionClassFor ( ) } :first-child .${ accordionItemHeadClass ( ) } ` ) . hasNoClass ( 'collapsed' , `${ accordionItemHeadClass ( ) } has not collapsed class` ) ;
59
67
assert . dom ( `.${ accordionClassFor ( ) } :first-child [role="tabpanel"]` ) . hasClass ( 'collapse' , 'tabpanel has collapse class' ) ;
@@ -62,10 +70,12 @@ module('Integration | Component | bs-accordion', function(hooks) {
62
70
63
71
test ( 'changing selected item expands this item' , async function ( assert ) {
64
72
this . set ( 'selected' , 1 ) ;
65
- await render ( hbs `{{#bs-accordion selected=selected as |acc|}}
66
- {{#acc.item value=1 title="TITLE1"}}CONTENT1{{/acc.item}}
67
- {{#acc.item value=2 title="TITLE2"}}CONTENT2{{/acc.item}}
68
- {{/bs-accordion}}` ) ;
73
+ await render ( hbs `
74
+ <BsAccordion @selected={{selected}} as |acc|>
75
+ <acc.item @value={{1}} @title="TITLE1">CONTENT1</acc.item>
76
+ <acc.item @value={{2}} @title="TITLE2">CONTENT2</acc.item>
77
+ </BsAccordion>
78
+ ` ) ;
69
79
this . set ( 'selected' , 2 ) ;
70
80
71
81
// wait for transitions to complete
@@ -76,10 +86,12 @@ module('Integration | Component | bs-accordion', function(hooks) {
76
86
} ) ;
77
87
78
88
test ( 'clicking collapsed item expands it' , async function ( assert ) {
79
- await render ( hbs `{{#bs-accordion as |acc|}}
80
- {{#acc.item value=1 title="TITLE1"}}CONTENT1{{/acc.item}}
81
- {{#acc.item value=2 title="TITLE2"}}CONTENT2{{/acc.item}}
82
- {{/bs-accordion}}` ) ;
89
+ await render ( hbs `
90
+ <BsAccordion as |acc|>
91
+ <acc.item @value={{1}} @title="TITLE1">CONTENT1</acc.item>
92
+ <acc.item @value={{2}} @title="TITLE2">CONTENT2</acc.item>
93
+ </BsAccordion>
94
+ ` ) ;
83
95
await click ( `.${ accordionClassFor ( ) } :first-child .${ accordionItemHeadClass ( ) } ` ) ;
84
96
85
97
assert . dom ( `.${ accordionClassFor ( ) } :first-child .${ accordionItemHeadClass ( ) } ` ) . hasNoClass ( 'collapsed' , `${ accordionItemHeadClass ( ) } has not collapsed class` ) ;
@@ -88,10 +100,12 @@ module('Integration | Component | bs-accordion', function(hooks) {
88
100
} ) ;
89
101
90
102
test ( 'clicking expanded item collapses it' , async function ( assert ) {
91
- await render ( hbs `{{#bs-accordion selected=1 as |acc|}}
92
- {{#acc.item value=1 title="TITLE1"}}CONTENT1{{/acc.item}}
93
- {{#acc.item value=2 title="TITLE2"}}CONTENT2{{/acc.item}}
94
- {{/bs-accordion}}` ) ;
103
+ await render ( hbs `
104
+ <BsAccordion @selected={{1}} as |acc|>
105
+ <acc.item @value={{1}} @title="TITLE1">CONTENT1</acc.item>
106
+ <acc.item @value={{2}} @title="TITLE2">CONTENT2</acc.item>
107
+ </BsAccordion>
108
+ ` ) ;
95
109
96
110
assert . dom ( `.${ accordionClassFor ( ) } :first-child .${ accordionItemHeadClass ( ) } ` ) . hasNoClass ( 'collapsed' , `${ accordionItemHeadClass ( ) } has not collapsed class` ) ;
97
111
assert . dom ( `.${ accordionClassFor ( ) } :first-child [role="tabpanel"]` ) . hasClass ( 'collapse' , 'tabpanel has collapse class' ) ;
@@ -107,10 +121,12 @@ module('Integration | Component | bs-accordion', function(hooks) {
107
121
test ( 'calls onChange action when changing selection' , async function ( assert ) {
108
122
let action = this . spy ( ) ;
109
123
this . actions . change = action ;
110
- await render ( hbs `{{#bs-accordion onChange=(action "change") as |acc|}}
111
- {{#acc.item value=1 title="TITLE1"}}CONTENT1{{/acc.item}}
112
- {{#acc.item value=2 title="TITLE2"}}CONTENT2{{/acc.item}}
113
- {{/bs-accordion}}` ) ;
124
+ await render ( hbs `
125
+ <BsAccordion @onChange={{action "change"}} as |acc|>
126
+ <acc.item @value={{1}} @title="TITLE1">CONTENT1</acc.item>
127
+ <acc.item @value={{2}} @title="TITLE2">CONTENT2</acc.item>
128
+ </BsAccordion>
129
+ ` ) ;
114
130
115
131
await click ( `.${ accordionClassFor ( ) } :first-child .${ accordionItemHeadClass ( ) } ` ) ;
116
132
assert . ok ( action . calledWith ( 1 ) , 'onClick action has been called.' ) ;
@@ -120,10 +136,12 @@ module('Integration | Component | bs-accordion', function(hooks) {
120
136
let action = this . stub ( ) ;
121
137
action . returns ( false ) ;
122
138
this . actions . change = action ;
123
- await render ( hbs `{{#bs-accordion onChange=(action "change") as |acc|}}
124
- {{#acc.item value=1 title="TITLE1"}}CONTENT1{{/acc.item}}
125
- {{#acc.item value=2 title="TITLE2"}}CONTENT2{{/acc.item}}
126
- {{/bs-accordion}}` ) ;
139
+ await render ( hbs `
140
+ <BsAccordion @onChange={{action "change"}} as |acc|>
141
+ <acc.item @value={{1}} @title="TITLE1">CONTENT1</acc.item>
142
+ <acc.item @value={{2}} @title="TITLE2">CONTENT2</acc.item>
143
+ </BsAccordion>
144
+ ` ) ;
127
145
128
146
await click ( `.${ accordionClassFor ( ) } :first-child .${ accordionItemHeadClass ( ) } ` ) ;
129
147
assert . ok ( action . calledWith ( 1 ) , 'onClick action has been called.' ) ;
@@ -135,21 +153,25 @@ module('Integration | Component | bs-accordion', function(hooks) {
135
153
136
154
test ( 'changing selection does not leak to public selected property (DDAU)' , async function ( assert ) {
137
155
this . set ( 'selected' , 1 ) ;
138
- await render ( hbs `{{#bs-accordion selected=selected as |acc|}}
139
- {{#acc.item value=1 title="TITLE1"}}CONTENT1{{/acc.item}}
140
- {{#acc.item value=2 title="TITLE2"}}CONTENT2{{/acc.item}}
141
- {{/bs-accordion}}` ) ;
156
+ await render ( hbs `
157
+ <BsAccordion @selected={{selected}} as |acc|>
158
+ <acc.item @value={{1}} @title="TITLE1">CONTENT1</acc.item>
159
+ <acc.item @value={{2}} @title="TITLE2">CONTENT2</acc.item>
160
+ </BsAccordion>
161
+ ` ) ;
142
162
143
163
await click ( `.${ accordionClassFor ( ) } :last-child .${ accordionItemHeadClass ( ) } ` ) ;
144
164
assert . equal ( this . get ( 'selected' ) , 1 , 'Does not modify public selected property' ) ;
145
165
} ) ;
146
166
147
167
test ( 'yields change action to add custom behaviour' , async function ( assert ) {
148
168
this . set ( 'selected' , 1 ) ;
149
- await render ( hbs `{{#bs-accordion selected=1 as |acc|}}
150
- {{#acc.item value=1 title="TITLE1"}}CONTENT1 <button id="btn" {{action acc.change 2}}>Next</button>{{/acc.item}}
151
- {{#acc.item value=2 title="TITLE2"}}CONTENT2{{/acc.item}}
152
- {{/bs-accordion}}` ) ;
169
+ await render ( hbs `
170
+ <BsAccordion @selected={{1}} as |acc|>
171
+ <acc.item @value={{1}} @title="TITLE1">CONTENT1 <button id="btn" {{action acc.change 2}}>Next</button></acc.item>
172
+ <acc.item @value={{2}} @title="TITLE2">CONTENT2</acc.item>
173
+ </BsAccordion>
174
+ ` ) ;
153
175
154
176
await click ( '#btn' ) ;
155
177
@@ -159,13 +181,15 @@ module('Integration | Component | bs-accordion', function(hooks) {
159
181
} ) ;
160
182
161
183
test ( 'clicking collapsed item with contextual title expands it' , async function ( assert ) {
162
- await render ( hbs `{{#bs-accordion as |acc|}}
163
- {{#acc.item value=1 as |aitem|}}
164
- {{#aitem.title}}TITLE1{{/aitem.title}}
165
- {{#aitem.body}}CONTENT1{{/aitem.body}}
166
- {{/acc.item}}
167
- {{#acc.item value=2}}CONTENT2{{/acc.item}}
168
- {{/bs-accordion}}` ) ;
184
+ await render ( hbs `
185
+ <BsAccordion as |acc|>
186
+ <acc.item @value={{1}} as |aitem|>
187
+ <aitem.title>TITLE1</aitem.title>
188
+ <aitem.body>CONTENT1</aitem.body>
189
+ </acc.item>
190
+ <acc.item @value={{2}}>CONTENT2</acc.item>
191
+ </BsAccordion>
192
+ ` ) ;
169
193
170
194
await click ( `.${ accordionClassFor ( ) } :first-child .${ accordionItemHeadClass ( ) } ` ) ;
171
195
@@ -175,13 +199,15 @@ module('Integration | Component | bs-accordion', function(hooks) {
175
199
} ) ;
176
200
177
201
test ( 'clicking expanded item with contextual title collapses it' , async function ( assert ) {
178
- await render ( hbs `{{#bs-accordion selected=1 as |acc|}}
179
- {{#acc.item value=1 as |aitem|}}
180
- {{#aitem.title}}TITLE1{{/aitem.title}}
181
- {{#aitem.body}}CONTENT1{{/aitem.body}}
182
- {{/acc.item}}
183
- {{#acc.item value=2 title="TITLE2"}}CONTENT2{{/acc.item}}
184
- {{/bs-accordion}}` ) ;
202
+ await render ( hbs `
203
+ <BsAccordion @selected={{1}} as |acc|>
204
+ <acc.item @value={{1}} as |aitem|>
205
+ <aitem.title>TITLE1</aitem.title>
206
+ <aitem.body>CONTENT1</aitem.body>
207
+ </acc.item>
208
+ <acc.item @value={{2}} @title="TITLE2">CONTENT2</acc.item>
209
+ </BsAccordion>
210
+ ` ) ;
185
211
186
212
assert . dom ( `.${ accordionClassFor ( ) } :first-child .${ accordionItemHeadClass ( ) } ` ) . hasNoClass ( 'collapsed' , `${ accordionItemHeadClass ( ) } has not collapsed class` ) ;
187
213
assert . dom ( `.${ accordionClassFor ( ) } :first-child [role="tabpanel"]` ) . hasClass ( 'collapse' , 'tabpanel has collapse class' ) ;
@@ -195,10 +221,12 @@ module('Integration | Component | bs-accordion', function(hooks) {
195
221
} ) ;
196
222
197
223
test ( 'it passes accessibility checks' , async function ( assert ) {
198
- await render ( hbs `{{#bs-accordion as |acc|}}
199
- {{#acc.item value=1 title="TITLE1"}}CONTENT1{{/acc.item}}
200
- {{#acc.item value=2 title="TITLE2"}}CONTENT2{{/acc.item}}
201
- {{/bs-accordion}}` ) ;
224
+ await render ( hbs `
225
+ <BsAccordion as |acc|>
226
+ <acc.item @value={{1}} @title="TITLE1">CONTENT1</acc.item>
227
+ <acc.item @value={{2}} @title="TITLE2">CONTENT2</acc.item>
228
+ </BsAccordion>
229
+ ` ) ;
202
230
203
231
await a11yAudit ( ) ;
204
232
assert . ok ( true , 'A11y audit passed' ) ;
0 commit comments