discourse-ember-source 3.5.1.1 → 3.5.1.2

data/dist/es/ember-glimmer/tests/integration/components/attribute-bindings-test.js

@@ -1,999 +0,0 @@
-import { moduleFor, RenderingTest } from '../../utils/test-case';
-import { Component } from '../../utils/helpers';
-import { strip } from '../../utils/abstract-test-case';
-import { set } from 'ember-metal';
-
-moduleFor(
-  'Attribute bindings integration',
-  class extends RenderingTest {
-    ['@test it can have attribute bindings']() {
-      let FooBarComponent = Component.extend({
-        attributeBindings: ['foo:data-foo', 'bar:data-bar'],
-      });
-
-      this.registerComponent('foo-bar', {
-        ComponentClass: FooBarComponent,
-        template: 'hello',
-      });
-
-      this.render('{{foo-bar foo=foo bar=bar}}', { foo: 'foo', bar: 'bar' });
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'div',
-        attrs: { 'data-foo': 'foo', 'data-bar': 'bar' },
-        content: 'hello',
-      });
-
-      this.runTask(() => this.rerender());
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'div',
-        attrs: { 'data-foo': 'foo', 'data-bar': 'bar' },
-        content: 'hello',
-      });
-
-      this.runTask(() => {
-        set(this.context, 'foo', 'FOO');
-        set(this.context, 'bar', undefined);
-      });
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'div',
-        attrs: { 'data-foo': 'FOO' },
-        content: 'hello',
-      });
-
-      this.runTask(() => {
-        set(this.context, 'foo', 'foo');
-        set(this.context, 'bar', 'bar');
-      });
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'div',
-        attrs: { 'data-foo': 'foo', 'data-bar': 'bar' },
-        content: 'hello',
-      });
-    }
-
-    ['@test it can have attribute bindings with attrs']() {
-      let FooBarComponent = Component.extend({
-        attributeBindings: ['attrs.foo:data-foo', 'attrs.baz.bar:data-bar'],
-      });
-
-      this.registerComponent('foo-bar', {
-        ComponentClass: FooBarComponent,
-        template: 'hello',
-      });
-
-      this.render('{{foo-bar foo=model.foo baz=model.baz}}', {
-        model: { foo: undefined, baz: { bar: 'bar' } },
-      });
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'div',
-        content: 'hello',
-        attrs: { 'data-bar': 'bar' },
-      });
-
-      this.runTask(() => this.rerender());
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'div',
-        content: 'hello',
-        attrs: { 'data-bar': 'bar' },
-      });
-
-      this.runTask(() => {
-        set(this.context, 'model.foo', 'foo');
-        set(this.context, 'model.baz.bar', undefined);
-      });
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'div',
-        attrs: { 'data-foo': 'foo' },
-        content: 'hello',
-      });
-
-      this.runTask(() =>
-        set(this.context, 'model', {
-          foo: undefined,
-          baz: { bar: 'bar' },
-        })
-      );
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'div',
-        content: 'hello',
-        attrs: { 'data-bar': 'bar' },
-      });
-    }
-
-    ['@test it can have attribute bindings with a nested path']() {
-      let FooBarComponent = Component.extend({
-        attributeBindings: ['foo.bar:data-foo-bar'],
-      });
-
-      this.registerComponent('foo-bar', {
-        ComponentClass: FooBarComponent,
-        template: 'hello',
-      });
-
-      this.render('{{foo-bar foo=foo}}', { foo: { bar: 'foo-bar' } });
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'div',
-        attrs: { 'data-foo-bar': 'foo-bar' },
-        content: 'hello',
-      });
-
-      this.runTask(() => this.rerender());
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'div',
-        attrs: { 'data-foo-bar': 'foo-bar' },
-        content: 'hello',
-      });
-
-      this.runTask(() => set(this.context, 'foo.bar', 'FOO-BAR'));
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'div',
-        attrs: { 'data-foo-bar': 'FOO-BAR' },
-        content: 'hello',
-      });
-
-      this.runTask(() => set(this.context, 'foo.bar', undefined));
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'div',
-        attrs: {},
-        content: 'hello',
-      });
-
-      this.runTask(() => set(this.context, 'foo', undefined));
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'div',
-        attrs: {},
-        content: 'hello',
-      });
-
-      this.runTask(() => set(this.context, 'foo', { bar: 'foo-bar' }));
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'div',
-        attrs: { 'data-foo-bar': 'foo-bar' },
-        content: 'hello',
-      });
-    }
-
-    ['@test handles non-microsyntax attributeBindings']() {
-      let FooBarComponent = Component.extend({
-        attributeBindings: ['type'],
-      });
-
-      this.registerComponent('foo-bar', {
-        ComponentClass: FooBarComponent,
-        template: 'hello',
-      });
-
-      this.render('{{foo-bar type=submit}}', {
-        submit: 'submit',
-      });
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'div',
-        attrs: { type: 'submit' },
-        content: 'hello',
-      });
-
-      this.runTask(() => this.rerender());
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'div',
-        attrs: { type: 'submit' },
-        content: 'hello',
-      });
-
-      this.runTask(() => set(this.context, 'submit', 'password'));
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'div',
-        attrs: { type: 'password' },
-        content: 'hello',
-      });
-
-      this.runTask(() => set(this.context, 'submit', null));
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'div',
-        attrs: {},
-        content: 'hello',
-      });
-
-      this.runTask(() => set(this.context, 'submit', 'submit'));
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'div',
-        attrs: { type: 'submit' },
-        content: 'hello',
-      });
-    }
-
-    ['@test non-microsyntax attributeBindings cannot contain nested paths']() {
-      let FooBarComponent = Component.extend({
-        attributeBindings: ['foo.bar'],
-      });
-
-      this.registerComponent('foo-bar', {
-        ComponentClass: FooBarComponent,
-        template: 'hello',
-      });
-
-      expectAssertion(() => {
-        this.render('{{foo-bar foo=foo}}', { foo: { bar: 'foo-bar' } });
-      }, /Illegal attributeBinding: 'foo.bar' is not a valid attribute name./);
-    }
-
-    ['@test normalizes attributeBindings for property names']() {
-      let FooBarComponent = Component.extend({
-        attributeBindings: ['tiTLe'],
-      });
-
-      this.registerComponent('foo-bar', {
-        ComponentClass: FooBarComponent,
-        template: 'hello',
-      });
-
-      this.render('{{foo-bar tiTLe=name}}', {
-        name: 'qux',
-      });
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'div',
-        attrs: { title: 'qux' },
-        content: 'hello',
-      });
-
-      this.assertStableRerender();
-
-      this.runTask(() => set(this.context, 'name', null));
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'div',
-        attrs: {},
-        content: 'hello',
-      });
-
-      this.runTask(() => set(this.context, 'name', 'qux'));
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'div',
-        attrs: { title: 'qux' },
-        content: 'hello',
-      });
-    }
-
-    ['@test normalizes attributeBindings for attribute names']() {
-      let FooBarComponent = Component.extend({
-        attributeBindings: ['foo:data-FOO'],
-      });
-
-      this.registerComponent('foo-bar', {
-        ComponentClass: FooBarComponent,
-        template: 'hello',
-      });
-
-      this.render('{{foo-bar foo=foo}}', {
-        foo: 'qux',
-      });
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'div',
-        attrs: { 'data-foo': 'qux' },
-        content: 'hello',
-      });
-
-      this.assertStableRerender();
-
-      this.runTask(() => set(this.context, 'foo', null));
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'div',
-        attrs: {},
-        content: 'hello',
-      });
-
-      this.runTask(() => set(this.context, 'foo', 'qux'));
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'div',
-        attrs: { 'data-foo': 'qux' },
-        content: 'hello',
-      });
-    }
-
-    ['@test  attributeBindings preserves case for mixed-case attributes']() {
-      let FooBarComponent = Component.extend({
-        tagName: 'svg',
-        attributeBindings: ['viewBox'],
-      });
-
-      this.registerComponent('foo-bar', {
-        ComponentClass: FooBarComponent,
-        template: '',
-      });
-
-      this.render('{{foo-bar viewBox=foo}}', {
-        foo: '0 0 100 100',
-      });
-
-      this.assert.equal(
-        this.firstChild.getAttribute('viewBox'),
-        '0 0 100 100',
-        'viewBox attribute'
-      );
-
-      this.assertStableRerender();
-
-      this.runTask(() => set(this.context, 'foo', null));
-
-      this.assert.ok(!this.firstChild.hasAttribute('viewBox'), 'viewBox attribute removed');
-
-      this.runTask(() => set(this.context, 'foo', '0 0 100 200'));
-
-      this.assert.equal(
-        this.firstChild.getAttribute('viewBox'),
-        '0 0 100 200',
-        'viewBox attribute'
-      );
-    }
-
-    ['@test attributeBindings handles null/undefined']() {
-      let FooBarComponent = Component.extend({
-        attributeBindings: ['fizz', 'bar'],
-      });
-
-      this.registerComponent('foo-bar', {
-        ComponentClass: FooBarComponent,
-        template: 'hello',
-      });
-
-      this.render('{{foo-bar fizz=fizz bar=bar}}', {
-        fizz: null,
-        bar: undefined,
-      });
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'div',
-        attrs: {},
-        content: 'hello',
-      });
-
-      this.runTask(() => this.rerender());
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'div',
-        attrs: {},
-        content: 'hello',
-      });
-
-      this.runTask(() => {
-        set(this.context, 'fizz', 'fizz');
-        set(this.context, 'bar', 'bar');
-      });
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'div',
-        attrs: { fizz: 'fizz', bar: 'bar' },
-        content: 'hello',
-      });
-
-      this.runTask(() => {
-        set(this.context, 'fizz', null);
-        set(this.context, 'bar', undefined);
-      });
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'div',
-        attrs: {},
-        content: 'hello',
-      });
-    }
-
-    ['@test attributeBindings handles number value']() {
-      let FooBarComponent = Component.extend({
-        attributeBindings: ['size'],
-      });
-
-      this.registerComponent('foo-bar', {
-        ComponentClass: FooBarComponent,
-        template: 'hello',
-      });
-
-      this.render('{{foo-bar size=size}}', {
-        size: 21,
-      });
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'div',
-        attrs: { size: '21' },
-        content: 'hello',
-      });
-
-      this.runTask(() => this.rerender());
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'div',
-        attrs: { size: '21' },
-        content: 'hello',
-      });
-
-      this.runTask(() => set(this.context, 'size', 0));
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'div',
-        attrs: { size: '0' },
-        content: 'hello',
-      });
-
-      this.runTask(() => set(this.context, 'size', 21));
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'div',
-        attrs: { size: '21' },
-        content: 'hello',
-      });
-    }
-
-    ['@test handles internal and external changes']() {
-      let component;
-      let FooBarComponent = Component.extend({
-        attributeBindings: ['type'],
-        type: 'password',
-        init() {
-          this._super(...arguments);
-          component = this;
-        },
-      });
-
-      this.registerComponent('foo-bar', {
-        ComponentClass: FooBarComponent,
-        template: 'hello',
-      });
-
-      this.render('{{foo-bar}}');
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'div',
-        attrs: { type: 'password' },
-        content: 'hello',
-      });
-
-      this.runTask(() => this.rerender());
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'div',
-        attrs: { type: 'password' },
-        content: 'hello',
-      });
-
-      this.runTask(() => set(component, 'type', 'checkbox'));
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'div',
-        attrs: { type: 'checkbox' },
-        content: 'hello',
-      });
-
-      this.runTask(() => set(component, 'type', 'password'));
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'div',
-        attrs: { type: 'password' },
-        content: 'hello',
-      });
-    }
-
-    ['@test can set attributeBindings on component with a different tagName']() {
-      let FooBarComponent = Component.extend({
-        tagName: 'input',
-        attributeBindings: ['type', 'isDisabled:disabled'],
-      });
-
-      this.registerComponent('foo-bar', { ComponentClass: FooBarComponent });
-
-      this.render('{{foo-bar type=type isDisabled=disabled}}', {
-        type: 'password',
-        disabled: false,
-      });
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'input',
-        attrs: { type: 'password' },
-      });
-
-      this.runTask(() => this.rerender());
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'input',
-        attrs: { type: 'password' },
-      });
-
-      this.runTask(() => {
-        set(this.context, 'type', 'checkbox');
-        set(this.context, 'disabled', true);
-      });
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'input',
-        attrs: { type: 'checkbox', disabled: '' },
-      });
-
-      this.runTask(() => {
-        set(this.context, 'type', 'password');
-        set(this.context, 'disabled', false);
-      });
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'input',
-        attrs: { type: 'password' },
-      });
-    }
-
-    ['@test should allow namespaced attributes in micro syntax']() {
-      let FooBarComponent = Component.extend({
-        attributeBindings: ['xlinkHref:xlink:href'],
-      });
-
-      this.registerComponent('foo-bar', { ComponentClass: FooBarComponent });
-
-      this.render('{{foo-bar type=type xlinkHref=xlinkHref}}', {
-        xlinkHref: '/foo.png',
-      });
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'div',
-        attrs: { 'xlink:href': '/foo.png' },
-      });
-
-      this.runTask(() => this.rerender());
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'div',
-        attrs: { 'xlink:href': '/foo.png' },
-      });
-
-      this.runTask(() => set(this.context, 'xlinkHref', '/lol.png'));
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'div',
-        attrs: { 'xlink:href': '/lol.png' },
-      });
-
-      this.runTask(() => set(this.context, 'xlinkHref', '/foo.png'));
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'div',
-        attrs: { 'xlink:href': '/foo.png' },
-      });
-    }
-
-    // This comes into play when using the {{#each}} helper. If the
-    // passed array item is a String, it will be converted into a
-    // String object instead of a normal string.
-    ['@test should allow for String objects']() {
-      let FooBarComponent = Component.extend({
-        attributeBindings: ['foo'],
-      });
-
-      this.registerComponent('foo-bar', { ComponentClass: FooBarComponent });
-
-      this.render('{{foo-bar foo=foo}}', {
-        foo: function() {
-          return this;
-        }.call('bar'),
-      });
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'div',
-        attrs: { foo: 'bar' },
-      });
-
-      this.runTask(() => this.rerender());
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'div',
-        attrs: { foo: 'bar' },
-      });
-
-      this.runTask(() =>
-        set(
-          this.context,
-          'foo',
-          function() {
-            return this;
-          }.call('baz')
-        )
-      );
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'div',
-        attrs: { foo: 'baz' },
-      });
-
-      this.runTask(() =>
-        set(
-          this.context,
-          'foo',
-          function() {
-            return this;
-          }.call('bar')
-        )
-      );
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'div',
-        attrs: { foo: 'bar' },
-      });
-    }
-
-    ['@test can set id initially via attributeBindings ']() {
-      let FooBarComponent = Component.extend({
-        attributeBindings: ['specialSauce:id'],
-      });
-
-      this.registerComponent('foo-bar', { ComponentClass: FooBarComponent });
-
-      this.render('{{foo-bar specialSauce=sauce}}', {
-        sauce: 'special-sauce',
-      });
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'div',
-        attrs: { id: 'special-sauce' },
-      });
-
-      this.runTask(() => this.rerender());
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'div',
-        attrs: { id: 'special-sauce' },
-      });
-
-      this.runTask(() => set(this.context, 'sauce', 'foo'));
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'div',
-        attrs: { id: 'special-sauce' },
-      });
-
-      this.runTask(() => set(this.context, 'sauce', 'special-sauce'));
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'div',
-        attrs: { id: 'special-sauce' },
-      });
-    }
-
-    ['@test attributeBindings are overwritten']() {
-      let FooBarComponent = Component.extend({
-        attributeBindings: ['href'],
-        href: 'a href',
-      });
-
-      let FizzBarComponent = FooBarComponent.extend({
-        attributeBindings: ['newHref:href'],
-      });
-
-      this.registerComponent('fizz-bar', { ComponentClass: FizzBarComponent });
-
-      this.render('{{fizz-bar newHref=href}}', {
-        href: 'dog.html',
-      });
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'div',
-        attrs: { href: 'dog.html' },
-      });
-
-      this.runTask(() => this.rerender());
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'div',
-        attrs: { href: 'dog.html' },
-      });
-
-      this.runTask(() => set(this.context, 'href', 'cat.html'));
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'div',
-        attrs: { href: 'cat.html' },
-      });
-    }
-
-    ['@test it can set attribute bindings in the constructor']() {
-      let FooBarComponent = Component.extend({
-        init() {
-          this._super();
-
-          let bindings = [];
-
-          if (this.get('hasFoo')) {
-            bindings.push('foo:data-foo');
-          }
-
-          if (this.get('hasBar')) {
-            bindings.push('bar:data-bar');
-          }
-
-          this.attributeBindings = bindings;
-        },
-      });
-
-      this.registerComponent('foo-bar', {
-        ComponentClass: FooBarComponent,
-        template: 'hello',
-      });
-
-      this.render(
-        strip`
-      {{foo-bar hasFoo=true foo=foo hasBar=false bar=bar}}
-      {{foo-bar hasFoo=false foo=foo hasBar=true bar=bar}}
-      {{foo-bar hasFoo=true foo=foo hasBar=true bar=bar}}
-      {{foo-bar hasFoo=false foo=foo hasBar=false bar=bar}}
-    `,
-        { foo: 'foo', bar: 'bar' }
-      );
-
-      this.assertComponentElement(this.nthChild(0), {
-        tagName: 'div',
-        attrs: { 'data-foo': 'foo' },
-        content: 'hello',
-      });
-      this.assertComponentElement(this.nthChild(1), {
-        tagName: 'div',
-        attrs: { 'data-bar': 'bar' },
-        content: 'hello',
-      });
-      this.assertComponentElement(this.nthChild(2), {
-        tagName: 'div',
-        attrs: { 'data-foo': 'foo', 'data-bar': 'bar' },
-        content: 'hello',
-      });
-      this.assertComponentElement(this.nthChild(3), {
-        tagName: 'div',
-        attrs: {},
-        content: 'hello',
-      });
-
-      this.runTask(() => this.rerender());
-
-      this.assertComponentElement(this.nthChild(0), {
-        tagName: 'div',
-        attrs: { 'data-foo': 'foo' },
-        content: 'hello',
-      });
-      this.assertComponentElement(this.nthChild(1), {
-        tagName: 'div',
-        attrs: { 'data-bar': 'bar' },
-        content: 'hello',
-      });
-      this.assertComponentElement(this.nthChild(2), {
-        tagName: 'div',
-        attrs: { 'data-foo': 'foo', 'data-bar': 'bar' },
-        content: 'hello',
-      });
-      this.assertComponentElement(this.nthChild(3), {
-        tagName: 'div',
-        attrs: {},
-        content: 'hello',
-      });
-
-      this.runTask(() => {
-        set(this.context, 'foo', 'FOO');
-        set(this.context, 'bar', undefined);
-      });
-
-      this.assertComponentElement(this.nthChild(0), {
-        tagName: 'div',
-        attrs: { 'data-foo': 'FOO' },
-        content: 'hello',
-      });
-      this.assertComponentElement(this.nthChild(1), {
-        tagName: 'div',
-        attrs: {},
-        content: 'hello',
-      });
-      this.assertComponentElement(this.nthChild(2), {
-        tagName: 'div',
-        attrs: { 'data-foo': 'FOO' },
-        content: 'hello',
-      });
-      this.assertComponentElement(this.nthChild(3), {
-        tagName: 'div',
-        attrs: {},
-        content: 'hello',
-      });
-
-      this.runTask(() => set(this.context, 'bar', 'BAR'));
-
-      this.assertComponentElement(this.nthChild(0), {
-        tagName: 'div',
-        attrs: { 'data-foo': 'FOO' },
-        content: 'hello',
-      });
-      this.assertComponentElement(this.nthChild(1), {
-        tagName: 'div',
-        attrs: { 'data-bar': 'BAR' },
-        content: 'hello',
-      });
-      this.assertComponentElement(this.nthChild(2), {
-        tagName: 'div',
-        attrs: { 'data-foo': 'FOO', 'data-bar': 'BAR' },
-        content: 'hello',
-      });
-      this.assertComponentElement(this.nthChild(3), {
-        tagName: 'div',
-        attrs: {},
-        content: 'hello',
-      });
-
-      this.runTask(() => {
-        set(this.context, 'foo', 'foo');
-        set(this.context, 'bar', 'bar');
-      });
-
-      this.assertComponentElement(this.nthChild(0), {
-        tagName: 'div',
-        attrs: { 'data-foo': 'foo' },
-        content: 'hello',
-      });
-      this.assertComponentElement(this.nthChild(1), {
-        tagName: 'div',
-        attrs: { 'data-bar': 'bar' },
-        content: 'hello',
-      });
-      this.assertComponentElement(this.nthChild(2), {
-        tagName: 'div',
-        attrs: { 'data-foo': 'foo', 'data-bar': 'bar' },
-        content: 'hello',
-      });
-      this.assertComponentElement(this.nthChild(3), {
-        tagName: 'div',
-        attrs: {},
-        content: 'hello',
-      });
-    }
-
-    ['@test it should not allow attributeBindings to be set']() {
-      this.registerComponent('foo-bar', { template: 'hello' });
-
-      expectAssertion(() => {
-        this.render('{{foo-bar attributeBindings="one two"}}');
-      }, /Setting 'attributeBindings' via template helpers is not allowed/);
-    }
-
-    ['@test asserts if an attributeBinding is setup on class']() {
-      let FooBarComponent = Component.extend({
-        attributeBindings: ['class'],
-      });
-
-      this.registerComponent('foo-bar', {
-        ComponentClass: FooBarComponent,
-        template: 'hello',
-      });
-
-      expectAssertion(() => {
-        this.render('{{foo-bar}}');
-      }, /You cannot use class as an attributeBinding, use classNameBindings instead./i);
-    }
-
-    ['@test blacklists href bindings based on protocol']() {
-      /* jshint scripturl:true */
-
-      let FooBarComponent = Component.extend({
-        tagName: 'a',
-        attributeBindings: ['href'],
-      });
-
-      this.registerComponent('foo-bar', {
-        ComponentClass: FooBarComponent,
-        template: 'hello',
-      });
-
-      this.render('{{foo-bar href=xss}}', {
-        xss: "javascript:alert('foo')",
-      });
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'a',
-        attrs: { href: "unsafe:javascript:alert('foo')" },
-      });
-    }
-
-    ['@test it can bind the role attribute (issue #14007)']() {
-      let FooBarComponent = Component.extend({ attributeBindings: ['role'] });
-
-      this.registerComponent('foo-bar', {
-        ComponentClass: FooBarComponent,
-        template: 'hello',
-      });
-
-      this.render('{{foo-bar role=role}}', { role: 'button' });
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'div',
-        attrs: { role: 'button' },
-      });
-
-      this.runTask(() => this.rerender());
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'div',
-        attrs: { role: 'button' },
-      });
-
-      this.runTask(() => set(this.context, 'role', 'combobox'));
-
-      this.assertComponentElement(this.firstChild, {
-        tagName: 'div',
-        attrs: { role: 'combobox' },
-      });
-
-      this.runTask(() => set(this.context, 'role', null));
-
-      this.assertComponentElement(this.firstChild, { tagName: 'div' });
-    }
-
-    ['@test component with an `id` attribute binding of undefined']() {
-      this.registerComponent('foo-bar', {
-        ComponentClass: Component.extend({
-          attributeBindings: ['id'],
-
-          id: undefined,
-        }),
-      });
-
-      this.registerComponent('baz-qux', {
-        ComponentClass: Component.extend({
-          attributeBindings: ['somethingUndefined:id'],
-
-          somethingUndefined: undefined,
-        }),
-      });
-      this.render(`{{foo-bar}}{{baz-qux}}`);
-
-      this.assertComponentElement(this.nthChild(0), { content: '' });
-      this.assertComponentElement(this.nthChild(1), { content: '' });
-
-      this.assert.ok(this.nthChild(0).id.match(/ember\d+/), 'a valid `id` was used');
-      this.assert.ok(this.nthChild(1).id.match(/ember\d+/), 'a valid `id` was used');
-    }
-
-    ['@test component with an `id` attribute binding of null']() {
-      this.registerComponent('foo-bar', {
-        ComponentClass: Component.extend({
-          attributeBindings: ['id'],
-
-          id: null,
-        }),
-      });
-
-      this.registerComponent('baz-qux', {
-        ComponentClass: Component.extend({
-          attributeBindings: ['somethingNull:id'],
-
-          somethingNull: null,
-        }),
-      });
-      this.render(`{{foo-bar}}{{baz-qux}}`);
-
-      this.assertComponentElement(this.nthChild(0), { content: '' });
-      this.assertComponentElement(this.nthChild(1), { content: '' });
-
-      this.assert.ok(this.nthChild(0).id.match(/ember\d+/), 'a valid `id` was used');
-      this.assert.ok(this.nthChild(1).id.match(/ember\d+/), 'a valid `id` was used');
-    }
-  }
-);