A set of utilities to aid in testing components
JavaScript HTML Shell CSS
Clone or download
Latest commit 118d792 Jul 20, 2018
Permalink
Failed to load latest commit information.
.github Replace PullApprove with GitHub Code Owners Mar 16, 2018
.travis Update .travis/ scripts Mar 19, 2018
addon-test-support added mock-component helper, tests and documentation as well as clean… May 8, 2017
addon Move stuff around, and cleanup deprecated stuff Mar 3, 2017
cli Fixed tests that were failing due to .eslintignore Dec 28, 2017
config upgraded to EmberCLI_2-12-3 Jun 27, 2017
tests Fixed tests that were failing due to .eslintignore Dec 28, 2017
vendor First commit Mar 9, 2016
.bowerrc First commit Mar 9, 2016
.dockerfile-lint.json Use new linting in this repo: Feb 7, 2017
.editorconfig First commit Mar 9, 2016
.ember-cli First commit Mar 9, 2016
.eslintignore Fixed tests that were failing due to .eslintignore Dec 28, 2017
.eslintrc.js Update lint rules and fix lint errors Jul 5, 2017
.gitignore Added ability to use --fix with lint-all-the-things Dec 27, 2017
.npmignore revert change to .npmignore for .eslintrc Jun 27, 2017
.pr-bumper.json Upgrade pr-bumper Jul 5, 2017
.remarkignore ignore linting of CHANGELOG.md Dec 19, 2017
.remarkrc Closes ciena-blueplanet/ember-test-utils#55 May 9, 2017
.sass-lint.yml fix nesting depth Feb 7, 2017
.travis.yml fix-travis Jul 20, 2018
.watchmanconfig First commit Mar 9, 2016
CHANGELOG.md [pr-bumper] Automated version bump to 8.1.2 Jul 20, 2018
LICENSE.md First commit Mar 9, 2016
NOTES.md Tweak NOTES.md content Mar 12, 2018
README.md Update linting documentation Dec 28, 2017
bower.json cleanup repo May 5, 2017
dependency-snapshot.json Automated version bump Feb 10, 2017
ember-cli-build.js Remove ember-cli-mocha useLintTree configuration option Dec 28, 2017
index.js remove included hook from index.js Dec 11, 2017
package-lock.json [pr-bumper] Automated version bump to 8.1.2 Jul 20, 2018
package.json [pr-bumper] Automated version bump to 8.1.2 Jul 20, 2018
reporter.js Added ability to use --fix with lint-all-the-things Dec 27, 2017
testem.js upgraded to EmberCLI_2-12-3 Jun 27, 2017

README.md

ember-test-utils

Ember testing utilities.

Dependencies

Ember NPM

Health

Travis Coveralls

Security

bitHound

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:

Provided test helpers:

  • mockComponent - creates a mock component to easily test the component dependency injection pattern
  • stubService - allows you to stub a service

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 'ember-test-utils/test-support/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 'ember-test-utils/test-support/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

The following shortcuts are provided:

adapter

The adapter helper allows you to turn this:

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

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

into

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

import {adapter} from 'ember-test-utils/test-support/setup-test'

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

  // Replace this with your real tests.
  it('exists', function () {
    let adapter = this.subject()
    expect(adapter).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 'ember-test-utils/test-support/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)
  })
})

helper

The helper helper allows you to turn this:

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

describe('DemoHelper', function () {
  setupTest('helper:demo', {
    unit: true
  })
  // Replace this with your real tests.
  it('exists', function () {
    let helper = this.subject()
    expect(helper).not.to.equal(undefined)
  })
})

into

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

import {helper} from 'ember-test-utils/test-support/setup-test'

const test = helper('demo')
describe(test.label, function () {
  test.setup()

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

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 'ember-test-utils/test-support/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)
  })
})

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 'ember-test-utils/test-support/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)
  })
})

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 'ember-test-utils/test-support/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)
  })
})

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

service

The service helper allows you to turn this:

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

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

into

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

import {service} from 'ember-test-utils/test-support/setup-test'

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

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

