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.jsThis 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.