'@test class property on components can be dynamic'() {
this.registerComponent('foo-bar', { template: 'hello' });
this.render('<FooBar @class={{if fooBar "foo-bar"}} />', {
fooBar: true,
});
this.assertComponentElement(this.firstChild, {
content: 'hello',
attrs: { class: classes('ember-view foo-bar') },
});
runTask(() => this.rerender());
this.assertComponentElement(this.firstChild, {
content: 'hello',
attrs: { class: classes('ember-view foo-bar') },
});
runTask(() => set(this.context, 'fooBar', false));
this.assertComponentElement(this.firstChild, {
content: 'hello',
attrs: { class: classes('ember-view') },
});
runTask(() => set(this.context, 'fooBar', true));
this.assertComponentElement(this.firstChild, {
content: 'hello',
attrs: { class: classes('ember-view foo-bar') },
});
}
'@test it can have custom classNames'() {
let FooBarComponent = Component.extend({
classNames: ['foo', 'bar'],
});
this.registerComponent('foo-bar', {
ComponentClass: FooBarComponent,
template: 'hello',
});
this.render('<FooBar />');
this.assertComponentElement(this.firstChild, {
tagName: 'div',
attrs: { class: classes('ember-view foo bar') },
content: 'hello',
});
runTask(() => this.rerender());
this.assertComponentElement(this.firstChild, {
tagName: 'div',
attrs: { class: classes('ember-view foo bar') },
content: 'hello',
});
}
'@test merges trailing class attribute with `...attributes` in tagless component ("splattributes")'() {
let instance;
this.registerComponent('foo-bar', {
ComponentClass: Component.extend({
tagName: '',
init() {
instance = this;
this._super(...arguments);
this.localProp = 'qux';
},
}),
template: '<div ...attributes class={{localProp}}>hello</div>',
});
this.render('<FooBar class={{bar}} />', { bar: 'bar' });
this.assertElement(this.firstChild, {
tagName: 'div',
attrs: { class: classes('bar qux') },
content: 'hello',
});
runTask(() => this.rerender());
this.assertElement(this.firstChild, {
tagName: 'div',
attrs: { class: classes('bar qux') },
content: 'hello',
});
runTask(() => {
set(this.context, 'bar', undefined);
set(instance, 'localProp', 'QUZ');
});
this.assertElement(this.firstChild, {
tagName: 'div',
attrs: { class: classes('QUZ') },
content: 'hello',
});
runTask(() => {
set(this.context, 'bar', 'bar');
set(instance, 'localProp', 'qux');
});
this.assertElement(this.firstChild, {
tagName: 'div',
attrs: { class: classes('bar qux') },
content: 'hello',
});
}
['@test `willRender` can set before render (GH#14458)']() {
let ComponentClass = Component.extend({
tagName: 'a',
customHref: 'http://google.com',
attributeBindings: ['customHref:href'],
willRender() {
this.set('customHref', 'http://willRender.com');
},
});
let template = `Hello World`;
this.registerComponent('foo-bar', { ComponentClass, template });
this.render(`{{foo-bar id="foo"}}`);
this.assertElement(this.firstChild, {
tagName: 'a',
attrs: {
id: 'foo',
href: 'http://willRender.com',
class: classes('ember-view'),
},
});
}
return this.visit('/').then(() => {
this.assertComponentElement(this.firstChild, {
tagName: 'a',
attrs: { href: '/', class: classMatcher('ember-view active') },
content: 'Index',
});
});
['@test it has curly component features']() {
this.registerComponent('foo-bar', 'hello');
this.render('{{foo-bar tagName="p" class=class}}', {
class: 'foo bar',
});
this.assertComponentElement(this.firstChild, {
tagName: 'p',
attrs: { class: classes('foo bar ember-view') },
content: 'hello',
});
this.assertStableRerender();
runTask(() => this.context.set('class', 'foo'));
this.assertComponentElement(this.firstChild, {
tagName: 'p',
attrs: { class: classes('foo ember-view') },
content: 'hello',
});
runTask(() => this.context.set('class', null));
this.assertComponentElement(this.firstChild, {
tagName: 'p',
attrs: { class: classes('ember-view') },
content: 'hello',
});
runTask(() => this.context.set('class', 'foo bar'));
this.assertComponentElement(this.firstChild, {
tagName: 'p',
attrs: { class: classes('foo bar ember-view') },
content: 'hello',
});
}
'@test merges trailing class attribute with `...attributes` in yielded contextual component ("splattributes")'() {
this.registerComponent('foo-bar', {
ComponentClass: Component.extend({ tagName: '' }),
template: '{{yield (hash baz=(component "foo-bar/baz"))}}',
});
this.registerComponent('foo-bar/baz', {
ComponentClass: Component.extend({ tagName: '' }),
template: '<div ...attributes class="default-class" >hello</div>',
});
this.render('<FooBar as |fb|><fb.baz class="custom-class" title="foo"></fb.baz></FooBar>');
this.assertElement(this.firstChild, {
tagName: 'div',
attrs: { class: classes('custom-class default-class'), title: 'foo' },
content: 'hello',
});
}
'@test it can set custom classNames from the invocation'() {
let FooBarComponent = Component.extend({
classNames: ['foo'],
});
this.registerComponent('foo-bar', {
ComponentClass: FooBarComponent,
template: 'hello',
});
this.render(strip`
<FooBar @class="bar baz" />
<FooBar @classNames="bar baz" />
<FooBar />
`);
this.assertComponentElement(this.nthChild(0), {
tagName: 'div',
attrs: { class: classes('ember-view foo bar baz') },
content: 'hello',
});
this.assertComponentElement(this.nthChild(1), {
tagName: 'div',
attrs: { class: classes('ember-view foo bar baz') },
content: 'hello',
});
this.assertComponentElement(this.nthChild(2), {
tagName: 'div',
attrs: { class: classes('ember-view foo') },
content: 'hello',
});
runTask(() => this.rerender());
this.assertComponentElement(this.nthChild(0), {
tagName: 'div',
attrs: { class: classes('ember-view foo bar baz') },
content: 'hello',
});
this.assertComponentElement(this.nthChild(1), {
tagName: 'div',
attrs: { class: classes('ember-view foo bar baz') },
content: 'hello',
});
this.assertComponentElement(this.nthChild(2), {
tagName: 'div',
attrs: { class: classes('ember-view foo') },
content: 'hello',
});
}