Skip to content

docs: update docs/ja #729

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 1 commit into from
Jul 19, 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: 1 addition & 1 deletion docs/guides/using-with-vuex.md
Original file line number Diff line number Diff line change
Expand Up @@ -389,4 +389,4 @@ Notice that we use `cloneDeep` to clone the store config before creating a store
- [Example project for testing the components](https://github.com/eddyerburgh/vue-test-utils-vuex-example)
- [Example project for testing the store](https://github.com/eddyerburgh/testing-vuex-store-example)
- [`localVue`](../api/options.md#localvue)
- [`createLocalVue`](../api/createLocalVue.md)
- [`createLocalVue`](../api/createLocalVue.md)
3 changes: 3 additions & 0 deletions docs/ja/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -47,9 +47,12 @@
* [isVueInstance](api/wrapper/isVueInstance.md)
* [name](api/wrapper/name.md)
* [props](api/wrapper/props.md)
* [setChecked](api/wrapper/setChecked.md)
* [setData](api/wrapper/setData.md)
* [setMethods](api/wrapper/setMethods.md)
* [setProps](api/wrapper/setProps.md)
* [setSelected](api/wrapper/setSelected.md)
* [setValue](api/wrapper/setValue.md)
* [text](api/wrapper/text.md)
* [trigger](api/wrapper/trigger.md)
* [isVisible](api/wrapper/isVisible.md)
Expand Down
17 changes: 16 additions & 1 deletion docs/ja/api/config.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ vue-test-utils にはオプションを定義するための `config` オプシ

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

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

例:

Expand Down Expand Up @@ -93,3 +93,18 @@ import VueTestUtils from '@vue/test-utils'

VueTestUtils.config.logModifiedComponents = false
```

### `silent`

- 型: `Boolean`
- デフォルト: `true`

Vue がコンポーネントの変更を感知するプロパティ(例えば props )が変更される時に出す警告を出力しません。`false` をセットするとすべての警告はコンソールに表示されません。この機能は `Vue.config.silent` を使って実現しています。

例:

```js
import VueTestUtils from '@vue/test-utils'

VueTestUtils.config.silent = false
```
6 changes: 4 additions & 2 deletions docs/ja/api/options.md
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ expect(wrapper.find('#fooWrapper').html()).toBe(

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

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

例:

Expand All @@ -101,7 +101,9 @@ shallowMount(Component, {
stubs: {
// 特定の実装によるスタブ
'registered-component': Foo,
// デフォルトのスタブを作成します
// デフォルトのスタブを作成します。
// このケースではデフォルトのスタブのコンポーネント名は another-component です。
// デフォルトのスタブは <${デフォルトのスタブのコンポーネント名}-stub> です。
'another-component': true
}
})
Expand Down
10 changes: 5 additions & 5 deletions docs/ja/api/wrapper-array/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@

## プロパティ

### `wrappers`
### `wrappers`

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

### `length`
### `length`

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

## メソッド
## メソッド

!!!include(docs/ja/api/wrapper-array/at.md)!!!
!!!include(docs/ja/api/wrapper-array/contains.md)!!!
Expand Down
2 changes: 1 addition & 1 deletion docs/ja/api/wrapper-array/setData.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
## setData(data)

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

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

Expand Down
21 changes: 12 additions & 9 deletions docs/ja/api/wrapper/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,24 +6,24 @@ vue-test-utils はラッパベースの API です。

## プロパティ

### `vm`
### `vm`

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

### `element`
### `element`

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

### `options`
### `options`

#### `options.attachedToDocument`
#### `options.attachedToDocument`

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


#### `options.sync`
#### `options.sync`

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

## メソッド

Expand All @@ -43,8 +43,11 @@ vue-test-utils はラッパベースの API です。
!!!include(docs/ja/api/wrapper/isVueInstance.md)!!!
!!!include(docs/ja/api/wrapper/name.md)!!!
!!!include(docs/ja/api/wrapper/props.md)!!!
!!!include(docs/api/wrapper/setChecked.md)!!!
!!!include(docs/ja/api/wrapper/setData.md)!!!
!!!include(docs/ja/api/wrapper/setMethods.md)!!!
!!!include(docs/ja/api/wrapper/setProps.md)!!!
!!!include(docs/api/wrapper/setSelected.md)!!!
!!!include(docs/api/wrapper/setValue.md)!!!
!!!include(docs/ja/api/wrapper/text.md)!!!
!!!include(docs/ja/api/wrapper/trigger.md)!!!
30 changes: 30 additions & 0 deletions docs/ja/api/wrapper/setChecked.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
## setChecked(checked)

checkbox 型もしくは radio 型の input 要素の checked の値をセットします。そして、 `v-model` に束縛されているデータを更新します。

- **引数:**
- `{Boolean} checked (デフォルト: true)`

- **例:**

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

const wrapper = mount(Foo)
const option = wrapper.find('input[type="radio"]')
option.setChecked()
```

- **注:**

`v-model` を経由して `radioInput.element.checked = true; radioInput.trigger('input')` で state に値をセットしようとすると、 `v-model` はトリガされません。 `v-model` は `change` イベントでトリガされます。


`checkboxInput.setChecked(checked)` は以下のコードのエイリアスです。

```js
checkboxInput.element.checked = checked
checkboxInput.trigger('click')
checkboxInput.trigger('change')
```
2 changes: 1 addition & 1 deletion docs/ja/api/wrapper/setData.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
## setData(data)

`Wrapper` `vm` データを設定し、更新を強制します
`Wrapper` `vm` データを設定します

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

Expand Down
27 changes: 27 additions & 0 deletions docs/ja/api/wrapper/setSelected.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
## setSelected()

option 要素を選択します。そして、 `v-model` に束縛されているデータを更新します。


- **例:**

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

const wrapper = shallowMount(Foo)
const options = wrapper.find('select').findAll('option')

options.at(1).setSelected()
```

- **注:**

`v-model` を経由して `option.element.selected = true; parentSelect.trigger('input')` で state に値をセットしようとすると、 `v-model` はトリガされません。 `v-model` は `change` イベントでトリガされます。

`option.setSelected()` は以下のコードのエイリアスです。

```js
option.element.selected = true
parentSelect.trigger('change')
```
26 changes: 26 additions & 0 deletions docs/ja/api/wrapper/setValue.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
## setValue(value)

text コントロールの input 要素の 値をセットします。そして、 `v-model` に束縛されているデータを更新します。

- **引数:**
- `{String} value`

- **例:**

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

const wrapper = mount(Foo)
const input = wrapper.find('input[type="text"]')
input.setValue('some value')
```

- **注:**

`textInput.setValue(value)` は以下のコードのエイリアスです。

```js
textInput.element.value = value
textInput.trigger('input')
```
33 changes: 18 additions & 15 deletions docs/ja/guides/using-with-vuex.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
### Vuex と一緒に使用する
# Vuex と一緒に使用する

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

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

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

Expand Down Expand Up @@ -215,47 +216,49 @@ export default{
``` js
import { shallowMount, createLocalVue } from '@vue/test-utils'
import Vuex from 'vuex'
import Modules from '../../../src/components/Modules'
import module from '../../../src/store/module'
import MyComponent from '../../../src/components/MyComponent'
import myModule from '../../../src/store/myModule'

const localVue = createLocalVue()

localVue.use(Vuex)

describe('Modules.vue', () => {
describe('MyComponent.vue', () => {
let actions
let state
let store

beforeEach(() => {
state = {
module: {
clicks: 2
}
clicks: 2
}

actions = {
moduleActionClick: jest.fn()
}

store = new Vuex.Store({
state,
actions,
getters: module.getters
modules: {
myModule: {
state,
actions,
getters: myModule.getters
}
}
})
})

it('calls store action moduleActionClick when button is clicked', () => {
const wrapper = shallowMount(Modules, { store, localVue })
it('calls store action "moduleActionClick" when button is clicked', () => {
const wrapper = shallowMount(MyComponent, { store, localVue })
const button = wrapper.find('button')
button.trigger('click')
expect(actions.moduleActionClick).toHaveBeenCalled()
})

it('Renders state.inputValue in first p tag', () => {
const wrapper = shallowMount(Modules, { store, localVue })
it('renders "state.inputValue" in first p tag', () => {
const wrapper = shallowMount(MyComponent, { store, localVue })
const p = wrapper.find('p')
expect(p.text()).toBe(state.module.clicks.toString())
expect(p.text()).toBe(state.clicks.toString())
})
})
```
Expand Down