Предыдущий урок: Developing Discourse Plugins - Part 5 - Add an admin interface
Знаете ли вы, что в Discourse есть два крупных набора тестов для его кодовой базы? На стороне сервера наш код на Ruby имеет набор тестов, использующий rspec. Для браузерного приложения у нас есть набор тестов qunit, в который включен ember-testing.
Предполагая, что у вас настроена среда разработки, если вы перейдете по адресу http://localhost:3000/tests, в вашем браузере запустится набор тестов JavaScript. Одна из интересных особенностей заключается в том, что вы можете видеть, как тестируется приложение в миниатюрном окне в правом нижнем углу:
Приложение Discourse построено с использованием множества тестов, которые начнут выполняться при переходе по URL /tests. Поэтому может быть полезно отфильтровать тесты по плагину, над которым вы работаете. Это можно сделать в интерфейсе, нажав на выпадающий список Plugin (Плагин) и выбрав свой плагин:
Добавление приемочного теста в ваш плагин
Во-первых, убедитесь, что у вас установлена последняя версия Discourse. Возможность запускать приемочные тесты из плагинов — относительно новая функция, и если вы не обновитесь до последней версии, ваши тесты не будут отображаться.
В этой статье я напишу приемочный тест для плагина purple-tentacle, который мы создали в части 5 этой серии.
Добавление приемочного теста так же просто, как добавление одного файла в ваш плагин. Создайте следующий файл:
test/javascripts/acceptance/purple-tentacle-test.js
import { acceptance, exists } from "discourse/tests/helpers/qunit-helpers";
import { click, visit } from "@ember/test-helpers";
import { test } from "qunit";
acceptance("Purple Tentacle", function (needs) {
needs.settings({ purple_tentacle_enabled: true });
needs.user();
test("Purple tentacle button works", async function (assert) {
await visit("/admin/plugins/purple-tentacle");
assert.ok(exists("#show-tentacle"), "it shows the purple tentacle button");
assert.ok(!exists(".tentacle"), "the tentacle is not shown yet");
await click("#show-tentacle");
assert.ok(exists(".tentacle"), "the tentacle wants to rule the world!");
});
});
Я постарался написать тест так, чтобы он был понятным, но он может показаться немного запутанным, если вы раньше не писали приемочные тесты. Я настоятельно рекомендую вам прочитать документацию Ember по приемочному тестированию, так как там содержится много полезной информации.
В каждом написанном нами тесте нам нужно что-то assert (утверждать/проверять). В нашем тесте мы хотим сделать несколько проверок, чтобы убедиться, что щупальце изначально скрыто и появляется только после нажатия кнопки.
Мы хотим определить набор действий, которые должны быть выполнены перед проверкой. Для этого мы используем ключевое слово await. Используя это ключевое слово, мы ждем завершения выполнения каждого асинхронного вспомогательного метода.
Наше первое важное действие: await visit("/admin/plugins/purple-tentacle");. Это указывает нашему тесту перейти по этому URL в нашем приложении. Этот URL был тем, который отображал щупальце.
После перехода на страницу, где появляется кнопка фиолетового щупальца, мы хотим проверить, существует ли на странице кнопка и что изображение щупальца еще не существует.
Это делается с помощью следующих проверок:
assert.ok(exists("#show-tentacle"), "it shows the purple tentacle button");
assert.ok(!exists(".tentacle"), "the tentacle is not shown yet");
P.S. в предыдущей версии плагина purple-tentacle не было идентификатора элемента #show-tentacle в шаблоне handlebars. Проверьте последнюю версию, чтобы следовать инструкциям!
Как только эти тесты пройдут, пришло время протестировать взаимодействие.
Следующая команда — await click('#show-tentacle');, которая сообщает нашему фреймворку тестирования, что мы хотим нажать кнопку и показать щупальце.
После симуляции нажатия кнопки мы можем проверить, появляется ли щупальце, с помощью проверки:
assert.ok(exists(".tentacle"), "the tentacle wants to rule the world!");
Не так уж и плохо, правда? Вы можете попробовать тест самостоятельно, перейдя по адресу http://localhost:3000/tests?qunit_single_plugin=purple-tentacle&qunit_skip_core=1 на вашей машине разработки. Вы очень быстро увидите появление фиолетового щупальца, и все тесты пройдут.
Если вы хотите запустить тесты qunit плагина в командной строке с использованием PhantomJS, вы можете выполнить
rake plugin:qunit['purple-tentacle']
(где purple-tentacle — это имя папки вашего плагина)
Отладка ваших тестов
По мере написания плагинов ваши тесты могут помочь вам выявить проблемы в вашем плагине. При разработке тестов или при внесении изменений в код плагина тесты могут не пройти. Чтобы помочь понять причину, Ember предоставляет несколько полезных вспомогательных функций: pauseTest() и resumeTest().
Чтобы использовать их, добавьте await pauseTest() в код вашего теста в том месте, где вы хотите, чтобы тест приостановился. Теперь, когда вы запустите тест в браузере, он автоматически приостановится в точке, где вы добавили pauseTest(). Это даст вам возможность проверить страницу или просмотреть любые ошибки, чтобы помочь в отладке.
Куда двигаться дальше
Мне не нравится звучать как сломанная пластинка, но документация Ember по тестированию отличная. Вы также можете посмотреть, как Discourse тестирует различные функции, просмотрев тесты в нашем каталоге тестов JavaScript. Там есть довольно много примеров, из которых вы можете почерпнуть опыт.
Удачного тестирования!
Другие части серии
Часть 1: Основы плагинов
Часть 2: Точки расширения плагинов (Plugin Outlets)
Часть 3: Настройки сайта
Часть 4: Настройка git
Часть 5: Административные интерфейсы
Часть 6: Эта тема
Часть 7: Публикация вашего плагина
Этот документ находится под контролем версий — предложите изменения на github.
it is an Admin page
)