Meteor 1.3 React日本語チュートリアル (step11)
Meteorの日本語版のチュートリアルのstep11です。
目次
- 最初のアプリを作成する
- Reactコンポーネントでビューを定義する
- コレクションにタスクを格納する
- フォームを使ってタスクを追加する
- タスクにチェックマークをつける・削除する
- アプリをAndroidやiOSで動かす
- 一時的なUIデータをステートに格納する
- ユーザアカウントを追加する
- メソッドによるセキュリティ
- パブリッシュとサブスクライブによるデータフィルタリング
- テストについて (本記事)
- その後の学習法について
テストについて
アプリのいくつかの機能を作ったため、それが期待通り動き、こわれていないかを保証するテストを追加しましょう。
今回は、メソッドのうち1つについてテストを書き、正しく動くことを検証しましょう。
そのために、JavaScriptテストフレームワークMochaのテストドライバーを追加します。下記のコメンドを実行してください。
|
|
これにより、このドライバを指定した特殊なコマンドを実行することで、アプリを「テストモード」で動かすことができます。通常のアプリは止めるか、--port XYZ
で別のポートで動かす必要るあります。下記のコマンドを実行してください。
|
|
実行すると、空のテスト結果がブラウザに表示されるはずです。
簡単なテスト(何もしない)を追加してみましょう。次のようにファイルを作成してください。ファイル名はimports/api/tasks.tests.js
です。
テストでは開始時にデータベースを期待した状態にしておく必要があります。これは、MochaのbeforeEach
を使って簡単にきます。imports/api/tasks.tests.js
を下記のように修正してください。修正後のファイルはこちらのようになります。
diff --git a/imports/api/tasks.tests.js b/imports/api/tasks.tests.js | |
index 05287ba..1359e85 100644 | |
--- a/imports/api/tasks.tests.js | |
+++ b/imports/api/tasks.tests.js | |
@@ -1,10 +1,26 @@ | |
/* eslint-env mocha */ | |
import { Meteor } from 'meteor/meteor'; | |
+import { Random } from 'meteor/random'; | |
+ | |
+import { Tasks } from './tasks.js'; | |
if (Meteor.isServer) { | |
describe('Tasks', () => { | |
describe('methods', () => { | |
+ const userId = Random.id(); | |
+ let taskId; | |
+ | |
+ beforeEach(() => { | |
+ Tasks.remove({}); | |
+ taskId = Tasks.insert({ | |
+ text: 'test task', | |
+ createdAt: new Date(), | |
+ owner: userId, | |
+ username: 'tmeasday', | |
+ }); | |
+ }); | |
+ | |
it('can delete owned task', () => { | |
}); | |
}); |
上記コードでは、テスト実行毎に変わるランダムなuserId
に対応づけた1つのタスクを作成しています。
では、そのユーザとしてtask.remove
を呼び出しタスクが削除されるかを確認するテストを書きましょう。imports/api/tasks.tests.js
を下記のように修正してください。修正後のファイルはこちらのようになります。
diff --git a/imports/api/tasks.tests.js b/imports/api/tasks.tests.js | |
index 1359e85..9b61c5a 100644 | |
--- a/imports/api/tasks.tests.js | |
+++ b/imports/api/tasks.tests.js | |
@@ -2,6 +2,7 @@ | |
import { Meteor } from 'meteor/meteor'; | |
import { Random } from 'meteor/random'; | |
+import { assert } from 'meteor/practicalmeteor:chai'; | |
import { Tasks } from './tasks.js'; | |
@@ -22,6 +23,18 @@ if (Meteor.isServer) { | |
}); | |
it('can delete owned task', () => { | |
+ // Find the internal implementation of the task method so we can | |
+ // test it in isolation | |
+ const deleteTask = Meteor.server.method_handlers['tasks.remove']; | |
+ | |
+ // Set up a fake method invocation that looks like what the method expects | |
+ const invocation = { userId }; | |
+ | |
+ // Run the method with `this` set to the fake invocation | |
+ deleteTask.apply(invocation, [taskId]); | |
+ | |
+ // Verify that the method does what we expected | |
+ assert.equal(Tasks.find().count(), 0); | |
}); | |
}); | |
}); |
Meteorのテストではさらにいろいろなことができます。詳細はMeteor Guideのテストに関する記事を参照してください。
次のステップへ
step12: その後の学習法について