前回のチュートリアル: Developing Discourse Plugins - Part 5 - Add an admin interface
Discourse のコードベースには 2 つの大きなテストスイートがあることをご存知ですか？ サーバーサイドでは、Ruby コードには rspec を使用したテストスイートがあります。ブラウザアプリケーションについては、ember-testing が含まれた qunit スイートがあります。
開発環境がセットアップ済みであると仮定して、http://localhost:3000/tests の URL にアクセスすると、ブラウザで JavaScript テストスイートの実行が始まります。面白い点の一つは、右下のミニチュアウィンドウでアプリケーションがテストされている様子を見られることです：
Discourse アプリケーションは 非常に多くの テストで構築されており、/tests URL にアクセスするとそれらが実行され始めます。そのため、作業中のプラグインでテストを絞り込むと役立つ場合があります。インターフェースで Plugin ドロップダウンをクリックし、プラグインを選択することで、これを行うことができます：
プラグインに受け入れテスト（Acceptance Test）を追加する
まず、最新バージョンの 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");
補足. 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 部: プラグインの基礎
第 2 部: プラグインアウトレット
第 3 部: サイト設定
第 4 部: git セットアップ
第 5 部: 管理インターフェース
第 6 部: 本トピック
第 7 部: プラグインの公開
このドキュメントはバージョン管理されています - 変更の提案は GitHub で。
it is an Admin page
)