Ember тестирование

Когда я начал играться с Ember.js почти год назад, тестирируемость оставляла желать лучшего . Вы могли использовать модульное тестирование объекта без каких-либо проблем , но модульный тест только один способ получить обратную связь , когда вы создаете программный продукт . В дополнение к юнит-тестам , я хотел проверить интеграцию различных компонентов . Так как большинство людей тестирующих насыщенных приложений JavaScript , я потянулся к матери всех инструментов тестирования, Selenium.


Теперь , прежде чем я колотить его , без надлежащего введения , стоит отметить, что Selenium является отличным способом , чтобы убедиться что всё веб-приложение работает с Full production , как c базой данных так и всех ваших development зависимостей и т.д. И с точки зрения обеспечения качества , Selenium может быть мощным инструментом для команды, нуждающихся end-to-end приемочные испытаний пользовательского интерфейса.


Но с течением времени, казалось бы, небольшие тесты построенные на Selenium могут превратить скорость вашей команды, в темпе улитки . Есть один простой способ , уменьшить эту боль , во первых избегайте разработку большого приложения . Если вы разрабатываете горсть мелких веб-приложений вместо одного большого, это может помочь держать вас на плаву немного дольше, because no individual build will crush the team, as you grow.


Но даже на небольшом проекте , реальная проблема с Selenium является то, что он не является частью процесса TDD . Когда я делаю red/ green/ refactor у меня нет времени для медленной обратной связи в любой форме . Мне нужен был способ, чтобы написать модуль и интеграционные тесты, которые обеспечат быструю обратную связь, чтобы помочь мне формировать программы которые я написал в более итерационным образом . Если вы используете версию Ember.js > = RC3 , вам повезло , потому что писать модульный тест является прогулкой по частям данной статьи .

7. Используем фикстуры

Теперь мы добавим фикстуры. Фикстуры - тестовые статические данные для тестирования нашего приложения, прежде чем подключать реальные данные.

Во-первых, отредактировать  js/application.js чтобы указать, что ApplicationAdapter вашего приложения является продолжением DS.FixtureAdapter. Адаптеры ответственные за поддержание связи с источником данных для вашего приложения. Как правило, это будет API веб-сервиса, но в данном случае мы используем адаптер, предназначенный для загрузки тестовых данных:

6. СОЗДАЕМ МОДЕЛЬ ДАННЫХ

Затем мы создадим класс модели для описания Todo элементов.

Создайте файл в js/model/todo.js а затем вставьте следующий код внутри:

Todos.Todo = DS.Model.extend({
 title: DS.attr('string'),
 isCompleted: DS.attr('boolean')
});

5. ДОБАВЛЯЕМ ПЕРВЫЙ МАРШРУТ И ШАБЛОН

Далее, мы создадим приложение Ember.js, маршрут ('/'), а также переконвертируем наш статический макет в Handlebars  шаблон.

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


Внутри js/application.js добавьте следующий код:

window.Todos = Ember.Application.create();

Это создаст новый экземпляр Ember.Application и сделать его доступным в качестве переменной имени Todos в JavaScript среде браузера.
Внутри JS / router.js добавьте следующий код:

Todos.Router.map(function() {
 this.resource('todos', { path: '/' });
});

4. ПОЛУЧЕНИЕ EMBER.JS ЗАВИСИМОСТЕЙ

TodoMVC имеет следующие зависимости:

jQuery
Handlebars
Ember.js 1.3
Ember Data 1.0 beta

Для этого примера, все эти ресурсы должны храниться в папке js/lib, расположенных в том же месте, index.html. Обновите index.html загрузить эти файлы, помещая теги <script> непосредственно перед закрытием </ BODY> тег в следующем порядке:

3. Создание статического макета

Перед добавлением любого кода, мы можем примерно набросать макет нашего приложения. В текстовом редакторе, создайте новый файл и назовите его index.html. Этот файл будет содержать HTML шаблоны нашего приложения и ссылки на дополнительные ресурсы изображения, стили и JavaScript.

Для начала, добавить следующий текст в index.html:

2. ПЛАНИРОВАНИЕ ПРОГРАММЫ

TodoMVC, несмотря на свои небольшие размеры, содержит большую часть поведения, типичных для современных приложений одной странице. Прежде чем продолжить, воспользоваться моментом, чтобы понять, как TodoMVC работает с точки зрения пользователя.

TodoMVC имеет следующие основные особенности:

1. Приступаем к работе

Добро пожаловать в Ember.js! Это руководство проведет вас через создание простого приложения с использованием Ember.js и кратко объяснит основные концепции. Это руководство предполагает, что вы уже знакомы с основными веб-технологий, таких как JavaScript, HTML, и CSS и развития технологий, таких как веб-инспектора браузера.

В этом руководстве мы будем проходить все этапы создания приложения TodoMVC.