Предыдущее руководство: Developing Discourse Plugins - Part 5 - Add an admin interface
Знаете ли вы, что в коде Discourse есть две большие наборы тестов? На стороне сервера наш Ruby-код имеет набор тестов, использующий rspec. Для браузерного приложения у нас есть набор qunit, в который включено ember-testing.
Если у вас настроена среда разработки, перейдите по адресу http://localhost:3000/tests, чтобы запустить набор JavaScript-тестов в браузере. Один из интересных аспектов — вы можете наблюдать за тестированием приложения в миниатюрном окне в правом нижнем углу:
Приложение Discourse содержит очень много тестов, которые начнут выполняться при переходе по адресу /tests. Поэтому может быть полезно отфильтровать тесты по плагину, над которым вы работаете. Это можно сделать в интерфейсе, щёлкнув по выпадающему списку Plugin и выбрав свой плагин:
Добавление acceptance-теста в ваш плагин
Сначала убедитесь, что у вас установлена последняя версия Discourse. Возможность запуска acceptance-тестов из плагинов — относительно новая функция, и если вы не используете последнюю версию, ваши тесты не появятся.
В этой статье я напишу acceptance-тест для плагина purple-tentacle, который мы создали в части 5 этой серии.
Добавление acceptance-теста так же просто, как создание одного файла в вашем плагине. Создайте следующий файл:
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!");
});
});
Я постарался написать тест максимально понятно, но он может показаться немного запутанным, если вы никогда не писали acceptance-тесты. Я настоятельно рекомендую вам прочитать документацию Ember по acceptance-тестированию, так как в ней содержится много полезной информации.
В каждом тесте нам нужно сделать 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 в шаблоне Handlebars не было идентификатора элемента #show-tentacle. Проверьте последнюю версию, чтобы следовать инструкции!
После того как эти тесты пройдут, пришло время проверить взаимодействие.
Следующая команда — 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
)