Ember Component Integration Tests: `link-to` href empty

Question

I'm trying to write a component integration test, a la this blog post, but my component has a link-to to a dynamic route and the href property isn't being filled in. Here is a simplified version of what I'm trying to do.

My component's template:

{{#link-to "myModel" model}}

And here is the relevant part of my test:

this.set('model', {
  id: 'myId',
  name: 'My Name'
});

this.render(hbs`
{{my-component model=model}}
`);

assert.equal(this.$('a').attr('href'), '/myModel/myId'); // fails

The link-to is rendered, just without an href attribute. If I log the HTML in the test, it looks like:

<a id="ember283" class="ember-view">My Name</a>

Is there something I need to do to my "model" to get the link-to to have an href? I tried to look at the tests for link-to in ember, and found this part of the tests, which is basically what I'm doing – provide a POJO with the id key set. Any ideas?

Edit:

DEBUG: -------------------------------
DEBUG: Ember      : 1.13.8
DEBUG: Ember Data : 1.13.10
DEBUG: jQuery     : 1.11.3
DEBUG: -------------------------------

Answer 1

Turns out you can just look up the router and tell it to start routing in your test setup and it will work. From this commit from @rwjblue:

// tests/helpers/setup-router.js

export default function({ container }) {
  const router = container.lookup('router:main');
  router.startRouting(true);
}


// tests/integration/components/my-component-test.js

import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';
import setupRouter from '../../helpers/setup-router';

moduleForComponent('my-component', 'Integration | Component | my component', {
  integration: true,
  setup() {
    setupRouter(this);
  }
});

Answer 2

Here's how to do it in Ember > 3

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

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

  test('it has a link', async function (assert) {
    this.owner.lookup('router:main').setupRouter();
    await render(hbs`{{my-component}}`);
    assert.equal(this.element.querySelector('a').getAttribute('href'), 'some-url');
  });
});