A demo for my talk at Vuejs-meet 5.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
config
docs
src
static
test/unit
.babelrc
.editorconfig
.gitignore
.postcssrc.js
README.md
TRANSLATION.md
index.html
package.json
yarn.lock

README.md

Slide 0
こんにちは。今夜は、Vue.js向けの公式単体テストライブラリについて話させて頂きます。






Slide 1
それについて話す前に、

  • コンポーネントというものは何か
  • なぜテストするか
  • テストするとき、何をテストするか について話したいと思います。




_Slide 2_
- Vueのコンポーネントを組み合わせて、ユーザーインタフェイスを構築できます。 - コンポーネントは、ユーザーインタフェースの一つの部分だと言えます。 - コンポーネントは二つのことをします。 - データをユーザーに表示すること - ユーザーにアプリケーションと対話できるようにすること。



_Slide 3_
- そこで、コンポーネントをテストするときは、これら二つについてテストすべきです。
**Button**
- コンポーネントはデータをユーザーに正しく表示しますか
**Button**
- コンポーネントはユーザーにアプリケーションと対話できるようにしますか
**これはvue-test-utilsができることです。**

_Slide 4_
- vue-test-utilsは、Vueコンポーネントをテストするための公式ライブラリです - Reactのreact-test-utils,Enzymeのようなライブラリです - Vue, Vuex, Vue Routerと同じように、日本語のドキュメントも提供してあります





_Slide 5_
- vue-test-utilsはこのようなことをするためにツールを提供します:
- コンポーネントをレンダリングし、そしてマークアップする - コンポーネントの値(状態)/関数を設定する - コンポーネントのユーザーインタラクションをシュミレーションする - プロパティをモックする
これらのメソッドについて、いくつか簡単なデモを見ていきましょう
Hello.vue
- このコンポーネントは一番簡単なコンポーネントです - ただテキストを表示します
- shallowというメソッドをそのコンポーネントを隔離してレンダリングして、マークアップを検証します - `shallow`という関数は基本的なメソッドで、コンポーネントテストにほとんど全部使います - この例でコンポーネントをレンダーして、マークアップを検証します
次の例に行きましょう。





SetData.vue
- setDataというメソッドがあります。 - setDataでコンポーネントのdata関数を簡単に更新できます。
- また、`setMethods`, `setComputed`,`setProps`などのメソッドがあるため、 - 簡単にデータを正しく表示するのを検証できます - この例では、変数を更新して、マークアップが正しく更新されたのを検証します
**ユーザーインタラクションはどうやってテストするのでしょうか?**






Trigger.vue
- vue-test-utilsのtriggerというメソッドを使って、 - インタラクションをシミュレーションして、 - コンポーネントにイベントを発火できます。
- この例では、バタンを検索して,triggerでユーザーがボタンを押すシミュレーションして、 - マークアップが更新されたのを検証します。 -
- これまでのところ、全てのこれらのコンポーネントは簡単でした。 - もう少し興味を持つ複雑な例についてはどうでしょうか?
**4番目のコンポーネントは、Vuexストアも使っています**



Mock.vue
ここでの例では、いくつかの事が起こっています: - テキストボックスに入力するとき、ミューテーションをコミットします - $store.state.color によってテキストボックスの色が変わります - テストするところが二つあります。
- 最初にボーダーの色スタイルを更新するのをテストしましょう。 - Vuexストアを使うとテストはもっとややこしくなります。 - vue-test-utilsではもっといい方法があります。
- vuexストアのようなグローバルプロパティに注入するために、 - モックオブジェクトを使用できます。
- mockオブジェクトを使用して、 - ストアを好きなように設定できます。
- それから、簡単にhasStyleを使用して検証できます。 - この検証で、ボーダーの色をストアの状態によって正しく設定するのを確認します。
この例では、ユーザーインタラクションがないのでモックストアを使いました。
次のテストを見て行きましょう。


- インタラクションをテストすると、 - モックストアではなく本当のVuexストアを使用した方がいいです。
- ユーザーが色を入力するとき、 - SET_COLORミューテーションは正しいペイロードによって - コミットされるべきです。
- inputを探して、 - テキストを入力して、そして - inputをシミュレーションするためにtriggerを使用します。
- ミューテーションをコミットしたことと、 - ペイロードが正しいことを検証します。











_Slide 6_
- 最後に、vue-test-utilsはまだベータです。 - オーペンスーソに貢献するいいチャンスです。
- まだ追加していないフィーターとバグがあるし、 - どんどんあたらしいフィーターを追加してきたので、 - ドキュメントが古くなります
- オーペンソースに貢献する経験のない人に簡単な最初の一歩だと思います。 - 貢献したい方は連絡してください。