CODEWITHSUNDEEP
ember.jsintegration-testing
casafred
casafred

Reputation: 666

How to setup ember-intl service in Ember integration tests?

I have just begun adding ember-intl into an application for which I had working tests. My acceptance tests are still working, but my integration tests on components whose templates are using ember-intl for string translation are failing with:

"No locale defined. Unable to resolve translation:..."

In the ember-intl docs there is a section on Integration Testing, which seems to be out of date:

import hbs from 'htmlbars-inline-precompile';
import wait from 'ember-test-helpers/wait';
import { moduleForComponent, test } from 'ember-qunit';

let service;

moduleForComponent('x-product', 'XProductComponent', {
  integration: true,
  setup() {
    service = this.container.lookup('service:intl');
    service.setLocale('en-us');
  }
});

test('it renders', function(assert) {
  assert.expect(1);
  this.render(hbs`{{x-product price=price deadline=deadline}}`);
  this.set('price', 1000);
  this.set('deadline', new Date());
  let output = this.$().text();
  assert.ok(output);
});

test('it translates', function(assert) {
  assert.expect(1);

  /* waits for async behavior (loading translations on app boot) to settle */
  return wait().then(() => {
    assert.equal(service.t('some.key'), 'Hello world');
  });
});

I've looked in the Ember docs and I can see how to stub a service for testing, but not how to just load the service in a test and then work with it.

Upvotes: 0

Views: 1391

Answers (1)

casafred
casafred

Reputation: 666

Instead of using this.container, we now need to use this.owner in the new format tests. Here's a snippet of code showing how to use it in context:

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


module('Integration | Component | login-form', function(hooks) {
  setupRenderingTest(hooks);

  let service;

  hooks.beforeEach(function() {
     service = this.owner.lookup('service:intl');
     service.setLocale('en-us');
  });

  test('it renders', async function(assert) {
    await render(hbs`{{login-form}}`);

    assert.equal(find('[data-test-login-title]').textContent.trim(), 'Login');
  });
});

A PR has been submitted to ember-intl, so hopefully the docs will reflect the latest best-practice soon.

Upvotes: 3

Related Questions