Ember Testing Example with QUnit

Model, controller, view and integration tests for Ember.js. Uses QUnit this time.

HTML

<script src="https://s3.amazonaws.com/kiddsoftware-jsfiddle/handlebars-1.0.0-rc.3.js"></script>
<script src="https://s3.amazonaws.com/kiddsoftware-jsfiddle/ember-1.0.0-rc.2.js"></script>
<script src="https://s3.amazonaws.com/kiddsoftware-jsfiddle/ember-data-a29070da.js"></script>
<link rel="stylesheet" href="https://s3.amazonaws.com/kiddsoftware-jsfiddle/qunit-1.11.0.css">
<script src="https://s3.amazonaws.com/kiddsoftware-jsfiddle/qunit-1.11.0.js"></script>
<script src="https://s3.amazonaws.com/kiddsoftware-jsfiddle/sinon-1.6.0.js"></script>
<!-- Test output goes here. -->
<div id="qunit"></div>
<div id="qunit-fixture"></div>

JavaScript

module("App.Employee");
test("has a name", function () {
   
});


   
test("can give the employee a raise", function () {
    var oldSalary = this.model.get("salary");
    Ember.run(this, function () {
        this.controller.giveRaise();
    });
    equal(this.model.get("salary"), oldSalary * 1.1);
});

// Sample view test.

module("App.EmployeeView", {
    setup: function () {
        Ember.run(this, function () {
            var model = App.Employee.find(1);
            this.controller = App.EmployeeController.create({
                // We need a container to test views with linkTo.
                container: App.__container__,
                content: model
            });
            // If for some reason we want to isolate this, we can use
            // a sinon stub to intercept certain calls.
            sinon.stub(this.controller, "giveRaise");
            this.view = App.EmployeeView.create({
                controller: this.controller,
                context: this.controller
            });
            this.view.append(); // Hook up to our document.
        });
    },
    
    teardown: function () {
        Ember.run(this, function () {
            this.view.remove(); // Unhook from our document.
        });
    }
});
    
test("shows the employee's name", function () {
    equal(this.view.$("h2").text(), "Jane Q. Public");
    ok(this.view.$(".manages li").text().match(/John/));
});
    
test("has a button which gives the employee a raise", function () {
    this.view.$("button").click();
    ok(this.controller.giveRaise.calledOnce);
});

// Sample acceptance test.

module("Employee features");

test("give John's boss a raise", function () {
    $("a:contains('Show employees')").click();
    $("a:contains('John')").click();
    $(".managed-by a").click();
    equal($(".salary").text(), "$80000");
    $("button:contains('Give Raise')").click();
    equal($(".salary").text(), "$88000");
});