Each test following the moduleForComponent call has access to the render()
function, which lets us create a new instance of the component by declaring
the component in template syntax, as we would in our application.

We can test that changing the component's name property updates the
component's style attribute and is reflected in the rendered HTML:

Here's an example test that asserts that the specified externalAction function
is invoked when the component's internal submitComment action is triggered by making use
of a test double (dummy function):

test('should trigger external action on form submit', function(assert) {
// test double for the external action
this.set('externalAction', (attributes) => assert.deepEqual(attributes, { comment: 'You are not a wizard!' }, 'submitted input value gets passed to external action'));
this.render(hbs`{{comment-form submitComment=(action externalAction)}}`);
// fill out the form and force an onchange
this.$('textarea').val('You are not a wizard!');
this.$('textarea').change();
// click the button to submit the form
this.$('input').click();
});

Stubbing Services

In cases where components have dependencies on Ember services, it is possible to stub these
dependencies for integration tests. Stub Ember services by using the built-in register
function to register your stub service in place of the default.

Imagine you have the following component that uses a location service to display the city
and country of your current location:

You can follow along by generating your own component with ember generate
component location-indicator.

To stub the location service in your test, create a local stub object that extends
Ember.Service, and register the stub as the service your tests need in the
beforeEach function. In this case we initially force location to New York.