agonza40/ember-test-utils

A set of utilities to aid in testing components

ember-test-utils

Ember testing utilities.

Dependencies

Health

Security

• Installation
• [Getting Started](#Getting Started)
• Contributing

Installation

ember install ember-test-utils

Getting Started

ember-test-utils provides a set of utilities to help you in testing Ember modules. This library requires you use ember-cli-mocha and ember-mocha as your testing framework. It provides shortcuts for working with: setupComponentTest and setupComponent

setupComponentTest

Two shortcuts (integration, and unit) are provided to help transform

import {expect} from 'chai'
import {setupComponentTest} from 'ember-mocha'
import hbs from 'htmlbars-inline-precompile'
import {describe, it} from 'mocha'

describe('Integration: MyGreetingComponent', function () {
  setupComponentTest('my-greeting', {integration: true})
  it('renders', function () {
    this.set('name', 'John')
    this.render(hbs`{{my-greeting name=name}}`)
    expect(this.$()).to.have.length(1)
  })
})

into

import {expect} from 'chai'
import hbs from 'htmlbars-inline-precompile'
import {describe, it} from 'mocha'

import {integration} from 'dummy/tests/helpers/ember-test-utils/setup-component-test'

const test = integration('my-greeting')
describe(test.label, function () {
  test.setup()

  it('renders', function () {
    this.set('name', 'John')
    this.render(hbs`{{my-greeting name=name}}`)
    expect(this.$()).to.have.length(1)
  })
})

and

import {expect} from 'chai'
import {setupComponentTest} from 'ember-mocha'
import {describe, it} from 'mocha'

describe('Unit: MyGreetingComponent', function () {
  setupComponentTest('my-greeting', {
    needs: ['component:foo', 'helper:bar'],
    unit: true
  })

  it('renders', function () {
    // creates the component instance
    let component = this.subject()

    // renders the component on the page
    this.render()
    expect(component).not.to.equal(undefined)
    expect(this.$()).to.have.length(1)
  })
})

into

import {expect} from 'chai'
import {describe, it} from 'mocha'
import {unit} from 'dummy/tests/helpers/ember-test-utils/setup-component-test'

const test = unit('my-greeting', ['component:foo', 'helper:bar'])
  test.setup()

  it('renders', function () {
    // creates the component instance
    let component = this.subject()

    // renders the component on the page
    this.render()
    expect(component).not.to.equal(undefined)
    expect(this.$()).to.have.length(1)
  })
})

setupTest

Five shortcuts are provided (model, serializer, route, controller, and module).

model

The model helper allows you to turn this:

import {expect} from 'chai'
import {setupTest} from 'ember-mocha'
import {describe, it} from 'mocha'

describe('Unit: PersonModel', function () {
  setupModelTest('person', {
    unit: true,
    needs: ['model:company']
  })

  it('exists', function () {
    let model = this.subject()
    expect(model).not.to.equal(undefined)
  })
})

into

import {expect} from 'chai'
import {describe, it} from 'mocha'

import {model} from 'dummy/tests/helpers/ember-test-utils/setup-test'

const test = model('person', ['model:company'])
describe(test.label, function () {
  test.setup()

  it('exists', function () {
    let model = this.subject()
    expect(model).not.to.equal(undefined)
  })
})

serializer

The only difference between model and serializer is what the description of the test will end up being:

Unit / Model / model-name

vs.

Unit / Serializer / model-name

route

The route helper allows you to turn this:

import {expect} from 'chai'
import {setupTest} from 'ember-mocha'
import {describe, it} from 'mocha'

describe('DemoController', function () {
  setupTest('route:demo', {
    needs: ['controller:demo'],
    unit: true
  })
  // Replace this with your real tests.
  it('exists', function () {
    let route = this.subject()
    expect(route).not.to.equal(undefined)
  })
})

into

import {expect} from 'chai'
import {describe, it} from 'mocha'

import {route} from 'dummy/tests/helpers/ember-test-utils/setup-test'

const test = route('demo', ['controller:demo'])
describe(test.label, function () {
  test.setup()

  // Replace this with your real tests.
  it('exists', function () {
    let route = this.subject()
    expect(route).not.to.equal(undefined)
  })
})

controller

The controller helper allows you to turn this:

import {expect} from 'chai'
import {setupTest} from 'ember-mocha'
import {describe, it} from 'mocha'

