Skip to content

Commit 6cb182a

Browse files
38elements38elements
committed
docs: update docs/ja
1 parent 2872a20 commit 6cb182a

File tree

12 files changed

+144
-35
lines changed

12 files changed

+144
-35
lines changed

Diff for: ‎docs/guides/using-with-vuex.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -389,4 +389,4 @@ Notice that we use `cloneDeep` to clone the store config before creating a store
389389
- [Example project for testing the components](https://github.com/eddyerburgh/vue-test-utils-vuex-example)
390390
- [Example project for testing the store](https://github.com/eddyerburgh/testing-vuex-store-example)
391391
- [`localVue`](../api/options.md#localvue)
392-
- [`createLocalVue`](../api/createLocalVue.md)
392+
- [`createLocalVue`](../api/createLocalVue.md)

Diff for: ‎docs/ja/README.md

+3
Original file line numberDiff line numberDiff line change
@@ -47,9 +47,12 @@
4747
* [isVueInstance](api/wrapper/isVueInstance.md)
4848
* [name](api/wrapper/name.md)
4949
* [props](api/wrapper/props.md)
50+
* [setChecked](api/wrapper/setChecked.md)
5051
* [setData](api/wrapper/setData.md)
5152
* [setMethods](api/wrapper/setMethods.md)
5253
* [setProps](api/wrapper/setProps.md)
54+
* [setSelected](api/wrapper/setSelected.md)
55+
* [setValue](api/wrapper/setValue.md)
5356
* [text](api/wrapper/text.md)
5457
* [trigger](api/wrapper/trigger.md)
5558
* [isVisible](api/wrapper/isVisible.md)

Diff for: ‎docs/ja/api/config.md

+16-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ vue-test-utils にはオプションを定義するための `config` オプシ
1414

1515
コンポーネントで使用するスタブはマウンティングオプションの `stubs` で設定します。
1616

17-
マウンティングオプションの `stubs` が配列である場合、`config.stubs` は配列に変換されます。その場合、使用されるスタブは`<${component name}-stub>`を返す基本的なコンポーネントになります。
17+
マウンティングオプションの `stubs` が配列である場合、`config.stubs` は配列に変換されます。その場合、使用されるスタブは`<${コンポーネント名}-stub>`を返す基本的なコンポーネントになります。
1818

1919
例:
2020

@@ -93,3 +93,18 @@ import VueTestUtils from '@vue/test-utils'
9393

9494
VueTestUtils.config.logModifiedComponents = false
9595
```
96+
97+
### `silent`
98+
99+
- 型: `Boolean`
100+
- デフォルト: `true`
101+
102+
Vue がコンポーネントの変更を感知するプロパティ(例えば props )が変更される時に出す警告を出力しません。`false` をセットするとすべての警告はコンソールに表示されません。この機能は `Vue.config.silent` を使って実現しています。
103+
104+
例:
105+
106+
```js
107+
import VueTestUtils from '@vue/test-utils'
108+
109+
VueTestUtils.config.silent = false
110+
```

Diff for: ‎docs/ja/api/options.md

+4-2
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ expect(wrapper.find('#fooWrapper').html()).toBe(
8686

8787
- type: `{ [name: string]: Component | boolean } | Array<string>`
8888

89-
子コンポーネントをスタブします。スタブまたはオブジェクトに対するコンポーネント名の配列になります。`stubs` が配列の場合、すべてのスタブは `<${component name}-stub>` になります。
89+
子コンポーネントをスタブします。スタブまたはオブジェクトに対するコンポーネント名の配列になります。`stubs` が配列の場合、すべてのスタブは `<${コンポーネント名}-stub>` になります。
9090

9191
例:
9292

@@ -101,7 +101,9 @@ shallowMount(Component, {
101101
stubs: {
102102
// 特定の実装によるスタブ
103103
'registered-component': Foo,
104-
// デフォルトのスタブを作成します
104+
// デフォルトのスタブを作成します。
105+
// このケースではデフォルトのスタブのコンポーネント名は another-component です。
106+
// デフォルトのスタブは <${デフォルトのスタブのコンポーネント名}-stub> です。
105107
'another-component': true
106108
}
107109
})

Diff for: ‎docs/ja/api/wrapper-array/README.md

+5-5
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,15 @@
44

55
## プロパティ
66

7-
### `wrappers`
7+
### `wrappers`
88

9-
`array`: `WrapperArray` に含まれる `Wrappers`
9+
`array` (読み込み専用): `WrapperArray` に含まれる `Wrappers`
1010

11-
### `length`
11+
### `length`
1212

13-
`number`: `WrapperArray` に含まれる `Wrappers` の数
13+
`number` (読み込み専用): `WrapperArray` に含まれる `Wrappers` の数
1414

15-
## メソッド
15+
## メソッド
1616

1717
!!!include(docs/ja/api/wrapper-array/at.md)!!!
1818
!!!include(docs/ja/api/wrapper-array/contains.md)!!!

Diff for: ‎docs/ja/api/wrapper-array/setData.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
## setData(data)
22

3-
`WrapperArray` の `Wrapper` ごとに `Wrapper` に `vm` データをセットし、強制的に更新します。
3+
`WrapperArray` の `Wrapper` ごとに `Wrapper` に `vm` データをセットします。
44

55
**すべての `Wrapper` は Vue インスタンスを含んでいなければならないことに注意してください。**
66

Diff for: ‎docs/ja/api/wrapper/README.md

+12-9
Original file line numberDiff line numberDiff line change
@@ -6,24 +6,24 @@ vue-test-utils はラッパベースの API です。
66

77
## プロパティ
88

9-
### `vm`
9+
### `vm`
1010

11-
`Component`：これは vue のインスタンスです。`wrapper.vm` を使って [vm のプロパティとインスタンスメソッド](https://jp.vuejs.org/v2/api/#インスタンスプロパティ)にアクセスできます。これは、Vue コンポーネントラッパにのみ存在します。
11+
`Component` (読み込み専用)：これは vue のインスタンスです。`wrapper.vm` を使って [vm のプロパティとインスタンスメソッド](https://jp.vuejs.org/v2/api/#インスタンスプロパティ)にアクセスできます。これは、Vue コンポーネントラッパにのみ存在します。
1212

13-
### `element`
13+
### `element`
1414

15-
`HTMLElement`: ラッパのルート DOM
15+
`HTMLElement` (読み込み専用): ラッパのルート DOM
1616

17-
### `options`
17+
### `options`
1818

19-
#### `options.attachedToDocument`
19+
#### `options.attachedToDocument`
2020

21-
`Boolean`: マウンティングオプションで `attachedToDocument` が `true` だった場合は True です。
21+
`Boolean` (読み込み専用): マウンティングオプションで `attachedToDocument` が `true` だった場合は True です。
2222

2323

24-
#### `options.sync`
24+
#### `options.sync`
2525

26-
`Boolean`: マウンティングオプションで `sync` が `false` ではなかった場合は True です。  
26+
`Boolean` (読み込み専用): マウンティングオプションで `sync` が `false` ではなかった場合は True です。
2727

2828
## メソッド
2929

@@ -43,8 +43,11 @@ vue-test-utils はラッパベースの API です。
4343
!!!include(docs/ja/api/wrapper/isVueInstance.md)!!!
4444
!!!include(docs/ja/api/wrapper/name.md)!!!
4545
!!!include(docs/ja/api/wrapper/props.md)!!!
46+
!!!include(docs/api/wrapper/setChecked.md)!!!
4647
!!!include(docs/ja/api/wrapper/setData.md)!!!
4748
!!!include(docs/ja/api/wrapper/setMethods.md)!!!
4849
!!!include(docs/ja/api/wrapper/setProps.md)!!!
50+
!!!include(docs/api/wrapper/setSelected.md)!!!
51+
!!!include(docs/api/wrapper/setValue.md)!!!
4952
!!!include(docs/ja/api/wrapper/text.md)!!!
5053
!!!include(docs/ja/api/wrapper/trigger.md)!!!

Diff for: ‎docs/ja/api/wrapper/setChecked.md

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
## setChecked(checked)
2+
3+
checkbox 型もしくは radio 型の input 要素の checked の値をセットします。そして、 `v-model` に束縛されているデータを更新します。
4+
5+
- **引数:**
6+
- `{Boolean} checked (デフォルト: true)`
7+
8+
- **例:**
9+
10+
```js
11+
import { mount } from '@vue/test-utils'
12+
import Foo from './Foo.vue'
13+
14+
const wrapper = mount(Foo)
15+
const option = wrapper.find('input[type="radio"]')
16+
option.setChecked()
17+
```
18+
19+
- **注:**
20+
21+
`v-model` を経由して `radioInput.element.checked = true; radioInput.trigger('input')` で state に値をセットしようとすると、 `v-model` はトリガされません。 `v-model` は `change` イベントでトリガされます。
22+
23+
24+
`checkboxInput.setChecked(checked)` は以下のコードのエイリアスです。
25+
26+
```js
27+
checkboxInput.element.checked = checked
28+
checkboxInput.trigger('click')
29+
checkboxInput.trigger('change')
30+
```

Diff for: ‎docs/ja/api/wrapper/setData.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
## setData(data)
22

3-
`Wrapper` `vm` データを設定し、更新を強制します。
3+
`Wrapper` `vm` データを設定します。
44

55
**Wrapper には Vue インスタンスを含む必要があることに注意してください**
66

Diff for: ‎docs/ja/api/wrapper/setSelected.md

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
## setSelected()
2+
3+
option 要素を選択します。そして、 `v-model` に束縛されているデータを更新します。
4+
5+
6+
- **例:**
7+
8+
```js
9+
import { mount } from '@vue/test-utils'
10+
import Foo from './Foo.vue'
11+
12+
const wrapper = shallowMount(Foo)
13+
const options = wrapper.find('select').findAll('option')
14+
15+
options.at(1).setSelected()
16+
```
17+
18+
- **注:**
19+
20+
`v-model` を経由して `option.element.selected = true; parentSelect.trigger('input')` で state に値をセットしようとすると、 `v-model` はトリガされません。 `v-model` は `change` イベントでトリガされます。
21+
22+
`option.setSelected()` は以下のコードのエイリアスです。
23+
24+
```js
25+
option.element.selected = true
26+
parentSelect.trigger('change')
27+
```

Diff for: ‎docs/ja/api/wrapper/setValue.md

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
## setValue(value)
2+
3+
text コントロールの input 要素の 値をセットします。そして、 `v-model` に束縛されているデータを更新します。
4+
5+
- **引数:**
6+
- `{String} value`
7+
8+
- **例:**
9+
10+
```js
11+
import { mount } from '@vue/test-utils'
12+
import Foo from './Foo.vue'
13+
14+
const wrapper = mount(Foo)
15+
const input = wrapper.find('input[type="text"]')
16+
input.setValue('some value')
17+
```
18+
19+
- **注:**
20+
21+
`textInput.setValue(value)` は以下のコードのエイリアスです。
22+
23+
```js
24+
textInput.element.value = value
25+
textInput.trigger('input')
26+
```

Diff for: ‎docs/ja/guides/using-with-vuex.md

+18-15
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
### Vuex と一緒に使用する
1+
# Vuex と一緒に使用する
22

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

5+
## コンポーネント内の Vuex をテストする
56

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

@@ -215,47 +216,49 @@ export default{
215216
``` js
216217
import { shallowMount, createLocalVue } from '@vue/test-utils'
217218
import Vuex from 'vuex'
218-
import Modules from '../../../src/components/Modules'
219-
import module from '../../../src/store/module'
219+
import MyComponent from '../../../src/components/MyComponent'
220+
import myModule from '../../../src/store/myModule'
220221

221222
const localVue = createLocalVue()
222223

223224
localVue.use(Vuex)
224225

225-
describe('Modules.vue', () => {
226+
describe('MyComponent.vue', () => {
226227
let actions
227228
let state
228229
let store
229230

230231
beforeEach(() => {
231232
state = {
232-
module: {
233-
clicks: 2
234-
}
233+
clicks: 2
235234
}
236235

237236
actions = {
238237
moduleActionClick: jest.fn()
239238
}
240239

241240
store = new Vuex.Store({
242-
state,
243-
actions,
244-
getters: module.getters
241+
modules: {
242+
myModule: {
243+
state,
244+
actions,
245+
getters: myModule.getters
246+
}
247+
}
245248
})
246249
})
247250

248-
it('calls store action moduleActionClick when button is clicked', () => {
249-
const wrapper = shallowMount(Modules, { store, localVue })
251+
it('calls store action "moduleActionClick" when button is clicked', () => {
252+
const wrapper = shallowMount(MyComponent, { store, localVue })
250253
const button = wrapper.find('button')
251254
button.trigger('click')
252255
expect(actions.moduleActionClick).toHaveBeenCalled()
253256
})
254257

255-
it('Renders state.inputValue in first p tag', () => {
256-
const wrapper = shallowMount(Modules, { store, localVue })
258+
it('renders "state.inputValue" in first p tag', () => {
259+
const wrapper = shallowMount(MyComponent, { store, localVue })
257260
const p = wrapper.find('p')
258-
expect(p.text()).toBe(state.module.clicks.toString())
261+
expect(p.text()).toBe(state.clicks.toString())
259262
})
260263
})
261264
```

0 commit comments

Comments
 (0)