From d9f18a1bd7bf933b4b8483867d4a3508a21b7fd1 Mon Sep 17 00:00:00 2001 From: 38elements <38elements@users.noreply.github.com> Date: Mon, 22 Jan 2018 22:04:31 +0900 Subject: [PATCH 1/6] docs: update docs/ja --- docs/ja/README.md | 7 +- docs/ja/SUMMARY.md | 6 +- docs/ja/api/README.md | 9 +- docs/ja/api/components/TransitionStub.md | 8 +- docs/ja/api/wrapper-array/hasStyle.md | 24 --- docs/ja/api/wrapper-array/setComputed.md | 25 --- docs/ja/api/wrapper-array/visible.md | 22 +++ docs/ja/api/wrapper/findAll.md | 2 +- docs/ja/api/wrapper/hasStyle.md | 24 --- docs/ja/api/wrapper/visible.md | 21 +++ docs/ja/guides/README.md | 1 + docs/ja/guides/testing-SFCs-with-karma.md | 203 ++++++++++++++++++++++ 12 files changed, 260 insertions(+), 92 deletions(-) delete mode 100644 docs/ja/api/wrapper-array/hasStyle.md delete mode 100644 docs/ja/api/wrapper-array/setComputed.md create mode 100644 docs/ja/api/wrapper-array/visible.md delete mode 100644 docs/ja/api/wrapper/hasStyle.md create mode 100644 docs/ja/api/wrapper/visible.md create mode 100644 docs/ja/guides/testing-SFCs-with-karma.md diff --git a/docs/ja/README.md b/docs/ja/README.md index 76e3d5fcf..3ed66651c 100644 --- a/docs/ja/README.md +++ b/docs/ja/README.md @@ -9,6 +9,7 @@ * [テストランナを選ぶ](guides/choosing-a-test-runner.md) * [Jest による単一ファイルコンポーネントのテスト](guides/testing-SFCs-with-jest.md) * [Mocha + webpack による単一ファイルコンポーネントのテスト](guides/testing-SFCs-with-mocha-webpack.md) + * [Karma による単一ファイルコンポーネントのテスト](guides/testing-SFCs-with-karma.md) * [非同期動作のテスト](guides/testing-async-components.md) * [Vue Router と一緒に使う](guides/using-with-vue-router.md) * [Vuex と一緒に使う](guides/using-with-vuex.md) @@ -36,35 +37,33 @@ * [destroy](api/wrapper/destroy.md) * [find](api/wrapper/find.md) * [findAll](api/wrapper/findAll.md) - * [hasStyle](api/wrapper/hasStyle.md) * [html](api/wrapper/html.md) * [is](api/wrapper/is.md) * [isEmpty](api/wrapper/isEmpty.md) * [isVueInstance](api/wrapper/isVueInstance.md) * [name](api/wrapper/name.md) * [props](api/wrapper/props.md) - * [setComputed](api/wrapper/setComputed.md) * [setData](api/wrapper/setData.md) * [setMethods](api/wrapper/setMethods.md) * [setProps](api/wrapper/setProps.md) * [text](api/wrapper/text.md) * [trigger](api/wrapper/trigger.md) * [update](api/wrapper/update.md) + * [visible](api/wrapper/visible.md) * [WrapperArray](api/wrapper-array/README.md) * [at](api/wrapper-array/at.md) * [contains](api/wrapper-array/contains.md) * [exists](api/wrapper/exists.md) * [destroy](api/wrapper-array/destroy.md) - * [hasStyle](api/wrapper-array/hasStyle.md) * [is](api/wrapper-array/is.md) * [isEmpty](api/wrapper-array/isEmpty.md) * [isVueInstance](api/wrapper-array/isVueInstance.md) - * [setComputed](api/wrapper-array/setComputed.md) * [setData](api/wrapper-array/setData.md) * [setMethods](api/wrapper-array/setMethods.md) * [setProps](api/wrapper-array/setProps.md) * [trigger](api/wrapper-array/trigger.md) * [update](api/wrapper-array/update.md) + * [visible](api/wrapper-array/visible.md) * [コンポーネント](api/components/README.md) * [TransitionStub](api/components/TransitionStub.md) * [TransitionGroupStub](api/components/TransitionGroupStub.md) diff --git a/docs/ja/SUMMARY.md b/docs/ja/SUMMARY.md index 0a2a31646..e9ee918bb 100644 --- a/docs/ja/SUMMARY.md +++ b/docs/ja/SUMMARY.md @@ -7,6 +7,7 @@ * [テストランナを選ぶ](guides/choosing-a-test-runner.md) * [Jest による単一ファイルコンポーネントのテスト](guides/testing-SFCs-with-jest.md) * [Mocha + webpack による単一ファイルコンポーネントのテスト](guides/testing-SFCs-with-mocha-webpack.md) + * [Karma による単一ファイルコンポーネントのテスト](guides/testing-SFCs-with-karma.md) * [非同期動作のテスト](guides/testing-async-components.md) * [Vue Router と一緒に使う](guides/using-with-vue-router.md) * [Vuex と一緒に使う](guides/using-with-vuex.md) @@ -34,7 +35,6 @@ * [destroy](api/wrapper/destroy.md) * [find](api/wrapper/find.md) * [findAll](api/wrapper/findAll.md) - * [hasStyle](api/wrapper/hasStyle.md) * [html](api/wrapper/html.md) * [is](api/wrapper/is.md) * [isEmpty](api/wrapper/isEmpty.md) @@ -47,21 +47,21 @@ * [text](api/wrapper/text.md) * [trigger](api/wrapper/trigger.md) * [update](api/wrapper/update.md) + * [visible](api/wrapper/visible.md) * [WrapperArray](api/wrapper-array/README.md) * [at](api/wrapper-array/at.md) * [contains](api/wrapper-array/contains.md) * [exists](api/wrapper/exists.md) * [destroy](api/wrapper-array/destroy.md) - * [hasStyle](api/wrapper-array/hasStyle.md) * [is](api/wrapper-array/is.md) * [isEmpty](api/wrapper-array/isEmpty.md) * [isVueInstance](api/wrapper-array/isVueInstance.md) - * [setComputed](api/wrapper-array/setComputed.md) * [setData](api/wrapper-array/setData.md) * [setMethods](api/wrapper-array/setMethods.md) * [setProps](api/wrapper-array/setProps.md) * [trigger](api/wrapper-array/trigger.md) * [update](api/wrapper-array/update.md) + * [visible](api/wrapper-array/visible.md) * [コンポーネント](api/components/README.md) * [TransitionStub](api/components/TransitionStub.md) * [TransitionGroupStub](api/components/TransitionGroupStub.md) diff --git a/docs/ja/api/README.md b/docs/ja/api/README.md index b6fd8061b..8f56ddbf4 100644 --- a/docs/ja/api/README.md +++ b/docs/ja/api/README.md @@ -23,38 +23,33 @@ * [destroy](./wrapper/destroy.md) * [find](./wrapper/find.md) * [findAll](./wrapper/findAll.md) - * [hasAttribute](./wrapper/hasAttribute.md) - * [hasClass](./wrapper/hasClass.md) - * [hasProp](./wrapper/hasProp.md) - * [hasStyle](./wrapper/hasStyle.md) * [html](./wrapper/html.md) * [is](./wrapper/is.md) * [isEmpty](./wrapper/isEmpty.md) * [isVueInstance](./wrapper/isVueInstance.md) * [name](./wrapper/name.md) * [props](./wrapper/props.md) - * [setComputed](./wrapper/setComputed.md) * [setData](./wrapper/setData.md) * [setMethods](./wrapper/setMethods.md) * [setProps](./wrapper/setProps.md) * [text](./wrapper/text.md) * [trigger](./wrapper/trigger.md) * [update](./wrapper/update.md) + * [visible](./wrapper/visible.md) * [WrapperArray](./wrapper-array/README.md) * [at](./wrapper-array/at.md) * [contains](./wrapper-array/contains.md) * [exists](./wrapper/exists.md) * [destroy](./wrapper-array/destroy.md) - * [hasStyle](./wrapper-array/hasStyle.md) * [is](./wrapper-array/is.md) * [isEmpty](./wrapper-array/isEmpty.md) * [isVueInstance](./wrapper-array/isVueInstance.md) - * [setComputed](./wrapper-array/setComputed.md) * [setData](./wrapper-array/setData.md) * [setMethods](./wrapper-array/setMethods.md) * [setProps](./wrapper-array/setProps.md) * [trigger](./wrapper-array/trigger.md) * [update](./wrapper-array/update.md) + * [visible](./wrapper-array/visible.md) * [コンポーネント](./components/README.md) * [TransitionStub](./components/TransitionStub.md) * [TransitionGroupStub](./components/TransitionGroupStub.md) diff --git a/docs/ja/api/components/TransitionStub.md b/docs/ja/api/components/TransitionStub.md index b3ad07578..6c4cddc42 100644 --- a/docs/ja/api/components/TransitionStub.md +++ b/docs/ja/api/components/TransitionStub.md @@ -5,17 +5,17 @@ デフォルトではすべての `transition` コンポーネントは `TransitionStub` でスタブされます。これは `vue-test-utils` の `config` で設定されています。スタブせずに既存の `transition` コンポーネントを使用したい場合は、 `config.stubs['transition']` に `false` をセットします。: ```js -import VueTestUtils from '@vue/test-utils' +import { config } from '@vue/test-utils' -VueTestUtils.config.stubs.transition = false +config.stubs.transition = false ``` `transition` コンポーネントをスタブするために再びセットするには以下のようにします。 ```js -import VueTestUtils, { TransitionStub } from '@vue/test-utils' +import { config, TransitionStub } from '@vue/test-utils' -VueTestUtils.config.stubs.transition = TransitionStub +config.stubs.transition = TransitionStub ``` マウンティングオプションでスタブとしてセットするには以下のようにします。 diff --git a/docs/ja/api/wrapper-array/hasStyle.md b/docs/ja/api/wrapper-array/hasStyle.md deleted file mode 100644 index ab0bb99ae..000000000 --- a/docs/ja/api/wrapper-array/hasStyle.md +++ /dev/null @@ -1,24 +0,0 @@ -# hasStyle(style, value) - -`WrapperArray` の全ての `Wrapper` の DOM ノードが style 属性とマッチする値を持っているか検証します。 - -`Wrapper` DOM ノードが `value` にマッチする `style` 値がある場合 `true` を返します。 - -**`jsdom`で実行しているときにのみインラインスタイルを検出しますので注意してください。** -- **引数:** - - `{string} style` - - `{string} value` - -- **戻り値:** `{boolean}` - -- **例:** - -```js -import { mount } from '@vue/test-utils' -import { expect } from 'chai' -import Foo from './Foo.vue' - -const wrapper = mount(Foo) -const divArray = wrapper.findAll('div') -expect(divArray.hasStyle('color', 'red')).toBe(true) -``` diff --git a/docs/ja/api/wrapper-array/setComputed.md b/docs/ja/api/wrapper-array/setComputed.md deleted file mode 100644 index f28d970db..000000000 --- a/docs/ja/api/wrapper-array/setComputed.md +++ /dev/null @@ -1,25 +0,0 @@ -# setComputed(computedObjects) - -`WrapperArray` の `Wrapper` ごとに `Wrapper` `vm` の computed プロパティを設定し、更新を強制します。 - -**すべての Wrapper には Vue インスタンスを含む必要があることに注意してください** -**`setComputed` に渡す computed プロパティはすべての Vue インスタンスに存在する必要があることに注意してください** - -- **引数:** - - `{Object} computed properties` - -- **例:** - -```js -import { mount } from '@vue/test-utils' -import Foo from './Foo.vue' -import Bar from './Bar.vue' - -const wrapper = mount(Foo) -const barArray = wrapper.findAll(Bar) - -barArray.setComputed({ - computed1: 'new-computed1', - computed2: 'new-computed2' -}) -``` diff --git a/docs/ja/api/wrapper-array/visible.md b/docs/ja/api/wrapper-array/visible.md new file mode 100644 index 000000000..9b826bce8 --- /dev/null +++ b/docs/ja/api/wrapper-array/visible.md @@ -0,0 +1,22 @@ +# visible() + +`WrapperArray` 内のすべての `Wrapper` が表示されているかアサートします。 + +style が `display: none` か `visibility: hidden` の親要素を持つ `Wrapper` が少なくとも1つある場合、 false を返します。 + +コンポーネントが `v-show` によって非表示になっているかアサートすることに使用することができます。 + +- **戻り値:** `{boolean}` + +- **例:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +expect(wrapper.visible()).toBe(true) +expect(wrapper.findAll('.is-not-visible').visible()).toBe(false) +expect(wrapper.findAll('.is-visible').visible()).toBe(true) +``` diff --git a/docs/ja/api/wrapper/findAll.md b/docs/ja/api/wrapper/findAll.md index aaa827316..9fb2e70aa 100644 --- a/docs/ja/api/wrapper/findAll.md +++ b/docs/ja/api/wrapper/findAll.md @@ -1,6 +1,6 @@ # findAll(selector) -[ラッパ (Wrapper)](./README.md) の[`WrapperArray`](../wrapper-array/README.md)を返します。 +[`WrapperArray`](../wrapper-array/README.md)を返します。 有効な[セレクタ](../selectors.md)を使用してください。 diff --git a/docs/ja/api/wrapper/hasStyle.md b/docs/ja/api/wrapper/hasStyle.md deleted file mode 100644 index ee7fe766e..000000000 --- a/docs/ja/api/wrapper/hasStyle.md +++ /dev/null @@ -1,24 +0,0 @@ -# hasStyle(style, value) - -`Wrapper` DOM ノードが値に一致するにスタイルを持つか検証します。 - -`Wrapper` DOM ノードが `value` に一致する `style` を持つ場合は、`true` を返します。 - -**`jsdom` で実行しているときのみ、インラインスタイルを検出します。** - -- **引数:** - - `{string} style` - - `{string} value` - -- **戻り値:** `{boolean}` - -- **例:** - -```js -import { mount } from '@vue/test-utils' -import { expect } from 'chai' -import Foo from './Foo.vue' - -const wrapper = mount(Foo) -expect(wrapper.hasStyle('color', 'red')).toBe(true) -``` diff --git a/docs/ja/api/wrapper/visible.md b/docs/ja/api/wrapper/visible.md new file mode 100644 index 000000000..e06526855 --- /dev/null +++ b/docs/ja/api/wrapper/visible.md @@ -0,0 +1,21 @@ +# visible() + +`Wrapper` が表示されているかアサートします。 + +style が `display: none` か `visibility: hidden` の親要素がある場合、 false を返します。 + +コンポーネントが `v-show` によって非表示になっているかアサートすることに使用することができます。 + +- **戻り値:** `{boolean}` + +- **例:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +expect(wrapper.visible()).toBe(true) +expect(wrapper.find('.is-not-visible').visible()).toBe(false) +``` diff --git a/docs/ja/guides/README.md b/docs/ja/guides/README.md index 6024d2668..3ead74183 100644 --- a/docs/ja/guides/README.md +++ b/docs/ja/guides/README.md @@ -6,6 +6,7 @@ * [テストランナを選ぶ](./choosing-a-test-runner.md) * [Jest による単一ファイルコンポーネントのテスト](./testing-SFCs-with-jest.md) * [Mocha + webpack による単一ファイルコンポーネントのテスト](./testing-SFCs-with-mocha-webpack.md) +* [Karma による単一ファイルコンポーネントのテスト](./testing-SFCs-with-karma.md) * [非同期動作のテスト](./testing-async-components.md) * [Vue Router と一緒に使う](./using-with-vue-router.md) * [Vuex と一緒に使う](./using-with-vuex.md) diff --git a/docs/ja/guides/testing-SFCs-with-karma.md b/docs/ja/guides/testing-SFCs-with-karma.md new file mode 100644 index 000000000..9dd39d5f4 --- /dev/null +++ b/docs/ja/guides/testing-SFCs-with-karma.md @@ -0,0 +1,203 @@ +# Karma による単一ファイルコンポーネントのテスト + +> このセットアップの例は [GitHub](https://github.com/eddyerburgh/vue-test-utils-karma-example) にあり、利用可能です。 + +Karma はブラウザを起動し、テストを実行しそれをレポートするテストランナーです。ここではテストを書くために Mocha を使用します。テストアサーションのために Chai を使用します。 + +## Mocha をセットアップする + +セットアップを始めるにあたって `vue-cli` でスキャフォールドされた `webpack-simple` テンプレートのように Webpack 、vue-loader 、 Babel が既に設定されていることを想定しています。 + + +最初にテストに必要なライブラリをインストールします。 + +``` bash +npm install --save-dev @vue/test-utils karma karma-chrome-launcher karma-mocha karma-sourcemap-loader karma-spec-reporter karma-webpack mocha +``` + +次に test スクリプトを `package.json` に定義します。 + +```json +// package.json +{ + "scripts": { + "test": "karma start --single-run" + } +} +``` + +- `--single-run` フラグは Karma にテストスウィートを1回実行するように指定します。 + +### Karma の設定 + +プロジェクトディレクトリのトップに karma.conf.js ファイルを作成します。 + +```js +// karma.conf.js + +var webpackConfig = require('./webpack.config.js') + +module.exports = function (config) { + config.set({ + frameworks: ['mocha'], + + files: [ + 'test/**/*.spec.js' + ], + + preprocessors: { + '**/*.spec.js': ['webpack', 'sourcemap'] + }, + + webpack: webpackConfig, + + reporters: ['spec'], + + browsers: ['Chrome'] + }) +} +``` + +このファイルは Karma を設定するために使用されます。 + +ファイルを Webpack で前処理する必要があります。そのために、 Webpack をプレプロセッサとして加えます。そして、 Webpack の設定を含めます。プロジェクトに元々あった Webpack の設定ファイルを変更なしで使用することができます。 + +この設定では、 Chrome でテストを実行します。他のブラウザーを加える方法は [Karma のドキュメントにある Browsers](http://karma-runner.github.io/2.0/config/browsers.html) を見てください。 + +### アサーションライブラリを選ぶ + +[Chai](http://chaijs.com/) はよく Mocha と一緒に使用される人気のあるアサーションライブラリです。spy と stub を生成するために [Sinon](http://sinonjs.org/) を見てみるとよいかもしれません。 + +テストで `Chai` を使うために `karma-chai` プラグインをインストールします。 + +``` bash +npm install --save-dev karma-chai +``` + +### テストを加える + +ファイルを `Counter.vue` という名前で `src` ディレクトリに作成します。 + +``` html + + + +``` + +そして、以下のようなコードの `test/Counter.spec.js` という名前のテストファイルを作成します。 + +```js +import { expect } from 'chai' +import { shallow } from '@vue/test-utils' +import Counter from '../src/Counter.vue' + +describe('Counter.vue', () => { + it('increments count when button is clicked', () => { + const wrapper = shallow(Counter) + wrapper.find('button').trigger('click') + expect(wrapper.find('div').text()).contains('1') + }) +}) +``` + +テストを実行できるようになりました。 + +``` +npm run test +``` + +やった!テストが走った。 + +### カバレッジ + +Karma にコードカバレッジをセットアップするために、 `karma-coverage` プラグインを使います。 + +デフォルトでは、 `karma-coverage` はソースマップをカバレッジレポートをマップすることに使用しません。だから、確実に正しくカバレッジがマップされるために `babel-plugin-istanbul` を使用します。 + +`karma-coverage` と `babel-plugin-istanbul` と `cross-env` をインストールします。 + +``` +npm install --save-dev karma-coverage cross-env +``` + +環境変数の `BABEL_ENV` をセットするために `cross-env` を使います。テストをコンパイルする時に babel-plugin-istanbul を使用します。プロダクションコードをコンパイルする時に `babel-plugin-istnabul` を含めるべきではありません。 + +``` +npm install --save-dev babel-plugin-istanbul +``` + +`BABEL_ENV` に test がセットされた時、 `babel-plugin-istanbul` を使用するために `.babelrc` ファイルを変更します。 + +```json +{ + "presets": [ + ["env", { "modules": false }], + "stage-3" + ], + "env": { + "test": { + "plugins": ["istanbul"] + } + } +} +``` + +カバレッジを取るために karma.conf.js ファイルを変更します。 `coverage` を reporters 配列に加えます。そして、 coverageReporter を加えます。 + +```js +// karma.conf.js + +module.exports = function (config) { + config.set({ + // ... + + reporters: ['spec', 'coverage'], + + coverageReporter: { + dir: './coverage', + reporters: [ + { type: 'lcov', subdir: '.' }, + { type: 'text-summary' } + ] + } + }) +} +``` + +そして、 `BABEL_ENV` をセットするために `test` スクリプトを変更します。 + +```json +// package.json +{ + "scripts": { + "test": "cross-env BABEL_ENV=test karma start --single-run" + } +} +``` + +### リソース + +- [このセットアップの例](https://github.com/eddyerburgh/vue-test-utils-karma-example) +- [Karma](http://karma-runner.github.io/) +- [Mocha](https://mochajs.org/) +- [Chai](http://chaijs.com/) +- [Sinon](http://sinonjs.org/) From 9c6ed4d0511471d049f4d432e9ba77239160bee7 Mon Sep 17 00:00:00 2001 From: 38elements <38elements@users.noreply.github.com> Date: Mon, 29 Jan 2018 21:08:23 +0900 Subject: [PATCH 2/6] Update testing-SFCs-with-karma.md --- docs/ja/guides/testing-SFCs-with-karma.md | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/ja/guides/testing-SFCs-with-karma.md b/docs/ja/guides/testing-SFCs-with-karma.md index 9dd39d5f4..4fe92ddb2 100644 --- a/docs/ja/guides/testing-SFCs-with-karma.md +++ b/docs/ja/guides/testing-SFCs-with-karma.md @@ -8,7 +8,6 @@ Karma はブラウザを起動し、テストを実行しそれをレポート セットアップを始めるにあたって `vue-cli` でスキャフォールドされた `webpack-simple` テンプレートのように Webpack 、vue-loader 、 Babel が既に設定されていることを想定しています。 - 最初にテストに必要なライブラリをインストールします。 ``` bash From 12b66da2051d8ca206907794bcbb4d5280f63160 Mon Sep 17 00:00:00 2001 From: 38elements <38elements@users.noreply.github.com> Date: Mon, 29 Jan 2018 21:37:05 +0900 Subject: [PATCH 3/6] Update testing-SFCs-with-karma.md --- docs/ja/guides/testing-SFCs-with-karma.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/ja/guides/testing-SFCs-with-karma.md b/docs/ja/guides/testing-SFCs-with-karma.md index 4fe92ddb2..a533ce156 100644 --- a/docs/ja/guides/testing-SFCs-with-karma.md +++ b/docs/ja/guides/testing-SFCs-with-karma.md @@ -61,7 +61,7 @@ module.exports = function (config) { ファイルを Webpack で前処理する必要があります。そのために、 Webpack をプレプロセッサとして加えます。そして、 Webpack の設定を含めます。プロジェクトに元々あった Webpack の設定ファイルを変更なしで使用することができます。 -この設定では、 Chrome でテストを実行します。他のブラウザーを加える方法は [Karma のドキュメントにある Browsers](http://karma-runner.github.io/2.0/config/browsers.html) を見てください。 +この設定では、 Chrome でテストを実行します。他のブラウザーを加える方法は [Karma のドキュメントにある Browsers セクション](http://karma-runner.github.io/2.0/config/browsers.html) を見てください。 ### アサーションライブラリを選ぶ From b04604b75a47f1d7260a2efb17399c2c2dd689b0 Mon Sep 17 00:00:00 2001 From: 38elements <38elements@users.noreply.github.com> Date: Mon, 29 Jan 2018 21:48:16 +0900 Subject: [PATCH 4/6] Update testing-SFCs-with-karma.md --- docs/ja/guides/testing-SFCs-with-karma.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/ja/guides/testing-SFCs-with-karma.md b/docs/ja/guides/testing-SFCs-with-karma.md index a533ce156..39a84ec79 100644 --- a/docs/ja/guides/testing-SFCs-with-karma.md +++ b/docs/ja/guides/testing-SFCs-with-karma.md @@ -75,7 +75,7 @@ npm install --save-dev karma-chai ### テストを加える -ファイルを `Counter.vue` という名前で `src` ディレクトリに作成します。 +`Counter.vue` ファイルを `src` ディレクトリに作成します。 ``` html