CODEWITHSUNDEEP
ember.jsember-cli
mobetta
mobetta

Reputation: 417

installing an Ember helper through add on then using it in a component breaks the tests

I'm installing the 'ember-moment' helper and then I'm using it in components. As soon as I do that, those components' tests break saying pretty much nothing:

not ok 120 PhantomJS 1.9 - StatusCardComponent: it renders
---
    actual: >
        null
    message: >
        Died on test #2     at http://localhost:7357/assets/test-support.js:2779
            at test (http://localhost:7357/assets/test-support.js:1796)
            at http://localhost:7357/assets/client.js:11190
            at http://localhost:7357/assets/vendor.js:150
            at tryFinally (http://localhost:7357/assets/vendor.js:30)
            at http://localhost:7357/assets/vendor.js:156
            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:40
            at http://localhost:7357/assets/test-support.js:5545: Assertion Failed: A helper named 'moment' could not be found
    Log: >
...

And here is the code of the test itself, it's just the auto generation:

import {
  moduleForComponent,
  test
} from 'ember-qunit';

moduleForComponent('event-card', {
  // Specify the other units that are required for this test
  // needs: ['component:foo', 'helper:bar']
});

test('it renders', function(assert) {
  assert.expect(2);

  // Creates the component instance
  var component = this.subject();
  assert.equal(component._state, 'preRender');

  // Renders the component to the page
  this.render();
  assert.equal(component._state, 'inDOM');
});

I tried a bunch of ways of adding this helper to the test as a dependency like needs: ['helper:moment'] and adding its initializer signature to the moduleForComponent function's params, but nothing worked and I can't find any information about it. Help is much appreciated.

Upvotes: 3

Views: 864

Answers (3)

IanVS
IanVS

Reputation: 3775

Edit: According to this PR, you should be able to specify { integration: true } to turn your existing unit test into an integration test, which eliminates the need for needs:. 

 moduleForComponent('post', { integration: true });

More background can be found here: https://github.com/rwjblue/ember-qunit/issues/108. Essentially, the integration flag disables the isolated container for the test, so that it has access to the app's resolver.

Note: Requires [email protected].

Old Answer: Take a look at this PR: https://github.com/switchfly/ember-test-helpers/pull/21 which adds moduleForIntegration. Here's the relavant bit:

This adds a new kind of test module that fills a gap in the current set of possible tests. So far we have:

• unit tests that are good for testing algorithmic correctness in isolation.

• acceptance tests that are good for testing within a complete application.

But we're missing the ability to integration test a unit smaller than whole-application. This PR adds a new TestModuleForIntegration that lets you drive an integration test with a template. I think this is often a more appropriate way to test Ember Components than a unit test, because interesting components tend to have rich dependence on other components.

You can see it in use in liquid-fire tests:

/* global sinon */
import Ember from "ember";
import moduleForIntegration from "../../helpers/module-for-integration";
import { test } from "ember-qunit";

moduleForIntegration('Integration: liquid-if');

test('it should render', function(assert) {
  this.set('person', 'Tom');
  this.render(`
    {{#liquid-if isReady}}
      {{person}} is ready
    {{else}}
      {{person}} is not ready
    {{/liquid-if}}
  `); // }}`)

  assert.equal(this.$().text().trim(), 'Tom is not ready');
  this.set('person', 'Yehuda');
  assert.equal(this.$().text().trim(), 'Yehuda is not ready');
  this.set('isReady', true);
  assert.equal(this.$().text().trim(), 'Yehuda is ready');
});

Upvotes: 2

mobetta
mobetta

Reputation: 417

So this is what ended up working:

import {
    moduleForComponent,
    test
} from 'ember-qunit';

import Ember from 'ember';

import { initialize } from '../../../../../initializers/ember-moment';

moduleForComponent('event-card', {
    // Specify the other units that are required for this test
    // needs: ['helper:moment'],
    setup: function (container) {
        Ember.run(function () {
            // these two arguments are not used
            // but probably still good to pass them in
            // in the event we leverage them in the future
            initialize(container);
        });
    }
});

test('it renders', function (assert) {
    assert.expect(2);

    // Creates the component instance
    var component = this.subject();
    assert.equal(component._state, 'preRender');

    // Renders the component to the page
    this.render();
    assert.equal(component._state, 'inDOM');
});

Upvotes: 2

StrangeLooper
StrangeLooper

Reputation: 549

Do you see that line that is commented out that reads: // needs: ['component:foo', 'helper:bar']

You need to uncomment it out and make it read:

needs: ['helper:moment']

That should help, if your moment helper is registered correctly

Upvotes: 0

Related Questions