Tips for testing views in ember.js using unit tests

Question

Tips for testing views in ember.js using unit tests

We are currently delving into the world of Ember.js. Our development process is completely test-driven, and we aim to apply the same methodology to Ember.js. Having prior experience in test-driven development with Backbone.js apps using Jasmine or Mocha/Chai, we are familiar with testing front-end code.

However, when it comes to testing views that contain a #linkTo statement in the template, we encountered some challenges. We have been searching for good examples and best practices for testing such scenarios. This gist represents our journey to uncover effective ways to unit-test Ember applications.

Upon examining the linkTo test in the Ember.js source code, we observed a complete setup of an Ember app to support #linkTo. This raises the question of whether we can simulate this behavior when testing a template.

How can tests be set up for ember views that include template renders?

Check out this gist containing our test cases, along with a template that will pass the test and another that will fail it.

view_spec.js.coffee

# Written with Mocha / Chai,
# Utilizing chai-jquery and chai-changes extensions

describe 'TodoItemsView', ->

  beforeEach ->
    testSerializer = DS.JSONSerializer.create
      primaryKey: -> 'id'

    TestAdapter = DS.Adapter.extend
      serializer: testSerializer
    TestStore = DS.Store.extend
      revision: 11
      adapter: TestAdapter.create()

    TodoItem = DS.Model.extend
      title: DS.attr('string')

    store = TestStore.create()
    @todoItem = store.createRecord TodoItem
      title: 'Do something'

    @controller = Em.ArrayController.create
      content: []

    @view = Em.View.create
      templateName: 'working_template'
      controller: @controller

    @controller.pushObject @todoItem

  afterEach ->
    @view.destroy()
    @controller.destroy()
    @todoItem.destroy()

  describe 'amount of todos', ->

    beforeEach ->
      # $('#konacha') serves as a div that is reset between each test
      Em.run => @view.appendTo '#konacha'

    it 'is displayed', ->
      $('#konacha .todos-count').should.have.text '1 things to do'

    it 'is dynamically updated', ->
      expect(=> $('#konacha .todos-count').text()).to.change.from('1 things to do').to('2 things to do').when =>
        Em.run =>
          extraTodoItem = store.createRecord TodoItem,
            title: 'More tasks'
          @controller.pushObject extraTodoItem

broken_template.handlebars

<div class="todos-count"><span class="todos">{{length}}</span> things to do</div>

