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

Utilize a variable within an HTML attribute

What is the best way to fulfill promises sequentially?

Spinning Global Lighting and Bouncing in three.js

Ways to isolate and limit the application of CSS in React and Gatsby to specific pages instead of having it affect the global scope

Refreshing the identification of a button

Seamlessly replacing an image in PixiJS without any sudden movement

Using jQuery to store the last selected href/button in a cookie for easy retrieval

Troubleshooting a Problem with JSON Array in JavaScript/jQuery - Understanding Undefined Values

The issue of Jquery ajax functionality not functioning properly within the Laravel 5.6 framework

Is there a way for me to retrieve the current value of a star rating when I click on it?

Using jQuery to clear a textarea when a select input is changed

Enhancing JSON data in Datatables with additional text

CSS Grid expands the item width on its own when there is still space left

Setting up an OnMouseOver event for each URL on a webpage

Vue select is causing the selected choice of another selector to be influenced

Only carry out a redirect to the specified page if the successRedirect is present in the passport.authenticate function

Encountering an error while configuring webpack with ReactJS: Unexpected token found while

Passing data through events from a parent component to a child component in Vue.js using the $emit method

Validating URL patterns in JavaScript using Ajax

The password-protected HTML blog remains hidden until the correct entry is entered into the password box, causing