Who am I?

• Technical lead for the Ilios Project open source curriculum management system for health science education. (https://github.com/ilios/frontend)
• Author of the ember-noscript addon
• Minor contributor to:
  • ember-cli
  • ember-try
  • ember-cli-blanket
  • heroku-buildpack-ember-cli
  • coveralls javascript-test-reporter
• Working with ember for about a year
  • aka: I have no idea what sprout core is

What we will talk about?

• coverage (ember-cli-blanket)
• data fixtures (ember-cli-mirage)
• multiple browsers (ember-cli-sauce)
• future versions (ember-try)
• human testing (heroku deploy)

Our Personal Yak Shaver Ember CLI

$ ember new sandbox
version: 1.13.1
installing app
  ...
  create testem.json
  create tests/.jshintrc
  create tests/helpers/resolver.js
  create tests/helpers/start-app.js
  create tests/index.html
  create tests/test-helper.js
  create tests/unit/.gitkeep

Ember tests in the browser

$ember server

Always generate with ember-cli

$ ember generate component playground-sandbox
version: 1.13.1
installing component
  create app/components/playground-sandbox.js
  create app/templates/components/playground-sandbox.hbs
installing component-test
  create tests/integration/components/playground-sandbox-test.js

Congrats you now have a test!

Adding coverage as simple as...

$ember install ember-cli-blanket
$ember server

Generating statistics

$ember test
$cat coverage.json

{
  "coverage": {
    "total": {
      "statementsTotal": 46,
      "statementsCovered": 32,
      "percentage": 69.57
    },
    "files": [
      {
        "name": "playground/router",
        "statementsTotal": 5,
        "statementsCovered": 5,
        "percentage": 100
      },
      {
        "name": "playground/components/playground-sandbox",
        "statementsTotal": 3,
        "statementsCovered": 3,
        "percentage": 100
      },
    ]
  }

Data for tests

Test data is usually one of:

• Fixtures
• Factories
• Real Data

We use it in:

• Development
• Click around testing
• Acceptance Tests

A few of the things we've tried for data

• POJO's in Route::model()
• Ember-cli Mocks
• Pretender

and.....

Let mirage handle your data

$ember install ember-cli-mirage

• Sits on top of trek/pretender to organize test data
• Replaces custom express configuration created with ember generate mock
• Handles data for automated and manual testing through factories and fixtures
• Has an internal database concept that makes it easier to write portable data handers

Add data routes

Setup a route for each of your API endpoints

app/mirage/config.js

export default function() {
  this.get('/api/toys');
  this.get('/api/toys/:id');
  this.post('/api/toys');
  this.put('/api/toys/:id');
  this.del('/api/toys/:id');
}

Use factories to define data types

app/mirage/factories/tool.js

import Mirage, {faker} from 'ember-cli-mirage';
export default Mirage.Factory.extend({
  name: function(i) {
    return 'tool ' + i + '';
  },
  type: faker.list.random('Hammer', 'Wrench'),
  weight: faker.list.cycle(1, 8, 11, 42),
  color: faker.commerce.color,
});

Build data on demand

server becomes a global which we can call from acceptance tests

test('List all the tools', function() {
    //create a whole bunch of tools
    server.createList('tool', 10);
    //create a single tool overriding the factory properties
    server.create('tool', {
        name: 'green hammer',
        type: 'Hammer',
        color: 'green'
    });
    visit('/tools');
    andThen(function() {
        equal( find('.tool').length, 11 );
        equal( find('.tool').eq(10).text(), 'green hammer');
    });
});

Browser testing made convenient

$ember install ember-cli-sauce
$ember sauce --browser 'chrome'

$ember test --launch='Chrome40'
ok 1 Chrome 40.0 - JSHint - .: app.js
...
# tests 12
# pass  11
# fail  1
$ember sauce:disconnect

Testing for the future

$ember install ember-try
$ember try ember-beta serve

Sometimes you just need Dave

<div>
    <label>{{t "general.end"}}:</label>
    <div>{{inplace-date value=course.endDate save='changeStartDate'}}</div>
</div>

Deploy your app to heroku

$heroku create --buildpack https://github.com/tonycoco/heroku-buildpack-ember-cli.git
...
https://stormy-lake-4610.herokuapp.com/
$heroku config:set EMBER_ENV=development
$git push heroku master
#npm install; bower install; ember build --env=development

Heroku Review Apps (beta)