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

If you just want to check the href is ok, it could be better use setupRouter instead of startRouting. startRouting tries to handle the initial transition to the initial URL, and that could be problematic.

// tests/helpers/setup-router.js
export default function({ container }) {
const router = container.lookup('router:main');
   router.setupRouter();
}

https://github.com/emberjs/ember.js/blob/d487061228a966d8aac6fa94a8d69abfc3f1f257/packages/ember-routing/lib/system/router.js#L202

Answer 3

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');
  });
});

Answer 4

What version of Ember are you using? I remember seeing this previously and now it seems to work in my app (though I'm using 1.13.8).

Seems to be adding the href's in my application, and based on this computed property it should be bound to the view if the tagName is "a".

Other than upgrading Ember, it's probably best to create an ember-fiddle or repro and file a bug if it persists.

You may also want to take a look at https://github.com/intercom/ember-href-to.