From ee0b51fafd7a4b11575b30bc9ff4eb185ab1f8da Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Mon, 6 Nov 2017 16:35:21 +0100 Subject: [PATCH 01/10] Add french part Signed-off-by: Bruno Lesieur --- docs/LANGS.md | 1 + docs/fr/README.md | 64 +++++ docs/fr/SUMMARY.md | 64 +++++ docs/fr/api/README.md | 49 ++++ docs/fr/api/createLocalVue.md | 28 ++ docs/fr/api/mount.md | 136 +++++++++ docs/fr/api/options.md | 165 +++++++++++ docs/fr/api/selectors.md | 43 +++ docs/fr/api/shallow.md | 124 +++++++++ docs/fr/api/wrapper-array/README.md | 11 + docs/fr/api/wrapper-array/at.md | 21 ++ docs/fr/api/wrapper-array/contains.md | 24 ++ docs/fr/api/wrapper-array/destroy.md | 18 ++ docs/fr/api/wrapper-array/hasAttribute.md | 21 ++ docs/fr/api/wrapper-array/hasClass.md | 20 ++ docs/fr/api/wrapper-array/hasProp.md | 24 ++ docs/fr/api/wrapper-array/hasStyle.md | 24 ++ docs/fr/api/wrapper-array/is.md | 20 ++ docs/fr/api/wrapper-array/isEmpty.md | 17 ++ docs/fr/api/wrapper-array/isVueInstance.md | 18 ++ docs/fr/api/wrapper-array/setData.md | 22 ++ docs/fr/api/wrapper-array/setMethods.md | 27 ++ docs/fr/api/wrapper-array/setProps.md | 22 ++ docs/fr/api/wrapper-array/trigger.md | 26 ++ docs/fr/api/wrapper-array/update.md | 20 ++ docs/fr/api/wrapper/README.md | 16 ++ docs/fr/api/wrapper/contains.md | 23 ++ docs/fr/api/wrapper/destroy.md | 20 ++ docs/fr/api/wrapper/emitted.md | 33 +++ docs/fr/api/wrapper/emittedByOrder.md | 28 ++ docs/fr/api/wrapper/exists.md | 21 ++ docs/fr/api/wrapper/find.md | 27 ++ docs/fr/api/wrapper/findAll.md | 27 ++ docs/fr/api/wrapper/hasAttribute.md | 37 +++ docs/fr/api/wrapper/hasClass.md | 21 ++ docs/fr/api/wrapper/hasProp.md | 25 ++ docs/fr/api/wrapper/hasStyle.md | 24 ++ docs/fr/api/wrapper/html.md | 16 ++ docs/fr/api/wrapper/is.md | 19 ++ docs/fr/api/wrapper/isEmpty.md | 16 ++ docs/fr/api/wrapper/isVueInstance.md | 16 ++ docs/fr/api/wrapper/name.md | 18 ++ docs/fr/api/wrapper/setData.md | 20 ++ docs/fr/api/wrapper/setMethods.md | 24 ++ docs/fr/api/wrapper/setProps.md | 48 ++++ docs/fr/api/wrapper/text.md | 16 ++ docs/fr/api/wrapper/trigger.md | 38 +++ docs/fr/api/wrapper/update.md | 19 ++ docs/fr/guides/README.md | 11 + docs/fr/guides/choosing-a-test-runner.md | 45 +++ docs/fr/guides/common-tips.md | 134 +++++++++ docs/fr/guides/dom-events.md | 197 +++++++++++++ docs/fr/guides/getting-started.md | 116 ++++++++ docs/fr/guides/testing-SFCs-with-jest.md | 178 ++++++++++++ .../guides/testing-SFCs-with-mocha-webpack.md | 180 ++++++++++++ docs/fr/guides/using-with-vue-router.md | 71 +++++ docs/fr/guides/using-with-vuex.md | 263 ++++++++++++++++++ 57 files changed, 2756 insertions(+) create mode 100644 docs/fr/README.md create mode 100644 docs/fr/SUMMARY.md create mode 100644 docs/fr/api/README.md create mode 100644 docs/fr/api/createLocalVue.md create mode 100644 docs/fr/api/mount.md create mode 100644 docs/fr/api/options.md create mode 100644 docs/fr/api/selectors.md create mode 100644 docs/fr/api/shallow.md create mode 100644 docs/fr/api/wrapper-array/README.md create mode 100644 docs/fr/api/wrapper-array/at.md create mode 100644 docs/fr/api/wrapper-array/contains.md create mode 100644 docs/fr/api/wrapper-array/destroy.md create mode 100644 docs/fr/api/wrapper-array/hasAttribute.md create mode 100644 docs/fr/api/wrapper-array/hasClass.md create mode 100644 docs/fr/api/wrapper-array/hasProp.md create mode 100644 docs/fr/api/wrapper-array/hasStyle.md create mode 100644 docs/fr/api/wrapper-array/is.md create mode 100644 docs/fr/api/wrapper-array/isEmpty.md create mode 100644 docs/fr/api/wrapper-array/isVueInstance.md create mode 100644 docs/fr/api/wrapper-array/setData.md create mode 100644 docs/fr/api/wrapper-array/setMethods.md create mode 100644 docs/fr/api/wrapper-array/setProps.md create mode 100644 docs/fr/api/wrapper-array/trigger.md create mode 100644 docs/fr/api/wrapper-array/update.md create mode 100644 docs/fr/api/wrapper/README.md create mode 100644 docs/fr/api/wrapper/contains.md create mode 100644 docs/fr/api/wrapper/destroy.md create mode 100644 docs/fr/api/wrapper/emitted.md create mode 100644 docs/fr/api/wrapper/emittedByOrder.md create mode 100644 docs/fr/api/wrapper/exists.md create mode 100644 docs/fr/api/wrapper/find.md create mode 100644 docs/fr/api/wrapper/findAll.md create mode 100644 docs/fr/api/wrapper/hasAttribute.md create mode 100644 docs/fr/api/wrapper/hasClass.md create mode 100644 docs/fr/api/wrapper/hasProp.md create mode 100644 docs/fr/api/wrapper/hasStyle.md create mode 100644 docs/fr/api/wrapper/html.md create mode 100644 docs/fr/api/wrapper/is.md create mode 100644 docs/fr/api/wrapper/isEmpty.md create mode 100644 docs/fr/api/wrapper/isVueInstance.md create mode 100644 docs/fr/api/wrapper/name.md create mode 100644 docs/fr/api/wrapper/setData.md create mode 100644 docs/fr/api/wrapper/setMethods.md create mode 100644 docs/fr/api/wrapper/setProps.md create mode 100644 docs/fr/api/wrapper/text.md create mode 100644 docs/fr/api/wrapper/trigger.md create mode 100644 docs/fr/api/wrapper/update.md create mode 100644 docs/fr/guides/README.md create mode 100644 docs/fr/guides/choosing-a-test-runner.md create mode 100644 docs/fr/guides/common-tips.md create mode 100644 docs/fr/guides/dom-events.md create mode 100644 docs/fr/guides/getting-started.md create mode 100644 docs/fr/guides/testing-SFCs-with-jest.md create mode 100644 docs/fr/guides/testing-SFCs-with-mocha-webpack.md create mode 100644 docs/fr/guides/using-with-vue-router.md create mode 100644 docs/fr/guides/using-with-vuex.md diff --git a/docs/LANGS.md b/docs/LANGS.md index 734a128c2..50a62c37f 100644 --- a/docs/LANGS.md +++ b/docs/LANGS.md @@ -1,3 +1,4 @@ * [English](en/) +* [Français](fr/) * [日本語](ja/) * [简体中文](zh-cn/) diff --git a/docs/fr/README.md b/docs/fr/README.md new file mode 100644 index 000000000..1695a3f94 --- /dev/null +++ b/docs/fr/README.md @@ -0,0 +1,64 @@ +# vue-test-utils + +`vue-test-utils` est la bibliothèque officielle de tests unitaires pour Vue.js. + +* [Guides](guides/README.md) + * [Commencer](guides/getting-started.md) + * [Astuces](guides/common-tips.md) + * [La souris, le clavier et les autres évènements DOM](guides/dom-events.md) + * [Choisir un lanceur de tests](guides/choosing-a-test-runner.md) + * [Tester des composants monofichiers avec Jest](guides/testing-SFCs-with-jest.md) + * [Tester des composants monofichiers avec Mocha et webpack](guides/testing-SFCs-with-mocha-webpack.md) + * [Utiliser avec Vue Router](guides/using-with-vue-router.md) + * [Utiliser avec Vuex](guides/using-with-vuex.md) +* [API](api/README.md) + * [mount](api/mount.md) + * [shallow](api/shallow.md) + * [Options de montage](api/options.md) + - [context](api/options.md#context) + - [slots](api/options.md#slots) + - [stubs](api/options.md#stubs) + - [mocks](api/options.md#mocks) + - [localVue](api/options.md#localvue) + - [attachToDocument](api/options.md#attachtodocument) + - [attrs](api/options.md#attrs) + - [listeners](api/options.md#listeners) + - [clone](api/options.md#clone) + * [Wrapper](api/wrapper/README.md) + * [contains](api/wrapper/contains.md) + * [emitted](api/wrapper/emitted.md) + * [emittedByOrder](api/wrapper/emittedByOrder.md) + * [find](api/wrapper/find.md) + * [findAll](api/wrapper/findAll.md) + * [hasAttribute](api/wrapper/hasAttribute.md) + * [hasClass](api/wrapper/hasClass.md) + * [hasProp](api/wrapper/hasProp.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) + * [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) + * [WrapperArray](api/wrapper-array/README.md) + * [at](api/wrapper-array/at.md) + * [contains](api/wrapper-array/contains.md) + * [hasAttribute](api/wrapper-array/hasAttribute.md) + * [hasClass](api/wrapper-array/hasClass.md) + * [hasProp](api/wrapper-array/hasProp.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) + * [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) + * [Selecteurs](api/selectors.md) + * [createLocalVue](api/createLocalVue.md) diff --git a/docs/fr/SUMMARY.md b/docs/fr/SUMMARY.md new file mode 100644 index 000000000..2af83f11b --- /dev/null +++ b/docs/fr/SUMMARY.md @@ -0,0 +1,64 @@ +## Table of Contents + +* [Guides](guides/README.md) + * [Commencer](guides/getting-started.md) + * [Astuces](guides/common-tips.md) + * [Mouse, Key and other DOM Events (EN)](guides/dom-events.md) + * [Choisir un lanceur de tests](guides/choosing-a-test-runner.md) + * [Tester des composants monofichiers avec Jest](guides/testing-SFCs-with-jest.md) + * [Tester des composants monofichiers avec Mocha et webpack](guides/testing-SFCs-with-mocha-webpack.md) + * [Utiliser avec Vue Router](guides/using-with-vue-router.md) + * [Utiliser avec Vuex](guides/using-with-vuex.md) +* [API](api/README.md) + * [mount](api/mount.md) + * [shallow](api/shallow.md) + * [Options de montage](api/options.md) + - [context](api/options.md#context) + - [slots](api/options.md#slots) + - [stubs](api/options.md#stubs) + - [mocks](api/options.md#mocks) + - [localVue](api/options.md#localvue) + - [attachToDocument](api/options.md#attachtodocument) + - [attrs](api/options.md#attrs) + - [listeners](api/options.md#listeners) + - [clone](api/options.md#clone) + * [Wrapper](api/wrapper/README.md) + * [contains](api/wrapper/contains.md) + * [emitted](api/wrapper/emitted.md) + * [emittedByOrder](api/wrapper/emittedByOrder.md) + * [find](api/wrapper/find.md) + * [findAll](api/wrapper/findAll.md) + * [hasAttribute](api/wrapper/hasAttribute.md) + * [hasClass](api/wrapper/hasClass.md) + * [hasProp](api/wrapper/hasProp.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) + * [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) + * [destroy](api/wrapper/destroy.md) + * [WrapperArray](api/wrapper-array/README.md) + * [at](api/wrapper-array/at.md) + * [contains](api/wrapper-array/contains.md) + * [hasAttribute](api/wrapper-array/hasAttribute.md) + * [hasClass](api/wrapper-array/hasClass.md) + * [hasProp](api/wrapper-array/hasProp.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) + * [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) + * [destroy](api/wrapper-array/destroy.md) + * [Selectors](api/selectors.md) + * [createLocalVue](api/createLocalVue.md) diff --git a/docs/fr/api/README.md b/docs/fr/api/README.md new file mode 100644 index 000000000..3026a0347 --- /dev/null +++ b/docs/fr/api/README.md @@ -0,0 +1,49 @@ +# API + +* [mount](./mount.md) +* [shallow](./shallow.md) +* [Options de montage](./options.md) + - [context](./options.md#context) + - [slots](./options.md#slots) + - [stubs](./options.md#stubs) + - [mocks](./options.md#mocks) + - [localVue](./options.md#localvue) + - [attachToDocument](./options.md#attachtodocument) + - [attrs](./options.md#attrs) + - [listeners](./options.md#listeners) + - [clone](./options.md#clone) +* [Wrapper](./wrapper/README.md) + * [contains](./wrapper/contains.md) + * [emitted](./wrapper/emitted.md) + * [emittedByOrder](./wrapper/emittedByOrder.md) + * [find](./wrapper/find.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) + * [update](./wrapper/update.md) + * [setData](./wrapper/setData.md) + * [setProps](./wrapper/setProps.md) + * [text](./wrapper/text.md) + * [trigger](./wrapper/trigger.md) +* [WrapperArray](./wrapper-array/README.md) + * [at](./wrapper-array/at.md) + * [contains](./wrapper-array/contains.md) + * [hasAttribute](./wrapper-array/hasAttribute.md) + * [hasClass](./wrapper-array/hasClass.md) + * [hasProp](./wrapper-array/hasProp.md) + * [hasStyle](./wrapper-array/hasStyle.md) + * [is](./wrapper-array/is.md) + * [isEmpty](./wrapper-array/isEmpty.md) + * [isVueInstance](./wrapper-array/isVueInstance.md) + * [update](./wrapper-array/update.md) + * [setData](./wrapper-array/setData.md) + * [setProps](./wrapper-array/setProps.md) + * [trigger](./wrapper-array/trigger.md) +* [createLocalVue](./createLocalVue.md) +* [Selecteurs](./selectors.md) diff --git a/docs/fr/api/createLocalVue.md b/docs/fr/api/createLocalVue.md new file mode 100644 index 000000000..a3cbfcee3 --- /dev/null +++ b/docs/fr/api/createLocalVue.md @@ -0,0 +1,28 @@ +# createLocalVue() + +- **Returns:** + - `{Component}` + +- **Usage:** + +`createLocalVue` returns a Vue class for you to add components, mixins and install plugins without polluting the global Vue class. + +Use it with `options.localVue` + +```js +import { createLocalVue, shallow } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +const localVue = createLocalVue() +const wrapper = shallow(Foo, { + localVue, + mocks: { foo: true } +}) +expect(wrapper.vm.foo).toBe(true) + +const freshWrapper = shallow(Foo) +expect(freshWrapper.vm.foo).toBe(false) +``` + +- **See also:** [Common Tips](../guides/common-tips.md#applying-global-plugins-and-mixins) diff --git a/docs/fr/api/mount.md b/docs/fr/api/mount.md new file mode 100644 index 000000000..aaddd3e2f --- /dev/null +++ b/docs/fr/api/mount.md @@ -0,0 +1,136 @@ +# mount(component {, options}]) + +- **Arguments:** + + - `{Component} component` + - `{Object} options` + +- **Returns:** `{Wrapper}` + +- **Options:** + +See [options](options.md) + +- **Usage:** + +Returns [`Wrapper`](wrapper/README.md) of first DOM node or Vue component matching selector. + +Use any valid [selector](selectors.md). + +**Without options:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +describe('Foo', () => { + it('renders a div', () => { + const wrapper = mount(Foo) + expect(wrapper.contains('div')).toBe(true) + }) +}) +``` +**With Vue options:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +describe('Foo', () => { + it('renders a div', () => { + const wrapper = mount(Foo, { + propsData: { + color: 'red' + } + }) + expect(wrapper.hasProp('color', 'red')).toBe(true) + }) +}) +``` + +**Attach to DOM:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +describe('Foo', () => { + it('renders a div', () => { + const wrapper = mount(Foo, { + attachToDocument: true + }) + expect(wrapper.contains('div')).toBe(true) + }) +}) +``` +**Default and named slots:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' +import Bar from './Bar.vue' +import FooBar from './FooBar.vue' + +describe('Foo', () => { + it('renders a div', () => { + const wrapper = mount(Foo, { + slots: { + default: [Bar, FooBar], + fooBar: FooBar, // Will match , + foo: '
' + } + }) + expect(wrapper.contains('div')).toBe(true) + }) +}) +``` + +**Stubbing global properties:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +describe('Foo', () => { + it('renders a div', () => { + const $route = { path: 'http://www.example-path.com' } + const wrapper = mount(Foo, { + mocks: { + $route + } + }) + expect(wrapper.vm.$route.path).toBe($route.path) + }) +}) +``` + +**Stubbing components:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' +import Bar from './Bar.vue' +import Faz from './Faz.vue' + +describe('Foo', () => { + it('renders a div', () => { + const wrapper = mount(Foo, { + stub: { + Bar: '
, + foo: '
' + } +}) +expect(wrapper.find('div')).toBe(true) +``` + +### `stubs` + +- type: `{ [name: string]: Component | boolean } | Array` + +Stubs child components. Can be an Array of component names to stub, or an object. + +Example: + +```js +import Foo from './Foo.vue' + +mount(Component, { + stubs: ['registered-component'] +}) + +shallow(Component, { + stubs: { + // stub with a specific implementation + 'registered-component': Foo, + // create default stub + 'another-component': true + } +}) +``` + +### `mocks` + +- type: `Object` + +Add additional properties to the instance. Useful for mocking global injections. + +Example: + +```js +import { expect } from 'chai' + +const $route = { path: 'http://www.example-path.com' } +const wrapper = shallow(Component, { + mocks: { + $route + } +}) +expect(wrapper.vm.$route.path).toBe($route.path) +``` + +### `localVue` + +- type: `Vue` + +A local copy of Vue created by [createLocalVue](./createLocalVue.md) to use when mounting the component. Installing plugins on this copy of Vue prevents polluting the original `Vue` copy. + +Example: + +```js +import { createLocalVue, mount } from 'vue-test-utils' +import VueRouter from 'vue-router' +import { expect } from 'chai' +import Foo from './Foo.vue' + +const localVue = createLocalVue() +localVue.use(VueRouter) + +const routes = [ + { path: '/foo', component: Foo } +] + +const router = new VueRouter({ + routes +}) + +const wrapper = mount(Component, { + localVue, + router +}) +expect(wrapper.vm.$route).toBeInstanceOf(Object) +``` + +### `attachToDocument` + +- type: `boolean` +- default: `false` + +Component will be attach to DOM when rendered if set to `true`. This can be used with [`hasStyle`](wrapper/hasStyle.md) to check multi element CSS selectors. + +### `attrs` + +- type: `Object` + +Set the component instance's `$attrs` object. + +### `listeners` + +- type: `Object` + +Set the component instance's `$listeners` object. + +### `clone` + +- type: `boolean` +- default: `true` + +Clones component before mounting if `true`, which avoids mutating the original component definition. + +`options.mocks` (`Object`): Add globals to Vue instance. + +`options.localVue` (`Object`): vue class to use in `mount`. See [createLocalVue](createLocalVue.md) diff --git a/docs/fr/api/selectors.md b/docs/fr/api/selectors.md new file mode 100644 index 000000000..0c6a47f3b --- /dev/null +++ b/docs/fr/api/selectors.md @@ -0,0 +1,43 @@ +# Selectors + +A lot of methods take a selector as an argument. A selector can either be a CSS selector, or a Vue component. + +## CSS Selectors + +mount handles any valid CSS selector: + +- tag selectors (div, foo, bar) +- class selectors (.foo, .bar) +- attribute selectors ([foo], [foo="bar"]) +- id selectors (#foo, #bar) +- pseudo selectors (div:first-of-type) + +You can also use combinators: + +- direct descendant combinator (div > #bar > .foo) +- general descendant combinator (div #bar .foo) +- adjacent sibling selector (div + .foo) +- general sibling selector (div ~ .foo) + +## Vue Components + +Vue components are also valid selectors. + +vue-test-utils uses the `name` property to search the instance tree for matching Vue components. + +```js +// Foo.vue + +export default{ + name: 'FooComponent' +} +``` + +```js +import { shallow } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +const wrapper = shallow(Foo) +expect(wrapper.is(Foo)).toBe(true) +``` diff --git a/docs/fr/api/shallow.md b/docs/fr/api/shallow.md new file mode 100644 index 000000000..fa16e9d24 --- /dev/null +++ b/docs/fr/api/shallow.md @@ -0,0 +1,124 @@ +# shallow(component {, options}]) + +- **Arguments:** + + - `{Component} component` + - `{Object} options` + - `{boolean} attachToDocument` + - `{Object} context` + - `{Object} slots` + - `{Array|Component|String} default` + - `{Array|Component|String} named` + - `{Object} mocks` + - `{Object|Array} stubs` + - `{boolean} clone` + - `{Object} children` + - `{Vue} localVue` + +- **Returns:** `{Wrapper}` + +- **Options:** + +See [options](./options.md) + +- **Usage:** + +Returns [`Wrapper`](./wrapper/README.md) of first DOM node or Vue component matching selector. + +Stubs all child components. + +Use any valid [selector](./selectors.md). + +**Without options:** + +```js +import { shallow } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +describe('Foo', () => { + it('renders a div', () => { + const wrapper = shallow(Foo) + expect(wrapper.contains('div')).toBe(true) + }) +}) +``` + +**With Vue options:** + +```js +import { shallow } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +describe('Foo', () => { + it('renders a div', () => { + const wrapper = shallow(Foo, { + propsData: { + color: 'red' + } + }) + expect(wrapper.hasProp('color', 'red')).toBe(true) + }) +}) +``` + +**Attach to DOM:** + +```js +import { shallow } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +describe('Foo', () => { + it('renders a div', () => { + const wrapper = shallow(Foo, { + attachToDocument: true + }) + expect(wrapper.contains('div')).toBe(true) + }) +}) +``` + +**Default and named slots:** + +```js +import { shallow } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' +import Bar from './Bar.vue' +import FooBar from './FooBar.vue' + +describe('Foo', () => { + it('renders a div', () => { + const wrapper = shallow(Foo, { + slots: { + default: [Bar, FooBar], + fooBar: FooBar, // Will match , + foo: '
' + } + }) + expect(wrapper.find('div')).toBe(true) + }) +}) +``` + +**Stubbing global properties:** + +```js +import { shallow } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +describe('Foo', () => { + it('renders a div', () => { + const $route = { path: 'http://www.example-path.com' } + const wrapper = shallow(Foo, { + mocks: { + $route + } + }) + expect(wrapper.vm.$route.path).toBe($route.path) + }) +}) +``` diff --git a/docs/fr/api/wrapper-array/README.md b/docs/fr/api/wrapper-array/README.md new file mode 100644 index 000000000..2a6d40ccc --- /dev/null +++ b/docs/fr/api/wrapper-array/README.md @@ -0,0 +1,11 @@ +# WrapperArray + +A `WrapperArray` is an object that contains an array of [Wrappers](../wrapper/README.md), and methods to test the `Wrappers`. + +- **Properties:** + +`length` `number`: the number of `Wrappers` contained in the `WrapperArray` + + - **Methods:** + +There is a detailed list of methods in the WrapperArray section of the docs. diff --git a/docs/fr/api/wrapper-array/at.md b/docs/fr/api/wrapper-array/at.md new file mode 100644 index 000000000..e5864bf1b --- /dev/null +++ b/docs/fr/api/wrapper-array/at.md @@ -0,0 +1,21 @@ +# at(index) + +Returns `Wrapper` at `index` passed. Uses zero based numbering (i.e. first item is at index 0). + +- **Arguments:** + - `{number} index` + +- **Returns:** `{Wrapper}` + +- **Example:** + +```js +import { shallow } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +const wrapper = shallow(Foo) +const divArray = wrapper.findAll('div') +const secondDiv = divArray.at(1) +expect(secondDiv.is('p')).toBe(true) +``` diff --git a/docs/fr/api/wrapper-array/contains.md b/docs/fr/api/wrapper-array/contains.md new file mode 100644 index 000000000..3b5ee31de --- /dev/null +++ b/docs/fr/api/wrapper-array/contains.md @@ -0,0 +1,24 @@ +# contains(selector) + +Assert every wrapper in `WrapperArray` contains selector. + +Use any valid [selector](../selectors.md). + +- **Arguments:** + - `{string|Component} selector` + +- **Returns:** `{boolean}` + +- **Example:** + +```js +import { shallow } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' +import Bar from './Bar.vue' + +const wrapper = shallow(Foo) +const divArray = wrapper.findAll('div') +expect(divArray.contains('p')).toBe(true) +expect(divArray.contains(Bar)).toBe(true) +``` diff --git a/docs/fr/api/wrapper-array/destroy.md b/docs/fr/api/wrapper-array/destroy.md new file mode 100644 index 000000000..875936ecb --- /dev/null +++ b/docs/fr/api/wrapper-array/destroy.md @@ -0,0 +1,18 @@ +# destroy() + +Destroys each Vue `Wrapper` in `WrapperArray`. + +- **Example:** + +```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.contains('p')).toBe(true) +divArray.destroy() +expect(divArray.contains('p')).toBe(false) + +``` diff --git a/docs/fr/api/wrapper-array/hasAttribute.md b/docs/fr/api/wrapper-array/hasAttribute.md new file mode 100644 index 000000000..b3436edc9 --- /dev/null +++ b/docs/fr/api/wrapper-array/hasAttribute.md @@ -0,0 +1,21 @@ +# hasAttribute(attribute, value) + +Assert every `Wrapper` in `WrapperArray` DOM node has `attribute` matching `value`. + +- **Arguments:** + - `{string} attribute` + - `{string} value` + +- **Returns:** `{boolean}` + +- **Example:** + +```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.hasAttribute('id', 'foo')).toBe(true) +``` diff --git a/docs/fr/api/wrapper-array/hasClass.md b/docs/fr/api/wrapper-array/hasClass.md new file mode 100644 index 000000000..b4c48b397 --- /dev/null +++ b/docs/fr/api/wrapper-array/hasClass.md @@ -0,0 +1,20 @@ +# hasClass(className) + +Assert every `Wrapper` in `WrapperArray` DOM node has class containing `className`. + +- **Arguments:** + - `{string} className` + +- **Returns:** `{boolean}` + +- **Example:** + +```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.hasClass('bar')).toBe(true) +``` diff --git a/docs/fr/api/wrapper-array/hasProp.md b/docs/fr/api/wrapper-array/hasProp.md new file mode 100644 index 000000000..6ce255fd7 --- /dev/null +++ b/docs/fr/api/wrapper-array/hasProp.md @@ -0,0 +1,24 @@ +# hasProp(prop, value) + +Assert every `Wrapper` in `WrapperArray` `vm` has `prop` matching `value`. + +**Note the Wrapper must contain a Vue instance.** + +- **Arguments:** + - `{string} prop` + - `{any} value` + +- **Returns:** `{boolean}` + +- **Example:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' +import Bar from './Bar.vue' + +const wrapper = mount(Foo) +const barArray = wrapper.findAll(Bar) +expect(barArray.hasProp('bar', 10)).toBe(true) +``` diff --git a/docs/fr/api/wrapper-array/hasStyle.md b/docs/fr/api/wrapper-array/hasStyle.md new file mode 100644 index 000000000..56a8843fa --- /dev/null +++ b/docs/fr/api/wrapper-array/hasStyle.md @@ -0,0 +1,24 @@ +# hasStyle(style, value) + +Assert every `Wrapper` in `WrapperArray` DOM node has style matching value. + +Returns `true` if `Wrapper` DOM node has `style` matching `value`. + +**Note will only detect inline styles when running in `jsdom`.** +- **Arguments:** + - `{string} style` + - `{string} value` + +- **Returns:** `{boolean}` + +- **Example:** + +```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/fr/api/wrapper-array/is.md b/docs/fr/api/wrapper-array/is.md new file mode 100644 index 000000000..8a5a7cb7a --- /dev/null +++ b/docs/fr/api/wrapper-array/is.md @@ -0,0 +1,20 @@ +# is(selector) + +Assert every `Wrapper` in `WrapperArray` DOM node or `vm` matches [selector](../selectors.md). + +- **Arguments:** + - `{string|Component} selector` + +- **Returns:** `{boolean}` + +- **Example:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +const divArray = wrapper.find('div') +expect(divArray.is('div')).toBe(true) +``` diff --git a/docs/fr/api/wrapper-array/isEmpty.md b/docs/fr/api/wrapper-array/isEmpty.md new file mode 100644 index 000000000..6ef8b4145 --- /dev/null +++ b/docs/fr/api/wrapper-array/isEmpty.md @@ -0,0 +1,17 @@ +# isEmpty() + +Assert every `Wrapper` in `WrapperArray` does not contain child node. + +- **Returns:** `{boolean}` + +- **Example:** + +```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.isEmpty()).toBe(true) +``` diff --git a/docs/fr/api/wrapper-array/isVueInstance.md b/docs/fr/api/wrapper-array/isVueInstance.md new file mode 100644 index 000000000..66d556b7f --- /dev/null +++ b/docs/fr/api/wrapper-array/isVueInstance.md @@ -0,0 +1,18 @@ +# isVueInstance() + +Assert every `Wrapper` in `WrapperArray` is Vue instance. + +- **Returns:** `{boolean}` + +- **Example:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' +import Bar from './Bar.vue' + +const wrapper = mount(Foo) +const barArray = wrapper.findAll(Bar) +expect(barArray.isVueInstance()).toBe(true) +``` diff --git a/docs/fr/api/wrapper-array/setData.md b/docs/fr/api/wrapper-array/setData.md new file mode 100644 index 000000000..f4f69bf61 --- /dev/null +++ b/docs/fr/api/wrapper-array/setData.md @@ -0,0 +1,22 @@ +# setData(data) + +Sets `Wrapper` `vm` data and forces update on each `Wrapper` in `WrapperArray`. + +**Note every `Wrapper` must contain a Vue instance.** + +- **Arguments:** + - `{Object} data` + +- **Example:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' +import Bar from './Bar.vue' + +const wrapper = mount(Foo) +const barArray = wrapper.findAll(Bar) +barArray.setData({ foo: 'bar' }) +expect(barArray.at(0).vm.foo).toBe('bar') +``` diff --git a/docs/fr/api/wrapper-array/setMethods.md b/docs/fr/api/wrapper-array/setMethods.md new file mode 100644 index 000000000..5d50927ae --- /dev/null +++ b/docs/fr/api/wrapper-array/setMethods.md @@ -0,0 +1,27 @@ + +# setMethods(methods) + +Sets `Wrapper` `vm` methods and forces update on each `Wrapper` in `WrapperArray`. + +**Note every `Wrapper` must contain a Vue instance.** + +- **Arguments:** + - `{Object} methods` + +- **Example:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import sinon from 'sinon' +import Foo from './Foo.vue' +import Bar from './Bar.vue' + +const wrapper = mount(Foo) +const barArray = wrapper.findAll(Bar) +const clickMethodStub = sinon.stub() + +barArray.setMethods({ clickMethod: clickMethodStub }) +barArray.at(0).trigger('click') +expect(clickMethodStub.called).toBe(true) +``` diff --git a/docs/fr/api/wrapper-array/setProps.md b/docs/fr/api/wrapper-array/setProps.md new file mode 100644 index 000000000..c68e84f1d --- /dev/null +++ b/docs/fr/api/wrapper-array/setProps.md @@ -0,0 +1,22 @@ +# setProps(props) + +Sets `Wrapper` `vm` props and forces update on each `Wrapper` in `WrapperArray`. + +**Note every `Wrapper` must contain a Vue instance.** + +- **Arguments:** + - `{Object} props` + +- **Example:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' +import Bar from './Bar.vue' + +const wrapper = mount(Foo) +const barArray = wrapper.findAll(Bar) +barArray.setProps({ foo: 'bar' }) +expect(barArray.at(0).vm.foo).toBe('bar') +``` diff --git a/docs/fr/api/wrapper-array/trigger.md b/docs/fr/api/wrapper-array/trigger.md new file mode 100644 index 000000000..5ffdb7423 --- /dev/null +++ b/docs/fr/api/wrapper-array/trigger.md @@ -0,0 +1,26 @@ +# trigger(eventName) + +Triggers an event on every `Wrapper` in the `WrapperArray` DOM node. + +**Note every `Wrapper` must contain a Vue instance.** + +- **Arguments:** + - `{string} eventName` + +- **Example:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import sinon from 'sinon' +import Foo from './Foo.vue' + +const clickHandler = sinon.stub() +const wrapper = mount(Foo, { + propsData: { clickHandler } +}) + +const divArray = wrapper.findAll('div') +divArray.trigger('click') +expect(clickHandler.called).toBe(true) +``` diff --git a/docs/fr/api/wrapper-array/update.md b/docs/fr/api/wrapper-array/update.md new file mode 100644 index 000000000..de0647028 --- /dev/null +++ b/docs/fr/api/wrapper-array/update.md @@ -0,0 +1,20 @@ +# update() + +Force root Vue component of each `Wrapper` in `WrapperArray` to re-render. + +If called on a Vue component wrapper array, it will force each Vue component to re-render. + +- **Example:** + +```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.at(0).vm.bar).toBe('bar') +divArray.at(0).vm.bar = 'new value' +divArray.update() +expect(divArray.at(0).vm.bar).toBe('new value') +``` diff --git a/docs/fr/api/wrapper/README.md b/docs/fr/api/wrapper/README.md new file mode 100644 index 000000000..6469b8745 --- /dev/null +++ b/docs/fr/api/wrapper/README.md @@ -0,0 +1,16 @@ +# Wrapper + +vue-test-utils is a wrapper based API. + +A `Wrapper` is an object that contains a mounted component or vnode and methods to test the component or vnode. + +- **Properties:** + +`vm` `Component`: this is the vue instance. You can access all the [instance methods and properties of a vm](https://vuejs.org/v2/api/#Instance-Properties) with `wrapper.vm`. This only exists on Vue component wrappers +`element` `HTMLElement`: the root DOM node of the wrapper +`options` `Object`: Object containing vue-test-utils options passed to `mount` or `shallow` +`options.attachedToDom` `Boolean`: True if attachToDom was passed to `mount` or `shallow` + +- **Methods:** + +There is a detailed list of methods in the wrapper section of the docs. diff --git a/docs/fr/api/wrapper/contains.md b/docs/fr/api/wrapper/contains.md new file mode 100644 index 000000000..a91b0353b --- /dev/null +++ b/docs/fr/api/wrapper/contains.md @@ -0,0 +1,23 @@ +# contains(selector) + +Assert `Wrapper` contains an element or component matching [selector](../selectors.md). + +- **Arguments:** + - `{string|Component} selector` + +- **Returns:** `{boolean}` + +- **Example:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' +import Bar from './Bar.vue' + +const wrapper = mount(Foo) +expect(wrapper.contains('p')).toBe(true) +expect(wrapper.contains(Bar)).toBe(true) +``` + +- **See also:** [selectors](../selectors.md) diff --git a/docs/fr/api/wrapper/destroy.md b/docs/fr/api/wrapper/destroy.md new file mode 100644 index 000000000..015d5a5ea --- /dev/null +++ b/docs/fr/api/wrapper/destroy.md @@ -0,0 +1,20 @@ +# destroy() + +Destroys a Vue component instance. + +- **Example:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import sinon from 'sinon' + +const spy = sinon.stub() +mount({ + render: null, + destroyed () { + spy() + } +}).destroy() +expect(spy.calledOnce).to.equal(true) +``` diff --git a/docs/fr/api/wrapper/emitted.md b/docs/fr/api/wrapper/emitted.md new file mode 100644 index 000000000..d754eab98 --- /dev/null +++ b/docs/fr/api/wrapper/emitted.md @@ -0,0 +1,33 @@ +# emitted() + +Return an object containing custom events emitted by the `Wrapper` `vm`. + +- **Returns:** `{ [name: string]: Array> }` + +- **Example:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' + +const wrapper = mount(Component) + +wrapper.vm.$emit('foo') +wrapper.vm.$emit('foo', 123) + +/* +wrapper.emitted() returns the following object: +{ + foo: [[], [123]] +} +*/ + +// assert event has been emitted +expect(wrapper.emitted().foo).toBeTruthy() + +// assert event count +expect(wrapper.emitted().foo.length).toBe(2) + +// assert event payload +expect(wrapper.emitted().foo[1]).toEqual([123]) +``` diff --git a/docs/fr/api/wrapper/emittedByOrder.md b/docs/fr/api/wrapper/emittedByOrder.md new file mode 100644 index 000000000..55ff975b2 --- /dev/null +++ b/docs/fr/api/wrapper/emittedByOrder.md @@ -0,0 +1,28 @@ +# emittedByOrder() + +Return an Array containing custom events emitted by the `Wrapper` `vm`. + +- **Returns:** `Array<{ name: string, args: Array }>` + +- **Example:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' + +const wrapper = mount(Component) + +wrapper.vm.$emit('foo') +wrapper.vm.$emit('bar', 123) + +/* +wrapper.emittedByOrder() returns the following Array: +[ + { name: 'foo', args: [] }, + { name: 'bar', args: [123] } +] +*/ + +// assert event emit order +expect(wrapper.emittedByOrder().map(e => e.name)).toEqual(['foo', 'bar']) +``` diff --git a/docs/fr/api/wrapper/exists.md b/docs/fr/api/wrapper/exists.md new file mode 100644 index 000000000..4fac1351f --- /dev/null +++ b/docs/fr/api/wrapper/exists.md @@ -0,0 +1,21 @@ +# exists() + +Assert `Wrapper` or `WrapperArray` exists. + +Returns false if called on an empty `Wrapper` or `WrapperArray`. + +- **Returns:** `{boolean}` + +- **Example:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +expect(wrapper.exists()).toBe(true) +expect(wrapper.find('does-not-exist').exists()).toBe(false) +expect(wrapper.findAll('div').exists()).toBe(true) +expect(wrapper.findAll('does-not-exist').exists()).toBe(false) +``` diff --git a/docs/fr/api/wrapper/find.md b/docs/fr/api/wrapper/find.md new file mode 100644 index 000000000..1d121c591 --- /dev/null +++ b/docs/fr/api/wrapper/find.md @@ -0,0 +1,27 @@ +# find(selector) + +Returns [`Wrapper`](README.md) of first DOM node or Vue component matching selector. + +Use any valid [selector](../selectors.md). + +- **Arguments:** + - `{string|Component} selector` + +- **Returns:** `{Wrapper}` + +- **Example:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' +import Bar from './Bar.vue' + +const wrapper = mount(Foo) +const div = wrapper.find('div') +expect(div.is('div')).toBe(true) +const bar = wrapper.find(Bar) +expect(bar.is(Bar)).toBe(true) +``` + +- **See also:** [Wrapper](README.md) diff --git a/docs/fr/api/wrapper/findAll.md b/docs/fr/api/wrapper/findAll.md new file mode 100644 index 000000000..f78ab6201 --- /dev/null +++ b/docs/fr/api/wrapper/findAll.md @@ -0,0 +1,27 @@ +# findAll(selector) + +Returns a [`WrapperArray`](../wrapper-array/README.md) of [Wrappers](README.md). + +Use any valid [selector](../selectors.md). + +- **Arguments:** + - `{string|Component} selector` + +- **Returns:** `{WrapperArray}` + +- **Example:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' +import Bar from './Bar.vue' + +const wrapper = mount(Foo) +const div = wrapper.findAll('div').at(0) +expect(div.is('div')).toBe(true) +const bar = wrapper.findAll(Bar).at(0) +expect(bar.is(Bar)).toBe(true) +``` + +- **See also:** [Wrapper](README.md) diff --git a/docs/fr/api/wrapper/hasAttribute.md b/docs/fr/api/wrapper/hasAttribute.md new file mode 100644 index 000000000..da9a893b5 --- /dev/null +++ b/docs/fr/api/wrapper/hasAttribute.md @@ -0,0 +1,37 @@ +# hasAttribute(attribute, value) + +Assert `Wrapper` DOM node has attribute matching value. + +Returns `true` if `Wrapper` DOM node contains attribute with matching value. + +- **Arguments:** + - `{string} attribute` + - `{string} value` + +- **Returns:** `{boolean}` + +- **Example:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +expect(wrapper.hasAttribute('id', 'foo')).toBe(true) +``` + +- **Alternative:** + +You could get the attribute from the `Wrapper.element` to have a value based assertion: + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +expect(wrapper.element.getAttribute('id')).toBe('foo') +``` + +This makes for a more informative assertion error. diff --git a/docs/fr/api/wrapper/hasClass.md b/docs/fr/api/wrapper/hasClass.md new file mode 100644 index 000000000..c70b21ef9 --- /dev/null +++ b/docs/fr/api/wrapper/hasClass.md @@ -0,0 +1,21 @@ +# hasClass(className) + +Assert `Wrapper` DOM node has class contains `className`. + +Returns `true` if `Wrapper` DOM node contains class. + +- **Arguments:** + - `{string} className` + +- **Returns:** `{boolean}` + +- **Example:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +expect(wrapper.hasClass('bar')).toBe(true) +``` diff --git a/docs/fr/api/wrapper/hasProp.md b/docs/fr/api/wrapper/hasProp.md new file mode 100644 index 000000000..66e64b41b --- /dev/null +++ b/docs/fr/api/wrapper/hasProp.md @@ -0,0 +1,25 @@ +# hasProp(prop, value) + +Assert `Wrapper` `vm` has `prop` matching `value`. + +Returns `true` if `Wrapper` `vm` has `prop` matching `value`. + + +**Note: the Wrapper must contain a Vue instance.** + +- **Arguments:** + - `{string} prop` + - `{any} value` + +- **Returns:** `{boolean}` + +- **Example:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +expect(wrapper.hasProp('bar', 10)).toBe(true) +``` diff --git a/docs/fr/api/wrapper/hasStyle.md b/docs/fr/api/wrapper/hasStyle.md new file mode 100644 index 000000000..0281d8401 --- /dev/null +++ b/docs/fr/api/wrapper/hasStyle.md @@ -0,0 +1,24 @@ +# hasStyle(style, value) + +Assert `Wrapper` DOM node has style matching value + +Returns `true` if `Wrapper` DOM node has `style` matching `value`. + +**Note will only detect inline styles when running in `jsdom`.** + +- **Arguments:** + - `{string} style` + - `{string} value` + +- **Returns:** `{boolean}` + +- **Example:** + +```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/fr/api/wrapper/html.md b/docs/fr/api/wrapper/html.md new file mode 100644 index 000000000..1243f180f --- /dev/null +++ b/docs/fr/api/wrapper/html.md @@ -0,0 +1,16 @@ +# html() + +Returns HTML of `Wrapper` DOM node as a string. + +- **Returns:** `{string}` + +- **Example:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +expect(wrapper.html()).toBe('

