Component test Ember-CLI with {{link-to}} helpers

1

I have what I believe to be are 3 very simple tests.

  1. Check a component renders property (Ember-CLI automatically generates this)

  2. Click a class which navigates to the ‘user.index’ route (it’s a {{link-to}})

  3. Click a class which navigates to the ‘brands.index’ route (it’s a {{link-to}})

I can confirm the routes are accessible when I click them in the browser, however, the tests are failing. The ‘brands.index’ test keeps expecting ‘users.index’ despite specifying that the ‘brands-link’ is clicked.

Any help would be greatly appreciated!

The tests are as follows:

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

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

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

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

  // appends the component to the page
  this.append();
  equal(component._state, 'inDOM');
});

test('it can navigate to users', function () {
  expect(3);

  var component = this.subject();
  equal(component._state, 'preRender');

  this.append();
  equal(component._state, 'inDOM');

  click('.users-link');

  andThen(function () {
    equal(currentRouteName(), 'users.index');
  });
});

test('it can navigate to brands', function () {
  expect(3);

  var component = this.subject();
  equal(component._state, 'preRender');

  this.append();
  equal(component._state, 'inDOM');

  click('.brands-link');

  andThen(function () {
    equal(currentRouteName(), 'brands.index');
  });
});

And the component template is:

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">
                <!--<img alt="Brand" src="...">-->
            </a>
        </div>
        <ul class="nav navbar-nav">
          {{#link-to 'users' tagName='li' classNames='users-link'}}<a href="#">Users</a>{{/link-to}}
          {{#link-to 'brands' tagName='li' classNames='brands-link'}}<a href="#">Brands</a>{{/link-to}}
        </ul>
    </div>
</nav>