Service injection in component integration tests

I am following the guides for 2.0: Testing Components - Testing - Ember Guides

And have a component which looks like this:

let userSession = Ember.Object.create({
    language: "en",
    dateFormat: "YYYY-MM-DD",
    fullDateFormat: "YYYY-MM-DD"
});

moduleForComponent('/auction-list-item', 'Integration | Component | auction list item', {
    integration: true,

    beforeEach: function () {
        this.register('service:user-session', userSession);
        this.inject.service('user-session', { as: 'userSession' });
    }
});

However, I get the error this.register is not a function. Do I have to update anything to get this functionality, or am I missing something here?

1 Like

I’m not entirely sure, but I would make sure you’re on a newer version of ember-qunit as well.

Yes, this.register is only present on ember-qunit >= 0.4.13.

1 Like

OK, now the error is gone - maybe it would be good to note such dependencies in the guides?

However, altough the error is gone, this is still not working as expected.

I have my (shortened) test (in addition the the above code):

test('it renders', function (assert) {
    let auction = Ember.Object.create({
      // ...
    });

    console.log(this.get("userSession.fullDateFormat"));
    this.set("myAuction", auction);

    this.render(hbs`{{auction-list-item auction=myAuction}}`); 

    //...
});

My component is basically empty (the userSession-service is injected in a initializer into all components).

In my template I have (amongst other things):

{{log userSession}}

Now I get a console output of “YYYY-MM-DD” from the test, from which I gather that the service has been injected successfully, but the log in the template outputs “undefined”. Generally, it appears that the service is somehow not recognized by the component. I tried to add some observers to the component which watched the userSession and its properties, but none of them ever fired during the tests.

If you can isolate it and push a branch somewhere I can look at it.

Sure. I replicated the problem here: GitHub - mydea/ember-cli-example-app-for-github at integration-test-service-injection

There I have a simple component, where I inject a service and output a simple property. In my component integration test, I overwrite the service, but the output of the component is not actually changed.

@francesconovy I may be wrong, but It seems that because this refers to the container rendering the component, (not the component instance that gets rendered) the service is registered on the test container. Not sure if this is intentional or not, but seems to be expected behavior, as you have to explicitly pass any properties into your component when you render them for the component to recognize the value.

If you pass the service into the render statement, it will get the service instance you injected into the test container (this).

This was caused by another issue, which is already resolved in the latest version of ember-qunit!

Could you update the component setup? I have the same problem, almost the same injection and when I’m changing stub value the component template is not rerendered. I’m using ember-cli-qunit 1.0.3. @francesconovy

Same here… I’m using ember-cli-qunit 1.0.3 too and the injection doesnt work, and it ends up calling the actual service methods, not the stubbed one.