Skip to content

docs: update docs/ja #422

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Feb 21, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions docs/ja/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@
* [contains](api/wrapper-array/contains.md)
* [exists](api/wrapper/exists.md)
* [destroy](api/wrapper-array/destroy.md)
* [filter](api/wrapper-array/filter.md)
* [is](api/wrapper-array/is.md)
* [isEmpty](api/wrapper-array/isEmpty.md)
* [isVueInstance](api/wrapper-array/isVueInstance.md)
Expand All @@ -67,6 +68,7 @@
* [コンポーネント](api/components/README.md)
* [TransitionStub](api/components/TransitionStub.md)
* [TransitionGroupStub](api/components/TransitionGroupStub.md)
* [RouterLinkStub](api/components/RouterLinkStub.md)
* [セレクタ](api/selectors.md)
* [createLocalVue](api/createLocalVue.md)
* [config](api/config.md)
2 changes: 2 additions & 0 deletions docs/ja/SUMMARY.md
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@
* [contains](api/wrapper-array/contains.md)
* [exists](api/wrapper/exists.md)
* [destroy](api/wrapper-array/destroy.md)
* [filter](api/wrapper-array/filter.md)
* [is](api/wrapper-array/is.md)
* [isEmpty](api/wrapper-array/isEmpty.md)
* [isVueInstance](api/wrapper-array/isVueInstance.md)
Expand All @@ -65,6 +66,7 @@
* [コンポーネント](api/components/README.md)
* [TransitionStub](api/components/TransitionStub.md)
* [TransitionGroupStub](api/components/TransitionGroupStub.md)
* [RouterLinkStub](api/components/RouterLinkStub.md)
* [セレクタ](api/selectors.md)
* [createLocalVue](api/createLocalVue.md)
* [config](api/config.md)
2 changes: 2 additions & 0 deletions docs/ja/api/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@
* [contains](./wrapper-array/contains.md)
* [exists](./wrapper/exists.md)
* [destroy](./wrapper-array/destroy.md)
* [filter](./wrapper-array/filter.md)
* [is](./wrapper-array/is.md)
* [isEmpty](./wrapper-array/isEmpty.md)
* [isVueInstance](./wrapper-array/isVueInstance.md)
Expand All @@ -53,6 +54,7 @@
* [コンポーネント](./components/README.md)
* [TransitionStub](./components/TransitionStub.md)
* [TransitionGroupStub](./components/TransitionGroupStub.md)
* [RouterLinkStub](./components/RouterLinkStub.md)
* [セレクタ](./selectors.md)
* [createLocalVue](./createLocalVue.md)
* [config](./config.md)
20 changes: 20 additions & 0 deletions docs/ja/api/components/RouterLinkStub.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
# RouterLinkStub

Vue Router の `router-link` コンポーネントをスタブするためのコンポーネントです。

レンダリングツリーにある router-link コンポーネントを見つけるためにこのコンポーネントを使用することができます。

- **使い方:**

スタブとしてマウンティングオプションにセットします。

```js
import { mount, RouterLinkStub } from '@vue/test-utils'

const wrapper = mount(Component, {
stubs: {
RouterLink: RouterLinkStub
}
})
expect(wrapper.find(RouterLinkStub).props().to).toBe('/some/path')
```
22 changes: 22 additions & 0 deletions docs/ja/api/wrapper-array/filter.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
# filter(predicate)

`Wrapper` オブジェクトを判別する関数を使用して `WrapperArray` をフィルタリングします。

このメソッドの動作は [Array.prototype.filter](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) に似ています。

- **引数:**
- `{function} predicate`

- **戻り値:** `{WrapperArray}`

predicate 関数が true を返す `Wrapper` インスタンスを含む新しい `WrapperArray` インスタンスを返します。

- **例:**

```js
import { shallow } from '@vue/test-utils'
import Foo from './Foo.vue'

const wrapper = shallow(Foo)
const filteredDivArray = wrapper.findAll('div').filter(w => !w.hasClass('filtered'))
```
13 changes: 6 additions & 7 deletions docs/ja/api/wrapper/props.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,14 @@
- **例:**

```js
import { mount } from '@vue/test-utils'
import { expect } from 'chai'
import Foo from './Foo.vue'
import Bar from './Bar.vue'

const wrapper = mount(Component, {
context: {
props: { show: true },
children: [Foo, Bar]
const wrapper = mount(Foo, {
propsData: {
bar: 'baz'
}
})

expect(wrapper.is(Component)).toBe(true)
expect(wrapper.props().bar).toBe('baz')
```
2 changes: 1 addition & 1 deletion docs/ja/guides/testing-SFCs-with-jest.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ Jest は Facebook が開発したテストランナであり、ユニットテ
まず Jest と `vue-test-utils` をインストールします:

```bash
$ npm install --save-dev jest vue-test-utils
$ npm install --save-dev jest @vue/test-utils
```

