Автоматизированные тесты — отличный способ защитить ваш код от будущих регрессий. Многие знакомы с тем, как это делается в нашем коде на Rails с помощью rspec, но JavaScript-часть может представлять собой некоторую загадку для некоторых.
К счастью, в наши дни добавить базовые тесты в ваш код Ember довольно просто!
Тесты компонентов
В предыдущем уроке из этой серии мы добавили компонент fancy-snack для отображения нашего снека с плавно затухающим фоном. Давайте напишем для него тест. Создайте следующий файл:
test/javascripts/components/snack-test.js
import componentTest from "helpers/component-test";
moduleForComponent("fancy-snack", { integration: true });
componentTest("test the rendering", {
template: "{{fancy-snack snack=testSnack}}",
setup() {
this.set("testSnack", {
name: "Potato Chips",
description: "Now with extra trans fat!",
});
},
test(assert) {
assert.equal(this.$(".fancy-snack-title h1").text(), "Potato Chips");
assert.equal(
this.$(".fancy-snack-description p").text(),
"Now with extra trans fat!"
);
},
});
Чтобы запустить тест, откройте ваш браузер на сервере разработки по адресу /qunit?module=component%3Afancy-snack. Затем ваш браузер выполнит тесты компонента и выведет что-то вроде «2 утверждения из 2 пройдено, 0 провалено».
Обратите внимание, что находясь на странице /qunit, вы можете запускать другие тесты. Вы можете просто выбрать новый тест из выпадающего списка Module в верхней части экрана.
Давайте разберем тест по шагам, чтобы понять, как он работает.
Строка template говорит Ember, как мы хотим вставить наш компонент. Это точно такой же разметочный код, который вы использовали бы для размещения компонента в шаблоне Handlebars, поэтому он должен быть вам знаком:
template: '{{fancy-snack snack=testSnack}}',
Обратите внимание, что через него передается testSnack в качестве параметра snack. Он определен в методе setup():
setup() {
this.set('testSnack', {
name: 'Potato Chips',
description: 'Now with extra trans fat!'
});
},
Я просто ввел некоторые тестовые данные. Это все, что нам нужно сделать, чтобы Ember отрисовал компонент. Наконец, у нас есть пара утверждений в методе test():
test(assert) {
assert.equal(this.$('.fancy-snack-title h1').text(), 'Potato Chips');
assert.equal(this.$('.fancy-snack-description p').text(), 'Now with extra trans fat!');
}
Если вы используете this.$(), вы получаете доступ к селектору jQuery в вашем шаблоне. Утверждения здесь используют этот селектор, чтобы получить значение заголовка снека и описания снека и сравнить их с ожидаемыми. Если значения совпадают, утверждения пройдут, и наш тест будет работать.
Стоит отметить, что вам не нужно тестировать каждую мелочь в компоненте таким образом. Вы должны проявлять осмотрительность и пытаться определить, что в вашем коде с большей вероятностью сломается или вызовет путаницу у других разработчиков в будущем. Если вы протестируете слишком много вещей в вашем шаблоне, это будет означать, что кому-то другому в будущем будет больно его менять. Просто начните с малого, тестируя самые очевидные вещи, и со временем вы освоитесь.
Приемо-сдаточные тесты
Приемо-сдаточные тесты часто проще писать, и они могут быть мощнее, чем тесты компонентов, поскольку они тестируют ваше приложение так же, как пользователь в своем браузере. Я часто начинаю с приемо-сдаточных тестов, а затем, если я создаю сложный компонент, я добавляю для него и тесты тоже.
Вот как мы можем написать приемо-сдаточный тест, который посетит наш маршрут /admin/snack и подтвердит, что снек был отрисован:
test/javascripts/acceptance/snack-test.js
import { acceptance } from "helpers/qunit-helpers";
acceptance("Snack");
test("Visit Page", function (assert) {
visit("/admin/snack");
andThen(() => {
assert.ok(exists(".fancy-snack-title"), "the snack title is present");
});
});
В данном случае test() почти читается как английский! Первая команда говорит: посетите URL /admin/snack. После этого есть метод andThen(). Этот метод необходим, чтобы убедиться, что вся фоновая работа завершена, прежде чем тесты продолжатся. Поскольку код Javascript и Ember является асинхронным, нам нужно убедиться, что Ember выполнил все, что ему нужно сделать, прежде чем будут выполнены наши утверждения. Наконец, он проверяет, присутствует ли элемент .fancy-snack-title.
Однако, если вы запустите этот тест, посетив /qunit?module=Acceptance%3A%20Snack, вы обнаружите, что тест не пройдет из-за ошибки AJAX.
Если вы помните, наш код включает как сторону Rails, так и сторону Javascript, которая выполнила AJAX-запрос для получения своих данных. Приемо-сдаточный тест выполнил сторону Javascript, но не знал, что делать, чтобы получить свои данные из Rails.
Чтобы исправить это, нам нужно добавить фиктивный ответ, используя отличную библиотеку pretender. Откройте файл test/javascripts/helpers/create-pretender.js и найдите строку, которая говорит:
this.get("/admin/plugins", () => response({ plugins: [] }));
Сразу под ней добавьте строку, чтобы вернуть фиктивный объект снека для работы нашего приемо-сдаточного теста:
this.get("/admin/snack.json", () => {
return response({ name: "snack name", description: "snack description" });
});
Вы можете прочитать вышеприведенный код как «для любого запроса к /admin/snack.json, отреагируйте следующим response».
Если вы обновите URL /qunit?module=Acceptance%3A%20Snack, ваш приемо-сдаточный тест должен получить свои данные через pretender, и тесты должны пройти.
Куда идти отсюда
Вы можете попробовать построить небольшую функцию и добавить тесты, чтобы убедиться, что она работает. Вы даже можете попробовать использовать TDD, создавая свои тесты до того, как напишете какой-либо код на фронтенде. В зависимости от того, над чем вы работаете, и ваших личных предпочтений, вы можете обнаружить, что это более приятный способ заниматься этим. Удачи и счастливой разработки 
Этот документ управляется версиями - предложите изменения на github.