CODEWITHSUNDEEP
ember.jsember-cliember-qunit
Chris
Chris

Reputation: 3164

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

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>

Upvotes: 2

Views: 802

Answers (2)

givanse
givanse

Reputation: 14943

The problem is that you are trying to do integration tests in a file that is meant to be doing unit tests. Read this: http://emberjs.com/guides/testing/

For an integration test you need to do something like this:

import Ember from 'ember';
import startApp from '../helpers/start-app';

var App, server;

module('My First Integration Test', {
  setup: function() {
    App = startApp();
  },
  teardown: function() {
    Ember.run(App, 'destroy');
    server.shutdown();
  }
});

test('test something', function() {
});

Depending on the versions of your libraries that code will need tweaking.

Upvotes: 0

Runthral
Runthral

Reputation: 432

I believe this is because when you are using the moduleForComponent helper you do not have your Ember App booted. The link-to helper requires the router, which wouldn't exist or be properly setup unless the app had actually booted (i.e. using the regular module helper and calling startApp() in the beforeEach block).

I am not sure of the best solution here... you could do a normal integration test for a route that uses this component, but that seems rather awkward.

Upvotes: 2

Related Questions