前のチュートリアル: Developing Discourse Plugins - Part 5 - Add an admin interface
Discourse にはコードベース用の 2 つの大きなテストスイートがあることをご存知でしたか？サーバー側では、Ruby コードに rspec を使用するテストスイートがあります。ブラウザアプリケーションには、ember-testing が含まれている qunit スイートがあります。
開発環境がセットアップされていると仮定して、http://localhost:4200/tests URL にアクセスすると、ブラウザで JavaScript テストスイートの実行が開始されます。興味深い点の 1 つは、右下隅の小さなウィンドウでアプリケーションがテストされているのを確認できることです。
Discourse アプリケーションは、/tests URL にアクセスすると実行が開始される多数のテストで構築されています。そのため、作業しているプラグインでテストをフィルタリングすると役立つ場合があります。これは、インターフェースで Plugin ドロップダウンをクリックし、プラグインを選択することで実行できます。
プラグインへの受け入れテストの追加
まず、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");
追伸 紫色の触手プラグインの前のバージョンには、ハンドルバーテンプレートに #show-tentacle 要素 ID がありませんでした。最新バージョンを確認して、ついてきてください！
それらのテストがパスしたら、インタラクションをテストする時が来ました。
次のコマンドは await click('#show-tentacle'); であり、ボタンをクリックして触手を表示したいことをテストフレームワークに伝えます。
ボタンをクリックしたことをシミュレートした後、次のアサーションを行うことで触手が表示されるかどうかを確認できます。
assert.ok(exists(".tentacle"), "the tentacle wants to rule the world!");
難しくないでしょう？開発マシンで http://localhost:4200/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 tests directory でテストを閲覧して、Discourse がさまざまな機能をどのようにテストしているかを確認することもできます。そこには、学ぶことができる例がかなりあります。
ハッピーテスティング！
シリーズの続き
パート 1: プラグインの基本
パート 2: プラグインのアウトレット
パート 3: サイト設定
パート 4: git のセットアップ
パート 5: 管理インターフェース
パート 6: このトピック
パート 7: プラグインの公開
このドキュメントはバージョン管理されています - 変更の提案はgithubで行ってください。
it is an Admin page
)