EmberJS – Failed to execute ‘setAttribute’ on ‘Element’: ‘=’ is not a valid attribute name.

Hi

Just wanted to do a quick post about this error I got when developing an EmberJS Application and trying to test a component (via an Integration test). The following error occurred while running the test:

Error: Failed to execute 'setAttribute' on 'Element': '=' is not a valid attribute name.
    at Error (native)
    at DOMHelper.prototype.setAttribute (http://localhost:4200/assets/vendor.js:12027:13)
    at Object.buildFragment (http://localhost:4200/assets/weldnote.js:24465:13)
    at getCachedFragment (http://localhost:4200/assets/vendor.js:55321:29)
    at Function.RenderResult.build (http://localhost:4200/assets/vendor.js:55044:20)
    at render (http://localhost:4200/assets/vendor.js:55008:37)
    at http://localhost:4200/assets/vendor.js:55799:11
    at renderAndCleanup (http://localhost:4200/assets/vendor.js:55836:18)
    at Object.block [as default] (http://localhost:4200/assets/vendor.js:55797:9)
    at keywords.yield (http://localhost:4200/assets/vendor.js:54620:25)

I was trying to create an integration test for a component like the following (the default generated test, where I removed the block form assertion):

import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';

moduleForComponent('/w-powerselect', 'Integration | Component | w powerselect', {
  integration: true
});

test('it renders', function(assert) {
  assert.expect(1);

  // Set any properties with this.set('myProperty', 'value');
  // Handle any actions with this.on('myAction', function(val) { ... });

  this.render(hbs`{{w-powerselect}}`);

  assert.equal(this.$().text().trim(), '');
});

It was an error message I never seen before, but sure enough it was a simple problem. I had this in my component handlebars template:

<label data-test='label'=>{{label}}</label> 
{{#if canEdit}} 
  <div class="w-powerselect-addon"> 
  <div class='w-powerselect-field' data-test='select-container'>
Can you spot the error? Look closely at the ‘data-test=’label’=>‘. Somehow I left that second ‘=‘ (equal) sign there and it doesn’t make HTMLBars fail the compilation but at runtime it blows up with this weird error.
Happy coding!