Предыдущий урок: 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 в шаблоне 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: Plugin Basics
Часть 2: Plugin Outlets
Часть 3: Site Settings
Часть 4: git setup
Часть 5: Admin interfaces
Часть 6: Эта тема
Часть 7: Publish your plugin
Этот документ находится под контролем версий - предложите изменения на github.
it is an Admin page
)