Delete that first test


by Ryan Toronto

When using Ember CLI's generators to create components we get test files for free.

➜  acme git:(master) ✗ ember generate component my-component
installing component
  create app/pods/components/my-component/component.js
  create app/pods/components/my-component/template.hbs
installing component-test
  create tests/integration/pods/components/my-component/component-test.js

This is nice because we don't have to manually create these files or write any of this boiler plate code.

test('it renders', function(assert) {

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

  this.render(hbs`{{my-component}}`);

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

  // Template block usage:
  this.render(hbs`
    {{#my-component}}
      template block text
    {{/my-component}}
  `);

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

However that default test is going to fail as soon as we add anything to the component. There's a temptation to refactor it and get it passing. In the past, I would refactor the default test to assert the component's class name was rendered.

// component.js
export default Ember.Component.extend({
  classNames: ['My-component']
});
// test.js
test('it renders', function(assert) {
  this.render(hbs`{{my-component}}`);
  assert.equal(this.$('.My-component').length, 1);
});

The thing is, this test adds no value while creating more work. I now have to open the component, add the class, and then rewrite the test to assert the class exists. Even if this only takes 30 seconds it's a waste of time since this test isn't telling me anything useful about my component.

Another issue is that if I move or rename the component, the test will fail. Renaming a component won't break its behavior, so why do I need to see a failing test?

These days I delete that first test, and only write tests for that component when I need to verify some specific behavior.

Questions?

Send us a tweet:

Or ask us in Inside EmberMap, our private Slack workspace for subscribers.