Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[CLEANUP beta] Remove class-binding-and-class-name-bindings-in-templates #19708

Merged
merged 1 commit into from Aug 26, 2021
Merged

[CLEANUP beta] Remove class-binding-and-class-name-bindings-in-templates #19708

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
326 changes: 0 additions & 326 deletions packages/@ember/-internals/glimmer/tests/integration/components/class-bindings-test.js
View file
Open in desktop
Expand Up @@ -125,82 +125,6 @@ moduleFor(
});
}

['@test it can have class name bindings in the template']() {
expectDeprecation(
"Passing the `classNameBindings` property as an argument within templates has been deprecated. Instead, you can pass the class argument and use concatenation to produce the class value dynamically. ('-top-level' @ L1:C0) "
);

this.registerComponent('foo-bar', { template: 'hello' });

this.render(
'{{foo-bar classNameBindings="this.model.someInitiallyTrueProperty this.model.someInitiallyFalseProperty this.model.someInitiallyUndefinedProperty :static this.model.isBig:big this.model.isOpen:open:closed this.model.isUp::down this.model.bar:isTruthy:isFalsy"}}',
{
model: {
someInitiallyTrueProperty: true,
someInitiallyFalseProperty: false,
isBig: true,
isOpen: false,
isUp: true,
bar: true,
},
}
);

this.assertComponentElement(this.firstChild, {
attrs: {
class: classes('ember-view some-initially-true-property static big closed isTruthy'),
},
content: 'hello',
});

runTask(() => this.rerender());

this.assertComponentElement(this.firstChild, {
attrs: {
class: classes('ember-view some-initially-true-property static big closed isTruthy'),
},
content: 'hello',
});

runTask(() => {
set(this.context, 'model.someInitiallyTrueProperty', false);
set(this.context, 'model.someInitiallyFalseProperty', true);
set(this.context, 'model.someInitiallyUndefinedProperty', true);
set(this.context, 'model.isBig', false);
set(this.context, 'model.isOpen', true);
set(this.context, 'model.isUp', false);
set(this.context, 'model.bar', false);
});

this.assertComponentElement(this.firstChild, {
attrs: {
class: classes(
'ember-view some-initially-false-property some-initially-undefined-property static open down isFalsy'
),
},
content: 'hello',
});

runTask(() => {
set(this.context, 'model', {
someInitiallyTrueProperty: true,
someInitiallyFalseProperty: false,
someInitiallyUndefinedProperty: undefined,
isBig: true,
isOpen: false,
isUp: true,
bar: true,
});
});

this.assertComponentElement(this.firstChild, {
attrs: {
class: classes('ember-view some-initially-true-property static big closed isTruthy'),
},
content: 'hello',
});
}

