Testing
In Ember.js
Acceptance
Integration
Unit
Acceptance
Unit
Integration
Testing Triangle
SPA Testing
Acceptance
Unit
Integration
SPA Testing
acceptance
component
helper
service
model / adapter / serializer /transform
route / controller
Ember.js Testing
ACCEPTANCE
tests in Ember.js
Mirage
Mock
Test Helpers
ember-simple-auth
Page
Object
ES8
import { describe, it, beforeEach, afterEach } from 'mocha';
import { expect } from 'chai';
import { before, after } from 'cl-app/tests/helpers/module-for-acceptance-authenticated';
import page from 'cl-app/tests/pages/mail-logs';
describe('Acceptance | mail logs', function() {
this.timeout(7000);
beforeEach(before);
afterEach(after);
it('/mail-logs works', async function() {
server.create('category', { name: 'office' });
server.create('company', { name: 'selleo inc.' });
server.createList('mailLog', 10);
await page.visit();
// LISTING
expect(currentURL()).to.equal('/mail-logs');
expect(page.mailLogCount).to.equal(10);
// ADD
await page.formNew()
.fillExternalNumber('200-212-123')
.selectCompany('selleo')
.selectCategory('office')
.submit();
expect(page.mailLogCount).to.equal(11);
expect(page.onMailLog(10).text).to.include('200-212-123');
expect(server.db.mailLogs[10].externalNumber).to.equal('200-212-123');
// EDIT
await page.onMailLog(1).click()
.formEdit()
.fillExternalNumber('300-323-234')
.submit();
expect(page.onMailLog(1).text).to.include('300-323-234');
expect(server.db.mailLogs[1].externalNumber).to.equal('300-323-234');
});
});
INTEGRATION
tests in Ember.js
import { expect } from 'chai';
import { describe, it } from 'mocha';
import { setupComponentTest } from 'ember-mocha';
import hbs from 'htmlbars-inline-precompile';
import moment from 'moment';
describe('Integration | Helper | time ago', function() {
setupComponentTest('time-ago', {
integration: true
});
it('renders', function() {
this.set('timeInPast', moment().substract(1, 'days'));
this.render(hbs`{{time-ago timeInPast}}`);
expect(this.$().text().trim()).to.equal('day ago');
});
});
Helper
import { expect } from 'chai';
import { describe, it } from 'mocha';
import { setupComponentTest } from 'ember-mocha';
import hbs from 'htmlbars-inline-precompile';
import moment from 'moment';
describe('Integration | Component | items form', function() {
setupComponentTest('items-form', {
integration: true,
});
it('renders', function() {
this.render(hbs`{{items-form}}`);
expect(this.$()).to.have.length(1);
});
it('it clean inputs after successfull submit', async function() {
startMirage(this.container);
this.render(hbs`{{items-form}}`);
fillIn('[data-test-item-name] input', 'A Special Patato Car');
await click('[data-test-item-submit]');
expect(find('[data-test-item-name] input').value).to.be.empty;
window.server.shutdown();
});
});
Component
UNIT
tests in Ember.js
import { expect } from 'chai';
import { describe, it } from 'mocha';
import { setupTest } from 'ember-mocha';
describe('Unit | Service | game', function() {
setupTest('service:game', {
needs: ['model:field']
});
it('move pone forward', function() {
let service = this.subject();
let [, [startField, , endField]] = service.fields;
service.move(startField, endField);
expect(startField.status).to.eq(0);
expect(endField.status).to.eq(1);
});
});
Service
import { expect } from 'chai';
import { describe, it } from 'mocha';
import { setupTest } from 'ember-mocha';
describe('Unit | Transform | money', function() {
setupTest('transform:money');
it('#deserialize', function() {
let transform = this.subject();
expect(transform.deserialize('20 uncja')).to
.eq({ value: 20, unit: 'uncja' });
});
it('#serialize', function() {
let transform = this.subject();
expect(transform.deserialize({ value: 20, unit: 'zł' }).to
.eq('20 zł'));
});
});
Model / Adapter / Serializer / Transform
import { describe, it } from 'mocha';
import { setupComponentTest } from 'ember-mocha';
describe('GravatarImageComponent', function() {
setupComponentTest('gravatar-image', {
// specify the other units that are required for this test
// needs: ['component:foo', 'helper:bar']
});
it('renders', function() {
// creates the component instance
var component = this.subject();
expect(component._state).to.equal('preRender');
// renders the component on the page
this.render();
expect(component._state).to.equal('inDOM');
});
});
Component
TOOLS
for testing in Ember.js
ember-cli-mirage ember-cli-mocha ember-cli-chai ember-cli-page-object
Ember.js Primer 6 meetings (12h)
-
Core Concepts of the Framework (how ember app works / files structure / configuration)
-
Tooling (ember-cli / ember inspector / ember-twiddle / addons ecosystem -> emberobserver.com & emberaddons.com/)
-
Ember Object ( observers / bindings / enumerables )
-
Templating & Helpers
-
Components (customization / actions / events / data down actions up / blocks / pod structure)
-
Computed Properties ( computed properties macros )
-
Route Handler & Controller (nesting routes / transitions / loading & error substates / query params )
-
Services (consuming / creating)
-
Utilities
-
Loading Data (ember data: model / fetching & saving / relationships / adapter / serializer / transform; from: jsonapi backend / firebase)
-
Testing (acceptance / integration / unit / switch to: mocha & chai use page object pattern, async & await )
-
Deployment (heroku / s3 / firebase - ember-cli-deploy)
Ember.js Ascend
x meetings (yh)
Testing JavaScript Apps
By Michał Czyż
Testing JavaScript Apps
from meetup workshop
- 1,185