Предыдущий урок: 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: Пункты выхода плагина
Часть 3: Настройки сайта
Часть 4: Настройка git
Часть 5: Административные интерфейсы
Часть 6: Эта тема
Часть 7: Публикация плагина
Этот документ управляется версиями - предложите изменения на github.
it is an Admin page
)