Skip to content

Instantly share code, notes, and snippets.

@Bestra
Last active January 4, 2016 19:59
Show Gist options
  • Save Bestra/d60e2e995c3b8775fb4a to your computer and use it in GitHub Desktop.
Save Bestra/d60e2e995c3b8775fb4a to your computer and use it in GitHub Desktop.
Component Integration Test blog post snippets
export default Ember.Component.extend({
user: null,
actions: {
createVacation(startDate, endDate) {
this.store.createRecord('vacation', {user: this.get('user'), startDate, endDate});
}
}
});
<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>
import Ember from 'ember';
export default Ember.Route.extend({
model(params) {
return this.store.peekRecord('user', params.id);
}
});
<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>
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/));
});
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");
});
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();
});
import DS from 'ember-data';
export default DS.Model.extend({
firstName: DS.attr('string'),
lastName: DS.attr('string')
})
import Ember from 'ember'
export default Ember.Controller.extend({
auth: Ember.inject.service()
})
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});
}
}
});
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment