前のチュートリアル: Developing Discourse Plugins - Part 5 - Add an admin interface
Discourseには、コードベース用の大規模なテストスイートが2つあることをご存知ですか？サーバー側では、Rubyコードのテストスイートにrspecを使用しています。ブラウザアプリケーションでは、ember-testingを含むqunitスイートを使用しています。
開発環境がセットアップされていると仮定すると、http://localhost:3000/testsのURLにアクセスすると、ブラウザでJavaScriptテストスイートが実行されます。面白い点の1つは、右下隅のミニチュアウィンドウでアプリケーションがテストされている様子を見ることができることです：
Discourseアプリケーションは多くのテストで構築されており、/tests URLにアクセスするとそれらのテストが実行されます。そのため、作業中のプラグインでテストをフィルタリングすると役立つ場合があります。インターフェースでプラグインドロップダウンをクリックし、プラグインを選択することでこれを行うことができます：
プラグインに受け入れテストを追加する
まず、Discourseの最新バージョンをチェックアウトしていることを確認してください。プラグインから受け入れテストを実行できる機能は比較的新しく、最新バージョンをチェックアウトしていない場合、テストが表示されません。
この記事では、このシリーズのパート5で作成したpurple-tentacleプラグインの受け入れテストを作成します。
受け入れテストの追加は、プラグインに1つのファイルを追加するだけで簡単に行えます。以下を作成してください：
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要素IDがありませんでした。続行するには最新バージョンを確認してください！
これらのテストが通過したら、インタラクションをテストする時です。
次のコマンドは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にアクセスして、自分でテストを試すことができます。すぐに紫色の触手が表示され、すべてのテストが通過するはずです。
コマンドラインでPhantomJSを使用してプラグインのqunitテストを実行したい場合は、以下を実行できます
rake plugin:qunit['purple-tentacle']
（purple-tentacleはプラグインのフォルダ名です）
テストのデバッグ
プラグインを開発する際、テストはプラグイン内の問題を特定するのに役立ちます。テストを開発している間や、プラグインのコードを変更した場合、テストが失敗する可能性があります。その理由を理解するために、Emberには便利なヘルパーがあります：pauseTest()とresumeTest()。
これらを使用するには、テストコード内でテストを一時停止したい場所にawait pauseTest()を追加します。これで、ブラウザでテストを実行すると、pauseTest()を追加したポイントでテストが自動的に一時停止します。これにより、ページを検査したり、エラーを表示して問題をデバッグしたりする機会が得られます。
次にどこへ進むか
壊れたレコードのように聞こえるのが嫌ですが、テストに関するEmberのドキュメントは優れています。また、javascriptテストディレクトリ内のテストを参照して、Discourseがどのようにして様々な機能をテストしているかを確認することもできます。そこから学ぶことができる多くの例があります。
楽しいテストを！
シリーズの続き
パート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
)