describe('DemoController', function () {
  setupTest('controller:demo', {
    needs: ['controller:foo'],
    unit: true
  })
  // Replace this with your real tests.
  it('exists', function () {
    let controller = this.subject()
    expect(controller).not.to.equal(undefined)
  })
})

into

import {expect} from 'chai'
import {describe, it} from 'mocha'

import {controller} from 'dummy/tests/helpers/ember-test-utils/setup-test'

const test = controller('demo', ['controller:foo'])
describe(test.label, function () {
  test.setup()

  // Replace this with your real tests.
  it('exists', function () {
    let controller = this.subject()
    expect(controller).not.to.equal(undefined)
  })
})

module

The module helper is a catch-all to let you unit test any module, it allows you to turn this:

import {expect} from 'chai'
import {setupTest} from 'ember-mocha'
import {describe, it} from 'mocha'

describe('DemoController', function () {
  setupTest('controller:demo', {
    needs: ['controller:foo'],
    unit: true
  })
  // Replace this with your real tests.
  it('exists', function () {
    let controller = this.subject()
    expect(controller).not.to.equal(undefined)
  })
})

into

import {expect} from 'chai'
import {describe, it} from 'mocha'

import {module} from 'dummy/tests/helpers/ember-test-utils/setup-test'

const test = module('controller:demo', ['controller:foo'])
describe(test.label, function () {
  test.setup()

  // Replace this with your real tests.
  it('exists', function () {
    let controller = this.subject()
    expect(controller).not.to.equal(undefined)
  })
})

Build Optimization

Out of box having ember-test-utils in your project will make your vendor.js asset slightly larger, as of 2017-02-15 this increase in size is approximately 0.08 KB. If you want to keep this out of your build for certain environments you can add the following configuration to your package.json:

{
  "ember-test-utils": {
    "excludeFromEnvironments": ["production"]
  }
}

Custom Mocha Reporter

If you'd like to use the custom Mocha reporter provided by this addon then your testem.js file should look something like this:

var Reporter = require('ember-test-utils/reporter')

module.exports = {
  disable_watching: true,
  framework: 'mocha',
  launch_in_ci: [
    'Chrome'
  ],
  launch_in_dev: [
    'Chrome'
  ],
  reporter: new Reporter(),
  test_page: 'tests/index.html?hidepassed'
}

NOTE: This reporter will group test results into two sections: failed and passed. Each section is sorted from slowest test to fastest test so you can see which tests are causing your CI to come to a crawl.

Linting

All File Types

If you want to lint your Dockerfile's, templates, Javascript, Markdown, and SASS files you can simply run:

./node_modules/.bin/lint-all-the-things

or even better add the following script to your package.json:

{
  "scripts": {
    "lint": "lint-all-the-things"
  }
}

and run

npm run lint-all-the-things

Dockerfile

If you want to lint your template files you can simply run:

./node_modules/.bin/lint-docker

or even better add the following script to your package.json:

{
  "scripts": {
    "lint-docker": "lint-docker"
  }
}

and run

npm run lint-docker

Javascript

If you want to lint your Javascript files you can simply run:

./node_modules/.bin/lint-javascript

or even better add the following script to your package.json:

{
  "scripts": {
    "lint-js": "lint-javascript"
  }
}

and run

npm run lint-js

Markdown

If you want to lint your Markdown files you can simply run:

./node_modules/.bin/lint-markdown

or even better add the following script to your package.json:

{
  "scripts": {
    "lint-md": "lint-markdown"
  }
}

and run

npm run lint-md

Stylesheets (SASS)

If you want to lint your SASS files you can simply run:

./node_modules/.bin/lint-sass

or even better add the following script to your package.json:

{
  "scripts": {
    "lint-sass": "lint-sass"
  }
}

and run

npm run lint-hbs

Templates (HTMLBars)

If you want to lint your template files you can simply run:

./node_modules/.bin/lint-htmlbars

or even better add the following script to your package.json:

{
  "scripts": {
    "lint-hbs": "lint-htmlbars"
  }
}

and run

npm run lint-hbs

Contributing

This following outlines the details of collaborating on this Ember addon:

Installation

• git clone this repository
• npm install
• bower install

Running Tests

• npm test (Runs ember try:testall to test your addon against multiple Ember versions)
• ember test
• ember test --server

Building

• ember build

For more information on using ember-cli, visit http://www.ember-cli.com/.