diff --git a/docs/guides/using-with-vuex.md b/docs/guides/using-with-vuex.md index 7fb25db82..a69d755b9 100644 --- a/docs/guides/using-with-vuex.md +++ b/docs/guides/using-with-vuex.md @@ -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) \ No newline at end of file +- [`createLocalVue`](../api/createLocalVue.md) diff --git a/docs/ja/README.md b/docs/ja/README.md index 8733d9b88..7ab9618ee 100644 --- a/docs/ja/README.md +++ b/docs/ja/README.md @@ -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) diff --git a/docs/ja/api/config.md b/docs/ja/api/config.md index be41ac562..de6c1ffb9 100644 --- a/docs/ja/api/config.md +++ b/docs/ja/api/config.md @@ -14,7 +14,7 @@ vue-test-utils にはオプションを定義するための `config` オプシ コンポーネントで使用するスタブはマウンティングオプションの `stubs` で設定します。 -マウンティングオプションの `stubs` が配列である場合、`config.stubs` は配列に変換されます。その場合、使用されるスタブは`<${component name}-stub>`を返す基本的なコンポーネントになります。 +マウンティングオプションの `stubs` が配列である場合、`config.stubs` は配列に変換されます。その場合、使用されるスタブは`<${コンポーネント名}-stub>`を返す基本的なコンポーネントになります。 例: @@ -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 +``` diff --git a/docs/ja/api/options.md b/docs/ja/api/options.md index 5230b9b22..bb1541f78 100644 --- a/docs/ja/api/options.md +++ b/docs/ja/api/options.md @@ -86,7 +86,7 @@ expect(wrapper.find('#fooWrapper').html()).toBe( - type: `{ [name: string]: Component | boolean } | Array` -子コンポーネントをスタブします。スタブまたはオブジェクトに対するコンポーネント名の配列になります。`stubs` が配列の場合、すべてのスタブは `<${component name}-stub>` になります。 +子コンポーネントをスタブします。スタブまたはオブジェクトに対するコンポーネント名の配列になります。`stubs` が配列の場合、すべてのスタブは `<${コンポーネント名}-stub>` になります。 例: @@ -101,7 +101,9 @@ shallowMount(Component, { stubs: { // 特定の実装によるスタブ 'registered-component': Foo, - // デフォルトのスタブを作成します + // デフォルトのスタブを作成します。 + // このケースではデフォルトのスタブのコンポーネント名は another-component です。 + // デフォルトのスタブは <${デフォルトのスタブのコンポーネント名}-stub> です。 'another-component': true } }) diff --git a/docs/ja/api/wrapper-array/README.md b/docs/ja/api/wrapper-array/README.md index edc274798..d59637498 100644 --- a/docs/ja/api/wrapper-array/README.md +++ b/docs/ja/api/wrapper-array/README.md @@ -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)!!! diff --git a/docs/ja/api/wrapper-array/setData.md b/docs/ja/api/wrapper-array/setData.md index 3d82601fa..5a79c91f6 100644 --- a/docs/ja/api/wrapper-array/setData.md +++ b/docs/ja/api/wrapper-array/setData.md @@ -1,6 +1,6 @@ ## setData(data) -`WrapperArray` の `Wrapper` ごとに `Wrapper` に `vm` データをセットし、強制的に更新します。 +`WrapperArray` の `Wrapper` ごとに `Wrapper` に `vm` データをセットします。 **すべての `Wrapper` は Vue インスタンスを含んでいなければならないことに注意してください。** diff --git a/docs/ja/api/wrapper/README.md b/docs/ja/api/wrapper/README.md index 8cbb1fcb2..c9b3134ee 100644 --- a/docs/ja/api/wrapper/README.md +++ b/docs/ja/api/wrapper/README.md @@ -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 です。 ## メソッド @@ -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)!!! diff --git a/docs/ja/api/wrapper/setChecked.md b/docs/ja/api/wrapper/setChecked.md new file mode 100644 index 000000000..f9e0b4e42 --- /dev/null +++ b/docs/ja/api/wrapper/setChecked.md @@ -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') +``` diff --git a/docs/ja/api/wrapper/setData.md b/docs/ja/api/wrapper/setData.md index e346a786f..a599b195e 100644 --- a/docs/ja/api/wrapper/setData.md +++ b/docs/ja/api/wrapper/setData.md @@ -1,6 +1,6 @@ ## setData(data) -`Wrapper` `vm` データを設定し、更新を強制します。 +`Wrapper` `vm` データを設定します。 **Wrapper には Vue インスタンスを含む必要があることに注意してください** diff --git a/docs/ja/api/wrapper/setSelected.md b/docs/ja/api/wrapper/setSelected.md new file mode 100644 index 000000000..014ce7f8a --- /dev/null +++ b/docs/ja/api/wrapper/setSelected.md @@ -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') +``` diff --git a/docs/ja/api/wrapper/setValue.md b/docs/ja/api/wrapper/setValue.md new file mode 100644 index 000000000..ad0773bcd --- /dev/null +++ b/docs/ja/api/wrapper/setValue.md @@ -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') +``` diff --git a/docs/ja/guides/using-with-vuex.md b/docs/ja/guides/using-with-vuex.md index 76d583fcd..e2e208793 100644 --- a/docs/ja/guides/using-with-vuex.md +++ b/docs/ja/guides/using-with-vuex.md @@ -1,7 +1,8 @@ -### Vuex と一緒に使用する +# Vuex と一緒に使用する このガイドでは、`vue-test-utils` でコンポーネントで Vuex をテストする方法について、見ていきます。 +## コンポーネント内の Vuex をテストする ### アクションのモック @@ -215,23 +216,21 @@ 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 = { @@ -239,23 +238,27 @@ describe('Modules.vue', () => { } 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()) }) }) ```