Doc: Testing

Testing

New Acceptance and Integration tests (setupRenderingTest/setupApplicationTest)

If you are using the integration tests proposed RFC #232 and the new acceptance tests proposed in RFC #268 (both available in ember-qunit 4.2.1 or greater, then you can import add import { t } from 'ember-i18n/test-support'; and use it in your tests.

Example:

import { module, test } from 'qunit';
import { render } from '@ember/test-helpers';
import { setupRenderingTest } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';
import { t } from 'ember-i18n/test-support';

module('Integration | my-component', function(hooks){
  setupRenderingTest(hooks);

  test('it has the right heading', async function(assert) {
    await render(hbs`{{my-component}}`);
    assert.equal(this.element.querySelector('#heading').textContent, t('loc.headings.my-section'));
  });
});

You might want to take a look to QUnit Dom, to make assertions more readable:

  // ...

  test('it has the right heading', async function(assert) {
    await render(hbs`{{my-component}}`);
    assert.dom('#heading').hasText(t('loc.headings.my-section'));
  });

Old Acceptance Tests

Ember-I18n should work just fine with tests that call startApp.

The library provides some test helpers that you can use in acceptance tests. start-app is a good place to import the helpers:

// tests/helpers/start-app.js
import './ember-i18n/test-helpers';

Then you can use the t and expectTranslation helpers in your tests:

test('can write a blog post', function(assert) {
  visit('/posts/new');

  andThen(function() {
    expectTranslation('.header', 'blogPost.create');
  });

  fillIn(t('blogPost.title'), '37 Cheeses You Will Love');
});

Integration Tests

When testing components that rely on translated content, the recommended approach is to use an integration-style component test:

moduleForComponent("my-component", "MyComponent", {
  integration: true,

  beforeEach: function() {
    this.set('foo', 'bar');
    this.render('{{#my-component}}{{t "some.foo" foo=bar}}{{/my-component}}');
  }
});

These tests don't run initializers, though, so there are two things you may have to do to get such a test working:

1. set i18n.locale
2. register the t helper

// choose one:
import tHelper from "ember-i18n/legacy-helper"; // Ember 1.12
import tHelper from "ember-i18n/helper"; // Ember 1.13+

moduleForComponent('my-component', 'MyComponent', {
  beforeEach() {
    // set the locale:
    Ember.getOwner(this).lookup('service:i18n').set('locale', 'xy');

    // register the helper:
    this.register('helper:t', tHelper);
  }
});

If using Ember 1.13+, another option is to run the initializer rather than registering the helper:

import initializer from "my-app/instance-initializers/ember-i18n";

module("foo", {
  integration: true,

  setup() {
    initializer.initialize(this);
  }
});

Unit Tests

Ember-I18n requires many things to be available in the Registry, which makes it difficult to use in unit tests. You would have to declare

import tHelper from 'ember-i18n/helper';
import localeConfig from 'ember-i18n/config/xy';

moduleForComponent('my-component', 'MyComponent', {
  needs: [
    'service:i18n',
    'locale:xy/translations',
    'locale:xy/config',
    'util:i18n/missing-message',
    'util:i18n/compile-template',
    'config:environment'
  ],
  beforeEach() {
    // set the locale and the config
    Ember.getOwner(this).lookup('service:i18n').set('locale', 'xy');
    this.register('locale:xy/config', localeConfig);
    
    // register t helper
    this.register('helper:t', tHelper);
  }
});

(This assumes you're testing in locale xy. For the most part, you'll probably want to test in your default locale.)

If you find yourself writing lots of unit tests that rely on ember-i18n and find a way to ease this pain, this project would welcome contributions!