Foo

') +``` diff --git a/docs/fr/api/wrapper/is.md b/docs/fr/api/wrapper/is.md new file mode 100644 index 000000000..2987de1a2 --- /dev/null +++ b/docs/fr/api/wrapper/is.md @@ -0,0 +1,19 @@ +# is(selector) + +Assert `Wrapper` DOM node or `vm` matches [selector](../selectors.md). + +- **Arguments:** + - `{string|Component} selector` + +- **Returns:** `{boolean}` + +- **Example:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +expect(wrapper.is('div')).toBe(true) +``` diff --git a/docs/fr/api/wrapper/isEmpty.md b/docs/fr/api/wrapper/isEmpty.md new file mode 100644 index 000000000..d70fe7140 --- /dev/null +++ b/docs/fr/api/wrapper/isEmpty.md @@ -0,0 +1,16 @@ +# isEmpty() + +Assert `Wrapper` does not contain child node. + +- **Returns:** `{boolean}` + +- **Example:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +expect(wrapper.isEmpty()).toBe(true) +``` diff --git a/docs/fr/api/wrapper/isVueInstance.md b/docs/fr/api/wrapper/isVueInstance.md new file mode 100644 index 000000000..9da12a267 --- /dev/null +++ b/docs/fr/api/wrapper/isVueInstance.md @@ -0,0 +1,16 @@ +# isVueInstance() + +Assert `Wrapper` is Vue instance. + +- **Returns:** `{boolean}` + +- **Example:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +expect(wrapper.isVueInstance()).toBe(true) + ``` diff --git a/docs/fr/api/wrapper/name.md b/docs/fr/api/wrapper/name.md new file mode 100644 index 000000000..a1faf1b4f --- /dev/null +++ b/docs/fr/api/wrapper/name.md @@ -0,0 +1,18 @@ +# name() + +Returns component name if `Wrapper` contains a Vue instance, or the tag name of `Wrapper` DOM node if `Wrapper` does not contain a Vue instance. + +- **Returns:** `{string}` + +- **Example:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +expect(wrapper.name()).toBe('Foo') +const p = wrapper.find('p') +expect(p.name()).toBe('p') +``` diff --git a/docs/fr/api/wrapper/setData.md b/docs/fr/api/wrapper/setData.md new file mode 100644 index 000000000..608f083f4 --- /dev/null +++ b/docs/fr/api/wrapper/setData.md @@ -0,0 +1,20 @@ +# setData(data) + +Sets `Wrapper` `vm` data and forces update. + +**Note the Wrapper must contain a Vue instance.** + +- **Arguments:** + - `{Object} data` + +- **Example:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +wrapper.setData({ foo: 'bar' }) +expect(wrapper.vm.foo).toBe('bar') +``` diff --git a/docs/fr/api/wrapper/setMethods.md b/docs/fr/api/wrapper/setMethods.md new file mode 100644 index 000000000..4a40546ee --- /dev/null +++ b/docs/fr/api/wrapper/setMethods.md @@ -0,0 +1,24 @@ +# setMethods(methods) + +Sets `Wrapper` `vm` methods and forces update. + +**Note the Wrapper must contain a Vue instance.** + +- **Arguments:** + - `{Object} methods` + +- **Example:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import sinon from 'sinon' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +const clickMethodStub = sinon.stub() + +wrapper.setMethods({ clickMethod: clickMethodStub }) +wrapper.find('button').trigger('click') +expect(clickMethodStub.called).toBe(true) +``` diff --git a/docs/fr/api/wrapper/setProps.md b/docs/fr/api/wrapper/setProps.md new file mode 100644 index 000000000..7a55124c4 --- /dev/null +++ b/docs/fr/api/wrapper/setProps.md @@ -0,0 +1,48 @@ +# setProps(props) + +- **Arguments:** + - `{Object} props` + +- **Usage:** + +Sets `Wrapper` `vm` props and forces update. + +**Note the Wrapper must contain a Vue instance.** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +wrapper.setProps({ foo: 'bar' }) +expect(wrapper.vm.foo).to.equal('bar') +``` + +You can also pass a `propsData` object, which will initialize the Vue instance with passed values. + +``` js +// Foo.vue +export default { + props: { + foo: { + type: String, + required: true + } + } +} +``` + +``` js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +const wrapper = mount(Foo, { + propsData: { + foo: 'bar' + } +}) + +expect(wrapper.vm.foo).to.equal('bar') +``` diff --git a/docs/fr/api/wrapper/text.md b/docs/fr/api/wrapper/text.md new file mode 100644 index 000000000..d1ccd4b44 --- /dev/null +++ b/docs/fr/api/wrapper/text.md @@ -0,0 +1,16 @@ +# text() + +Returns text content of `Wrapper`. + +- **Returns:** `{string}` + +- **Example:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +expect(wrapper.text()).toBe('bar') +``` diff --git a/docs/fr/api/wrapper/trigger.md b/docs/fr/api/wrapper/trigger.md new file mode 100644 index 000000000..537cda9e6 --- /dev/null +++ b/docs/fr/api/wrapper/trigger.md @@ -0,0 +1,38 @@ +# trigger(eventName) + +Triggers an event on the `Wrapper` DOM node. + +Trigger takes an optional `options` object. The properties in the `options` object are added to the Event. + +You can run preventDefault on the event by passing `preventDefault: true` in `options`. + +- **Arguments:** + - `{string} eventName` + - `{Object} options` + - `{boolean} preventDefault` + +- **Example:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import sinon from 'sinon' +import Foo from './Foo' + +const clickHandler = sinon.stub() +const wrapper = mount(Foo, { + propsData: { clickHandler } +}) + +wrapper.trigger('click') + +wrapper.trigger('click', { + button: 0 +}) + +wrapper.trigger('click', { + preventDefault: true +}) + +expect(clickHandler.called).toBe(true) +``` diff --git a/docs/fr/api/wrapper/update.md b/docs/fr/api/wrapper/update.md new file mode 100644 index 000000000..15d13be89 --- /dev/null +++ b/docs/fr/api/wrapper/update.md @@ -0,0 +1,19 @@ +# update() + +Force root Vue component to re-render. + +If called on a `Wrapper` containing a `vm`, it will force the `Wrapper` `vm` to re-render. + +- **Example:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +expect(wrapper.vm.bar).toBe('bar') +wrapper.vm.bar = 'new value' +wrapper.update() +expect(wrapper.vm.bar).toBe('new value') +``` diff --git a/docs/fr/guides/README.md b/docs/fr/guides/README.md new file mode 100644 index 000000000..223989ad0 --- /dev/null +++ b/docs/fr/guides/README.md @@ -0,0 +1,11 @@ +# Guides + +* [Commencer](./getting-started.md) +* [Astuces](./common-tips.md) +* [La souris, le clavier et les autres évènements DOM](./dom-events.md) +* [Choisir un lanceur de tests](./choosing-a-test-runner.md) +* [Utiliser avec Jest](./using-with-jest.md) +* [Tester des composants monofichiers avec Jest](./testing-SFCs-with-jest.md) +* [Tester des composants monofichiers avec Mocha et webpack](./testing-SFCs-with-mocha-webpack.md) +* [Utiliser avec Vue Router](./using-with-vue-router.md) +* [Utiliser avec Vuex](./using-with-vuex.md) diff --git a/docs/fr/guides/choosing-a-test-runner.md b/docs/fr/guides/choosing-a-test-runner.md new file mode 100644 index 000000000..75371ff84 --- /dev/null +++ b/docs/fr/guides/choosing-a-test-runner.md @@ -0,0 +1,45 @@ +# Choisir un lanceur de tests + +Un lanceur de tests est un programme qui lance des tests (et oui !). + +Il y a un nombre conséquent de lanceurs de tests JavaScript et `vue-test-utils` fonctionne avec tous. `vue-test-utils` est agnostique en termne de lanceurs de tests. + +Il y a tout de même plusieurs choses à considérer afin de choisir un lanceur de tests : variété des fonctionnalités, performance et support de la précompilation des composants monofichiers. Après avoir soigneusement analysé et comparé les bibliothèques, il y a deux lanceurs de tests que nous recommandons : + +- [Jest](https://facebook.github.io/jest/docs/en/getting-started.html#content) est le lanceur de test le plus complet en termes de fonctionnalités. Il requiert une configuration minimale, installe JSDOM par défaut, fournit des assertions prêtes à l'utilisation et a une très bonne interface en ligne de commandes. Cependant, vous allez avoir besoin d'un préprocesseur afin d'être capable d'importer les composants monofichiers dans vos tests. On a créé le préprocesseur `vue-jest` qui peut gérer les fonctionnalités communes des composants monofichiers. Il n'a cependant pas encore autant de fonctionnalités que `vue-loader`. + +- [mocha-webpack](https://github.com/zinserjan/mocha-webpack) est une surcouche de webpack + Mocha avec une expérience simplifiée et un mode de surveillance. Les bénéfices de cette installation sont que l'on peut avoir le support complet des composants monofichiers via webpack + `vue-loader`. Il y a cependant plus de configurations à réaliser. + +## Environnement du navigateur + +`vue-test-utils` se fie à un environnement de navigateur. Techniquement, vous pouvez le lancer dans un vrai navigateur, mais cela n'est pas recommandé dû à la complexité de lancer de réels navigateurs sur différentes plateformes. Au lieu de cela, nous recommandons de lancer les tests sous Node.js avec un environnement virtuel de navigateur en utilisant le [JSDOM](https://github.com/tmpvar/jsdom). + +Le lanceur de tests Jest installe automatiquement JSDOM. Pour d'autres lanceurs de tests, il faut le faire manuellement en utilisant [jsdom-global](https://github.com/rstacruz/jsdom-global) dans la déclaration de vos tests : + +``` bash +npm install --save-dev jsdom jsdom-global +``` +--- +``` js +// dans test setup / entry +require('jsdom-global')() +``` + +## Tester des composants monofichiers + +Les composants Vue monofichiers nécessitent une étape de précompilation avant qu'ils soient lancés dans Node.js ou sur un navigateur. Il existe deux méthodes recommandées pour réaliser la compilation : avec un préprocesseur Jest ou directement en utilisant webpack. + +Le préprocesseur `vue-jest` supporte les fonctionnalités basiques des composants monofichiers. Il ne gère pas actuellement les blocs de style et les blocs personnalisés, qui sont eux uniquement supportés par `vue-loader`. Si vous utilisez ces fonctionnalités ou d'autres configurations liées à webpack, vous aurez besoin d'utiliser l'installation basée sur webpack + `vue-loader` + +Lisez les guides suivants pour différentes installations : + +- [Tester des composants monofichiers avec Jest](./testing-SFCs-with-jest.md) +- [Tester des composants monofichiers avec Mocha + webpack](./testing-SFCs-with-mocha-webpack.md) + +## Ressources + +- [Comparaison de lanceurs de tests](https://github.com/eddyerburgh/vue-unit-test-perf-comparison) +- [Projet exemple avec Jest](https://github.com/vuejs/vue-test-utils-jest-example) +- [Projet exemple avec Mocha](https://github.com/vuejs/vue-test-utils-mocha-webpack-example) +- [Projet exemple avec tape](https://github.com/eddyerburgh/vue-test-utils-tape-example) +- [Projet exemple avec AVA](https://github.com/eddyerburgh/vue-test-utils-ava-example) diff --git a/docs/fr/guides/common-tips.md b/docs/fr/guides/common-tips.md new file mode 100644 index 000000000..666d20962 --- /dev/null +++ b/docs/fr/guides/common-tips.md @@ -0,0 +1,134 @@ +# Astuces + +## Savoir quoi tester + +Pour les composants graphiques (UI), nous ne recommandons pas une couverture complète. En effet, cela mène à trop d'attention sur les détails de l'implémentation interne des composants et pourrait produire des tests instables. + +A contrario, nous recommandons d'écrire des tests qui vérifient le bon fonctionnement de l'interface public de vos composants et ainsi traiter le cœur de ceux-ci telle une boîte noire. Un simple test pourrait vérifier qu'une entrée utilisateur (due à une interaction ou un changement de props) passée au composant nous donnerait le résultat attendu (cela peut être un nouveau rendu ou l'envoi d'un évènement). + +Par exemple, pour le composant `Counter`, qui incrémente un compteur visible de 1 à chaque fois qu'un bouton est cliqué, le scénario de test devrait simuler le clic puis s'assurer que le rendu visuel a bien été incrémenté d'un aussi. Le test se fiche de savoir comment le compteur a incrémenté la valeur, il s'occupe seulement de l'entrée et de la sortie (du résultat). + +Le bénéfice de cette approche est que tant que l'interface public de votre composant reste la même, vos tests passeront et ce peu importe le comportement interne de votre composant, qui pourrait changer avec le temps. + +Ce sujet est discuté plus en détails dans une [très bonne présentation de Matt O'Connell](http://slides.com/mattoconnell/deck#/). + +## Rendu superficiel + +Dans des tests unitaires, on souhaite s'intéresser au composant qui est en train d'être testé comme une unité isolée et ainsi éviter de s'assurer du bon comportement des composants enfants. + +De plus, pour les composants qui contiennent beaucoup de composants enfant, l'intégralité de l'arbre de rendu peut être énorme. Répétitivement rendre tous les composants pourrait réduire la vitesse de nos tests. + +`vue-test-utils` vous permets de monter un composant sans avoir à rendre ses composants enfants (en les ignorants) avec la méthode `shallow` : + +```js +import { shallow } from 'vue-test-utils' + +const wrapper = shallow(Component) // retourne un wrapper contenant une instance de composant montée +wrapper.vm // l'instance de Vue montée +``` + +## Assertion d'évènements émis + +Chaque wrapper monté va automatiquement enregistrer les évènements émis par l'instance de Vue en question. Vous pouvez récupérer ces évènements en utilisant la méthode `wrapper.emitted()` : + +``` js +wrapper.vm.$emit('foo') +wrapper.vm.$emit('foo', 123) + +/* +`wrapper.emitted()` retourne l'objet suivant : +{ + foo: [[], [123]] +} +*/ +``` + +Vous pouvez ensuite réaliser des assertions sur ces données : +``` js +import { expect } from 'chai' + +// asserte que l'évènement est bien émit +expect(wrapper.emitted().foo).toBeTruthy() + +// asserte la taille du compteur d'évènement +expect(wrapper.emitted().foo.length).toBe(2) + +// asserte le contenu lié à l'évènement +expect(wrapper.emitted().foo[1]).toEqual([123]) +``` + +Vous pouvez aussi récupérer un tableau des évènements dans l'ordre d'émition en appelant [`wrapper.emittedByOrder()`](../api/wrapper/emittedByOrder.md). + +## Manipuler l'état d'un composant + +Vous pouvez directement manipuler l'état d'un composant en utilisant la méthode `setData` ou `setProps` sur le wrapper : + +```js +wrapper.setData({ count: 10 }) + +wrapper.setProps({ foo: 'bar' }) +``` + +## Simuler des props + +Vous pouvez passer des props au composant en utilisant l'option `propsData` de Vue : + +```js +import { mount } from 'vue-test-utils' + +mount(Component, { + propsData: { + aProp: 'une valeur' + } +}) +``` + +Vous pouvez aussi mettre à jour les props d'un composant déjà monté avec la méthode `wrapper.setProps({})`. + +*Pour une liste complète des options, veuillez regarder [la section sur les options de montage](../api/options.md) de la documentation.* + +## Appliquer des plugins globaux et des mixins + +Des composants pourraient se fier à des fonctionnalités injectées par un plugin global ou un mixin, par exemple `vuex` ou `vue-router`. + +Si vous écrivez des tests pour des composants dans une application spécifique, vous pouvez mettre en place les mêmes plugins globaux et mixins en une seule fois dans vos tests. Dans certains cas, comme tester un composant générique utilisé par des applications différentes, il est favorable de tester ces composants dans une installation plus isolée, sans avoir à polluer le constructeur global `Vue`. On peut utiliser la méthode [`createLocalVue`](../api/createLocalVue.md) pour faire cela : + +``` js +import createLocalVue from 'vue-test-utils' + +// créer un constructeur local de Vue +const localVue = createLocalVue() + +// installer des plugins comme d'habitude +localVue.use(MyPlugin) + +// passe la `localVue` aux options de montage +mount(Component, { + localVue +}) +``` + +## Simuler des injections + +Une stratégie alternative pour injecter des propriétés est de simplement les simuler. Vous pouvez faire cela avec l'option `mocks` : + +```js +import { mount } from 'vue-test-utils' + +const $route = { + path: '/', + hash: '', + params: { id: '123' }, + query: { q: 'bonjour' } +} + +mount(Component, { + mocks: { + $route // ajoute l'objet route simulé à l'instance de Vue avant de monter le composant + } +}) +``` + +## Gérer le routage + +Depuis que le routage, par définition, porte sur la structure générale de l'application et implique plusieurs composants. Il est mieux testé via des tests d'intégration ou point à point (end-to-end). Pour des composants individuels qui se fie aux fonctionnalités de `vue-router`, vous pouvez les simuler en utilisant les techniques mentionnées plus haut. diff --git a/docs/fr/guides/dom-events.md b/docs/fr/guides/dom-events.md new file mode 100644 index 000000000..e3d9fd6f4 --- /dev/null +++ b/docs/fr/guides/dom-events.md @@ -0,0 +1,197 @@ +# Tester le clavier, la souris et les autres évènements DOM + +## Déclencheur d'évènements + + +Le `Wrapper` expose une méthode `trigger`. Elle peut être utilisée pour déclencher des évènements du DOM. + +```js +const wrapper = mount(MyButton) + +wrapper.trigger('click') +``` + +Vous devez être au courant que la méthode `find` retourne aussi un wrapper. En partant du principe que `MyComponent` contient un bouton, le code suivant clique sur le bouton. + +```js +const wrapper = mount(MyComponent) + +wrapper.find('button').trigger('click') +``` + +## Options + +La méthode `trigger` prend en paramètre optionnel l'objet `options`. Les propriétés de l'objet `options` sont ajoutées à l'évènement. + +Vous pouvez utiliser `preventDefault` sur l'évènement en passant `preventDefault: true` dans le paramètre `options`. + +```js +const wrapper = mount(MyButton) + +wrapper.trigger('click', { preventDefault: true }) +``` + + +## Exemple de clic de souris + +**Composant à tester** + +```html + + + +``` + +**Test** + +```js +import YesNoComponent from '@/components/YesNoComponent' +import { mount } from 'vue-test-utils' +import sinon from 'sinon' + +describe('Évènement click', () => { + it('Cliquer sur le bouton oui appelle notre méthode avec l\'argument "oui"', () => { + const spy = sinon.spy() + const wrapper = mount(YesNoComponent, { + propsData: { + callMe: spy + } + }) + wrapper.find('button.yes').trigger('click') + + spy.should.have.been.calledWith('oui') + }) +}) +``` + +## Exemple de test clavier + +**Composant à tester** + +Ce composant permet d'incrémenter / décrémenter la quantité en utilisant différentes touches. + +```html + + + +``` + +**Test** + +```js +import QuantityComponent from '@/components/QuantityComponent' +import { mount } from 'vue-test-utils' + +describe('Tests événement clavier', () => { + it('La quantité est zéro par défaut', () => { + const wrapper = mount(QuantityComponent) + expect(wrapper.vm.quantity).to.equal(0) + }) + + it('La flèche du haut positionne la quantité à 1', () => { + const wrapper = mount(QuantityComponent) + wrapper.trigger('keydown.up') + expect(wrapper.vm.quantity).to.equal(1) + }) + + it('La flèche du bas réduit la quantité de 1', () => { + const wrapper = mount(QuantityComponent) + wrapper.vm.quantity = 5 + wrapper.trigger('keydown.down') + expect(wrapper.vm.quantity).to.equal(4) + }) + + it('La touche Échap positionne la quantité à 0', () => { + const wrapper = mount(QuantityComponent) + wrapper.vm.quantity = 5 + wrapper.trigger('keydown.esc') + expect(wrapper.vm.quantity).to.equal(0) + }) + + it('Le caractère magique "a" positionne la quantité à 13', () => { + const wrapper = mount(QuantityComponent) + wrapper.trigger('keydown', { + which: 65 + }) + expect(wrapper.vm.quantity).to.equal(13) + }) +}) + +``` + +**Limitations** + +Un nom de touche après le point `keydown.up` est traduit vers un `keyCode`. Cela est supporté pour les noms suivant : + +* enter, tab, delete, esc, space, up, down, left, right + +## Important + +vue-test-utils déclenche les évènements de façon synchrone. Par conséquent, `vue.nextTick` n'est pas requis. diff --git a/docs/fr/guides/getting-started.md b/docs/fr/guides/getting-started.md new file mode 100644 index 000000000..c007c84f8 --- /dev/null +++ b/docs/fr/guides/getting-started.md @@ -0,0 +1,116 @@ +# Pour commencer + +## Installation + +Pour avoir un rapide avant-gout de `vue-test-utils`, clonez notre répertoire de démonstration avec l'installation de base puis installez les dépendances : + +``` bash +git clone https://github.com/vuejs/vue-test-utils-getting-started +cd vue-test-utils-getting-started +npm install +``` + +Vous allez voir que le projet possède un simple composant, `counter.js` : + +```js +// counter.js + +export default { + template: ` +
+ {{ count }} + +
+ `, + + data () { + return { + count: 0 + } + }, + + methods: { + increment () { + this.count++ + } + } +} +``` + +### Montages de composants + +`vue-test-utils` teste les composants Vue en les isolants puis en les montant, il simule les entrées nécessaires (props, injections et évènements utilisateur) et asserte les sorties (le rendu, les évènements émis). + +Les composants montés sont retournés dans un [Wrapper](./api/wrapper.md), qui expose de nombreuses méthodes pour manipuler, traverser et interroger l'instance du composant Vue en question. + +Vous pouvez créer des wrappers en utilisant la méthode `mount`. Créons un fichier nommé `test.js` : + +```js +// test.js + +// Importe la méthode `mount()` depuis test utils +// et le composant qu'on souhaite tester +import { mount } from 'vue-test-utils' +import Counter from './counter' + +// On monte le composant et nous voilà avec un wrapper +const wrapper = mount(Counter) + +// On accède à l'instance actuelle de Vue via `wrapper.vm` +const vm = wrapper.vm + +// Pour inspecter le wrapper en profondeur, utilisez console +// puis votre aventure avec vue-test-utils commence ! +console.log(wrapper) +``` + +### Tester le contenu du rendu HTML d'un composant + +Nous avons maintenant un wrapper, la première chose que l'on peut faire, c'est de vérifier que le contenu du rendu HTML du composant correspond à celui attendu. + +```js +import { mount } from 'vue-test-utils' +import Counter from './counter' + +describe('Counter', () => { + // On monte le composant et nous voilà avec un wrapper + const wrapper = mount(Counter) + + it('fait le rendu correctement', () => { + expect(wrapper.html()).toContain('0') + }) + + // c'est aussi très simple de vérifier qu'un élément existe + it('a un bouton', () => { + expect(wrapper.contains('button')).toBe(true) + }) +}) +``` + +On peut maintenant lancer les tests avec `npm test`. Vous devriez voir les tests se lancer et réussir. + +### Simulation de l'interaction utilisateur + +Notre compteur devrait s'incrémenter quand l'utilisateur clique sur le bouton. Pour simuler ce comportement, on doit tout d'abord localiser le bouton avec `wrapper.find()`, qui retourne un **wrapper pour l'élément bouton**. On peut ensuite simuler un clic en appelant `.trigger()` sur le wrapper du bouton : + +```js +it('le clic sur le bouton devrait incrémenter le compteur', () => { + expect(wrapper.vm.count).toBe(0) + const button = wrapper.find('button') + button.trigger('click') + expect(wrapper.vm.count).toBe(1) +}) +``` + +### Et quid de `nextTick` ? + +Vue groupe les mises à jour du DOM en attentes puis les appliquent de façon asynchrone pour prévenir d'éventuels multiples rendus causés par de multiples mutations de données. C'est pourquoi en pratique, on a souvent à utiliser `Vue.nextTick` pour attendre que Vue modifie le DOM actuel après avoir lancé quelques changements d'état. + +Pour simplifier cela, `vue-test-utils` applique toutes les mises à jour de façon synchrone afin que vous n'ayez pas besoin d'utiliser `Vue.nextTick` pour attendre des mises à jour du DOM dans vos tests. + +*Note : `nextTick` est toujours nécessaire quand vous souhaitez explicitement faire avancer la boucle des évènements, pour des opérations telles que des fonctions de rappel ou des résolutions de promesses.* + +## Et après ? + +- Intégrez `vue-test-utils` dans votre projet en [choisissant votre lanceur de tests](./choosing-a-test-runner.md) +- En apprendre plus sur les [techniques et astuces pour écrire des tests](./common-tips.md) diff --git a/docs/fr/guides/testing-SFCs-with-jest.md b/docs/fr/guides/testing-SFCs-with-jest.md new file mode 100644 index 000000000..143d50018 --- /dev/null +++ b/docs/fr/guides/testing-SFCs-with-jest.md @@ -0,0 +1,178 @@ +# Tester des composants monofichiers avec Jest + +> Un exemple de projet pour cette installation est disponible sur [GitHub](https://github.com/vuejs/vue-test-utils-jest-example). + +Jest est un lanceur de tests développé par Facebook. Il a pour but de procurer une solution complète de tests unitaires. Vous pouvez en apprendre plus sur Jest sur [sa documentation officielle](https://facebook.github.io/jest/). + +## Installer Jest + +On va supposer que vous commencez avec une installation qui a déjà webpack, vue-loader et Babel correctement configurés (ex. le template `webpack-simple` via `vue-cli`). + +La première chose à faire est d'installer Jest et `vue-test-utils` : + +```bash +$ npm install --save-dev jest vue-test-utils +``` + +Ensuite, on doit définir un script dans notre `package.json`. + +```json +// package.json +{ + "scripts": { + "test": "jest" + } +} +``` + +## Traiter les composants monofichiers dans Jest + +Pour indiquer à Jest comment traiter les fichiers `*.vue`, on va avoir besoin d'installer et de configurer le préprocesseur `vue-jest` : + +``` bash +npm install --save-dev vue-jest +``` + +Ensuite, créez un objet `jest` dans `package.json` : + +``` json +{ + // ... + "jest": { + "moduleFileExtensions": [ + "js", + "json", + // indique à Jest de gérer les fichiers `*.vue` + "vue" + ], + "transform": { + // traite les fichiers `*.vue` avec vue-jest + ".*\\.(vue)$": "/node_modules/vue-jest" + }, + "mapCoverage": true + } +} +``` + +> **Note :** `vue-jest` ne supporte actuellement pas toutes les fonctionnalités de `vue-loader`, par exemple le support des blocs personnalisés et du chargement de styles. De plus, quelques fonctionnalités spécifiques à webpack comme la scission de code ne sont pas supportées. Pour les utiliser, lisez le guide sur [tester des composants monofichiers avec Mocha + webpack](./testing-SFCs-with-mocha-webpack.md). + +## Gérer les alias webpack + +Si vous utilisez un alias de résolution dans la configuration de webpack, c.-à-d. faire un alias `@` pour `/src`, vous devez aussi ajouter une configuration pour Jest en utilisant l'option `moduleNameMapper` : + +``` json +{ + // ... + "jest": { + // ... + // supporte la même concordonance d'alias @ -> src dans le code source + "moduleNameMapper": { + "^@/(.*)$": "/src/$1" + } + } +} +``` + +## Configurer Babel pour Jest + +Même si les dernières version de Node.js supportent la plupart des fonctionnalités ES2015, vous souhaitez quand même utiliser la syntaxe des modules ES ainsi que les fonctionnalités stage-x dans vos tests. Pour cela, on doit installer `babel-jest` : + +``` bash +npm install --save-dev babel-jest +``` + +Ensuite, on doit indiquer à Jest de gérer les fichiers de tests JavaScript avec `babel-jest` en ajoutant une entrée sous `jest.transform` dans `package.json` : + +``` json +{ + // ... + "jest": { + // ... + "transform": { + // ... + // gérer le JavaScript avec babel-jest + "^.+\\.js$": "/node_modules/babel-jest" + }, + // ... + } +} +``` + +> Par défaut, `babel-jest` va automatiquement s'autoconfigurer dès l'installation. Cependant, comme nous avons explicitement ajouté une transformation pour les fichiers `*.vue`, on se doit aussi d'explicitement configurer `babel-jest`. + +En supposant que vous utilisez `babel-preset-env` avec webpack, la configuration par défaut de Babel désactive la transpilation des modules ES car webpack sait déjà comment traiter ces modules. Nous devons, cependant, l'activer pour nos tests car, Jest fonctionne directement dans Node.js. + +On doit aussi indiquer à `babel-preset-env` d'utiliser la version de Node.js que nous utilisons. Cela empêchera de transpiler inutilement des fonctionnalités et lancera nos tests plus rapidement. + +Pour appliquer ces options uniquement aux tests, mettez-les dans un fichier de configuration différent sous `env.test` (cela va être automatiquement être utilisé par `babel-jest`). + +Exemple `.babelrc`: + +``` json +{ + "presets": [ + ["env", { "modules": false }] + ], + "env": { + "test": { + "presets": [ + ["env", { "targets": { "node": "current" }}] + ] + } + } +} +``` + +### Test d'instantanés + +Vous pouvez utiliser [`vue-server-renderer`](https://github.com/vuejs/vue/tree/dev/packages/vue-server-renderer) pour transformer un composant en une chaine de caractères afin de le sauvegarder dans un instantané pour [Jest tests d'instantanés](https://facebook.github.io/jest/docs/en/snapshot-testing.html). + +Le résultat du rendu de `vue-server-renderer` inclut quelques attributs spécifiques au rendu côté serveur. Il ignore les espaces, cela rend plus dur d'analyser une différence. On peut améliorer l'instantané sauvegardé avec un sérialiseur personnalisé : + +``` bash +npm install --save-dev jest-serializer-vue +``` + +Puis configurez-le dans `package.json`: + +``` json +{ + // ... + "jest": { + // ... + // sérialiseur pour les instantanés + "snapshotSerializers": [ + "/node_modules/jest-serializer-vue" + ] + } +} +``` + +### Placer les fichiers de tests + +Par défaut, Jest va récursivement récupérer tous les fichiers qui ont une extension en `.spec.js` ou `.test.js` dans le projet. Si cela ne correspond pas à vos besoins, il est possible [de changer l'expression régulière `testRegex`](https://facebook.github.io/jest/docs/en/configuration.html#testregex-string) dans la configuration se trouvant dans `package.json`. + +Jest recommande de créer un répertoire `__tests__` au même niveau que le code testé, mais soyez libre de structurer vos tests selon vos besoins. Soyez juste au courant que Jest créera un répertoire `__snapshots__` au même niveau que les fichiers de tests qui travaillent sur des instantanés. + +### Exemple d'une spécification + +Si vous êtes habitué à Jasmine, vous devriez très bien vous en sortir avec [l'API d'assertions de Jest](https://facebook.github.io/jest/docs/en/expect.html#content) : + +```js +import { mount } from 'vue-test-utils' +import Component from './component' + +describe('Component', () => { + test('est une instance de Vue', () => { + const wrapper = mount(Component) + expect(wrapper.isVueInstance()).toBeTruthy() + }) +}) +``` + +### Ressources + +- [Projet exemple pour cette installation](https://github.com/vuejs/vue-test-utils-jest-example) +- [Exemples et diapositives depuis la Vue Conf 2017](https://github.com/codebryo/vue-testing-with-jest-conf17) +- [Jest](https://facebook.github.io/jest/) +- [Babel preset env](https://github.com/babel/babel-preset-env) diff --git a/docs/fr/guides/testing-SFCs-with-mocha-webpack.md b/docs/fr/guides/testing-SFCs-with-mocha-webpack.md new file mode 100644 index 000000000..e3fcdfa67 --- /dev/null +++ b/docs/fr/guides/testing-SFCs-with-mocha-webpack.md @@ -0,0 +1,180 @@ +# Tester des composants monofichiers avec Mocha + webpack + +> Un exemple de projet pour cette installation est disponible sur [GitHub](https://github.com/vuejs/vue-test-utils-mocha-webpack-example). + +Une des stratégies pour tester des composants monofichiers est de compiler tous nos tests via webpack puis de les passer dans un lanceur de tests. L'avantage de cette approche est qu'elle procure un support complet pour les fonctionnalités de webpack et de `vue-loader`, et ce, afin de ne pas réaliser de compromis dans notre code. + +Techniquement, vous pouvez utiliser n'importe quel lanceur de tests et relier le tout manuellement. Cependant, nous avons trouvé [`mocha-webpack`](https://github.com/zinserjan/mocha-webpack) qui procure une expérience très simplifiée pour cette tâche particulière. + +## Mettre en place `mocha-webpack` + +On va supposer que vous commencez avec une installation qui a déjà webpack, vue-loader et Babel correctement configurés (cf. le template `webpack-simple` via `vue-cli`). + +La première chose à faire est d'installer les dépendances de tests : + +``` bash +npm install --save-dev vue-test-utils mocha mocha-webpack +``` + +Ensuite, on doit définir un script test dans notre `package.json`. + +```json +// package.json +{ + "scripts": { + "test": "mocha-webpack --webpack-config webpack.config.js --require test/setup.js test/**/*.spec.js" + } +} +``` + +Quelques éléments importants à noter : + +- Le paramètre `--webpack-config` indique le fichier de configuration webpack à utiliser pour les tests. Dans la plupart des cas, c'est identique à la configuration du projet actuel avec une petite modification. On en reparlera plus tard. + +- Le paramètre `--require` permet de s'assurer que le fichier `test/setup.js` est bien exécuté avant les tests. Dans celui-ci, on met en place l'environnement où nos tests vont être exécutés. + +- Le dernier paramètre est un glob pour indiquer les fichiers de tests à inclure dans le paquetage. + +### Configuration supplémentaire pour webpack + +#### Externaliser les dépendances npm + +Dans nos tests, nous allons surement importer un nombre conséquent de dépendances npm, certaines d'entre elles n'ont pas été conçues pour une utilisation dans un navigateur et ne peuvent être empaquetées par webpack. Il faut aussi considérer qu'externaliser les dépendances augmente énormément la vitesse de lancement des tests. On peut externaliser toutes les dépendances npm avec `webpack-node-externals -externals` : + +```js +// webpack.config.js +const nodeExternals = require('webpack-node-externals') + +module.exports = { + // ... + externals: [nodeExternals()] +} +``` + +#### Coordinateur de sources + +La coordinateur de sources (« Source maps ») doit être indiquée pour être utilisé par `mocha-webpack`. La configuration recommandée est la suivante : + +``` js +module.exports = { + // ... + devtool: 'inline-cheap-module-source-map' +} +``` + +Si vous déboguez via votre IDE, il est recommandé d'ajouter la configuration suivante : + +``` js +module.exports = { + // ... + output: { + // ... + // utiliser des chemins absolus (c'est important si vous déboguez avec un IDE) + devtoolModuleFilenameTemplate: '[absolute-resource-path]', + devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]' + } +} +``` + +### Mettre en place l'environnement du navigateur + +`vue-test-utils` requiert en environnement de navigateur pour fonctionner. On peut le simuler avec Node.js en utilisant `jsdom-global` : + +```bash +npm install --save-dev jsdom jsdom-global +``` + +Puis dans `test/setup.js`: + +``` js +require('jsdom-global')() +``` + +Cela ajoute un environnement de navigateur dans Node.js afin que `vue-test-utils` fonctionne correctement. + +### Choisir une bibliothèque d'assertions + +[Chai](http://chaijs.com/) est une bibliothèque populaire qui est généralement utilisée avec Mocha. Vous pouvez aussi jeter un coup d'œil à [Sinon](http://sinonjs.org/) pour créer des espions et des fonctions avec un comportement pré-programmé (« stubs »). + +Vous pouvez utiliser, alternativement, `expect` qui fait maintenant partie de Jest et expose [la même API](http://facebook.github.io/jest/docs/en/expect.html#content) dans la documentation de Jest. + +On va utiliser `expect` et le rendre globalement accessible afin de ne pas avoir à l'importer pour chaque test : + +``` bash +npm install --save-dev expect +``` + +Puis dans `test/setup.js`: + +``` js +require('jsdom-global')() + +global.expect = require('expect') +``` + +### Optimiser Babel pour les tests + +Notez que nous utilisons `babel-loader` pour gérer JavaScript. Vous devriez déjà avoir Babel de configuré si vous l'utilisez dans votre application via un fichier `.babelrc`. Ici `babel-loader` va automatiquement utiliser le même fichier de configuration. + +Une autre chose à noter est que si vous utilisez une version de Node.js 6+, qui supporte déjà une majorité des fonctionnalités d'ES2015, vous pouvez configurer séparément un autre Babel [env option](https://babeljs.io/docs/usage/babelrc/#env-option) qui va uniquement transpiler les fonctionnalités non supportées dans la version de Node.js que vous utilisez (c.-à-d. stage-2 ou le support de la syntaxe flow, etc.). + +### Ajouter un test + +Créez dans le dossier `src` un fichier nommé `Counter.vue`: + +``` html + + + +``` + +Puis créez un test nommé `test/Counter.spec.js` avec le code suivant : + +```js +import { shallow } from 'vue-test-utils' +import Counter from '../src/Counter.vue' + +describe('Counter.vue', () => { + it('incrémente le compteur quand le bouton est cliqué', () => { + const wrapper = shallow(Counter) + wrapper.find('button').trigger('click') + expect(wrapper.find('div').text()).toMatch('1') + }) +}) +``` + +Et maintenant on peut lancer le test avec : + +``` +npm run unit +``` + +Woohoo, nos tests fonctionnent ! + +### Ressources + +- [Projet exemple pour cette installation](https://github.com/vuejs/vue-test-utils-mocha-webpack-example) +- [Mocha](https://mochajs.org/) +- [mocha-webpack](http://zinserjan.github.io/mocha-webpack/) +- [Chai](http://chaijs.com/) +- [Sinon](http://sinonjs.org/) +- [jest/expect](http://facebook.github.io/jest/docs/en/expect.html#content) diff --git a/docs/fr/guides/using-with-vue-router.md b/docs/fr/guides/using-with-vue-router.md new file mode 100644 index 000000000..1c8cd7cb4 --- /dev/null +++ b/docs/fr/guides/using-with-vue-router.md @@ -0,0 +1,71 @@ +# Utilisation avec Vue Router + +## Installer Vue Router pour nos tests + +Vous ne devez jamais installer Vue Router sur le constructeur de base de Vue pour vos tests. Installer Vue Router de cette manière ajoute `$route` et `$router` en tant que propriétés en lecture seule sur le prototype Vue. + +Pour éviter cela, on peut utiliser une `localVue`, et installer Vue Router dessus. + +```js +import VueRouter from 'vue-router' +const localVue = createLocalVue() + +localVue.use(VueRouter) + +shallow(Component, { + localVue +}) +``` + +## Tester des composants qui utilisent `router-link` ou `router-view` + +Quand vous installez Vue Router, les composants `router-link` et `router-view` sont enregistrés. Cela veut dire que l'on peut les utiliser n'importe où dans notre application sans avoir besoin de les importer. + +On doit donc rendre ces composants Vue Router disponibles au composant que nous testons. Il y a deux méthodes pour cela. + +### Utiliser des stubs + +```js +shallow(Component, { + stubs: ['router-link', 'router-view'] +}) +``` + +### Installer Vue Router et `localVue` + +```js +import VueRouter from 'vue-router' +const localVue = createLocalVue() + +localVue.use(VueRouter) + +shallow(Component, { + localVue +}) +``` + +## Simuler `$route` et `$router` + +Quelques fois, vous souhaitez tester qu'un composant réagisse correctement avec les paramètres des objets `$route` et `$router`. Pour cela, vous pouvez passer des imitations à l'instance de Vue. + +```js +const $route = { + path: '/un/super/chemin' +} + +const wrapper = shallow(Component, { + mocks: { + $route + } +}) + +wrapper.vm.$router // /un/super/chemin +``` + +## Trucs et astuces + +Installer Vue Router ajoute `$route` et `$router` en tant que propriétés en lecture seule au prototype de Vue. + +Cela veut dire que n'importe quel futur test qui va essayer de modifier `$route` ou `$router` va échouer. + +Pour éviter cela, n'installez jamais Vue Router quand vous lancez vos tests. diff --git a/docs/fr/guides/using-with-vuex.md b/docs/fr/guides/using-with-vuex.md new file mode 100644 index 000000000..875a6d724 --- /dev/null +++ b/docs/fr/guides/using-with-vuex.md @@ -0,0 +1,263 @@ +# Utiliser avec Vuex + +Dans ce guide, nous allons voir comment tester Vuex dans des composants grâce à `vue-test-utils`. + +## Simuler des actions + +Regardons un peu de code ! + +Ci-dessous, le composant que nous voulons tester. Il fait appel à des actions Vuex. + +``` html + + + +``` + +Pour les objectifs de ce test, on se fiche de ce que les actions font, ou à ce quoi le store ressemble. On doit juste savoir si ces actions sont lancées lorsqu'elles sont supposées l'être, et ce, avec les valeurs attendues. + +Pour tester cela, on doit passer un store fictif à Vue lorsque l'on isole notre composant. + +Au lieu de passer le store au constructeur de base de Vue, on peut le passer à - [`localVue`](../api/options.md#localvue). Un `localVue` est un constructeur à portée limitée de Vue sur lequel on peut effectuer des changements sans avoir à affecter le constructeur global. + +Voyons à quoi cela ressemble : + +``` js +import { shallow, createLocalVue } from 'vue-test-utils' +import Vuex from 'vuex' +import Actions from '../../../src/components/Actions' + +const localVue = createLocalVue() + +localVue.use(Vuex) + +describe('Actions.vue', () => { + let actions + let store + + beforeEach(() => { + actions = { + actionClick: jest.fn(), + actionInput: jest.fn() + } + store = new Vuex.Store({ + state: {}, + actions + }) + }) + + it("appelle l'action `actionInput` du store quand la valeur du champ est `input` et qu'un évènement `input` est lancé", () => { + const wrapper = shallow(Actions, { store, localVue }) + const input = wrapper.find('input') + input.element.value = 'input' + input.trigger('input') + expect(actions.actionInput).toHaveBeenCalled() + }) + + it("n'appelle pas l'action `actionInput` du store quand la valeur du champ n'est pas `input` et qu'un évènement `input` est lancé", () => { + const wrapper = shallow(Actions, { store, localVue }) + const input = wrapper.find('input') + input.element.value = 'not input' + input.trigger('input') + expect(actions.actionInput).not.toHaveBeenCalled() + }) + + it("appelle l'action `actionClick` quand le bouton est cliqué", () => { + const wrapper = shallow(Actions, { store, localVue }) + wrapper.find('button').trigger('click') + expect(actions.actionClick).toHaveBeenCalled() + }) +}) +``` + +Que se passe-t-il ici ? Premièrement, on indique à Vue d'utiliser Vuex avec la méthode `use`. C'est tout simplement une surcouche de `Vue.use`. + +On va ensuite créer un store fictif en appelant `new Vuex.Store` avec nos propres valeurs. À noter que l'on indique uniquement nos actions, car on ne s'intéresse qu'à elles. + +Les actions sont des [fonctions de simulations de Jest](https://facebook.github.io/jest/docs/en/mock-functions.html). Ces fonctions nous donnent accès à des méthodes afin de réaliser des assertions si l'action a été appelée ou non. + +On peut ensuite s'assurer dans nos tests que les actions ont été appelées au bon moment. + +La manière dont on définit le store peut vous paraitre un peu étrange. + +On utilise `beforeEach` pour s'assurer que nous avons un store propre avant chaque test. `beforeEach` est un hook de Mocha qui est appelé avant chaque test. Dans nos tests, on réassigne des valeurs aux variables du store. Si on ne le fait pas, les fonctions de simulations auraient besoin d'être automatiquement réinitialisées. Cela nous laisse la possibilité de changer l'état dans nos tests, sans avoir à affecter les prochains. + +La chose la plus importante à noter dans ce test est que **l'on crée une simulation d'un store Vuex, qui est ensuite passé à vue-test-utils**. + +Génial, on peut désormais simuler des actions. Allons avoir comment simuler des accesseurs ! + +## Simuler des accesseurs + + +``` html + + + +``` + +C'est un composant relativement simple. Il affiche le résultat des accesseurs `clicks` et `inputValue`. Encore une fois, on se fiche de savoir ce que ces accesseurs retournent. On souhaite juste savoir si les résultats sont affichés correctement. + +Jetons un œil à un test : + +``` js +import { shallow, createLocalVue } from 'vue-test-utils' +import Vuex from 'vuex' +import Actions from '../../../src/components/Getters' + +const localVue = createLocalVue() + +localVue.use(Vuex) + +describe('Getters.vue', () => { + let getters + let store + + beforeEach(() => { + getters = { + clicks: () => 2, + inputValue: () => 'input' + } + + store = new Vuex.Store({ + getters + }) + }) + + it('affiche `state.inputValue` dans la première balise

', () => { + const wrapper = shallow(Actions, { store, localVue }) + const p = wrapper.find('p') + expect(p.text()).toBe(getters.inputValue()) + }) + + it('affiche `stat.clicks` dans la seconde balise

', () => { + const wrapper = shallow(Actions, { store, localVue }) + const p = wrapper.findAll('p').at(1) + expect(p.text()).toBe(getters.clicks().toString()) + }) +}) +``` +Ce test est similaire à notre test sur les actions. On créer un store fictif avant chaque test, on le passe ensuite comme une option lorsque l'on appelle `shallow`. Pour finir, on asserte que la valeur retournée par nos accesseurs fictifs est bien affichée. + +C'est génial, mais comment faisons-nous pour vérifier que nos accesseurs retournent correctement les parties de l'état ? + +## Simulation avec des modules + +Les [modules](https://vuex.vuejs.org/en/modules.html) sont utiles pour séparer un store en plusieurs morceaux. Ils exportent des accesseurs que l'on peut utiliser dans nos tests. + +Jetons un œil à ce composant : + +``` html + + + +``` +Simple composant qui possède une action et un accesseur. +Et le test : + +``` js +import { shallow, createLocalVue } from 'vue-test-utils' +import Vuex from 'vuex' +import Modules from '../../../src/components/Modules' +import module from '../../../src/store/module' + +const localVue = createLocalVue() + +localVue.use(Vuex) + +describe('Modules.vue', () => { + let actions + let state + let store + + beforeEach(() => { + state = { + module: { + clicks: 2 + } + } + + actions = { + moduleActionClick: jest.fn() + } + + store = new Vuex.Store({ + state, + actions, + getters: module.getters + }) + }) + + it("appelle l'action du store moduleActionClick quand le bouton est cliqué", () => { + const wrapper = shallow(Modules, { store, localVue }) + const button = wrapper.find('button') + button.trigger('click') + expect(actions.moduleActionClick).toHaveBeenCalled() + }) + + it("affiche `state.inputValue` dans la première balise

", () => { + const wrapper = shallow(Modules, { store, localVue }) + const p = wrapper.find('p') + expect(p.text()).toBe(state.module.clicks.toString()) + }) +}) +``` + +### Ressources + +- [Projet exemple pour ce guide](https://github.com/eddyerburgh/vue-test-utils-vuex-example) +- [localVue](../api/options.md#localvue) +- [createLocalVue](../api/createLocalVue.md) From 3906f0938bb9b9454e87225886e93b5a1693b6c4 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Mon, 6 Nov 2017 16:48:30 +0100 Subject: [PATCH 02/10] Message for part still not translated. Signed-off-by: Bruno Lesieur --- docs/fr/api/README.md | 94 +++++++++++----------- docs/fr/api/createLocalVue.md | 2 +- docs/fr/api/mount.md | 2 +- docs/fr/api/options.md | 2 +- docs/fr/api/selectors.md | 2 +- docs/fr/api/shallow.md | 2 +- docs/fr/api/wrapper-array/README.md | 2 +- docs/fr/api/wrapper-array/at.md | 2 +- docs/fr/api/wrapper-array/contains.md | 2 +- docs/fr/api/wrapper-array/destroy.md | 2 +- docs/fr/api/wrapper-array/hasAttribute.md | 2 +- docs/fr/api/wrapper-array/hasClass.md | 2 +- docs/fr/api/wrapper-array/hasProp.md | 2 +- docs/fr/api/wrapper-array/hasStyle.md | 2 +- docs/fr/api/wrapper-array/is.md | 2 +- docs/fr/api/wrapper-array/isEmpty.md | 2 +- docs/fr/api/wrapper-array/isVueInstance.md | 2 +- docs/fr/api/wrapper-array/setData.md | 2 +- docs/fr/api/wrapper-array/setMethods.md | 2 +- docs/fr/api/wrapper-array/setProps.md | 2 +- docs/fr/api/wrapper-array/trigger.md | 2 +- docs/fr/api/wrapper-array/update.md | 2 +- docs/fr/api/wrapper/README.md | 2 +- docs/fr/api/wrapper/contains.md | 2 +- docs/fr/api/wrapper/destroy.md | 2 +- docs/fr/api/wrapper/emitted.md | 2 +- docs/fr/api/wrapper/emittedByOrder.md | 2 +- docs/fr/api/wrapper/exists.md | 2 +- docs/fr/api/wrapper/find.md | 2 +- docs/fr/api/wrapper/findAll.md | 2 +- docs/fr/api/wrapper/hasAttribute.md | 2 +- docs/fr/api/wrapper/hasClass.md | 2 +- docs/fr/api/wrapper/hasProp.md | 2 +- docs/fr/api/wrapper/hasStyle.md | 2 +- docs/fr/api/wrapper/html.md | 2 +- docs/fr/api/wrapper/is.md | 2 +- docs/fr/api/wrapper/isEmpty.md | 2 +- docs/fr/api/wrapper/isVueInstance.md | 2 +- docs/fr/api/wrapper/name.md | 2 +- docs/fr/api/wrapper/setData.md | 2 +- docs/fr/api/wrapper/setMethods.md | 2 +- docs/fr/api/wrapper/setProps.md | 2 +- docs/fr/api/wrapper/text.md | 2 +- docs/fr/api/wrapper/trigger.md | 2 +- docs/fr/api/wrapper/update.md | 2 +- 45 files changed, 91 insertions(+), 91 deletions(-) diff --git a/docs/fr/api/README.md b/docs/fr/api/README.md index 3026a0347..0d34fe921 100644 --- a/docs/fr/api/README.md +++ b/docs/fr/api/README.md @@ -1,49 +1,49 @@ # API -* [mount](./mount.md) -* [shallow](./shallow.md) -* [Options de montage](./options.md) - - [context](./options.md#context) - - [slots](./options.md#slots) - - [stubs](./options.md#stubs) - - [mocks](./options.md#mocks) - - [localVue](./options.md#localvue) - - [attachToDocument](./options.md#attachtodocument) - - [attrs](./options.md#attrs) - - [listeners](./options.md#listeners) - - [clone](./options.md#clone) -* [Wrapper](./wrapper/README.md) - * [contains](./wrapper/contains.md) - * [emitted](./wrapper/emitted.md) - * [emittedByOrder](./wrapper/emittedByOrder.md) - * [find](./wrapper/find.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) - * [update](./wrapper/update.md) - * [setData](./wrapper/setData.md) - * [setProps](./wrapper/setProps.md) - * [text](./wrapper/text.md) - * [trigger](./wrapper/trigger.md) -* [WrapperArray](./wrapper-array/README.md) - * [at](./wrapper-array/at.md) - * [contains](./wrapper-array/contains.md) - * [hasAttribute](./wrapper-array/hasAttribute.md) - * [hasClass](./wrapper-array/hasClass.md) - * [hasProp](./wrapper-array/hasProp.md) - * [hasStyle](./wrapper-array/hasStyle.md) - * [is](./wrapper-array/is.md) - * [isEmpty](./wrapper-array/isEmpty.md) - * [isVueInstance](./wrapper-array/isVueInstance.md) - * [update](./wrapper-array/update.md) - * [setData](./wrapper-array/setData.md) - * [setProps](./wrapper-array/setProps.md) - * [trigger](./wrapper-array/trigger.md) -* [createLocalVue](./createLocalVue.md) -* [Selecteurs](./selectors.md) +* [mount (EN)](./mount.md) +* [shallow (EN)](./shallow.md) +* [Options de montage (EN)](./options.md) + - [context (EN)](./options.md#context) + - [slots (EN)](./options.md#slots) + - [stubs (EN)](./options.md#stubs) + - [mocks (EN)](./options.md#mocks) + - [localVue (EN)](./options.md#localvue) + - [attachToDocument (EN)](./options.md#attachtodocument) + - [attrs (EN)](./options.md#attrs) + - [listeners (EN)](./options.md#listeners) + - [clone (EN)](./options.md#clone) +* [Wrapper (EN)](./wrapper/README.md) + * [contains (EN)](./wrapper/contains.md) + * [emitted (EN)](./wrapper/emitted.md) + * [emittedByOrder (EN)](./wrapper/emittedByOrder.md) + * [find (EN)](./wrapper/find.md) + * [hasAttribute (EN)](./wrapper/hasAttribute.md) + * [hasClass (EN)](./wrapper/hasClass.md) + * [hasProp (EN)](./wrapper/hasProp.md) + * [hasStyle (EN)](./wrapper/hasStyle.md) + * [html (EN)](./wrapper/html.md) + * [is (EN)](./wrapper/is.md) + * [isEmpty (EN)](./wrapper/isEmpty.md) + * [isVueInstance (EN)](./wrapper/isVueInstance.md) + * [name (EN)](./wrapper/name.md) + * [update (EN)](./wrapper/update.md) + * [setData (EN)](./wrapper/setData.md) + * [setProps (EN)](./wrapper/setProps.md) + * [text (EN)](./wrapper/text.md) + * [trigger (EN)](./wrapper/trigger.md) +* [WrapperArray (EN)](./wrapper-array/README.md) + * [at (EN)](./wrapper-array/at.md) + * [contains (EN)](./wrapper-array/contains.md) + * [hasAttribute (EN)](./wrapper-array/hasAttribute.md) + * [hasClass (EN)](./wrapper-array/hasClass.md) + * [hasProp (EN)](./wrapper-array/hasProp.md) + * [hasStyle (EN)](./wrapper-array/hasStyle.md) + * [is (EN)](./wrapper-array/is.md) + * [isEmpty (EN)](./wrapper-array/isEmpty.md) + * [isVueInstance (EN)](./wrapper-array/isVueInstance.md) + * [update (EN)](./wrapper-array/update.md) + * [setData (EN)](./wrapper-array/setData.md) + * [setProps (EN)](./wrapper-array/setProps.md) + * [trigger (EN)](./wrapper-array/trigger.md) +* [createLocalVue (EN)](./createLocalVue.md) +* [Selecteurs (EN)](./selectors.md) diff --git a/docs/fr/api/createLocalVue.md b/docs/fr/api/createLocalVue.md index a3cbfcee3..265537b78 100644 --- a/docs/fr/api/createLocalVue.md +++ b/docs/fr/api/createLocalVue.md @@ -5,7 +5,7 @@ - **Usage:** -`createLocalVue` returns a Vue class for you to add components, mixins and install plugins without polluting the global Vue class. +

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

`createLocalVue` returns a Vue class for you to add components, mixins and install plugins without polluting the global Vue class.

Use it with `options.localVue` diff --git a/docs/fr/api/mount.md b/docs/fr/api/mount.md index aaddd3e2f..ed0170c1a 100644 --- a/docs/fr/api/mount.md +++ b/docs/fr/api/mount.md @@ -9,7 +9,7 @@ - **Options:** -See [options](options.md) +

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

See [options](options.md)

- **Usage:** diff --git a/docs/fr/api/options.md b/docs/fr/api/options.md index 862992dae..3a7e6b468 100644 --- a/docs/fr/api/options.md +++ b/docs/fr/api/options.md @@ -1,6 +1,6 @@ # Mounting Options -Options for `mount` and `shallow`. The options object can contain both `vue-test-utils` mounting options and raw Vue options. +

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

Options for `mount` and `shallow`. The options object can contain both `vue-test-utils` mounting options and raw Vue options.

Vue options are passed to the component when a new instance is created. , e.g. `store`, `propsData`. For a full list, see the [Vue API docs](https://vuejs.org/v2/api/). diff --git a/docs/fr/api/selectors.md b/docs/fr/api/selectors.md index 0c6a47f3b..6a79c76a8 100644 --- a/docs/fr/api/selectors.md +++ b/docs/fr/api/selectors.md @@ -1,6 +1,6 @@ # Selectors -A lot of methods take a selector as an argument. A selector can either be a CSS selector, or a Vue component. +

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

A lot of methods take a selector as an argument. A selector can either be a CSS selector, or a Vue component.

## CSS Selectors diff --git a/docs/fr/api/shallow.md b/docs/fr/api/shallow.md index fa16e9d24..46d1a8988 100644 --- a/docs/fr/api/shallow.md +++ b/docs/fr/api/shallow.md @@ -19,7 +19,7 @@ - **Options:** -See [options](./options.md) +

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

See [options](./options.md)

- **Usage:** diff --git a/docs/fr/api/wrapper-array/README.md b/docs/fr/api/wrapper-array/README.md index 2a6d40ccc..08bb2155d 100644 --- a/docs/fr/api/wrapper-array/README.md +++ b/docs/fr/api/wrapper-array/README.md @@ -1,6 +1,6 @@ # WrapperArray -A `WrapperArray` is an object that contains an array of [Wrappers](../wrapper/README.md), and methods to test the `Wrappers`. +

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

A `WrapperArray` is an object that contains an array of [Wrappers](../wrapper/README.md), and methods to test the `Wrappers`.

- **Properties:** diff --git a/docs/fr/api/wrapper-array/at.md b/docs/fr/api/wrapper-array/at.md index e5864bf1b..a8f0b15ce 100644 --- a/docs/fr/api/wrapper-array/at.md +++ b/docs/fr/api/wrapper-array/at.md @@ -1,6 +1,6 @@ # at(index) -Returns `Wrapper` at `index` passed. Uses zero based numbering (i.e. first item is at index 0). +

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

Returns `Wrapper` at `index` passed. Uses zero based numbering (i.e. first item is at index 0).

- **Arguments:** - `{number} index` diff --git a/docs/fr/api/wrapper-array/contains.md b/docs/fr/api/wrapper-array/contains.md index 3b5ee31de..5c19746e5 100644 --- a/docs/fr/api/wrapper-array/contains.md +++ b/docs/fr/api/wrapper-array/contains.md @@ -1,6 +1,6 @@ # contains(selector) -Assert every wrapper in `WrapperArray` contains selector. +

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

Assert every wrapper in `WrapperArray` contains selector.

Use any valid [selector](../selectors.md). diff --git a/docs/fr/api/wrapper-array/destroy.md b/docs/fr/api/wrapper-array/destroy.md index 875936ecb..d6b8b1a01 100644 --- a/docs/fr/api/wrapper-array/destroy.md +++ b/docs/fr/api/wrapper-array/destroy.md @@ -1,6 +1,6 @@ # destroy() -Destroys each Vue `Wrapper` in `WrapperArray`. +

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

Destroys each Vue `Wrapper` in `WrapperArray`.

- **Example:** diff --git a/docs/fr/api/wrapper-array/hasAttribute.md b/docs/fr/api/wrapper-array/hasAttribute.md index b3436edc9..07389e5a3 100644 --- a/docs/fr/api/wrapper-array/hasAttribute.md +++ b/docs/fr/api/wrapper-array/hasAttribute.md @@ -1,6 +1,6 @@ # hasAttribute(attribute, value) -Assert every `Wrapper` in `WrapperArray` DOM node has `attribute` matching `value`. +

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

Assert every `Wrapper` in `WrapperArray` DOM node has `attribute` matching `value`.

- **Arguments:** - `{string} attribute` diff --git a/docs/fr/api/wrapper-array/hasClass.md b/docs/fr/api/wrapper-array/hasClass.md index b4c48b397..1169e77e8 100644 --- a/docs/fr/api/wrapper-array/hasClass.md +++ b/docs/fr/api/wrapper-array/hasClass.md @@ -1,6 +1,6 @@ # hasClass(className) -Assert every `Wrapper` in `WrapperArray` DOM node has class containing `className`. +

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

Assert every `Wrapper` in `WrapperArray` DOM node has class containing `className`.

- **Arguments:** - `{string} className` diff --git a/docs/fr/api/wrapper-array/hasProp.md b/docs/fr/api/wrapper-array/hasProp.md index 6ce255fd7..12c824804 100644 --- a/docs/fr/api/wrapper-array/hasProp.md +++ b/docs/fr/api/wrapper-array/hasProp.md @@ -1,6 +1,6 @@ # hasProp(prop, value) -Assert every `Wrapper` in `WrapperArray` `vm` has `prop` matching `value`. +

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

Assert every `Wrapper` in `WrapperArray` `vm` has `prop` matching `value`.

**Note the Wrapper must contain a Vue instance.** diff --git a/docs/fr/api/wrapper-array/hasStyle.md b/docs/fr/api/wrapper-array/hasStyle.md index 56a8843fa..2bbdcf865 100644 --- a/docs/fr/api/wrapper-array/hasStyle.md +++ b/docs/fr/api/wrapper-array/hasStyle.md @@ -1,6 +1,6 @@ # hasStyle(style, value) -Assert every `Wrapper` in `WrapperArray` DOM node has style matching value. +

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

Assert every `Wrapper` in `WrapperArray` DOM node has style matching value.

Returns `true` if `Wrapper` DOM node has `style` matching `value`. diff --git a/docs/fr/api/wrapper-array/is.md b/docs/fr/api/wrapper-array/is.md index 8a5a7cb7a..56ce7abd8 100644 --- a/docs/fr/api/wrapper-array/is.md +++ b/docs/fr/api/wrapper-array/is.md @@ -1,6 +1,6 @@ # is(selector) -Assert every `Wrapper` in `WrapperArray` DOM node or `vm` matches [selector](../selectors.md). +

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

Assert every `Wrapper` in `WrapperArray` DOM node or `vm` matches [selector](../selectors.md).

- **Arguments:** - `{string|Component} selector` diff --git a/docs/fr/api/wrapper-array/isEmpty.md b/docs/fr/api/wrapper-array/isEmpty.md index 6ef8b4145..1d73dd8db 100644 --- a/docs/fr/api/wrapper-array/isEmpty.md +++ b/docs/fr/api/wrapper-array/isEmpty.md @@ -1,6 +1,6 @@ # isEmpty() -Assert every `Wrapper` in `WrapperArray` does not contain child node. +

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

Assert every `Wrapper` in `WrapperArray` does not contain child node.

- **Returns:** `{boolean}` diff --git a/docs/fr/api/wrapper-array/isVueInstance.md b/docs/fr/api/wrapper-array/isVueInstance.md index 66d556b7f..b8defcf9b 100644 --- a/docs/fr/api/wrapper-array/isVueInstance.md +++ b/docs/fr/api/wrapper-array/isVueInstance.md @@ -1,6 +1,6 @@ # isVueInstance() -Assert every `Wrapper` in `WrapperArray` is Vue instance. +

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

Assert every `Wrapper` in `WrapperArray` is Vue instance.

- **Returns:** `{boolean}` diff --git a/docs/fr/api/wrapper-array/setData.md b/docs/fr/api/wrapper-array/setData.md index f4f69bf61..1611d9a33 100644 --- a/docs/fr/api/wrapper-array/setData.md +++ b/docs/fr/api/wrapper-array/setData.md @@ -1,6 +1,6 @@ # setData(data) -Sets `Wrapper` `vm` data and forces update on each `Wrapper` in `WrapperArray`. +

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

Sets `Wrapper` `vm` data and forces update on each `Wrapper` in `WrapperArray`.

**Note every `Wrapper` must contain a Vue instance.** diff --git a/docs/fr/api/wrapper-array/setMethods.md b/docs/fr/api/wrapper-array/setMethods.md index 5d50927ae..54f56402c 100644 --- a/docs/fr/api/wrapper-array/setMethods.md +++ b/docs/fr/api/wrapper-array/setMethods.md @@ -1,7 +1,7 @@ # setMethods(methods) -Sets `Wrapper` `vm` methods and forces update on each `Wrapper` in `WrapperArray`. +

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

Sets `Wrapper` `vm` methods and forces update on each `Wrapper` in `WrapperArray`.

**Note every `Wrapper` must contain a Vue instance.** diff --git a/docs/fr/api/wrapper-array/setProps.md b/docs/fr/api/wrapper-array/setProps.md index c68e84f1d..679e8c6a5 100644 --- a/docs/fr/api/wrapper-array/setProps.md +++ b/docs/fr/api/wrapper-array/setProps.md @@ -1,6 +1,6 @@ # setProps(props) -Sets `Wrapper` `vm` props and forces update on each `Wrapper` in `WrapperArray`. +

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

Sets `Wrapper` `vm` props and forces update on each `Wrapper` in `WrapperArray`.

**Note every `Wrapper` must contain a Vue instance.** diff --git a/docs/fr/api/wrapper-array/trigger.md b/docs/fr/api/wrapper-array/trigger.md index 5ffdb7423..f861326f7 100644 --- a/docs/fr/api/wrapper-array/trigger.md +++ b/docs/fr/api/wrapper-array/trigger.md @@ -1,6 +1,6 @@ # trigger(eventName) -Triggers an event on every `Wrapper` in the `WrapperArray` DOM node. +

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

Triggers an event on every `Wrapper` in the `WrapperArray` DOM node.

**Note every `Wrapper` must contain a Vue instance.** diff --git a/docs/fr/api/wrapper-array/update.md b/docs/fr/api/wrapper-array/update.md index de0647028..56713f0b8 100644 --- a/docs/fr/api/wrapper-array/update.md +++ b/docs/fr/api/wrapper-array/update.md @@ -1,6 +1,6 @@ # update() -Force root Vue component of each `Wrapper` in `WrapperArray` to re-render. +

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

Force root Vue component of each `Wrapper` in `WrapperArray` to re-render.

If called on a Vue component wrapper array, it will force each Vue component to re-render. diff --git a/docs/fr/api/wrapper/README.md b/docs/fr/api/wrapper/README.md index 6469b8745..f0f6bfaf9 100644 --- a/docs/fr/api/wrapper/README.md +++ b/docs/fr/api/wrapper/README.md @@ -1,6 +1,6 @@ # Wrapper -vue-test-utils is a wrapper based API. +

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

vue-test-utils is a wrapper based API.

A `Wrapper` is an object that contains a mounted component or vnode and methods to test the component or vnode. diff --git a/docs/fr/api/wrapper/contains.md b/docs/fr/api/wrapper/contains.md index a91b0353b..1e9bf012a 100644 --- a/docs/fr/api/wrapper/contains.md +++ b/docs/fr/api/wrapper/contains.md @@ -1,6 +1,6 @@ # contains(selector) -Assert `Wrapper` contains an element or component matching [selector](../selectors.md). +

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

Assert `Wrapper` contains an element or component matching [selector](../selectors.md).

- **Arguments:** - `{string|Component} selector` diff --git a/docs/fr/api/wrapper/destroy.md b/docs/fr/api/wrapper/destroy.md index 015d5a5ea..2931bbd73 100644 --- a/docs/fr/api/wrapper/destroy.md +++ b/docs/fr/api/wrapper/destroy.md @@ -1,6 +1,6 @@ # destroy() -Destroys a Vue component instance. +

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

Destroys a Vue component instance.

- **Example:** diff --git a/docs/fr/api/wrapper/emitted.md b/docs/fr/api/wrapper/emitted.md index d754eab98..495ca56d0 100644 --- a/docs/fr/api/wrapper/emitted.md +++ b/docs/fr/api/wrapper/emitted.md @@ -1,6 +1,6 @@ # emitted() -Return an object containing custom events emitted by the `Wrapper` `vm`. +

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

Return an object containing custom events emitted by the `Wrapper` `vm`.

- **Returns:** `{ [name: string]: Array> }` diff --git a/docs/fr/api/wrapper/emittedByOrder.md b/docs/fr/api/wrapper/emittedByOrder.md index 55ff975b2..64623c07b 100644 --- a/docs/fr/api/wrapper/emittedByOrder.md +++ b/docs/fr/api/wrapper/emittedByOrder.md @@ -1,6 +1,6 @@ # emittedByOrder() -Return an Array containing custom events emitted by the `Wrapper` `vm`. +

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

Return an Array containing custom events emitted by the `Wrapper` `vm`.

- **Returns:** `Array<{ name: string, args: Array }>` diff --git a/docs/fr/api/wrapper/exists.md b/docs/fr/api/wrapper/exists.md index 4fac1351f..0aa37ea2a 100644 --- a/docs/fr/api/wrapper/exists.md +++ b/docs/fr/api/wrapper/exists.md @@ -1,6 +1,6 @@ # exists() -Assert `Wrapper` or `WrapperArray` exists. +

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

Assert `Wrapper` or `WrapperArray` exists.

Returns false if called on an empty `Wrapper` or `WrapperArray`. diff --git a/docs/fr/api/wrapper/find.md b/docs/fr/api/wrapper/find.md index 1d121c591..5b88f58eb 100644 --- a/docs/fr/api/wrapper/find.md +++ b/docs/fr/api/wrapper/find.md @@ -1,6 +1,6 @@ # find(selector) -Returns [`Wrapper`](README.md) of first DOM node or Vue component matching selector. +

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

Returns [`Wrapper`](README.md) of first DOM node or Vue component matching selector.

Use any valid [selector](../selectors.md). diff --git a/docs/fr/api/wrapper/findAll.md b/docs/fr/api/wrapper/findAll.md index f78ab6201..36a0f34e4 100644 --- a/docs/fr/api/wrapper/findAll.md +++ b/docs/fr/api/wrapper/findAll.md @@ -1,6 +1,6 @@ # findAll(selector) -Returns a [`WrapperArray`](../wrapper-array/README.md) of [Wrappers](README.md). +

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

Returns a [`WrapperArray`](../wrapper-array/README.md) of [Wrappers](README.md).

Use any valid [selector](../selectors.md). diff --git a/docs/fr/api/wrapper/hasAttribute.md b/docs/fr/api/wrapper/hasAttribute.md index da9a893b5..7022e8729 100644 --- a/docs/fr/api/wrapper/hasAttribute.md +++ b/docs/fr/api/wrapper/hasAttribute.md @@ -1,6 +1,6 @@ # hasAttribute(attribute, value) -Assert `Wrapper` DOM node has attribute matching value. +

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

Assert `Wrapper` DOM node has attribute matching value.

Returns `true` if `Wrapper` DOM node contains attribute with matching value. diff --git a/docs/fr/api/wrapper/hasClass.md b/docs/fr/api/wrapper/hasClass.md index c70b21ef9..c6f1293a0 100644 --- a/docs/fr/api/wrapper/hasClass.md +++ b/docs/fr/api/wrapper/hasClass.md @@ -1,6 +1,6 @@ # hasClass(className) -Assert `Wrapper` DOM node has class contains `className`. +

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

Assert `Wrapper` DOM node has class contains `className`.

Returns `true` if `Wrapper` DOM node contains class. diff --git a/docs/fr/api/wrapper/hasProp.md b/docs/fr/api/wrapper/hasProp.md index 66e64b41b..8cc6ac567 100644 --- a/docs/fr/api/wrapper/hasProp.md +++ b/docs/fr/api/wrapper/hasProp.md @@ -1,6 +1,6 @@ # hasProp(prop, value) -Assert `Wrapper` `vm` has `prop` matching `value`. +

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

Assert `Wrapper` `vm` has `prop` matching `value`.

Returns `true` if `Wrapper` `vm` has `prop` matching `value`. diff --git a/docs/fr/api/wrapper/hasStyle.md b/docs/fr/api/wrapper/hasStyle.md index 0281d8401..bc00f664e 100644 --- a/docs/fr/api/wrapper/hasStyle.md +++ b/docs/fr/api/wrapper/hasStyle.md @@ -1,6 +1,6 @@ # hasStyle(style, value) -Assert `Wrapper` DOM node has style matching value +

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

Assert `Wrapper` DOM node has style matching value

Returns `true` if `Wrapper` DOM node has `style` matching `value`. diff --git a/docs/fr/api/wrapper/html.md b/docs/fr/api/wrapper/html.md index 1243f180f..bd7416af0 100644 --- a/docs/fr/api/wrapper/html.md +++ b/docs/fr/api/wrapper/html.md @@ -1,6 +1,6 @@ # html() -Returns HTML of `Wrapper` DOM node as a string. +

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

Returns HTML of `Wrapper` DOM node as a string.

- **Returns:** `{string}` diff --git a/docs/fr/api/wrapper/is.md b/docs/fr/api/wrapper/is.md index 2987de1a2..a1cc80d9c 100644 --- a/docs/fr/api/wrapper/is.md +++ b/docs/fr/api/wrapper/is.md @@ -1,6 +1,6 @@ # is(selector) -Assert `Wrapper` DOM node or `vm` matches [selector](../selectors.md). +

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

Assert `Wrapper` DOM node or `vm` matches [selector](../selectors.md).

- **Arguments:** - `{string|Component} selector` diff --git a/docs/fr/api/wrapper/isEmpty.md b/docs/fr/api/wrapper/isEmpty.md index d70fe7140..f879fa868 100644 --- a/docs/fr/api/wrapper/isEmpty.md +++ b/docs/fr/api/wrapper/isEmpty.md @@ -1,6 +1,6 @@ # isEmpty() -Assert `Wrapper` does not contain child node. +

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

Assert `Wrapper` does not contain child node.

- **Returns:** `{boolean}` diff --git a/docs/fr/api/wrapper/isVueInstance.md b/docs/fr/api/wrapper/isVueInstance.md index 9da12a267..49b4a7143 100644 --- a/docs/fr/api/wrapper/isVueInstance.md +++ b/docs/fr/api/wrapper/isVueInstance.md @@ -1,6 +1,6 @@ # isVueInstance() -Assert `Wrapper` is Vue instance. +

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

Assert `Wrapper` is Vue instance.

- **Returns:** `{boolean}` diff --git a/docs/fr/api/wrapper/name.md b/docs/fr/api/wrapper/name.md index a1faf1b4f..f638b37a5 100644 --- a/docs/fr/api/wrapper/name.md +++ b/docs/fr/api/wrapper/name.md @@ -1,6 +1,6 @@ # name() -Returns component name if `Wrapper` contains a Vue instance, or the tag name of `Wrapper` DOM node if `Wrapper` does not contain a Vue instance. +

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

Returns component name if `Wrapper` contains a Vue instance, or the tag name of `Wrapper` DOM node if `Wrapper` does not contain a Vue instance.

- **Returns:** `{string}` diff --git a/docs/fr/api/wrapper/setData.md b/docs/fr/api/wrapper/setData.md index 608f083f4..396938618 100644 --- a/docs/fr/api/wrapper/setData.md +++ b/docs/fr/api/wrapper/setData.md @@ -1,6 +1,6 @@ # setData(data) -Sets `Wrapper` `vm` data and forces update. +

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

Sets `Wrapper` `vm` data and forces update.

**Note the Wrapper must contain a Vue instance.** diff --git a/docs/fr/api/wrapper/setMethods.md b/docs/fr/api/wrapper/setMethods.md index 4a40546ee..9559be47b 100644 --- a/docs/fr/api/wrapper/setMethods.md +++ b/docs/fr/api/wrapper/setMethods.md @@ -1,6 +1,6 @@ # setMethods(methods) -Sets `Wrapper` `vm` methods and forces update. +

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

Sets `Wrapper` `vm` methods and forces update.

**Note the Wrapper must contain a Vue instance.** diff --git a/docs/fr/api/wrapper/setProps.md b/docs/fr/api/wrapper/setProps.md index 7a55124c4..e3ecbdccd 100644 --- a/docs/fr/api/wrapper/setProps.md +++ b/docs/fr/api/wrapper/setProps.md @@ -5,7 +5,7 @@ - **Usage:** -Sets `Wrapper` `vm` props and forces update. +

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

Sets `Wrapper` `vm` props and forces update.

**Note the Wrapper must contain a Vue instance.** diff --git a/docs/fr/api/wrapper/text.md b/docs/fr/api/wrapper/text.md index d1ccd4b44..58ad52ec6 100644 --- a/docs/fr/api/wrapper/text.md +++ b/docs/fr/api/wrapper/text.md @@ -1,6 +1,6 @@ # text() -Returns text content of `Wrapper`. +

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

Returns text content of `Wrapper`.

- **Returns:** `{string}` diff --git a/docs/fr/api/wrapper/trigger.md b/docs/fr/api/wrapper/trigger.md index 537cda9e6..91b290433 100644 --- a/docs/fr/api/wrapper/trigger.md +++ b/docs/fr/api/wrapper/trigger.md @@ -1,6 +1,6 @@ # trigger(eventName) -Triggers an event on the `Wrapper` DOM node. +

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

Triggers an event on the `Wrapper` DOM node.

Trigger takes an optional `options` object. The properties in the `options` object are added to the Event. diff --git a/docs/fr/api/wrapper/update.md b/docs/fr/api/wrapper/update.md index 15d13be89..5be9aab05 100644 --- a/docs/fr/api/wrapper/update.md +++ b/docs/fr/api/wrapper/update.md @@ -1,6 +1,6 @@ # update() -Force root Vue component to re-render. +

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

Force root Vue component to re-render.

If called on a `Wrapper` containing a `vm`, it will force the `Wrapper` `vm` to re-render. From 1920f4bac002cbff2ba3c655743886fe7b43e049 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Mon, 20 Nov 2017 10:30:00 +0100 Subject: [PATCH 03/10] Last changes added Signed-off-by: Bruno Lesieur --- docs/fr/README.md | 10 +++++ docs/fr/SUMMARY.md | 6 +++ docs/fr/api/README.md | 21 ++++++--- docs/fr/api/components/README.md | 5 +++ docs/fr/api/components/TransitionGroupStub.md | 31 +++++++++++++ docs/fr/api/components/TransitionStub.md | 30 +++++++++++++ docs/fr/api/config.md | 25 +++++++++++ docs/fr/api/createLocalVue.md | 4 +- docs/fr/api/mount.md | 5 ++- docs/fr/api/options.md | 24 +++++------ docs/fr/api/selectors.md | 37 ++++++++++------ docs/fr/api/shallow.md | 2 +- docs/fr/api/wrapper-array/README.md | 4 +- docs/fr/api/wrapper-array/destroy.md | 1 - docs/fr/api/wrapper-array/setComputed.md | 26 +++++++++++ docs/fr/api/wrapper/README.md | 10 ++--- docs/fr/api/wrapper/contains.md | 2 +- docs/fr/api/wrapper/emitted.md | 13 ++++++ docs/fr/api/wrapper/hasClass.md | 2 +- docs/fr/api/wrapper/hasStyle.md | 2 +- docs/fr/api/wrapper/setComputed.md | 43 +++++++++++++++++++ docs/fr/api/wrapper/trigger.md | 4 +- docs/fr/guides/common-tips.md | 6 +-- docs/fr/guides/dom-events.md | 4 +- docs/fr/guides/testing-SFCs-with-jest.md | 9 ++-- .../guides/testing-SFCs-with-mocha-webpack.md | 4 +- docs/fr/guides/using-with-vuex.md | 25 ++++++----- 27 files changed, 285 insertions(+), 70 deletions(-) create mode 100644 docs/fr/api/components/README.md create mode 100644 docs/fr/api/components/TransitionGroupStub.md create mode 100644 docs/fr/api/components/TransitionStub.md create mode 100644 docs/fr/api/config.md create mode 100644 docs/fr/api/wrapper-array/setComputed.md create mode 100644 docs/fr/api/wrapper/setComputed.md diff --git a/docs/fr/README.md b/docs/fr/README.md index 1695a3f94..bda9495fa 100644 --- a/docs/fr/README.md +++ b/docs/fr/README.md @@ -2,6 +2,8 @@ `vue-test-utils` est la bibliothèque officielle de tests unitaires pour Vue.js. +## Table of Contents + * [Guides](guides/README.md) * [Commencer](guides/getting-started.md) * [Astuces](guides/common-tips.md) @@ -39,12 +41,14 @@ * [isEmpty](api/wrapper/isEmpty.md) * [isVueInstance](api/wrapper/isVueInstance.md) * [name](api/wrapper/name.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) + * [destroy](api/wrapper/destroy.md) * [WrapperArray](api/wrapper-array/README.md) * [at](api/wrapper-array/at.md) * [contains](api/wrapper-array/contains.md) @@ -55,10 +59,16 @@ * [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) + * [destroy](api/wrapper-array/destroy.md) + * [components](api/components/README.md) + * [TransitionStub](api/components/TransitionStub.md) + * [TransitionGroupStub](api/components/TransitionGroupStub.md) * [Selecteurs](api/selectors.md) * [createLocalVue](api/createLocalVue.md) + * [config](api/config.md) diff --git a/docs/fr/SUMMARY.md b/docs/fr/SUMMARY.md index 2af83f11b..df65fd86c 100644 --- a/docs/fr/SUMMARY.md +++ b/docs/fr/SUMMARY.md @@ -37,6 +37,7 @@ * [isEmpty](api/wrapper/isEmpty.md) * [isVueInstance](api/wrapper/isVueInstance.md) * [name](api/wrapper/name.md) + * [setComputed](api/wrapper/setComputed.md) * [setData](api/wrapper/setData.md) * [setMethods](api/wrapper/setMethods.md) * [setProps](api/wrapper/setProps.md) @@ -54,11 +55,16 @@ * [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) * [destroy](api/wrapper-array/destroy.md) + * [components](api/components/README.md) + * [TransitionStub](api/components/TransitionStub.md) + * [TransitionGroupStub](api/components/TransitionGroupStub.md) * [Selectors](api/selectors.md) * [createLocalVue](api/createLocalVue.md) + * [config](api/config.md) diff --git a/docs/fr/api/README.md b/docs/fr/api/README.md index 0d34fe921..0c4b416df 100644 --- a/docs/fr/api/README.md +++ b/docs/fr/api/README.md @@ -17,6 +17,7 @@ * [emitted (EN)](./wrapper/emitted.md) * [emittedByOrder (EN)](./wrapper/emittedByOrder.md) * [find (EN)](./wrapper/find.md) + * [findAll (EN)](./wrapper/findAll.md) * [hasAttribute (EN)](./wrapper/hasAttribute.md) * [hasClass (EN)](./wrapper/hasClass.md) * [hasProp (EN)](./wrapper/hasProp.md) @@ -26,11 +27,14 @@ * [isEmpty (EN)](./wrapper/isEmpty.md) * [isVueInstance (EN)](./wrapper/isVueInstance.md) * [name (EN)](./wrapper/name.md) - * [update (EN)](./wrapper/update.md) - * [setData (EN)](./wrapper/setData.md) - * [setProps (EN)](./wrapper/setProps.md) - * [text (EN)](./wrapper/text.md) + * [setComputed](./wrapper/setComputed.md) + * [setData](./wrapper/setData.md) + * [setMethods](./wrapper/setMethods.md) + * [setProps](./wrapper/setProps.md) + * [text](./wrapper/text.md) * [trigger (EN)](./wrapper/trigger.md) + * [update (EN)](./wrapper/update.md) + * [destroy (EN)](./wrapper/destroy.md) * [WrapperArray (EN)](./wrapper-array/README.md) * [at (EN)](./wrapper-array/at.md) * [contains (EN)](./wrapper-array/contains.md) @@ -41,9 +45,16 @@ * [is (EN)](./wrapper-array/is.md) * [isEmpty (EN)](./wrapper-array/isEmpty.md) * [isVueInstance (EN)](./wrapper-array/isVueInstance.md) - * [update (EN)](./wrapper-array/update.md) + * [setComputed (EN)](./wrapper-array/setComputed.md) * [setData (EN)](./wrapper-array/setData.md) + * [setMethods (EN)](./wrapper-array/setMethods.md) * [setProps (EN)](./wrapper-array/setProps.md) * [trigger (EN)](./wrapper-array/trigger.md) + * [update (EN)](./wrapper-array/update.md) + * [destroy (EN)](./wrapper-array/destroy.md) +* [components](./components/README.md) + * [TransitionStub](./components/TransitionStub.md) + * [TransitionGroupStub](./components/TransitionGroupStub.md) * [createLocalVue (EN)](./createLocalVue.md) * [Selecteurs (EN)](./selectors.md) +* [config (EN)](./config.md) \ No newline at end of file diff --git a/docs/fr/api/components/README.md b/docs/fr/api/components/README.md new file mode 100644 index 000000000..b6db0b05b --- /dev/null +++ b/docs/fr/api/components/README.md @@ -0,0 +1,5 @@ +# Components + +vue-test-utils includes utility components you can use to stub components. + +[TransitionStub](./TransitionStub.md) and [TransitionGroupStub](./TransitionGroupStub.md) are used to stub `transition` and `transition-group` components by default. You can edit the stubs by editing the config. diff --git a/docs/fr/api/components/TransitionGroupStub.md b/docs/fr/api/components/TransitionGroupStub.md new file mode 100644 index 000000000..ef66d9f72 --- /dev/null +++ b/docs/fr/api/components/TransitionGroupStub.md @@ -0,0 +1,31 @@ +# TransitionGroupStub + +A component to stub the `transition-group` wrapper component. Instead of performing transitions asynchronously, it returns the child components synchronously. + +This is set to stub all `transition-group` components by default in the `vue-test-utils` config. To use the built-in `transition-group` wrapper component set `config.stubs['transition-group']` to false: + +```js +import VueTestUtils from 'vue-test-utils' + +VueTestUtils.config.stubs['transition-group'] = false +``` + +To reset it to stub transition components: + +```js +import VueTestUtils, { TransitionGroupStub } from 'vue-test-utils' + +VueTestUtils.config.stubs['transition-group'] = TransitionGroupStub +``` + +To set it as a stub in mounting options: + +```js +import { mount, TransitionGroupStub } from 'vue-test-utils' + +mount(Component, { + stubs: { + 'transition-group': TransitionGroupStub + } +}) +``` diff --git a/docs/fr/api/components/TransitionStub.md b/docs/fr/api/components/TransitionStub.md new file mode 100644 index 000000000..8a11d34eb --- /dev/null +++ b/docs/fr/api/components/TransitionStub.md @@ -0,0 +1,30 @@ +# TransitionStub + +A component to stub the `transition` wrapper component. Instead of performing transitions asynchronously, it returns the child component synchronously. + +This is set to stub all `transition` components by default in the vue-test-utils config. To use the built-in `transition` wrapper component set `config.stubs.transition` to false: + +```js +import VueTestUtils from 'vue-test-utils' + +VueTestUtils.config.stubs.transition = false +``` + +To reset it to stub transition components: +```js +import VueTestUtils, { TransitionStub } from 'vue-test-utils' + +VueTestUtils.config.stubs.transition = TransitionStub +``` + +To set it as a stub in mounting options: + +```js +import { mount, TransitionStub } from 'vue-test-utils' + +mount(Component, { + stubs: { + transition: TransitionStub + } +}) +``` diff --git a/docs/fr/api/config.md b/docs/fr/api/config.md new file mode 100644 index 000000000..6f44dd639 --- /dev/null +++ b/docs/fr/api/config.md @@ -0,0 +1,25 @@ +# Config + +vue-test-utils includes a config object to defined options used by vue-test-utils. + +## `vue-test-utils` Config Options + +### `stubs` + +- type: `Object` +- default: `{ + transition: TransitionStub, + 'transition-group': TransitionGroupStub +}` + +Stubs to use in components. These are overwritten by `stubs` passed in the mounting options. + +When passing `stubs` as an array in the mounting options, `config.stubs` are converted to an array, and will stub components with a basic component that returns a div. + +Example: + +```js +import VueTestUtils from 'vue-test-utils' + +VueTestUtils.config.stubs['my-compomnent'] = '
' +``` diff --git a/docs/fr/api/createLocalVue.md b/docs/fr/api/createLocalVue.md index 265537b78..de2a4f974 100644 --- a/docs/fr/api/createLocalVue.md +++ b/docs/fr/api/createLocalVue.md @@ -1,4 +1,4 @@ -# createLocalVue() +# `createLocalVue()` - **Returns:** - `{Component}` @@ -7,7 +7,7 @@

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

`createLocalVue` returns a Vue class for you to add components, mixins and install plugins without polluting the global Vue class.

-Use it with `options.localVue` +Use it with `options.localVue`: ```js import { createLocalVue, shallow } from 'vue-test-utils' diff --git a/docs/fr/api/mount.md b/docs/fr/api/mount.md index ed0170c1a..6fc5bb2bf 100644 --- a/docs/fr/api/mount.md +++ b/docs/fr/api/mount.md @@ -1,4 +1,4 @@ -# mount(component {, options}]) +# `mount(component {, options}])` - **Arguments:** @@ -31,6 +31,7 @@ describe('Foo', () => { }) }) ``` + **With Vue options:** ```js @@ -80,7 +81,7 @@ describe('Foo', () => { const wrapper = mount(Foo, { slots: { default: [Bar, FooBar], - fooBar: FooBar, // Will match , + fooBar: FooBar, // Will match ``. foo: '
' } }) diff --git a/docs/fr/api/options.md b/docs/fr/api/options.md index 3a7e6b468..e7b355897 100644 --- a/docs/fr/api/options.md +++ b/docs/fr/api/options.md @@ -6,15 +6,15 @@ Vue options are passed to the component when a new instance is created. , e.g. ` ## `vue-test-utils` Specific Mounting Options -- [context](#context) -- [slots](#slots) -- [stubs](#stubs) -- [mocks](#mocks) -- [localVue](#localvue) -- [attachToDocument](#attachtodocument) -- [attrs](#attrs) -- [listeners](#listeners) -- [clone](#clone) +- [`context`](#context) +- [`slots`](#slots) +- [`stubs`](#stubs) +- [`mocks`](#mocks) +- [`localVue`](#localvue) +- [`attachToDocument`](#attachtodocument) +- [`attrs`](#attrs) +- [`listeners`](#listeners) +- [`clone`](#clone) ### `context` @@ -50,7 +50,7 @@ import Bar from './Bar.vue' const wrapper = shallow(Component, { slots: { default: [Foo, Bar], - fooBar: Foo, // Will match , + fooBar: Foo, // Will match ``. foo: '
' } }) @@ -106,7 +106,7 @@ expect(wrapper.vm.$route.path).toBe($route.path) - type: `Vue` -A local copy of Vue created by [createLocalVue](./createLocalVue.md) to use when mounting the component. Installing plugins on this copy of Vue prevents polluting the original `Vue` copy. +A local copy of Vue created by [`createLocalVue`](./createLocalVue.md) to use when mounting the component. Installing plugins on this copy of `Vue` prevents polluting the original `Vue` copy. Example: @@ -162,4 +162,4 @@ Clones component before mounting if `true`, which avoids mutating the original c `options.mocks` (`Object`): Add globals to Vue instance. -`options.localVue` (`Object`): vue class to use in `mount`. See [createLocalVue](createLocalVue.md) +`options.localVue` (`Object`): `Vue` class to use in `mount`. See [`createLocalVue`](createLocalVue.md). diff --git a/docs/fr/api/selectors.md b/docs/fr/api/selectors.md index 6a79c76a8..f41e6bbd2 100644 --- a/docs/fr/api/selectors.md +++ b/docs/fr/api/selectors.md @@ -1,34 +1,34 @@ # Selectors -

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

A lot of methods take a selector as an argument. A selector can either be a CSS selector, or a Vue component.

+

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

A lot of methods take a selector as an argument. A selector can either be a CSS selector, a Vue component, or a find option object.

## CSS Selectors -mount handles any valid CSS selector: +Mount handles any valid CSS selector: -- tag selectors (div, foo, bar) -- class selectors (.foo, .bar) -- attribute selectors ([foo], [foo="bar"]) -- id selectors (#foo, #bar) -- pseudo selectors (div:first-of-type) +- tag selectors (`div`, `foo`, `bar`) +- class selectors (`.foo`, `.bar`) +- attribute selectors (`[foo]`, `[foo="bar"]`) +- id selectors (`#foo`, `#bar`) +- pseudo selectors (`div:first-of-type`) You can also use combinators: -- direct descendant combinator (div > #bar > .foo) -- general descendant combinator (div #bar .foo) -- adjacent sibling selector (div + .foo) -- general sibling selector (div ~ .foo) +- direct descendant combinator (`div > #bar > .foo`) +- general descendant combinator (`div #bar .foo`) +- adjacent sibling selector (`div + .foo`) +- general sibling selector (`div ~ .foo`) ## Vue Components Vue components are also valid selectors. -vue-test-utils uses the `name` property to search the instance tree for matching Vue components. +`vue-test-utils` uses the `name` property to search the instance tree for matching Vue components. ```js // Foo.vue -export default{ +export default { name: 'FooComponent' } ``` @@ -41,3 +41,14 @@ import Foo from './Foo.vue' const wrapper = shallow(Foo) expect(wrapper.is(Foo)).toBe(true) ``` + +## Find Option Object + +### Ref + +Using a find option object, `vue-test-utils` allows for selecting elements by `$ref` on wrapper components. + +```js +const buttonWrapper = wrapper.find({ ref: 'myButton' }); +buttonWrapper.trigger('click'); +``` diff --git a/docs/fr/api/shallow.md b/docs/fr/api/shallow.md index 46d1a8988..8e213c66c 100644 --- a/docs/fr/api/shallow.md +++ b/docs/fr/api/shallow.md @@ -1,4 +1,4 @@ -# shallow(component {, options}]) +# `shallow(component {, options}])` - **Arguments:** diff --git a/docs/fr/api/wrapper-array/README.md b/docs/fr/api/wrapper-array/README.md index 08bb2155d..40bf4af46 100644 --- a/docs/fr/api/wrapper-array/README.md +++ b/docs/fr/api/wrapper-array/README.md @@ -1,6 +1,6 @@ # WrapperArray -

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

A `WrapperArray` is an object that contains an array of [Wrappers](../wrapper/README.md), and methods to test the `Wrappers`.

+

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

A `WrapperArray` is an object that contains an array of [`Wrappers`](../wrapper/README.md), and methods to test the `Wrappers`.

- **Properties:** @@ -8,4 +8,4 @@ - **Methods:** -There is a detailed list of methods in the WrapperArray section of the docs. +There is a detailed list of methods in the `WrapperArray` section of the docs. diff --git a/docs/fr/api/wrapper-array/destroy.md b/docs/fr/api/wrapper-array/destroy.md index d6b8b1a01..967de944b 100644 --- a/docs/fr/api/wrapper-array/destroy.md +++ b/docs/fr/api/wrapper-array/destroy.md @@ -14,5 +14,4 @@ const divArray = wrapper.findAll('div') expect(divArray.contains('p')).toBe(true) divArray.destroy() expect(divArray.contains('p')).toBe(false) - ``` diff --git a/docs/fr/api/wrapper-array/setComputed.md b/docs/fr/api/wrapper-array/setComputed.md new file mode 100644 index 000000000..35d2dcce4 --- /dev/null +++ b/docs/fr/api/wrapper-array/setComputed.md @@ -0,0 +1,26 @@ + +# setComputed(computedObjects) + +Sets `Wrapper` `vm` computed and forces update on each `Wrapper` in `WrapperArray`. + +**Note every `Wrapper` must contain a Vue instance.** +**Note every Vue instance must already have the computed properties passed to `setComputed`.** + +- **Arguments:** + - `{Object} computed properties` + +- **Example:** + +```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/fr/api/wrapper/README.md b/docs/fr/api/wrapper/README.md index f0f6bfaf9..1ff53cc95 100644 --- a/docs/fr/api/wrapper/README.md +++ b/docs/fr/api/wrapper/README.md @@ -1,15 +1,15 @@ -# Wrapper +# `Wrapper` -

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

vue-test-utils is a wrapper based API.

+

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

`vue-test-utils` is a wrapper based API.

A `Wrapper` is an object that contains a mounted component or vnode and methods to test the component or vnode. - **Properties:** -`vm` `Component`: this is the vue instance. You can access all the [instance methods and properties of a vm](https://vuejs.org/v2/api/#Instance-Properties) with `wrapper.vm`. This only exists on Vue component wrappers +`vm` `Component`: this is the `Vue` instance. You can access all the [instance methods and properties of a vm](https://vuejs.org/v2/api/#Instance-Properties) with `wrapper.vm`. This only exists on Vue component wrappers `element` `HTMLElement`: the root DOM node of the wrapper -`options` `Object`: Object containing vue-test-utils options passed to `mount` or `shallow` -`options.attachedToDom` `Boolean`: True if attachToDom was passed to `mount` or `shallow` +`options` `Object`: Object containing `vue-test-utils` options passed to `mount` or `shallow` +`options.attachedToDom` `Boolean`: True if `attachToDom` was passed to `mount` or `shallow` - **Methods:** diff --git a/docs/fr/api/wrapper/contains.md b/docs/fr/api/wrapper/contains.md index 1e9bf012a..163d534f2 100644 --- a/docs/fr/api/wrapper/contains.md +++ b/docs/fr/api/wrapper/contains.md @@ -1,4 +1,4 @@ -# contains(selector) +# `contains(selector)`

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

Assert `Wrapper` contains an element or component matching [selector](../selectors.md).

diff --git a/docs/fr/api/wrapper/emitted.md b/docs/fr/api/wrapper/emitted.md index 495ca56d0..1220a62d8 100644 --- a/docs/fr/api/wrapper/emitted.md +++ b/docs/fr/api/wrapper/emitted.md @@ -31,3 +31,16 @@ expect(wrapper.emitted().foo.length).toBe(2) // assert event payload expect(wrapper.emitted().foo[1]).toEqual([123]) ``` + +You can also write the above as follows: + +```js +// assert event has been emitted +expect(wrapper.emitted('foo')).toBeTruthy() + +// assert event count +expect(wrapper.emitted('foo').length).toBe(2) + +// assert event payload +expect(wrapper.emitted('foo')[1]).toEqual([123]) +``` diff --git a/docs/fr/api/wrapper/hasClass.md b/docs/fr/api/wrapper/hasClass.md index c6f1293a0..e236f49d5 100644 --- a/docs/fr/api/wrapper/hasClass.md +++ b/docs/fr/api/wrapper/hasClass.md @@ -2,7 +2,7 @@

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

Assert `Wrapper` DOM node has class contains `className`.

-Returns `true` if `Wrapper` DOM node contains class. +Returns `true` if `Wrapper` DOM node contains the class. - **Arguments:** - `{string} className` diff --git a/docs/fr/api/wrapper/hasStyle.md b/docs/fr/api/wrapper/hasStyle.md index bc00f664e..ab150499f 100644 --- a/docs/fr/api/wrapper/hasStyle.md +++ b/docs/fr/api/wrapper/hasStyle.md @@ -1,6 +1,6 @@ # hasStyle(style, value) -

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

Assert `Wrapper` DOM node has style matching value

+

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

Assert `Wrapper` DOM node has style matching value.

Returns `true` if `Wrapper` DOM node has `style` matching `value`. diff --git a/docs/fr/api/wrapper/setComputed.md b/docs/fr/api/wrapper/setComputed.md new file mode 100644 index 000000000..132a2d509 --- /dev/null +++ b/docs/fr/api/wrapper/setComputed.md @@ -0,0 +1,43 @@ +# setComputed(computedProperties) + +Sets `Wrapper` `vm` computed property and forces update. + +**Note the Wrapper must contain a Vue instance.** +**Note the Vue instance must already have the computed properties passed to `setComputed`.** + + +- **Arguments:** + - `{Object} computed properties` + +- **Example:** + +```js +import { mount } from 'vue-test-utils' +import { expect } from 'chai' + +const wrapper = mount({ + template: '
{{ computed1 }} {{ computed2 }}
', + data () { + return { + initial: 'initial' + } + }, + computed: { + computed1 () { + return this.initial + }, + computed2 () { + return this.initial + } + } +}) + +expect(wrapper.html()).toBe('
initial initial
') + +wrapper.setComputed({ + computed1: 'new-computed1', + computed2: 'new-computed2' +}) + +expect(wrapper.html()).toBe('
new-computed1 new-computed2
') +``` diff --git a/docs/fr/api/wrapper/trigger.md b/docs/fr/api/wrapper/trigger.md index 91b290433..ad4798f36 100644 --- a/docs/fr/api/wrapper/trigger.md +++ b/docs/fr/api/wrapper/trigger.md @@ -2,9 +2,9 @@

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

Triggers an event on the `Wrapper` DOM node.

-Trigger takes an optional `options` object. The properties in the `options` object are added to the Event. +`trigger` takes an optional `options` object. The properties in the `options` object are added to the Event. -You can run preventDefault on the event by passing `preventDefault: true` in `options`. +You can run `preventDefault` on the event by passing `preventDefault: true` in `options`. - **Arguments:** - `{string} eventName` diff --git a/docs/fr/guides/common-tips.md b/docs/fr/guides/common-tips.md index 666d20962..61890346b 100644 --- a/docs/fr/guides/common-tips.md +++ b/docs/fr/guides/common-tips.md @@ -91,12 +91,12 @@ Vous pouvez aussi mettre à jour les props d'un composant déjà monté avec la Des composants pourraient se fier à des fonctionnalités injectées par un plugin global ou un mixin, par exemple `vuex` ou `vue-router`. -Si vous écrivez des tests pour des composants dans une application spécifique, vous pouvez mettre en place les mêmes plugins globaux et mixins en une seule fois dans vos tests. Dans certains cas, comme tester un composant générique utilisé par des applications différentes, il est favorable de tester ces composants dans une installation plus isolée, sans avoir à polluer le constructeur global `Vue`. On peut utiliser la méthode [`createLocalVue`](../api/createLocalVue.md) pour faire cela : +Si vous écrivez des tests pour des composants dans une application spécifique, vous pouvez mettre en place les mêmes plugins globaux et mixins en une seule fois dans vos tests. Dans certains cas, comme tester un composant générique utilisé par des applications différentes, il est favorable de tester ces composants dans une installation plus isolée, sans avoir à polluer le constructeur global `Vue`. On peut utiliser la méthode [`createLocalVue`](../api/createLocalVue.md) pour faire cela : ``` js import createLocalVue from 'vue-test-utils' -// créer un constructeur local de Vue +// créer un constructeur local de `Vue` const localVue = createLocalVue() // installer des plugins comme d'habitude @@ -124,7 +124,7 @@ const $route = { mount(Component, { mocks: { - $route // ajoute l'objet route simulé à l'instance de Vue avant de monter le composant + $route // ajoute l'objet `$route` simulé à l'instance de Vue avant de monter le composant } }) ``` diff --git a/docs/fr/guides/dom-events.md b/docs/fr/guides/dom-events.md index e3d9fd6f4..98177c478 100644 --- a/docs/fr/guides/dom-events.md +++ b/docs/fr/guides/dom-events.md @@ -190,8 +190,8 @@ describe('Tests événement clavier', () => { Un nom de touche après le point `keydown.up` est traduit vers un `keyCode`. Cela est supporté pour les noms suivant : -* enter, tab, delete, esc, space, up, down, left, right +* `enter`, `tab`, `delete`, `esc`, `space`, `up`, `down`, `left`, `right` ## Important -vue-test-utils déclenche les évènements de façon synchrone. Par conséquent, `vue.nextTick` n'est pas requis. +`vue-test-utils` déclenche les évènements de façon synchrone. Par conséquent, `vue.nextTick` n'est pas requis. diff --git a/docs/fr/guides/testing-SFCs-with-jest.md b/docs/fr/guides/testing-SFCs-with-jest.md index 143d50018..02fd660d6 100644 --- a/docs/fr/guides/testing-SFCs-with-jest.md +++ b/docs/fr/guides/testing-SFCs-with-jest.md @@ -46,7 +46,7 @@ Ensuite, créez un objet `jest` dans `package.json` : "vue" ], "transform": { - // traite les fichiers `*.vue` avec vue-jest + // traite les fichiers `*.vue` avec `vue-jest` ".*\\.(vue)$": "/node_modules/vue-jest" }, "mapCoverage": true @@ -54,7 +54,7 @@ Ensuite, créez un objet `jest` dans `package.json` : } ``` -> **Note :** `vue-jest` ne supporte actuellement pas toutes les fonctionnalités de `vue-loader`, par exemple le support des blocs personnalisés et du chargement de styles. De plus, quelques fonctionnalités spécifiques à webpack comme la scission de code ne sont pas supportées. Pour les utiliser, lisez le guide sur [tester des composants monofichiers avec Mocha + webpack](./testing-SFCs-with-mocha-webpack.md). +> **Note :** `vue-jest` ne supporte actuellement pas toutes les fonctionnalités de `vue-loader`, par exemple le support des blocs personnalisés et du chargement de styles. De plus, quelques fonctionnalités spécifiques à webpack comme la scission de code ne sont pas supportées. Pour les utiliser, lisez le guide sur [tester des composants monofichiers avec Mocha et webpack](./testing-SFCs-with-mocha-webpack.md). ## Gérer les alias webpack @@ -75,7 +75,8 @@ Si vous utilisez un alias de résolution dans la configuration de webpack, c.-à ## Configurer Babel pour Jest -Même si les dernières version de Node.js supportent la plupart des fonctionnalités ES2015, vous souhaitez quand même utiliser la syntaxe des modules ES ainsi que les fonctionnalités stage-x dans vos tests. Pour cela, on doit installer `babel-jest` : + +Même si les dernières version de Node.js supportent la plupart des fonctionnalités ES2015, vous souhaitez quand même utiliser la syntaxe des modules ES ainsi que les fonctionnalités `stage-x` dans vos tests. Pour cela, on doit installer `babel-jest` : ``` bash npm install --save-dev babel-jest @@ -90,7 +91,7 @@ Ensuite, on doit indiquer à Jest de gérer les fichiers de tests JavaScript ave // ... "transform": { // ... - // gérer le JavaScript avec babel-jest + // gérer le JavaScript avec `babel-jest` "^.+\\.js$": "/node_modules/babel-jest" }, // ... diff --git a/docs/fr/guides/testing-SFCs-with-mocha-webpack.md b/docs/fr/guides/testing-SFCs-with-mocha-webpack.md index e3fcdfa67..722636e09 100644 --- a/docs/fr/guides/testing-SFCs-with-mocha-webpack.md +++ b/docs/fr/guides/testing-SFCs-with-mocha-webpack.md @@ -90,7 +90,7 @@ Puis dans `test/setup.js`: require('jsdom-global')() ``` -Cela ajoute un environnement de navigateur dans Node.js afin que `vue-test-utils` fonctionne correctement. +Cela ajoute un environnement de navigateur dans Node.js afin que `vue-test-utils` fonctionne correctement. ### Choisir une bibliothèque d'assertions @@ -116,7 +116,7 @@ global.expect = require('expect') Notez que nous utilisons `babel-loader` pour gérer JavaScript. Vous devriez déjà avoir Babel de configuré si vous l'utilisez dans votre application via un fichier `.babelrc`. Ici `babel-loader` va automatiquement utiliser le même fichier de configuration. -Une autre chose à noter est que si vous utilisez une version de Node.js 6+, qui supporte déjà une majorité des fonctionnalités d'ES2015, vous pouvez configurer séparément un autre Babel [env option](https://babeljs.io/docs/usage/babelrc/#env-option) qui va uniquement transpiler les fonctionnalités non supportées dans la version de Node.js que vous utilisez (c.-à-d. stage-2 ou le support de la syntaxe flow, etc.). +Une autre chose à noter est que si vous utilisez une version de Node.js 6+, qui supporte déjà une majorité des fonctionnalités d'ES2015, vous pouvez configurer séparément un autre Babel [env option](https://babeljs.io/docs/usage/babelrc/#env-option) qui va uniquement transpiler les fonctionnalités non supportées dans la version de Node.js que vous utilisez (c.-à-d. `stage-2` ou le support de la syntaxe flow, etc.). ### Ajouter un test diff --git a/docs/fr/guides/using-with-vuex.md b/docs/fr/guides/using-with-vuex.md index 875a6d724..717be1873 100644 --- a/docs/fr/guides/using-with-vuex.md +++ b/docs/fr/guides/using-with-vuex.md @@ -10,10 +10,10 @@ Ci-dessous, le composant que nous voulons tester. Il fait appel à des actions V ``` html ``` + Simple composant qui possède une action et un accesseur. + Et le test : ``` js @@ -259,5 +262,5 @@ describe('Modules.vue', () => { ### Ressources - [Projet exemple pour ce guide](https://github.com/eddyerburgh/vue-test-utils-vuex-example) -- [localVue](../api/options.md#localvue) -- [createLocalVue](../api/createLocalVue.md) +- [`localVue`](../api/options.md#localvue) +- [`createLocalVue`](../api/createLocalVue.md) From b50a3e685d5cf805737163108c39bd4ed5c0f4b7 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Tue, 21 Nov 2017 13:51:08 +0100 Subject: [PATCH 04/10] Review from original repo Signed-off-by: Bruno Lesieur --- docs/fr/SUMMARY.md | 4 ++-- docs/fr/api/components/README.md | 2 +- docs/fr/api/components/TransitionGroupStub.md | 2 +- docs/fr/api/components/TransitionStub.md | 2 +- docs/fr/api/config.md | 2 +- docs/fr/api/wrapper-array/setComputed.md | 2 +- docs/fr/api/wrapper/setComputed.md | 2 +- docs/fr/guides/choosing-a-test-runner.md | 2 +- docs/fr/guides/common-tips.md | 2 +- docs/fr/guides/testing-SFCs-with-mocha-webpack.md | 2 +- docs/fr/guides/using-with-vue-router.md | 2 +- 11 files changed, 12 insertions(+), 12 deletions(-) diff --git a/docs/fr/SUMMARY.md b/docs/fr/SUMMARY.md index df65fd86c..c3cfff604 100644 --- a/docs/fr/SUMMARY.md +++ b/docs/fr/SUMMARY.md @@ -1,9 +1,9 @@ -## Table of Contents +## Table des matières * [Guides](guides/README.md) * [Commencer](guides/getting-started.md) * [Astuces](guides/common-tips.md) - * [Mouse, Key and other DOM Events (EN)](guides/dom-events.md) + * [La souris, le clavier et les autres évènements DOM](./dom-events.md) * [Choisir un lanceur de tests](guides/choosing-a-test-runner.md) * [Tester des composants monofichiers avec Jest](guides/testing-SFCs-with-jest.md) * [Tester des composants monofichiers avec Mocha et webpack](guides/testing-SFCs-with-mocha-webpack.md) diff --git a/docs/fr/api/components/README.md b/docs/fr/api/components/README.md index b6db0b05b..07ef12329 100644 --- a/docs/fr/api/components/README.md +++ b/docs/fr/api/components/README.md @@ -1,5 +1,5 @@ # Components -vue-test-utils includes utility components you can use to stub components. +

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

vue-test-utils includes utility components you can use to stub components.

[TransitionStub](./TransitionStub.md) and [TransitionGroupStub](./TransitionGroupStub.md) are used to stub `transition` and `transition-group` components by default. You can edit the stubs by editing the config. diff --git a/docs/fr/api/components/TransitionGroupStub.md b/docs/fr/api/components/TransitionGroupStub.md index ef66d9f72..3bf715b8b 100644 --- a/docs/fr/api/components/TransitionGroupStub.md +++ b/docs/fr/api/components/TransitionGroupStub.md @@ -1,6 +1,6 @@ # TransitionGroupStub -A component to stub the `transition-group` wrapper component. Instead of performing transitions asynchronously, it returns the child components synchronously. +

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

A component to stub the `transition-group` wrapper component. Instead of performing transitions asynchronously, it returns the child components synchronously.

This is set to stub all `transition-group` components by default in the `vue-test-utils` config. To use the built-in `transition-group` wrapper component set `config.stubs['transition-group']` to false: diff --git a/docs/fr/api/components/TransitionStub.md b/docs/fr/api/components/TransitionStub.md index 8a11d34eb..3ec0d4724 100644 --- a/docs/fr/api/components/TransitionStub.md +++ b/docs/fr/api/components/TransitionStub.md @@ -1,6 +1,6 @@ # TransitionStub -A component to stub the `transition` wrapper component. Instead of performing transitions asynchronously, it returns the child component synchronously. +

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

A component to stub the `transition` wrapper component. Instead of performing transitions asynchronously, it returns the child component synchronously.

This is set to stub all `transition` components by default in the vue-test-utils config. To use the built-in `transition` wrapper component set `config.stubs.transition` to false: diff --git a/docs/fr/api/config.md b/docs/fr/api/config.md index 6f44dd639..7c7af33f1 100644 --- a/docs/fr/api/config.md +++ b/docs/fr/api/config.md @@ -1,6 +1,6 @@ # Config -vue-test-utils includes a config object to defined options used by vue-test-utils. +

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

vue-test-utils includes a config object to defined options used by vue-test-utils.

## `vue-test-utils` Config Options diff --git a/docs/fr/api/wrapper-array/setComputed.md b/docs/fr/api/wrapper-array/setComputed.md index 35d2dcce4..e7b57f08c 100644 --- a/docs/fr/api/wrapper-array/setComputed.md +++ b/docs/fr/api/wrapper-array/setComputed.md @@ -1,7 +1,7 @@ # setComputed(computedObjects) -Sets `Wrapper` `vm` computed and forces update on each `Wrapper` in `WrapperArray`. +

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

Sets `Wrapper` `vm` computed and forces update on each `Wrapper` in `WrapperArray`.

**Note every `Wrapper` must contain a Vue instance.** **Note every Vue instance must already have the computed properties passed to `setComputed`.** diff --git a/docs/fr/api/wrapper/setComputed.md b/docs/fr/api/wrapper/setComputed.md index 132a2d509..a891d9510 100644 --- a/docs/fr/api/wrapper/setComputed.md +++ b/docs/fr/api/wrapper/setComputed.md @@ -1,6 +1,6 @@ # setComputed(computedProperties) -Sets `Wrapper` `vm` computed property and forces update. +

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

Sets `Wrapper` `vm` computed property and forces update.

**Note the Wrapper must contain a Vue instance.** **Note the Vue instance must already have the computed properties passed to `setComputed`.** diff --git a/docs/fr/guides/choosing-a-test-runner.md b/docs/fr/guides/choosing-a-test-runner.md index 75371ff84..c70bdad4e 100644 --- a/docs/fr/guides/choosing-a-test-runner.md +++ b/docs/fr/guides/choosing-a-test-runner.md @@ -2,7 +2,7 @@ Un lanceur de tests est un programme qui lance des tests (et oui !). -Il y a un nombre conséquent de lanceurs de tests JavaScript et `vue-test-utils` fonctionne avec tous. `vue-test-utils` est agnostique en termne de lanceurs de tests. +Il y a un nombre conséquent de lanceurs de tests JavaScript et `vue-test-utils` fonctionne avec tous. `vue-test-utils` est agnostique en terme de lanceurs de tests. Il y a tout de même plusieurs choses à considérer afin de choisir un lanceur de tests : variété des fonctionnalités, performance et support de la précompilation des composants monofichiers. Après avoir soigneusement analysé et comparé les bibliothèques, il y a deux lanceurs de tests que nous recommandons : diff --git a/docs/fr/guides/common-tips.md b/docs/fr/guides/common-tips.md index 61890346b..5be769188 100644 --- a/docs/fr/guides/common-tips.md +++ b/docs/fr/guides/common-tips.md @@ -16,7 +16,7 @@ Ce sujet est discuté plus en détails dans une [très bonne présentation de Ma Dans des tests unitaires, on souhaite s'intéresser au composant qui est en train d'être testé comme une unité isolée et ainsi éviter de s'assurer du bon comportement des composants enfants. -De plus, pour les composants qui contiennent beaucoup de composants enfant, l'intégralité de l'arbre de rendu peut être énorme. Répétitivement rendre tous les composants pourrait réduire la vitesse de nos tests. +De plus, pour les composants qui contiennent beaucoup de composants enfants, l'intégralité de l'arbre de rendu peut être énorme. Répétitivement rendre tous les composants pourrait réduire la vitesse de nos tests. `vue-test-utils` vous permets de monter un composant sans avoir à rendre ses composants enfants (en les ignorants) avec la méthode `shallow` : diff --git a/docs/fr/guides/testing-SFCs-with-mocha-webpack.md b/docs/fr/guides/testing-SFCs-with-mocha-webpack.md index 722636e09..f04110d9d 100644 --- a/docs/fr/guides/testing-SFCs-with-mocha-webpack.md +++ b/docs/fr/guides/testing-SFCs-with-mocha-webpack.md @@ -39,7 +39,7 @@ Quelques éléments importants à noter : #### Externaliser les dépendances npm -Dans nos tests, nous allons surement importer un nombre conséquent de dépendances npm, certaines d'entre elles n'ont pas été conçues pour une utilisation dans un navigateur et ne peuvent être empaquetées par webpack. Il faut aussi considérer qu'externaliser les dépendances augmente énormément la vitesse de lancement des tests. On peut externaliser toutes les dépendances npm avec `webpack-node-externals -externals` : +Dans nos tests, nous allons surement importer un nombre conséquent de dépendances npm, certaines d'entre elles n'ont pas été conçues pour une utilisation dans un navigateur et ne peuvent être empaquetées par webpack. Il faut aussi considérer qu'externaliser les dépendances augmente énormément la vitesse de lancement des tests. On peut externaliser toutes les dépendances npm avec `webpack-node-externals` : ```js // webpack.config.js diff --git a/docs/fr/guides/using-with-vue-router.md b/docs/fr/guides/using-with-vue-router.md index 1c8cd7cb4..d52e812e6 100644 --- a/docs/fr/guides/using-with-vue-router.md +++ b/docs/fr/guides/using-with-vue-router.md @@ -59,7 +59,7 @@ const wrapper = shallow(Component, { } }) -wrapper.vm.$router // /un/super/chemin +wrapper.vm.$route.path // `'/un/super/chemin'` ``` ## Trucs et astuces From ae7f6ef4ef5089a2f56a77970cf7e4a4f8bc8b1a Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Thu, 30 Nov 2017 09:39:18 +0100 Subject: [PATCH 05/10] Some update from french version Signed-off-by: Bruno Lesieur --- docs/fr/api/components/TransitionGroupStub.md | 6 ++-- docs/fr/api/components/TransitionStub.md | 6 ++-- docs/fr/api/config.md | 2 +- docs/fr/api/options.md | 2 +- docs/fr/api/selectors.md | 4 +-- docs/fr/guides/README.md | 1 - docs/fr/guides/dom-events.md | 2 +- docs/fr/guides/getting-started.md | 30 ++++++++++++++++++- docs/fr/guides/using-with-vuex.md | 2 +- 9 files changed, 41 insertions(+), 14 deletions(-) diff --git a/docs/fr/api/components/TransitionGroupStub.md b/docs/fr/api/components/TransitionGroupStub.md index 3bf715b8b..5bede67d8 100644 --- a/docs/fr/api/components/TransitionGroupStub.md +++ b/docs/fr/api/components/TransitionGroupStub.md @@ -1,8 +1,8 @@ # TransitionGroupStub -

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

A component to stub the `transition-group` wrapper component. Instead of performing transitions asynchronously, it returns the child components synchronously.

+

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

A component to stub the `transition-group` component. Instead of performing transitions asynchronously, it returns the child components synchronously.

-This is set to stub all `transition-group` components by default in the `vue-test-utils` config. To use the built-in `transition-group` wrapper component set `config.stubs['transition-group']` to false: +This is set to stub all `transition-group` components by default in the `vue-test-utils` config. To use the built-in `transition-group` component set `config.stubs['transition-group']` to false: ```js import VueTestUtils from 'vue-test-utils' @@ -10,7 +10,7 @@ import VueTestUtils from 'vue-test-utils' VueTestUtils.config.stubs['transition-group'] = false ``` -To reset it to stub transition components: +To reset it to stub `transition-group` components: ```js import VueTestUtils, { TransitionGroupStub } from 'vue-test-utils' diff --git a/docs/fr/api/components/TransitionStub.md b/docs/fr/api/components/TransitionStub.md index 3ec0d4724..d03dbfbba 100644 --- a/docs/fr/api/components/TransitionStub.md +++ b/docs/fr/api/components/TransitionStub.md @@ -1,8 +1,8 @@ # TransitionStub -

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

A component to stub the `transition` wrapper component. Instead of performing transitions asynchronously, it returns the child component synchronously.

+

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

A component to stub the `transition` component. Instead of performing transitions asynchronously, it returns the child component synchronously.

-This is set to stub all `transition` components by default in the vue-test-utils config. To use the built-in `transition` wrapper component set `config.stubs.transition` to false: +This is set to stub all `transition` components by default in the vue-test-utils config. To use the built-in `transition` component set `config.stubs.transition` to false: ```js import VueTestUtils from 'vue-test-utils' @@ -10,7 +10,7 @@ import VueTestUtils from 'vue-test-utils' VueTestUtils.config.stubs.transition = false ``` -To reset it to stub transition components: +To reset it to stub `transition` components: ```js import VueTestUtils, { TransitionStub } from 'vue-test-utils' diff --git a/docs/fr/api/config.md b/docs/fr/api/config.md index 7c7af33f1..e2d92890e 100644 --- a/docs/fr/api/config.md +++ b/docs/fr/api/config.md @@ -14,7 +14,7 @@ Stubs to use in components. These are overwritten by `stubs` passed in the mounting options. -When passing `stubs` as an array in the mounting options, `config.stubs` are converted to an array, and will stub components with a basic component that returns a div. +When passing `stubs` as an array in the mounting options, `config.stubs` are converted to an array, and will stub components with a basic component that returns ``. Example: diff --git a/docs/fr/api/options.md b/docs/fr/api/options.md index e7b355897..b1234d96a 100644 --- a/docs/fr/api/options.md +++ b/docs/fr/api/options.md @@ -61,7 +61,7 @@ expect(wrapper.find('div')).toBe(true) - type: `{ [name: string]: Component | boolean } | Array` -Stubs child components. Can be an Array of component names to stub, or an object. +Stubs child components. Can be an Array of component names to stub, or an object. If `stubs` is an Array, every stub is ``. Example: diff --git a/docs/fr/api/selectors.md b/docs/fr/api/selectors.md index f41e6bbd2..c4cc177c7 100644 --- a/docs/fr/api/selectors.md +++ b/docs/fr/api/selectors.md @@ -49,6 +49,6 @@ expect(wrapper.is(Foo)).toBe(true) Using a find option object, `vue-test-utils` allows for selecting elements by `$ref` on wrapper components. ```js -const buttonWrapper = wrapper.find({ ref: 'myButton' }); -buttonWrapper.trigger('click'); +const buttonWrapper = wrapper.find({ ref: 'myButton' }) +buttonWrapper.trigger('click') ``` diff --git a/docs/fr/guides/README.md b/docs/fr/guides/README.md index 223989ad0..7cedb95d6 100644 --- a/docs/fr/guides/README.md +++ b/docs/fr/guides/README.md @@ -4,7 +4,6 @@ * [Astuces](./common-tips.md) * [La souris, le clavier et les autres évènements DOM](./dom-events.md) * [Choisir un lanceur de tests](./choosing-a-test-runner.md) -* [Utiliser avec Jest](./using-with-jest.md) * [Tester des composants monofichiers avec Jest](./testing-SFCs-with-jest.md) * [Tester des composants monofichiers avec Mocha et webpack](./testing-SFCs-with-mocha-webpack.md) * [Utiliser avec Vue Router](./using-with-vue-router.md) diff --git a/docs/fr/guides/dom-events.md b/docs/fr/guides/dom-events.md index 98177c478..f031b3038 100644 --- a/docs/fr/guides/dom-events.md +++ b/docs/fr/guides/dom-events.md @@ -11,7 +11,7 @@ const wrapper = mount(MyButton) wrapper.trigger('click') ``` -Vous devez être au courant que la méthode `find` retourne aussi un wrapper. En partant du principe que `MyComponent` contient un bouton, le code suivant clique sur le bouton. +Vous devez être au courant que la méthode `find` retourne aussi un `Wrapper`. En partant du principe que `MyComponent` contient un bouton, le code suivant clique sur le bouton. ```js const wrapper = mount(MyComponent) diff --git a/docs/fr/guides/getting-started.md b/docs/fr/guides/getting-started.md index c007c84f8..e35b31809 100644 --- a/docs/fr/guides/getting-started.md +++ b/docs/fr/guides/getting-started.md @@ -1,4 +1,4 @@ -# Pour commencer +HE# Pour commencer ## Installation @@ -110,6 +110,34 @@ Pour simplifier cela, `vue-test-utils` applique toutes les mises à jour de faç *Note : `nextTick` est toujours nécessaire quand vous souhaitez explicitement faire avancer la boucle des évènements, pour des opérations telles que des fonctions de rappel ou des résolutions de promesses.* +Si vous avez toujours besoin de `nextTick` dans vos fichiers de tests, faites attention aux erreurs jetées aux erreurs lancées à l'intérieur qui peuvent ne pas être attrapées par votre lanceur de tests car il utilise des promesses. Il y a deux approches pour régler celà : vous pouvez affecter la fonction de rappel `done` du système de gestion d'erreurs globales de Vue au démarrage des tests, ou vous pouvez appeler `nextTick` sans argument pour l'utiliser sous forme de promesse : + +```js +// ceci ne sera pas intercepté +it('pas d'interception, (done) => { + Vue.nextTick(() => { + expect(true).toBe(false) + done() + }) +}) + +// les deux tests ci-dessous vont fonctionner comme souhaité +it('attraper l\'erreur avec `done`', (done) => { + Vue.config.errorHandler = done + Vue.nextTick(() => { + expect(true).toBe(false) + done() + }) +}) + +it('attraper l\'erreur avec une promesse', () => { + return Vue.nextTick() + .then(function () { + expect(true).toBe(false) + }) +}) +``` + ## Et après ? - Intégrez `vue-test-utils` dans votre projet en [choisissant votre lanceur de tests](./choosing-a-test-runner.md) diff --git a/docs/fr/guides/using-with-vuex.md b/docs/fr/guides/using-with-vuex.md index 717be1873..b78577fae 100644 --- a/docs/fr/guides/using-with-vuex.md +++ b/docs/fr/guides/using-with-vuex.md @@ -91,7 +91,7 @@ describe('Actions.vue', () => { }) ``` -Que se passe-t-il ici ? Premièrement, on indique à Vue d'utiliser Vuex avec la méthode `use`. C'est tout simplement une surcouche de `Vue.use`. +Que se passe-t-il ici ? Premièrement, on indique à Vue d'utiliser Vuex avec la méthode `localVue.use`. C'est tout simplement une surcouche de `Vue.use`. On va ensuite créer un store fictif en appelant `new Vuex.Store` avec nos propres valeurs. À noter que l'on indique uniquement nos actions, car on ne s'intéresse qu'à elles. From d31f4a13e738ebd14d52afc73a574e4273c94f9f Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Fri, 8 Dec 2017 15:25:31 +0100 Subject: [PATCH 06/10] Review of Edd Yerburgh and updates Signed-off-by: Bruno Lesieur --- docs/fr/README.md | 6 ++-- docs/fr/SUMMARY.md | 6 ++-- docs/fr/api/README.md | 28 ++++++++++--------- docs/fr/api/components/TransitionGroupStub.md | 2 +- docs/fr/api/components/TransitionStub.md | 3 +- docs/fr/api/config.md | 2 +- docs/fr/api/mount.md | 4 +-- docs/fr/api/options.md | 9 ++++-- docs/fr/api/wrapper/README.md | 8 +++--- docs/fr/guides/common-tips.md | 2 +- docs/fr/guides/getting-started.md | 4 +-- docs/fr/guides/using-with-vuex.md | 5 ++-- 12 files changed, 43 insertions(+), 36 deletions(-) diff --git a/docs/fr/README.md b/docs/fr/README.md index bda9495fa..ffead104e 100644 --- a/docs/fr/README.md +++ b/docs/fr/README.md @@ -30,6 +30,8 @@ * [contains](api/wrapper/contains.md) * [emitted](api/wrapper/emitted.md) * [emittedByOrder](api/wrapper/emittedByOrder.md) + * [exists](api/wrapper/exists.md) + * [destroy](api/wrapper/destroy.md) * [find](api/wrapper/find.md) * [findAll](api/wrapper/findAll.md) * [hasAttribute](api/wrapper/hasAttribute.md) @@ -48,10 +50,11 @@ * [text](api/wrapper/text.md) * [trigger](api/wrapper/trigger.md) * [update](api/wrapper/update.md) - * [destroy](api/wrapper/destroy.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) * [hasAttribute](api/wrapper-array/hasAttribute.md) * [hasClass](api/wrapper-array/hasClass.md) * [hasProp](api/wrapper-array/hasProp.md) @@ -65,7 +68,6 @@ * [setProps](api/wrapper-array/setProps.md) * [trigger](api/wrapper-array/trigger.md) * [update](api/wrapper-array/update.md) - * [destroy](api/wrapper-array/destroy.md) * [components](api/components/README.md) * [TransitionStub](api/components/TransitionStub.md) * [TransitionGroupStub](api/components/TransitionGroupStub.md) diff --git a/docs/fr/SUMMARY.md b/docs/fr/SUMMARY.md index c3cfff604..2f38d4e76 100644 --- a/docs/fr/SUMMARY.md +++ b/docs/fr/SUMMARY.md @@ -26,6 +26,8 @@ * [contains](api/wrapper/contains.md) * [emitted](api/wrapper/emitted.md) * [emittedByOrder](api/wrapper/emittedByOrder.md) + * [exists](api/wrapper/exists.md) + * [destroy](api/wrapper/destroy.md) * [find](api/wrapper/find.md) * [findAll](api/wrapper/findAll.md) * [hasAttribute](api/wrapper/hasAttribute.md) @@ -44,10 +46,11 @@ * [text](api/wrapper/text.md) * [trigger](api/wrapper/trigger.md) * [update](api/wrapper/update.md) - * [destroy](api/wrapper/destroy.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) * [hasAttribute](api/wrapper-array/hasAttribute.md) * [hasClass](api/wrapper-array/hasClass.md) * [hasProp](api/wrapper-array/hasProp.md) @@ -61,7 +64,6 @@ * [setProps](api/wrapper-array/setProps.md) * [trigger](api/wrapper-array/trigger.md) * [update](api/wrapper-array/update.md) - * [destroy](api/wrapper-array/destroy.md) * [components](api/components/README.md) * [TransitionStub](api/components/TransitionStub.md) * [TransitionGroupStub](api/components/TransitionGroupStub.md) diff --git a/docs/fr/api/README.md b/docs/fr/api/README.md index 0c4b416df..c923cb495 100644 --- a/docs/fr/api/README.md +++ b/docs/fr/api/README.md @@ -2,7 +2,7 @@ * [mount (EN)](./mount.md) * [shallow (EN)](./shallow.md) -* [Options de montage (EN)](./options.md) +* [Mounting Options (EN)](./options.md) - [context (EN)](./options.md#context) - [slots (EN)](./options.md#slots) - [stubs (EN)](./options.md#stubs) @@ -16,6 +16,8 @@ * [contains (EN)](./wrapper/contains.md) * [emitted (EN)](./wrapper/emitted.md) * [emittedByOrder (EN)](./wrapper/emittedByOrder.md) + * [exists (EN)](./wrapper/exists.md) + * [destroy (EN)](./wrapper/destroy.md) * [find (EN)](./wrapper/find.md) * [findAll (EN)](./wrapper/findAll.md) * [hasAttribute (EN)](./wrapper/hasAttribute.md) @@ -27,17 +29,18 @@ * [isEmpty (EN)](./wrapper/isEmpty.md) * [isVueInstance (EN)](./wrapper/isVueInstance.md) * [name (EN)](./wrapper/name.md) - * [setComputed](./wrapper/setComputed.md) - * [setData](./wrapper/setData.md) - * [setMethods](./wrapper/setMethods.md) - * [setProps](./wrapper/setProps.md) - * [text](./wrapper/text.md) + * [setComputed (EN)](./wrapper/setComputed.md) + * [setData (EN)](./wrapper/setData.md) + * [setMethods (EN)](./wrapper/setMethods.md) + * [setProps (EN)](./wrapper/setProps.md) + * [text (EN)](./wrapper/text.md) * [trigger (EN)](./wrapper/trigger.md) * [update (EN)](./wrapper/update.md) - * [destroy (EN)](./wrapper/destroy.md) * [WrapperArray (EN)](./wrapper-array/README.md) * [at (EN)](./wrapper-array/at.md) * [contains (EN)](./wrapper-array/contains.md) + * [exists (EN)](./wrapper/exists.md) + * [destroy (EN)](./wrapper-array/destroy.md) * [hasAttribute (EN)](./wrapper-array/hasAttribute.md) * [hasClass (EN)](./wrapper-array/hasClass.md) * [hasProp (EN)](./wrapper-array/hasProp.md) @@ -51,10 +54,9 @@ * [setProps (EN)](./wrapper-array/setProps.md) * [trigger (EN)](./wrapper-array/trigger.md) * [update (EN)](./wrapper-array/update.md) - * [destroy (EN)](./wrapper-array/destroy.md) -* [components](./components/README.md) - * [TransitionStub](./components/TransitionStub.md) - * [TransitionGroupStub](./components/TransitionGroupStub.md) +* [components (EN)](./components/README.md) + * [TransitionStub (EN)](./components/TransitionStub.md) + * [TransitionGroupStub (EN)](./components/TransitionGroupStub.md) +* [Selectors (EN)](./selectors.md) * [createLocalVue (EN)](./createLocalVue.md) -* [Selecteurs (EN)](./selectors.md) -* [config (EN)](./config.md) \ No newline at end of file +* [config (EN)](./config.md) diff --git a/docs/fr/api/components/TransitionGroupStub.md b/docs/fr/api/components/TransitionGroupStub.md index 0f276cc54..5bede67d8 100644 --- a/docs/fr/api/components/TransitionGroupStub.md +++ b/docs/fr/api/components/TransitionGroupStub.md @@ -10,7 +10,7 @@ import VueTestUtils from 'vue-test-utils' VueTestUtils.config.stubs['transition-group'] = false ``` -To reset it to stub transition components: +To reset it to stub `transition-group` components: ```js import VueTestUtils, { TransitionGroupStub } from 'vue-test-utils' diff --git a/docs/fr/api/components/TransitionStub.md b/docs/fr/api/components/TransitionStub.md index 7eb2aa2fc..d03dbfbba 100644 --- a/docs/fr/api/components/TransitionStub.md +++ b/docs/fr/api/components/TransitionStub.md @@ -10,8 +10,7 @@ import VueTestUtils from 'vue-test-utils' VueTestUtils.config.stubs.transition = false ``` -To reset it to stub transition components: - +To reset it to stub `transition` components: ```js import VueTestUtils, { TransitionStub } from 'vue-test-utils' diff --git a/docs/fr/api/config.md b/docs/fr/api/config.md index 7c7af33f1..e2d92890e 100644 --- a/docs/fr/api/config.md +++ b/docs/fr/api/config.md @@ -14,7 +14,7 @@ Stubs to use in components. These are overwritten by `stubs` passed in the mounting options. -When passing `stubs` as an array in the mounting options, `config.stubs` are converted to an array, and will stub components with a basic component that returns a div. +When passing `stubs` as an array in the mounting options, `config.stubs` are converted to an array, and will stub components with a basic component that returns ``. Example: diff --git a/docs/fr/api/mount.md b/docs/fr/api/mount.md index 6fc5bb2bf..3e4b357c0 100644 --- a/docs/fr/api/mount.md +++ b/docs/fr/api/mount.md @@ -122,8 +122,8 @@ import Faz from './Faz.vue' describe('Foo', () => { it('renders a div', () => { const wrapper = mount(Foo, { - stub: { - Bar: '
', BarFoo: true, FooBar: Faz } diff --git a/docs/fr/api/options.md b/docs/fr/api/options.md index e7b355897..7e6700ef1 100644 --- a/docs/fr/api/options.md +++ b/docs/fr/api/options.md @@ -13,6 +13,7 @@ Vue options are passed to the component when a new instance is created. , e.g. ` - [`localVue`](#localvue) - [`attachToDocument`](#attachtodocument) - [`attrs`](#attrs) +- [`provide`](#provide) - [`listeners`](#listeners) - [`clone`](#clone) @@ -61,7 +62,7 @@ expect(wrapper.find('div')).toBe(true) - type: `{ [name: string]: Component | boolean } | Array` -Stubs child components. Can be an Array of component names to stub, or an object. +Stubs child components. Can be an Array of component names to stub, or an object. If `stubs` is an Array, every stub is ``. Example: @@ -160,6 +161,8 @@ Set the component instance's `$listeners` object. Clones component before mounting if `true`, which avoids mutating the original component definition. -`options.mocks` (`Object`): Add globals to Vue instance. +### `provide` -`options.localVue` (`Object`): `Vue` class to use in `mount`. See [`createLocalVue`](createLocalVue.md). +- type: `Object` + +Pass properties for components to use in injection. See [provide/inject](https://vuejs.org/v2/api/#provide-inject). diff --git a/docs/fr/api/wrapper/README.md b/docs/fr/api/wrapper/README.md index 1ff53cc95..a4b83bca9 100644 --- a/docs/fr/api/wrapper/README.md +++ b/docs/fr/api/wrapper/README.md @@ -6,10 +6,10 @@ A `Wrapper` is an object that contains a mounted component or vnode and methods - **Properties:** -`vm` `Component`: this is the `Vue` instance. You can access all the [instance methods and properties of a vm](https://vuejs.org/v2/api/#Instance-Properties) with `wrapper.vm`. This only exists on Vue component wrappers -`element` `HTMLElement`: the root DOM node of the wrapper -`options` `Object`: Object containing `vue-test-utils` options passed to `mount` or `shallow` -`options.attachedToDom` `Boolean`: True if `attachToDom` was passed to `mount` or `shallow` +`vm` `Component`: this is the `Vue` instance. You can access all the [instance methods and properties of a vm](https://vuejs.org/v2/api/#Instance-Properties) with `wrapper.vm`. This only exists on Vue component wrappers +`element` `HTMLElement`: the root DOM node of the wrapper +`options` `Object`: Object containing `vue-test-utils` options passed to `mount` or `shallow` +`options.attachedToDom` `Boolean`: True if `attachToDom` was passed to `mount` or `shallow` - **Methods:** diff --git a/docs/fr/guides/common-tips.md b/docs/fr/guides/common-tips.md index 5be769188..fd10e53f0 100644 --- a/docs/fr/guides/common-tips.md +++ b/docs/fr/guides/common-tips.md @@ -94,7 +94,7 @@ Des composants pourraient se fier à des fonctionnalités injectées par un plug Si vous écrivez des tests pour des composants dans une application spécifique, vous pouvez mettre en place les mêmes plugins globaux et mixins en une seule fois dans vos tests. Dans certains cas, comme tester un composant générique utilisé par des applications différentes, il est favorable de tester ces composants dans une installation plus isolée, sans avoir à polluer le constructeur global `Vue`. On peut utiliser la méthode [`createLocalVue`](../api/createLocalVue.md) pour faire cela : ``` js -import createLocalVue from 'vue-test-utils' +import { createLocalVue } from 'vue-test-utils' // créer un constructeur local de `Vue` const localVue = createLocalVue() diff --git a/docs/fr/guides/getting-started.md b/docs/fr/guides/getting-started.md index 4eb23c63f..7b2aaa1cc 100644 --- a/docs/fr/guides/getting-started.md +++ b/docs/fr/guides/getting-started.md @@ -1,4 +1,4 @@ -# Pour commencer +HE# Pour commencer ## Installation @@ -114,7 +114,7 @@ Si vous avez toujours besoin de `nextTick` dans vos fichiers de tests, faites at ```js // ceci ne sera pas intercepté -it('pas d'interception, (done) => { +it('pas d\'interception, (done) => { Vue.nextTick(() => { expect(true).toBe(false) done() diff --git a/docs/fr/guides/using-with-vuex.md b/docs/fr/guides/using-with-vuex.md index db41774f5..1df095dfb 100644 --- a/docs/fr/guides/using-with-vuex.md +++ b/docs/fr/guides/using-with-vuex.md @@ -109,7 +109,6 @@ Génial, on peut désormais simuler des actions. Allons avoir comment simuler de ## Simuler des accesseurs - ``` html