@@ -25,35 +25,43 @@ module('Integration | Component | bs-accordion', function(hooks) {
2525 } ) ;
2626
2727 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+ ` ) ;
3234 assert . dom ( '.panel-group' ) . exists ( 'accordion has panel-group class' ) ;
3335 } ) ;
3436
3537 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+ ` ) ;
4044 assert . dom ( '.accordion .card' ) . exists ( 'accordion has card within accordion' ) ;
4145 } ) ;
4246
4347 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+ ` ) ;
4854 assert . dom ( `.${ accordionClassFor ( ) } ` ) . exists ( { count : 2 } , 'accordion yields item' ) ;
4955 } ) ;
5056
5157 test ( 'accordion with preselected item has this item expanded' , async function ( assert ) {
5258 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+ ` ) ;
5765
5866 assert . dom ( `.${ accordionClassFor ( ) } :first-child .${ accordionItemHeadClass ( ) } ` ) . hasNoClass ( 'collapsed' , `${ accordionItemHeadClass ( ) } has not collapsed class` ) ;
5967 assert . dom ( `.${ accordionClassFor ( ) } :first-child [role="tabpanel"]` ) . hasClass ( 'collapse' , 'tabpanel has collapse class' ) ;
@@ -62,10 +70,12 @@ module('Integration | Component | bs-accordion', function(hooks) {
6270
6371 test ( 'changing selected item expands this item' , async function ( assert ) {
6472 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+ ` ) ;
6979 this . set ( 'selected' , 2 ) ;
7080
7181 // wait for transitions to complete
@@ -76,10 +86,12 @@ module('Integration | Component | bs-accordion', function(hooks) {
7686 } ) ;
7787
7888 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+ ` ) ;
8395 await click ( `.${ accordionClassFor ( ) } :first-child .${ accordionItemHeadClass ( ) } ` ) ;
8496
8597 assert . dom ( `.${ accordionClassFor ( ) } :first-child .${ accordionItemHeadClass ( ) } ` ) . hasNoClass ( 'collapsed' , `${ accordionItemHeadClass ( ) } has not collapsed class` ) ;
@@ -88,10 +100,12 @@ module('Integration | Component | bs-accordion', function(hooks) {
88100 } ) ;
89101
90102 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+ ` ) ;
95109
96110 assert . dom ( `.${ accordionClassFor ( ) } :first-child .${ accordionItemHeadClass ( ) } ` ) . hasNoClass ( 'collapsed' , `${ accordionItemHeadClass ( ) } has not collapsed class` ) ;
97111 assert . dom ( `.${ accordionClassFor ( ) } :first-child [role="tabpanel"]` ) . hasClass ( 'collapse' , 'tabpanel has collapse class' ) ;
@@ -107,10 +121,12 @@ module('Integration | Component | bs-accordion', function(hooks) {
107121 test ( 'calls onChange action when changing selection' , async function ( assert ) {
108122 let action = this . spy ( ) ;
109123 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+ ` ) ;
114130
115131 await click ( `.${ accordionClassFor ( ) } :first-child .${ accordionItemHeadClass ( ) } ` ) ;
116132 assert . ok ( action . calledWith ( 1 ) , 'onClick action has been called.' ) ;
@@ -120,10 +136,12 @@ module('Integration | Component | bs-accordion', function(hooks) {
120136 let action = this . stub ( ) ;
121137 action . returns ( false ) ;
122138 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+ ` ) ;
127145
128146 await click ( `.${ accordionClassFor ( ) } :first-child .${ accordionItemHeadClass ( ) } ` ) ;
129147 assert . ok ( action . calledWith ( 1 ) , 'onClick action has been called.' ) ;
@@ -135,21 +153,25 @@ module('Integration | Component | bs-accordion', function(hooks) {
135153
136154 test ( 'changing selection does not leak to public selected property (DDAU)' , async function ( assert ) {
137155 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+ ` ) ;
142162
143163 await click ( `.${ accordionClassFor ( ) } :last-child .${ accordionItemHeadClass ( ) } ` ) ;
144164 assert . equal ( this . get ( 'selected' ) , 1 , 'Does not modify public selected property' ) ;
145165 } ) ;
146166
147167 test ( 'yields change action to add custom behaviour' , async function ( assert ) {
148168 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+ ` ) ;
153175
154176 await click ( '#btn' ) ;
155177
@@ -159,13 +181,15 @@ module('Integration | Component | bs-accordion', function(hooks) {
159181 } ) ;
160182
161183 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+ ` ) ;
169193
170194 await click ( `.${ accordionClassFor ( ) } :first-child .${ accordionItemHeadClass ( ) } ` ) ;
171195
@@ -175,13 +199,15 @@ module('Integration | Component | bs-accordion', function(hooks) {
175199 } ) ;
176200
177201 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+ ` ) ;
185211
186212 assert . dom ( `.${ accordionClassFor ( ) } :first-child .${ accordionItemHeadClass ( ) } ` ) . hasNoClass ( 'collapsed' , `${ accordionItemHeadClass ( ) } has not collapsed class` ) ;
187213 assert . dom ( `.${ accordionClassFor ( ) } :first-child [role="tabpanel"]` ) . hasClass ( 'collapse' , 'tabpanel has collapse class' ) ;
@@ -195,10 +221,12 @@ module('Integration | Component | bs-accordion', function(hooks) {
195221 } ) ;
196222
197223 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+ ` ) ;
202230
203231 await a11yAudit ( ) ;
204232 assert . ok ( true , 'A11y audit passed' ) ;
0 commit comments