ember-animation / liquid-fire

Animations & transitions for ambitious Ember applications.
Other
1.14k stars 199 forks source link

Setting up unit tests for ember-cli apps #189

Open jrjohnson opened 9 years ago

jrjohnson commented 9 years ago

I have a component using liquid-if and I'm having trouble getting tests to run..I found some info on this in #171 and added javascript needs: ['helper:liquid-if', 'view:liquid-if'] 'view:liquid-if' being something new that was required compared to most handlebars components.

Which gives me the handlebars helper and its required view. However now i'm getting:

DetailObjectivesComponent: it renders
    ✘ Died on test #2     at http://localhost:7357/assets/test-support.js:952
        at test (http://localhost:7357/assets/test-support.js:110)
        at http://localhost:7357/assets/ilios.js:13494
        at http://localhost:7357/assets/vendor.js:79
        at http://localhost:7357/assets/test-loader.js:29
        at http://localhost:7357/assets/test-loader.js:21
        at http://localhost:7357/assets/test-loader.js:36
        at http://localhost:7357/assets/test-support.js:3711: 'undefined' is not an object (evaluating 'this.get('transitions').transitionFor')

I attempted to add the entire needs block from the liquid if unit test, but that doesn't remove this error. I'm pretty sure the error is caused by: https://github.com/ef4/liquid-fire/blob/master/app/views/liquid-outlet.js#L63 which implies a dependency needs to be injected. Can you provide some guidance for the right way to be setting up unit tests for components that contain liquid-if? Is there an initializer I need to be calling? Or another item to add to the needs[] array? Am I missing documentation that already has this info?

Thanks,

ef4 commented 9 years ago

We need to make this easier.

It's possible to hack together an isolated container that will work, but it leaves your tests highly dependent on internal dependencies in the library that you shouldn't need to worry about.

jrjohnson commented 9 years ago

OK, thanks. I will disable these tests for now.

Ember Moment requires an initializer to be called before test runs: https://github.com/stefanpenner/ember-moment/issues/15

It's not ideal, but it works and may be a pattern for you to work from.

SaladFork commented 9 years ago

I was unable to test any component that used a liquid helper even after adding helper:liquid-if and/or view:liquid-if to the needs array, due to errors.

Currently working around it by taking advantage of the fact the helpers have similar interfaces to the built-in helpers and using a pattern such as the following:

moduleForComponent('foo-bar', {
    needs: ['helper:if'],
    beforeEach: function () {
        var ifHelper = this.container.lookup('helper:if');
        this.container.register('helper:liquid-if', ifHelper);
    },
    afterEach: function () {
        this.container.unregister('helper:liquid-if');
    }
});

As long as swapping between the liquid- helpers and the built-in ones shouldn't affect your application behavior, I'd think the tests would still be valid.

ef4 commented 9 years ago

There is a PR on ember-test-helpers that will make it easier to do this kind of test.

The TL;DR is that if you're expecting your test to invoke other helpers and components, you don't really want a unit test, you want an integration test. But up until now Ember didn't really give a good way to do integration tests of things smaller than a whole app.

I'm already using this test pattern internally in the latest liquid-fire master tests, see for example https://github.com/ef4/liquid-fire/blob/5ee0bf23608e8ea32b162cdc434e12f2a6e8441d/tests/integration/helpers/liquid-if-test.js#L6-L23.