{{#linkTo "index"}}Home{{/linkTo}}

working_template.handlebars

<div class="todos-count"><span class="todos">{{length}}</span> things to do</div>

javascript unit-testing model-view-controller ember.js

Answer 1

Answer №1

Our approach has been to load the entire application, but focus on isolating our test subjects as much as we can. For instance,

describe('FooView', function() {
  beforeEach(function() {
    this.foo = Ember.Object.create();
    this.subject = App.FooView.create({ foo: this.foo });
    this.subject.append();
  });

  afterEach(function() {
    this.subject && this.subject.remove();
  });

  it("displays the favorite food of 'foo'", function() {
    this.foo.set('favoriteFood', 'sushi');
    Em.run.sync();
    expect( this.subject.$().text() ).toMatch( /sushi/ );
  });
});

In this setup, the router and other global components are accessible, so it's not a total isolation, but we can easily substitute doubles for elements that are closely related to the object being tested.

If there is a need to fully isolate the router, the linkTo helper references it as controller.router, which allows you to do something like this:

this.router = {
  generate: jasmine.createSpy(...)
};

this.subject = App.FooView.create({
  controller: { router: this.router },
  foo: this.foo
});

Answer 2

Our approach has been to load the entire application, but focus on isolating our test subjects as much as we can. For instance,

describe('FooView', function() {
  beforeEach(function() {
    this.foo = Ember.Object.create();
    this.subject = App.FooView.create({ foo: this.foo });
    this.subject.append();
  });

  afterEach(function() {
    this.subject && this.subject.remove();
  });

  it("displays the favorite food of 'foo'", function() {
    this.foo.set('favoriteFood', 'sushi');
    Em.run.sync();
    expect( this.subject.$().text() ).toMatch( /sushi/ );
  });
});

In this setup, the router and other global components are accessible, so it's not a total isolation, but we can easily substitute doubles for elements that are closely related to the object being tested.

If there is a need to fully isolate the router, the linkTo helper references it as controller.router, which allows you to do something like this:

this.router = {
  generate: jasmine.createSpy(...)
};

this.subject = App.FooView.create({
  controller: { router: this.router },
  foo: this.foo
});

Answer 3

Answer №2

To simplify testing, one approach is to create a mock for the linkTo helper and utilize it within a before block. This allows you to avoid dealing with the complexities associated with the actual linkTo function (such as routing) and instead concentrate on the view's content. Here's an example of how this can be implemented:

// Custom test helpers
TEST.createLinkToMock = function() {
    if (!TEST.originalLinkToHelper) {
        TEST.originalLinkToHelper = Ember.Handlebars.helpers['link-to'];
    }
    Ember.Handlebars.helpers['link-to'] = function(route) {
        var options = [].slice.call(arguments, -1)[0];
        return Ember.Handlebars.helpers.view.call(this, Em.View.extend({
            tagName: 'a',
            attributeBindings: ['href'],
            href: route
        }), options);
    };
};

TEST.restoreLinkToMock = function() {
    Ember.Handlebars.helpers['link-to'] = TEST.originalLinkToHelper;
    TEST.originalLinkToHelper = null;
};

// Sample test case for FooView
describe('FooView', function() {
    before(function() {
        TEST.createLinkToMock();
    });

    after(function() {
        TEST.restoreLinkToMock();
    });

    it('should display the favoriteFood property correctly', function() {
        var view = App.FooView.create({
            context: {
                foo: {
                    favoriteFood: 'sushi'
                }
            }
        });

        Em.run(function() {
            view.createElement();
        });

        expect(view.$().text()).to.contain('sushi');
    });
});

Answer 4

To simplify testing, one approach is to create a mock for the linkTo helper and utilize it within a before block. This allows you to avoid dealing with the complexities associated with the actual linkTo function (such as routing) and instead concentrate on the view's content. Here's an example of how this can be implemented:

// Custom test helpers
TEST.createLinkToMock = function() {
    if (!TEST.originalLinkToHelper) {
        TEST.originalLinkToHelper = Ember.Handlebars.helpers['link-to'];
    }
    Ember.Handlebars.helpers['link-to'] = function(route) {
        var options = [].slice.call(arguments, -1)[0];
        return Ember.Handlebars.helpers.view.call(this, Em.View.extend({
            tagName: 'a',
            attributeBindings: ['href'],
            href: route
        }), options);
    };
};

TEST.restoreLinkToMock = function() {
    Ember.Handlebars.helpers['link-to'] = TEST.originalLinkToHelper;
    TEST.originalLinkToHelper = null;
};

// Sample test case for FooView
describe('FooView', function() {
    before(function() {
        TEST.createLinkToMock();
    });

    after(function() {
        TEST.restoreLinkToMock();
    });

    it('should display the favoriteFood property correctly', function() {
        var view = App.FooView.create({
            context: {
                foo: {
                    favoriteFood: 'sushi'
                }
            }
        });

        Em.run(function() {
            view.createElement();
        });

        expect(view.$().text()).to.contain('sushi');
    });
});

Tips for testing views in ember.js using unit tests

Answer №1

Answer №2

Similar questions

Ways to clear TextField status

Swap out periods with commas in the content of Json Data

The Next.js API endpoint is struggling to process cross-domain POST requests

Is there a way for me to attach a link to a picture displayed in a lightbox that directs to an external ".html" file?

"Learn how to capture the complete URL and seamlessly transfer it to another JavaScript page using Node.js and Express.js

What is the best way to dynamically adjust the select option?

The jQuery method .on gathers and retains click events

The dropdown menu in AngularJS is unable to retrieve the selected index

At runtime, the array inexplicably becomes null

A guide to selecting the bookmark with a URL that is on a currently opened page

Utilizing Jquery for precise element placement and retrieving its position details

Working with XML files in Node.js

[Vue alert]: Issue with rendering: "TypeError: Unable to access property 'replace' of an undefined value"

Using DataTable with backend processing

Issue with highlighting when one string overlaps with another

What is the best way to eliminate or substitute Unicode Characters in Node.js 16?

Discovering the total number of tickets based on priority in an array with Javascript

Animate CSS during page load

Divider displayed between images in Internet Explorer 8

Parent window login portal