Ember.js: Integration test with {{#link-to}} component does not emit href attribute

[theseyi]

Repro:
Twiddle

relevant bit:

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

  test('component rendering', async function(assert) {
    // commenting out the following line, test fails
    this.owner.lookup('route:photos.edit')._router.setupRouter(); <------

    await render(hbs`{{my-component}}`);

    assert.equal(this.element.querySelector('a').getAttribute('href'), '/photos/1?query=query', this.element.querySelector('a').getAttribute('href'))
  })
});

The above test will fail, .getAttribute('href') will return null if the line this.owner.lookup('route:photos.edit')._router.setupRouter() is not present. Given that, _router.setupRouter() seems like a private api, this is more a hack than an actual solution to the problem.

Is there a recommended approach to creating an integration test that references the href attribute on an anchor element created by an instance of link-to?

[pixelhandler]

@theseyi I believe that is the limitation of not having the router setup in the component tests.

Perhaps reach out on the forum or slack to see what others are doing to stub the routing behavior to confirm the href exists and to assert the value. https://www.emberjs.com/community/

[mupkoo]

I think what you are doing is ok and it is expected, as link-to is using the routes to generate the href. So if you want to test this behaviour, just setup the router as you did or just use the router:main object.

let router = this.owner.lookup('router:main');
router.setupRouter();

[theseyi]

@pixelhandler
Thanks for your response, I’ll see if the community has a solution. @mupkoo thanks, the solution works, but the issue is that _router is a private / internal api that could be changed at anytime

[mupkoo]

I do not think that the router class is private, just because it is under _router property for the Route classes, but I see your point.

In all cases, you are testing the generation of the URL when you are testing that the href is what you expect it to be, which is a concern of the router. If you would feel better mocking the router service, which is used by the link-to component, you can do that as well.

this.owner.register('service:router', Service.extend({
  transitionTo() { /* ... */ },
  urlFor() { /* ... */ }
}));

[rwjblue]

Yep, this is not a bug per-se (as it is intended behavior to not startup routing for these sorts of rendering tests).

The suggestions above seem reasonable (though I think I'd personally do this.owner.setupRouter() instead of having to lookup router:main first). We should have a separate discussion (please make an issue in the RFC's repo) about making ApplicationInstance.prototype.setupRouter and ApplicationInstance.prototype.setupRouting public APIs...