Модульное тестирование приложений Backbone.js

 describe("Todo List Item View", function() { beforeEach(function(){ this.todo = new todoApp.Todo({title: "Summary"}); this.item = new todoApp.TodoListItem({model: this.todo}); this.save_stub = sinon.stub(this.todo, "save"); }) afterEach(function() { this.save_stub.restore(); }) describe("Model Interaction", function() { it("should update model when checkbox clicked", function() { $("<div>").attr("id","fixture").css("display","none").appendTo("body"); this.item.render(); $("#fixture").append(this.item.$el); this.item.$el.find("input").click(); this.todo.get('complete').should.be.true; $("#fixture").remove(); }) }) }) 

Обратите внимание, что мы снова заглушаем метод todo save() . В противном случае Backbone попытается обновить несуществующее резервное хранилище, когда мы изменим статус задачи с помощью нашего имитированного клика.

Для самого теста мы начинаем с создания элемента <div> с id fixture и добавляем этот элемент в наш рабочий документ. Живым документом, в данном случае, является веб-страница, отображающая результаты наших тестов. Хотя мы удаляем элемент сразу после проверки контрольного примера, мы также устанавливаем его свойство display равным none чтобы оно не мешало отображению результатов теста Mocha. Код, который реализует эту функциональность, включает небольшое дополнение к модели todo. Дополнением является новый toggleStatus() .

 todoApp.Todo = Backbone.Model.extend({ defaults: { title: "", complete: false }, initialize: function() { this.on("change", function(){ this.save(); }); }, toggleStatus: function() { this.set("complete",!this.get("complete"")); } }) 

В представлении мы хотим отловить события нажатия на элементе <input> и вызвать этот метод для модели.

 todoApp.TodoListItem = Backbone.View.extend({ tagName: "li", template: _.template( "<label>" + "<input type='checkbox' <% if(complete) print('checked') %>/>" + " <%= title %> " + "</label>"), events: { "click input": "statusChanged" }, render: function() { this.$el.html(this.template(this.model.attributes)); return this; }, statusChanged: function() { this.model.toggleStatus(); } }) 

Тестирование коллекции

На данный момент наша заявка почти завершена. Единственная оставшаяся функциональность — собирать все задачи вместе. Естественно, мы будем использовать коллекцию Backbone. На самом деле мы не собираемся делать что-то особенное с нашей коллекцией, поэтому нам не нужны никакие юнит-тесты.

 todoApp.Todos = Backbone.Collection.extend({ model: todoApp.Todo, url: "api/todos" }) 

Однако мы можем проверить, что наша реализация представления коллекции является подходящей. Мы хотим, чтобы это представление отображалось как неупорядоченный список ( <ul> ). Тестовые случаи не требуют никакой функциональности, которую мы не видели раньше.

 describe("Todos List View", function() { beforeEach(function(){ this.todos = new todoApp.Todos([ {title: "Todo 1"}, {title: "Todo 2"} ]); this.list = new todoApp.TodosList({collection: this.todos}); }) it("render() should return the view object", function() { this.list.render().should.equal(this.list); }); it("should render as an unordered list", function() { this.list.render().el.nodeName.should.equal("UL"); }) it("should include list items for all models in collection", function() { this.list.render(); this.list.$el.find("li").should.have.length(2); }) }) 

Реализация представления также проста. Он отслеживает любые дополнения к коллекции и обновляет вид. Для начального render() он просто добавляет все модели в коллекцию по одной.

 todoApp.TodosList = Backbone.View.extend({ tagName: "ul", initialize: function() { this.collection.on("add", this.addOne, this); }, render: function() { this.addAll(); return this; }, addAll: function() { this.collection.each(this.addOne, this); }, addOne: function(todo) { var item = new todoApp.TodoListItem({model: todo}); this.$el.append(item.render().el); } }) 

Бонусные тесты: проверка API

Поскольку наш REST API полностью соответствует API, который ожидает Backbone, нам не требовался какой-либо специальный код для управления взаимодействием API. В результате нам не нужны какие-либо юнит-тесты. В реальном мире вам может быть не так повезло. Если ваш API не соответствует соглашениям Backbone, вам может потребоваться переопределить или расширить некоторый код Backbone для работы с нестандартным API. Этот дополнительный код также потребует модульных тестов. К счастью, тестировать взаимодействия API довольно легко даже в среде модульного тестирования.

Самый простой способ проверить взаимодействие API-интерфейса — использовать поддельные функции сервера Sinon.JS. К сожалению, эта функциональность доступна (в настоящее время) только в реализации браузера Sinon. Это явно исключено из реализации node.js. Есть несколько хаков, чтобы запустить его в node.js, но эти хаки довольно хрупкие и полагаются на внутренние детали реализации. Было бы лучше избегать их, если это возможно. К счастью, мы можем обойтись без поддельного сервера Синона.

Секрет в том, что Backbone использует функцию jQuery $.ajax() для реализации API REST. Мы можем перехватить взаимодействия API, заглушив эту функцию. Когда мы заглушаем функцию, мы хотим заменить наш собственный ответ. Метод yieldsTo() дает нам именно такую ​​возможность. Он сообщает sinon, какие дополнительные действия необходимо предпринять, когда вызывается заглушка. Вот полный тестовый пример, чтобы убедиться, что наша коллекция правильно инициализирует себя с помощью REST API.

 describe("Collection's Interaction with REST API", function() { it("should load using the API", function() { this.ajax_stub = sinon.stub($, "ajax").yieldsTo("success", [ { id: 1, title: "Mock Summary 1", complete: false }, { id: 2, title: "Mock Summary 2", complete: true } ]); this.todos = new todoApp.Todos(); this.todos.fetch(); this.todos.should.have.length(2); this.todos.at(0).get('title').should.equal("Mock Summary 1"); this.todos.at(1).get('title').should.equal("Mock Summary 2"); this.ajax_stub.restore(); }) }) 

Законченный!

Как видно из следующего снимка экрана, теперь мы написали код, который проходит все тестовые примеры. По крайней мере, на данный момент разработка завершена.

Тестирование во время интеграции

Теперь, когда разработка нашего приложения на стороне клиента завершена (и у нас есть тесты, чтобы это доказать), мы можем смело использовать наш JavaScript в системе управления исходным кодом. Затем его можно интегрировать в процесс сборки для всего приложения. В рамках этого процесса мы хотим выполнить все разработанные тесты. Это гарантирует, что код, составляющий окончательное развертывание, пройдет все тесты, которые мы определили. Это также защитит от «мелких изменений» в коде, которые непреднамеренно вносят новые ошибки.

В процессе сборки мы, скорее всего, захотим выполнять наши тесты из командной строки, а не из веб-браузера. Нам не нужны детали отдельных тестовых случаев, просто гарантия того, что они все пройдут. Node.js позволяет достаточно легко удовлетворить это требование. Нам нужно всего лишь сделать несколько небольших дополнений к нашему исходному коду и файлам кода модульного тестирования.

Наш код нуждается в этих модификациях, потому что node.js обрабатывает глобальные переменные иначе, чем веб-браузеры. В веб-браузере переменные JavaScript по умолчанию являются глобальными. Node.js, с другой стороны, ограничивает переменные локальным модулем по умолчанию. В этой среде наш код не сможет найти необходимые сторонние библиотеки (jQuery, Underscore и Backbone. Однако, если мы добавим следующие операторы в начале, node.js разрешит ссылки на эти библиотеки соответствующим образом Мы создали эти операторы так, чтобы они не причиняли вреда веб-браузеру, поэтому мы можем оставить их в коде навсегда.

 var jQuery = jQuery || require("jquery"); var _ = _ || require("underscore"); var Backbone = Backbone || require("backbone"); Backbone.$ = jQuery; 

Нам также нужно настроить наш тестовый код. Сценарии тестирования должны иметь доступ к своим собственным библиотекам (jQuery, Chai, Sinon.JS и sinon-chai). Кроме того, нам нужно добавить немного больше, чтобы имитировать объектную модель документа (DOM) веб-браузера. Напомним, что наши тесты для обработки кликов потребовали от нас временно добавить «крепление» <div> на веб-страницу. Node.js, конечно, обычно не имеет веб-страницы. Однако пакет узла jsdom позволяет нам эмулировать один. Код ниже создает минимальную, смоделированную веб-страницу для наших тестов.

 if (typeof exports !== 'undefined' && this.exports !== exports) { global.jQuery = require("jquery"); global.$ = jQuery; global.chai = require("chai"); global.sinon = require("sinon"); chai.use(require("sinon-chai")); global.jsdom = require("jsdom").jsdom; var doc = jsdom("<html><body></body></html>"); global.window = doc.createWindow(); } 

Условие, которое переносит эти операторы, проверяет, работаем ли мы в среде node.js вместо веб-браузера. В браузере дополнительные операторы не нужны, поэтому мы можем спокойно их пропустить.

С этими изменениями мы можем выполнить полный набор тестов из командной строки. Просто перейдите в корневую папку проекта и выполните команду mocha . Результат выглядит довольно знакомым.

Конечно, mocha возвращает уровень выхода, чтобы указать, прошли ли все тесты или нет. Это позволяет нам автоматизировать тесты в рамках непрерывного процесса интеграции или просто в качестве локального сценария предварительной фиксации, чтобы сохранить собственную работоспособность.

Вывод

На данный момент мы достигли наших целей. У нас есть среда модульных тестов, которая работает в фоновом режиме во время разработки и немедленно уведомляет нас, если любой тест не пройден. Тесты выполняются в веб-браузере, что дает нам полный доступ к инструментам разработки браузера во время написания кода. Те же тесты также одинаково хорошо запускаются из сценария командной строки, поэтому мы можем автоматизировать их выполнение в процессе сборки или интеграции.

Ресурсы

Вот основные ресурсы модульного тестирования, использованные в статье.

• Среда исполнения JavaScript командной строки: node.js
• Фреймворк для модульного тестирования JavaScript: Mocha
• Тестовая среда разработки: Test’em
• Библиотека подтверждений JavaScript: Библиотека утверждений Chai
• Шпионы, окурки и издевательства: Sinon.JS
• Дополнительные утверждения: Sinon.JS Утверждения для Чая