Skip to content

Commit

Permalink
Merge pull request #19708 from nlfurniss/remove-class-binding-and-cla…
Browse files Browse the repository at this point in the history 
…ss-name-bindings-in-templates

[CLEANUP beta] Remove class-binding-and-class-name-bindings-in-templates
  • Loading branch information
@mixonic
mixonic authored Aug 26, 2021
2 parents 3729c2f + 793cfdd commit 72b3a5b
Show file tree
Hide file tree
Showing 4 changed files with 0 additions and 536 deletions.
326 changes: 0 additions & 326 deletions packages/@ember/-internals/glimmer/tests/integration/components/class-bindings-test.js
View file
Original file line number Diff line number Diff line change
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') },
});
}
}
);
Loading

0 comments on commit 72b3a5b

Please sign in to comment.