前のチュートリアル: 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でさまざまな機能をテストする方法を参照することもできます。そこには、学ぶことができる例がかなりあります。
ハッピーテスティング！
シリーズの続き
パート1: プラグインの基本
パート2: プラグインアウトレット
パート3: サイト設定
パート4: git設定
パート5: 管理者インターフェース
パート6: このトピック
パート7: プラグインの公開
このドキュメントはバージョン管理されています - 変更の提案はgithubで行ってください。
it is an Admin page
)