Skip to content

Commit bac36ac

Browse files
jelhansimonihmig
authored andcommitted
refactor component invocation in tests to angle brackets syntax (ember-bootstrap#966)
* drop support for Ember < 3.15 and Node 8 * codemod with some cleanup * refactor bs-dropdown-test.js to angle bracket * refactor bs-button-test.js to angle bracket * refactor bs-dropdown/menu-test.js to angle bracket * refactor bs-dropdown/menu/item-test.js to angle bracket * convert missed component invocation * fix conversion error * convert bs-popover-test.js and bs-tooltip-test.js * convert bs-form/element-test.js * refactor bs-form-test.js to angle bracket component invocation * functionality depends on block params been consumed or not * skip tests for readonly argument * skip readonly for curly bracket invocation only * continue instead of break
1 parent 72742fd commit bac36ac

40 files changed

+928
-872
lines changed

tests/dummy/app/controllers/acceptance/modal.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,4 +13,4 @@ export default Controller.extend({
1313
this.set('hasModal', false);
1414
}
1515
}
16-
});
16+
});
Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
<BsNav as |nav|>
22
<nav.item>
3-
{{#nav.link-to "acceptance.link" "1"}}
3+
<nav.linkTo @route="acceptance.link" @model="1">
44
first
5-
{{/nav.link-to}}
5+
</nav.linkTo>
66
</nav.item>
77
<nav.item>
8-
{{#nav.link-to "acceptance.link" "2"}}
8+
<nav.linkTo @route="acceptance.link" @model="2">
99
second
10-
{{/nav.link-to}}
10+
</nav.linkTo>
1111
</nav.item>
1212
<nav.item>
13-
{{#nav.link-to "acceptance.link" model}}
13+
<nav.linkTo @route="acceptance.link" @model={{@model}}>
1414
current
15-
{{/nav.link-to}}
15+
</nav.linkTo>
1616
</nav.item>
1717
</BsNav>
Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
{{#bs-button id="openModal" onClick=(action "addModal")}}Open{{/bs-button}}
1+
<BsButton id="openModal" @onClick={{action "addModal"}}>Open</BsButton>
22

33
{{#if hasModal}}
4-
{{#bs-modal-simple open=modal onHidden=(action "removeModal") title="Dynamic Dialog"}}
4+
<BsModalSimple @open={{modal}} @onHidden={{action "removeModal"}} @title="Dynamic Dialog">
55
Hi there
6-
{{/bs-modal-simple}}
6+
</BsModalSimple>
77
{{/if}}

tests/dummy/app/templates/fastboot/navbars.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<BsNavbar as |navbar|>
22
<div class="navbar-header">
33
{{navbar.toggle}}
4-
{{#link-to "index" class="navbar-brand"}}Brand{{/link-to}}
4+
<LinkTo @route="index" class="navbar-brand">Brand</LinkTo>
55
</div>
66
<navbar.content>
77
<navbar.nav as |nav|>

tests/integration/components/bs-accordion-test.js

Lines changed: 90 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -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');

tests/integration/components/bs-accordion/item-test.js

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ module('Integration | Component | bs-accordion-item', function(hooks) {
2525
});
2626

2727
test('accordion item has correct default markup', async function(assert) {
28-
await render(hbs`{{#bs-accordion/item title="TITLE"}}CONTENT{{/bs-accordion/item}}`);
28+
await render(hbs`<BsAccordion::Item @title="TITLE">CONTENT</BsAccordion::Item>`);
2929
assert.dom(`.${accordionClassFor()}`).exists(`has ${accordionClassFor()} class`);
3030
assert.dom(`.${accordionClassFor()}`).hasClass(accordionClassFor('default'), `has ${accordionClassFor('default')} class`);
3131
assert.dom(`.${accordionItemHeadClass()}`).hasClass('collapsed', `has ${accordionItemHeadClass()} class`);
@@ -39,18 +39,20 @@ module('Integration | Component | bs-accordion-item', function(hooks) {
3939
let action = this.spy();
4040
this.actions.click = action;
4141
await render(
42-
hbs`{{#bs-accordion/item value=1 onClick=(action "click") title="TITLE"}}CONTENT{{/bs-accordion/item}}`
42+
hbs`<BsAccordion::Item @value={{1}} @onClick={{action "click"}} @title="TITLE">CONTENT</BsAccordion::Item>`
4343
);
4444

4545
await click(`.${accordionItemHeadClass()}`);
4646
assert.ok(action.calledWith(1), 'onClick action has been called.');
4747
});
4848

4949
test('renders a contextual title block', async function(assert) {
50-
await render(hbs`{{#bs-accordion/item as |aitem|}}
51-
{{#aitem.title}}TITLE{{/aitem.title}}
52-
{{#aitem.body}}CONTENT{{/aitem.body}}
53-
{{/bs-accordion/item}}`);
50+
await render(hbs`
51+
<BsAccordion::Item as |aitem|>
52+
<aitem.title>TITLE</aitem.title>
53+
<aitem.body>CONTENT</aitem.body>
54+
</BsAccordion::Item>
55+
`);
5456

5557
assert.dom(accordionTitleSelector()).hasText('TITLE', `${accordionClassFor('title')} has correct title`);
5658
assert.dom(`.${accordionItemBodyClass()}`).hasText('CONTENT', `${accordionItemBodyClass()} has correct content`);
@@ -59,7 +61,7 @@ module('Integration | Component | bs-accordion-item', function(hooks) {
5961
test('accordion items can be disabled', async function(assert) {
6062
let action = this.spy();
6163
this.actions.click = action;
62-
await render(hbs`{{#bs-accordion/item value=1 disabled=true onClick=(action "click") title="TITLE"}}CONTENT{{/bs-accordion/item}}`);
64+
await render(hbs`<BsAccordion::Item @value={{1}} @disabled={{true}} @onClick={{action "click"}} @title="TITLE">CONTENT</BsAccordion::Item>`);
6365
assert.dom(accordionItemClickableSelector()).hasClass('disabled', 'Clickable accordion selector has `.disabled` class');
6466
assert.dom(`.${accordionClassFor()}`).hasClass('disabled', 'entire item has `.disabled` class');
6567
await click(accordionItemClickableSelector());

0 commit comments

Comments
 (0)