['@test it can have class name bindings with nested paths']() {
let FooBarComponent = Component.extend({
classNameBindings: ['foo.bar', 'is.enabled:enabled', 'is.happy:happy:sad'],
Expand Down Expand Up @@ -346,47 +270,6 @@ moduleFor(
});
}

['@test const bindings can be set as attrs']() {
expectDeprecation(
"Passing the `classNameBindings` property as an argument within templates has been deprecated. Instead, you can pass the class argument and use concatenation to produce the class value dynamically. ('-top-level' @ L1:C0) "
);

this.registerComponent('foo-bar', { template: 'hello' });
this.render('{{foo-bar classNameBindings="this.foo:enabled:disabled"}}', {
foo: true,
});

this.assertComponentElement(this.firstChild, {
tagName: 'div',
attrs: { class: classes('ember-view enabled') },
content: 'hello',
});

runTask(() => this.rerender());

this.assertComponentElement(this.firstChild, {
tagName: 'div',
attrs: { class: classes('ember-view enabled') },
content: 'hello',
});

runTask(() => set(this.context, 'foo', false));

this.assertComponentElement(this.firstChild, {
tagName: 'div',
attrs: { class: classes('ember-view disabled') },
content: 'hello',
});

runTask(() => set(this.context, 'foo', true));

this.assertComponentElement(this.firstChild, {
tagName: 'div',
attrs: { class: classes('ember-view enabled') },
content: 'hello',
});
}

['@test :: class name syntax works with an empty true class']() {
let FooBarComponent = Component.extend({
classNameBindings: ['isEnabled::not-enabled'],
Expand Down Expand Up @@ -678,212 +561,3 @@ moduleFor(
}
}
);

moduleFor(
'ClassBinding integration',
class extends RenderingTestCase {
['@test it should apply classBinding without condition always']() {
expectDeprecation(
"Passing the `classBinding` property as an argument within templates has been deprecated. Instead, you can pass the class argument and use concatenation to produce the class value dynamically. ('-top-level' @ L1:C0) "
);

this.registerComponent('foo-bar', { template: 'hello' });

this.render('{{foo-bar classBinding=":foo"}}');

this.assertComponentElement(this.firstChild, {
tagName: 'div',
content: 'hello',
attrs: { class: classes('foo ember-view') },
});

runTask(() => this.rerender());

this.assertComponentElement(this.firstChild, {
tagName: 'div',
content: 'hello',
attrs: { class: classes('foo ember-view') },
});
}

['@test it should merge classBinding with class']() {
expectDeprecation(
"Passing the `classBinding` property as an argument within templates has been deprecated. Instead, you can pass the class argument and use concatenation to produce the class value dynamically. ('-top-level' @ L1:C0) "
);

this.registerComponent('foo-bar', { template: 'hello' });

this.render('{{foo-bar classBinding="this.birdman:respeck" class="myName"}}', {
birdman: true,
});

this.assertComponentElement(this.firstChild, {
tagName: 'div',
content: 'hello',
attrs: { class: classes('respeck myName ember-view') },
});

runTask(() => this.rerender());

this.assertComponentElement(this.firstChild, {
tagName: 'div',
content: 'hello',
attrs: { class: classes('respeck myName ember-view') },
});
}

['@test it should apply classBinding with only truthy condition']() {
expectDeprecation(
"Passing the `classBinding` property as an argument within templates has been deprecated. Instead, you can pass the class argument and use concatenation to produce the class value dynamically. ('-top-level' @ L1:C0) "
);

this.registerComponent('foo-bar', { template: 'hello' });

this.render('{{foo-bar classBinding="this.myName:respeck"}}', {
myName: true,
});

this.assertComponentElement(this.firstChild, {
tagName: 'div',
content: 'hello',
attrs: { class: classes('respeck ember-view') },
});

runTask(() => this.rerender());

this.assertComponentElement(this.firstChild, {
tagName: 'div',
content: 'hello',
attrs: { class: classes('respeck ember-view') },
});
}

['@test it should apply classBinding with only falsy condition']() {
expectDeprecation(
"Passing the `classBinding` property as an argument within templates has been deprecated. Instead, you can pass the class argument and use concatenation to produce the class value dynamically. ('-top-level' @ L1:C0) "
);

this.registerComponent('foo-bar', { template: 'hello' });

this.render('{{foo-bar classBinding="this.myName::shade"}}', {
myName: false,
});

this.assertComponentElement(this.firstChild, {
tagName: 'div',
content: 'hello',
attrs: { class: classes('shade ember-view') },
});

runTask(() => this.rerender());

this.assertComponentElement(this.firstChild, {
tagName: 'div',
content: 'hello',
attrs: { class: classes('shade ember-view') },
});
}

['@test it should apply nothing when classBinding is falsy but only supplies truthy class']() {
expectDeprecation(
"Passing the `classBinding` property as an argument within templates has been deprecated. Instead, you can pass the class argument and use concatenation to produce the class value dynamically. ('-top-level' @ L1:C0) "
);

this.registerComponent('foo-bar', { template: 'hello' });

this.render('{{foo-bar classBinding="this.myName:respeck"}}', {
myName: false,
});

this.assertComponentElement(this.firstChild, {
tagName: 'div',
content: 'hello',
attrs: { class: classes('ember-view') },
});

runTask(() => this.rerender());

this.assertComponentElement(this.firstChild, {
tagName: 'div',
content: 'hello',
attrs: { class: classes('ember-view') },
});
}

['@test it should apply nothing when classBinding is truthy but only supplies falsy class']() {
expectDeprecation(
"Passing the `classBinding` property as an argument within templates has been deprecated. Instead, you can pass the class argument and use concatenation to produce the class value dynamically. ('-top-level' @ L1:C0) "
);

this.registerComponent('foo-bar', { template: 'hello' });

this.render('{{foo-bar classBinding="this.myName::shade"}}', { myName: true });

this.assertComponentElement(this.firstChild, {
tagName: 'div',
content: 'hello',
attrs: { class: classes('ember-view') },
});

runTask(() => this.rerender());

this.assertComponentElement(this.firstChild, {
tagName: 'div',
content: 'hello',
attrs: { class: classes('ember-view') },
});
}

['@test it should apply classBinding with falsy condition']() {
expectDeprecation(
"Passing the `classBinding` property as an argument within templates has been deprecated. Instead, you can pass the class argument and use concatenation to produce the class value dynamically. ('-top-level' @ L1:C0) "
);

this.registerComponent('foo-bar', { template: 'hello' });

this.render('{{foo-bar classBinding="this.swag:fresh:scrub"}}', {
swag: false,
});

this.assertComponentElement(this.firstChild, {
tagName: 'div',
content: 'hello',
attrs: { class: classes('scrub ember-view') },
});

runTask(() => this.rerender());

this.assertComponentElement(this.firstChild, {
tagName: 'div',
content: 'hello',
attrs: { class: classes('scrub ember-view') },
});
}

['@test it should apply classBinding with truthy condition']() {
expectDeprecation(
"Passing the `classBinding` property as an argument within templates has been deprecated. Instead, you can pass the class argument and use concatenation to produce the class value dynamically. ('-top-level' @ L1:C0) "
);

this.registerComponent('foo-bar', { template: 'hello' });

this.render('{{foo-bar classBinding="this.swag:fresh:scrub"}}', {
swag: true,
});

this.assertComponentElement(this.firstChild, {
tagName: 'div',
content: 'hello',
attrs: { class: classes('fresh ember-view') },
});

runTask(() => this.rerender());

this.assertComponentElement(this.firstChild, {
tagName: 'div',
content: 'hello',
attrs: { class: classes('fresh ember-view') },
});
}
}
);