次に、`package.json` にスクリプトを定義する必要があります。
Expand Down
2 changes: 2 additions & 0 deletions docs/ja/guides/using-with-vue-router.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ shallow(Component, {
})
```

> Vue Router を localVue にインストールすると `$route` と `$router` が読み取り専用プロパティーとして localVue に追加されます。これは VueRouter をインストールした localVue を使用しているコンポーネントをマウントする時、 `mock` オプションで `$route` と `$router` を上書きすることができないことを意味します。

## `router-link` または `router-view` を使用するコンポーネントテスト

Vue Router をインストールする時、`router-link` と `router-view` コンポーネントが登録されます。これは、それらをアプリケーションにインポートする必要がなく、アプリケーションのどこでも使用することができます。
Expand Down
135 changes: 130 additions & 5 deletions docs/ja/guides/using-with-vuex.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,9 @@

このガイドでは、`vue-test-utils` でコンポーネントで Vuex をテストする方法について、見ていきます。

## アクションのモック
## コンポーネント内の Vuex のテスト

### アクションのモック

それではいくつかのコードを見ていきましょう。

Expand Down Expand Up @@ -107,7 +109,7 @@ describe('Actions.vue', () => {

素晴らしい!今、アクションをモック化できるので、ゲッタのモックについて見ていきましょう。

## ゲッタのモック
### ゲッタのモック


``` html
Expand Down Expand Up @@ -176,7 +178,7 @@ describe('Getters.vue', () => {

これは素晴らしいですが、もしゲッタが状態の正しい部分を返しているのを確認したい場合はどうしますか?

## モジュールによるモック
### モジュールによるモック

[モジュール](https://vuex.vuejs.org/en/modules.html)はストアを管理しやすい塊に分けるために便利です。それらはゲッタもエクスポートします。テストではこれらを使用することができます。

Expand Down Expand Up @@ -259,8 +261,131 @@ describe('Modules.vue', () => {
})
```

### リソース

- [このガイド向けの例](https://github.com/eddyerburgh/vue-test-utils-vuex-example)
## Vuex ストアのテスト

Vuex ストアをテストする方法が2つあります。1つ目はゲッタとミューテーションとアクションを別々に単体テストする方法です。2つ目はストアを生成してそれをテストする方法です。

Vuex ストアをテストする方法を説明するためにシンプルなカウンターストアを用意します。このストアには `increment` ミューテーションと `counter` ゲッタがあります。

```js
// mutations.js
export default {
increment (state) {
state.count++
}
}
```

```js
// getters.js
export default {
evenOrOdd: state => state.count % 2 === 0 ? 'even' : 'odd'
}
```

### ゲッタとミューテーションとアクションを別々にテストする

ゲッタとミューテーションとアクションはすべて JavaScript の関数です。それらは `vue-test-utils` と Vuex を使用しなくてもテストすることができます。

ゲッタとミューテーションとアクションを別々にテストする利点は単体テストを詳細に記述することができることです。テストが失敗すると、コードの何が原因か正確に知ることができます。欠点は `commit` や `dispatch` のような Vuex の関数のモックが必要なことです。これは不正なモックが原因で単体テストはパスしてプロダクションは失敗する状況を作り出す可能性があります。

mutations.spec.js と getters.spec.js という名前のテストファイルを2つ作成します。

最初に increment ミューテーションをテストします。

```js
// mutations.spec.js

import mutations from './mutations'

test('increment increments state.count by 1', () => {
const state = {
count: 0
}
mutations.increment(state)
expect(state.count).toBe(1)
})
```

今度は `evenOrOdd` ゲッタを次の手順でテストします。 `state` モックを作成します。 `state` を引数としてゲッタ関数を実行します。そして、それが正しい値を返したか確認します。

```js
// getters.spec.js

import getters from './getters'

test('evenOrOdd returns even if state.count is even', () => {
const state = {
count: 2
}
expect(getters.evenOrOdd(state)).toBe('even')
})

test('evenOrOdd returns odd if state.count is even', () => {
const state = {
count: 1
}
expect(getters.evenOrOdd(state)).toBe('odd')
})

```

### 実行可能なストアのテスト

Vuexストアをテストするもう1つの方法はストアの設定を使って実行可能なストアを生成することです。

実行可能なストアを生成してテストすることの利点は Vuex の関数をモックする必要がない事です。

欠点はテストが失敗した時、問題がある箇所を見つけることが難しいことです。

テストを書いてみましょう。ストアを生成する際は、 Vue のコンストラクタが汚染されることを避けるために `localVue` を使用します。このテストは store-config.js の export を使用してストアを生成します。

```js
// store-config.js

import mutations from './mutations'
import getters from './getters'

export default {
state: {
count: 0
},
mutations,
getters
}
```

```js
import { createLocalVue } from '@vue/test-utils'
import Vuex from 'vuex'
import storeConfig from './store-config'
import { cloneDeep } from 'lodash'

test('increments count value when increment is commited', () => {
const localVue = createLocalVue()
localVue.use(Vuex)
const store = new Vuex.Store(cloneDeep(storeConfig))
expect(store.state.count).toBe(0)
store.commit('increment')
expect(store.state.count).toBe(1)
})

test('updates evenOrOdd getter when increment is commited', () => {
const localVue = createLocalVue()
localVue.use(Vuex)
const store = new Vuex.Store(cloneDeep(storeConfig))
expect(store.getters.evenOrOdd).toBe('even')
store.commit('increment')
expect(store.getters.evenOrOdd).toBe('odd')
})
```

ストアをストアの設定から生成する前に `cloneDeep` を使用しています。こうする理由は Vuex はストアを生成するためにオプションオブジェクトを変更するからです。どのテストでも確実に汚染されていないストアを使うために `storeConfig` オブジェクトを複製する必要があります。

## リソース

- [コンポーネントをテストする例](https://github.com/eddyerburgh/vue-test-utils-vuex-example)
- [ストアをテストする例](https://github.com/eddyerburgh/testing-vuex-store-example)
- [localVue](../api/options.md#localvue)
- [createLocalVue](../api/createLocalVue.md)