mockComponent

A helper to allow easy testing of the component dependency injection pattern. This helper will create a mock component with the default name mock-component. The name can be set by passing a String <name> as the second parameter. The third parameter allows you to pass any properties into the component as an Object {classNames: 'my-classname'}. Credit goes to poteto for the initial implementation of this idea.

<h2>A component to demonstrate the mock component helper</h2>

{{#if injectComponent}}
  {{component injectComponent}}
{{/if}}
import {expect} from 'chai'
import {registerMockComponent, unregisterMockComponent} from 'ember-test-utils/test-support/mock-component'
import {integration} from 'ember-test-utils/test-support/setup-component-test'
import hbs from 'htmlbars-inline-precompile'
import {afterEach, beforeEach, describe, it} from 'mocha'

const test = integration('demo-component')
describe(test.label, function () {
  test.setup()

  beforeEach(function () {
    registerMockComponent(this)

    this.render(hbs`
      {{demo-component
        injectComponent=(component 'mock-component')
      }}
    `)
  })

  afterEach(function () {
    unregisterMockComponent(this)
  })

  it('should render the injectComponent with default name', function () {
    expect(this.$('dummy')).to.have.length(1)
  })
})

or with a user provided name and options: {}

import {expect} from 'chai'
import {registerMockComponent, unregisterMockComponent} from 'ember-test-utils/test-support/mock-component'
import {integration} from 'ember-test-utils/test-support/setup-component-test'
import hbs from 'htmlbars-inline-precompile'
import {afterEach, beforeEach, describe, it} from 'mocha'

const test = integration('demo-component')
describe(test.label, function () {
  test.setup()

  beforeEach(function () {
    registerMockComponent(this, 'mock-inject', {
      classNames: 'mock-inject',
      title: 'My Title',
      layout: hbs`
        <h1>{{title}}</h1>
      `
    })

    this.render(hbs`
      {{demo-component
        injectComponent=(component 'mock-inject')
      }}
    `)
  })

  afterEach(function () {
    unregisterMockComponent(this, 'mock-inject')
  })

  it('should render the injectComponent with provided layout', function () {
    expect(this.$('.mock-inject').text().trim()).to.equal('My Title')
  })
})

stubService

This helper will allow the easy creation of stubs for services. If a user wishes to stub the store the following methods are setup by default

import {expect} from 'chai'
import Ember from 'ember'
import {route} from 'ember-test-utils/test-support/setup-test'
import {stubService} from 'ember-test-utils/test-support/stub'
import {afterEach, beforeEach, describe, it} from 'mocha'
import sinon from 'sinon'

const test = route('demo', ['model:demo-user'])
describe(test.label, function () {
  test.setup()
  let route, sandbox, store
  beforeEach(function () {
    sandbox = sinon.sandbox.create()
    store = stubService(this, sandbox, 'store')
    route = this.subject()
  })

  afterEach(function () {
    sandbox.restore()
  })

  describe('model()', function () {
    let params
    describe('when you set some properties', function () {
      beforeEach(function () {
        params = {
          filter: '[name]=',
          'page[limit]': 20,
          'page[offset]': 0,
          sort: '-last-modified-time'
        }
        route.model(params)
      })

      it('should query for user record with username', function () {
        expect(store.queryRecord).to.have.been.calledWith('demo-user', {username: 'username@someuser.com'})
      })
    })
  })
})

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

Many eslint errors and warnings can be automatically fixed using the --fix command line argument. For example,

./node_modules/.bin/lint-all-the-things --fix
npm run lint-all-the-things -- --fix

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

If you would like any Javascript files to be ignored during linting simply create a .eslintignore file in the root of your project and populate it with one glob pattern per line.

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

If you would like any Markdown files to be ignored during linting simply create a .remarkignore file in the root of your project and populate it with one glob pattern per line.

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

By default the recommended ember-template-lint rules are enforced. If you would like to enable/disable other rules, you can do so by creating a .template-lintrc.js file in the root of your project per these instructions.

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/.