前のチュートリアル: 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. 紫色のタコプラグインの以前のバージョンでは、ハンドルバーテンプレートに #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 のドキュメント は素晴らしいものです。また、Discourse がどのように機能をテストしているかを確認するために、JavaScript テストディレクトリ のテストを閲覧することをお勧めします。そこには学習に役立つ多くの例があります。
楽しいテストを！
シリーズの他の記事
パート 1: プラグインの基礎
パート 2: プラグインアウトレット
パート 3: サイト設定
パート 4: git セットアップ
パート 5: 管理インターフェース
パート 6: このトピック
パート 7: プラグインの公開
このドキュメントはバージョン管理されています。変更の提案は GitHub でおこなってください。
it is an Admin page
)