前のチュートリアル: 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 にアクセスするとそれらのテストが実行され始めます。そのため、作業中のプラグインでテストをフィルタリングすると役立つかもしれません。インターフェースで プラグイン ドロップダウンをクリックし、プラグインを選択することでこれを行うことができます：
プラグインに受け入れテストを追加する
まず、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部: プラグインの基本
第2部: プラグインアウトレット
第3部: サイト設定
第4部: git の設定
第5部: 管理者インターフェース
第6部: このトピック
第7部: プラグインの公開
このドキュメントはバージョン管理されています - 変更を提案するには github で。
it is an Admin page
)