Component Integration Test blog post snippets

components_user_vacation-list_component.js

export default Ember.Component.extend({
  user: null,

  actions: {
    createVacation(startDate, endDate) {
      this.store.createRecord('vacation', {user: this.get('user'), startDate, endDate});
    }
  }
});

components_user_vacation-list_template.hbs

<div>
  <p>Vacation Time for {{user.fullName}}</p>

  {{#each user.vacations as |vacation|}}
    <div>
      {{vacation.length}} days, {{vacation.startDate}} - {{vacation.endDate}}
    </div>
  {{else}}
    No vacation scheduled
  {{/each}}

  <div>
    <h3> Create New Vacation </h3>
      {{input value=(readonly startVal)
              change=(action 'changeDate' 'startDate') }}
      to
      {{input value=(readonly endVal)
              change=(action 'changeDate' 'endDate') }}
  </div>
  <div>
      <button {{action (action attrs.create startDate endDate)}}> Create </button>
  </div>
</div>

simple_users_edit_route.js

import Ember from 'ember';

export default Ember.Route.extend({
  model(params) {
    return this.store.peekRecord('user', params.id);
  }
});

simple_users_edit_template.hbs

<div class="user-card">
  <p class="card-header">Details for {{model.userName}}</p>
  <div>
    <div> First Name: {{model.firstName}} </div>
    <div> Last Name: {{model.lastName}} </div>
  </div>
</div>

tests_component_01_rendering.js

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

moduleForComponent('user/vacation-list', 'Integration | Component | user/vacation list', {
  integration: true
});

test('it renders', function(assert) {
  // Set any properties with this.set('myProperty', 'value');
  // Handle any actions with this.on('myAction', function(val) { ... });" + EOL + EOL +

  let testUser = Ember.Object.create({
    fullName: "Bruce Wayne",
  });

  this.on('stubCreate', function() { return null; });
  this.set('userToTest', testUser);

  this.render(hbs`{{user/vacation-list user=userToTest create=(action 'stubCreate')}}`);

  let text = this.$().text();
  assert.ok(text.match(/Vacation Time for Bruce Wayne/));

});

tests_component_02_interacting.js

let userWithoutVacations = (container) => {
  const store = container.lookup('service:store');
  let testUser = Ember.run(() => {
    return store.createRecord('user', {
      firstName: "Bruce",
      lastName: "Wayne"
    });
  });
  return testUser;
};

let setDates = function(start, end) {
  this.$("[data-test-id='date-pickers'] input:first").val(start).change();
  this.$("[data-test-id='date-pickers'] input:last").val(end).change();
};

test('it updates the new vacation length', function(assert) {
  this.on('stubCreate', function() { return null; });
  this.set('userToTest', userWithoutVacations(this.container));

  this.render(hbs`{{user/vacation-list user=userToTest create=(action 'stubCreate')}}`);

  setDates.call(this, '2015-02-01', '2015-02-04');

  assert.equal(this.$("[data-test-id='vacation-length']").text(), "3");

});

tests_component_03_actions.js

test('the Create button invokes the "create" action with start and end date', function(assert) {
  assert.expect(2);
  this.on('stubCreate', function(start, end) {
    let fmt = 'YYYY-MM-DD';
    assert.equal(start.format(fmt), '2015-02-01');
    assert.equal(end.format(fmt), '2015-02-03');
  });

  this.set('userToTest', userWithoutVacations(this.container));

  this.render(hbs`{{user/vacation-list user=userToTest create=(action 'stubCreate')}}`);

  setDates.call(this, '2015-02-01', '2015-02-03');
  this.$('button:first').click();

});

user.js

import DS from 'ember-data';

export default DS.Model.extend({
  firstName: DS.attr('string'),
  lastName:  DS.attr('string')
})

users-show-controller.js

import Ember from 'ember'

export default Ember.Controller.extend({
  auth: Ember.inject.service()
})

users_edit_controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  auth: Ember.inject.service(),

  actions: {
    createVacation(user, startDate, endDate) {
      return this.store.createRecord('vacation', {user, startDate, endDate});
    }
  }
});

users_edit_template.hbs

<div class="user-card">
  <p class="card-header">Details for {{model.userName}}</p>
  <div>
    <div> First Name: {{model.firstName}} </div>
    <div> Last Name: {{model.lastName}} </div>
  </div>

  {{#if auth.canSeeVacations}}
    {{user/vacation-list create=(action 'createVacation' model) user=model}}
  {{/if}}
</div>