... can be unit tested using the moduleForComponent helper.
This helper will find the component by name (pretty-color) and its template (if
available).

moduleForComponent('pretty-color', {
// specify the other units that are required for this test
// needs: ['component:foo', 'helper:bar']
});

Now each test following the moduleForComponent call has a subject() function,
which aliases the create method on the component factory.

We can test to make sure that changing the component's color property updates
the rendered HTML:

test('changing colors', function(assert) {
// this.subject() is available because we used moduleForComponent
var component = this.subject();
// we wrap this with Ember.run because it is an async function
Ember.run(function() {
component.set('name','red');
});
// first call to $() renders the component.
assert.equal(this.$().attr('style'), 'color: red;');
// another async function, so we need to wrap it with Ember.run
Ember.run(function() {
component.set('name', 'green');
});
assert.equal(this.$().attr('style'), 'color: green;');
});

We might also test this component to ensure the template is being
rendered properly.

test('template is rendered with the color name', function(assert) {
// this.subject() is available because we used moduleForComponent
var component = this.subject();
// first call to $() renders the component.
assert.equal($.trim(this.$().text()), 'Pretty Color:');
// we wrap this with Ember.run because it is an async function
Ember.run(function() {
component.set('name', 'green');
});
assert.equal($.trim(this.$().text()), 'Pretty Color: green');
});

Interacting with Components in the DOM

Ember Components are a great way to create powerful, interactive, self-contained
custom HTML elements. Because of this, it is important to test the
component's methods and the user's interaction with the component.

Let's create a very simple component that simply sets its own
title when clicked. Run ember generate component my-foo and open the
component file: