From d6b79c80fc4cc6a229547ab4d3778a5b41895021 Mon Sep 17 00:00:00 2001 From: Mikhail G <19877114+Th3Un1q3@users.noreply.github.com> Date: Sun, 9 May 2021 16:49:17 +0300 Subject: [PATCH 01/79] Updated router link stub to match actual router-link interface (#1840) * Added new router link property, and updated docs * added exactPathActiveClass property to a router link stub --- docs/api/components/RouterLinkStub.md | 2 +- docs/ja/api/components/RouterLinkStub.md | 2 +- docs/ru/api/components/RouterLinkStub.md | 2 +- docs/zh/api/components/RouterLinkStub.md | 2 +- packages/test-utils/src/components/RouterLinkStub.js | 2 ++ test/specs/components/RouterLink.spec.js | 10 ++++++++-- 6 files changed, 14 insertions(+), 6 deletions(-) diff --git a/docs/api/components/RouterLinkStub.md b/docs/api/components/RouterLinkStub.md index 344c3c35a..00773fd2b 100644 --- a/docs/api/components/RouterLinkStub.md +++ b/docs/api/components/RouterLinkStub.md @@ -16,5 +16,5 @@ const wrapper = mount(Component, { RouterLink: RouterLinkStub } }) -expect(wrapper.find(RouterLinkStub).props().to).toBe('/some/path') +expect(wrapper.findComponent(RouterLinkStub).props().to).toBe('/some/path') ``` diff --git a/docs/ja/api/components/RouterLinkStub.md b/docs/ja/api/components/RouterLinkStub.md index d54719c27..50b943970 100644 --- a/docs/ja/api/components/RouterLinkStub.md +++ b/docs/ja/api/components/RouterLinkStub.md @@ -16,5 +16,5 @@ const wrapper = mount(Component, { RouterLink: RouterLinkStub } }) -expect(wrapper.find(RouterLinkStub).props().to).toBe('/some/path') +expect(wrapper.findComponent(RouterLinkStub).props().to).toBe('/some/path') ``` diff --git a/docs/ru/api/components/RouterLinkStub.md b/docs/ru/api/components/RouterLinkStub.md index 7fbbeef30..38449fcbd 100644 --- a/docs/ru/api/components/RouterLinkStub.md +++ b/docs/ru/api/components/RouterLinkStub.md @@ -16,5 +16,5 @@ const wrapper = mount(Component, { RouterLink: RouterLinkStub } }) -expect(wrapper.find(RouterLinkStub).props().to).toBe('/some/path') +expect(wrapper.findComponent(RouterLinkStub).props().to).toBe('/some/path') ``` diff --git a/docs/zh/api/components/RouterLinkStub.md b/docs/zh/api/components/RouterLinkStub.md index 61ddf513a..aff78c4f4 100644 --- a/docs/zh/api/components/RouterLinkStub.md +++ b/docs/zh/api/components/RouterLinkStub.md @@ -16,5 +16,5 @@ const wrapper = mount(Component, { RouterLink: RouterLinkStub } }) -expect(wrapper.find(RouterLinkStub).props().to).toBe('/some/path') +expect(wrapper.findComponent(RouterLinkStub).props().to).toBe('/some/path') ``` diff --git a/packages/test-utils/src/components/RouterLinkStub.js b/packages/test-utils/src/components/RouterLinkStub.js index 9ffe04cbe..307fcdff3 100644 --- a/packages/test-utils/src/components/RouterLinkStub.js +++ b/packages/test-utils/src/components/RouterLinkStub.js @@ -14,10 +14,12 @@ export default { default: 'a' }, exact: Boolean, + exactPath: Boolean, append: Boolean, replace: Boolean, activeClass: String, exactActiveClass: String, + exactPathActiveClass: String, event: { type: eventTypes, default: 'click' diff --git a/test/specs/components/RouterLink.spec.js b/test/specs/components/RouterLink.spec.js index fcae948e8..795e60754 100644 --- a/test/specs/components/RouterLink.spec.js +++ b/test/specs/components/RouterLink.spec.js @@ -12,7 +12,9 @@ describeWithShallowAndMount('RouterLinkStub', mountingMethod => { activeClass="activeClass1" exactActiveClass="exactActiveClass1" event="event1" + exact-path-active-class="exact-path-active-class" exact + exact-path append replace /> @@ -25,14 +27,18 @@ describeWithShallowAndMount('RouterLinkStub', mountingMethod => { } }) - const routerLink = wrapper.find(RouterLinkStub) + const routerLink = wrapper.getComponent(RouterLinkStub) expect(routerLink.props().to).toEqual('to1') expect(routerLink.props().tag).toEqual('a') expect(routerLink.props().exact).toEqual(true) + expect(routerLink.props().exactPath).toEqual(true) expect(routerLink.props().append).toEqual(true) expect(routerLink.props().replace).toEqual(true) expect(routerLink.props().activeClass).toEqual('activeClass1') expect(routerLink.props().exactActiveClass).toEqual('exactActiveClass1') + expect(routerLink.props().exactPathActiveClass).toEqual( + 'exact-path-active-class' + ) expect(routerLink.props().event).toEqual('event1') }) @@ -49,6 +55,6 @@ describeWithShallowAndMount('RouterLinkStub', mountingMethod => { RouterLink: RouterLinkStub } }) - expect(wrapper.find(RouterLinkStub).text()).toEqual('some text') + expect(wrapper.getComponent(RouterLinkStub).text()).toEqual('some text') }) }) From 3134d882e97b5512a0b220d9631df7890124bc48 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Sun, 9 May 2021 23:51:02 +1000 Subject: [PATCH 02/79] build(deps): bump lodash from 4.17.20 to 4.17.21 (#1843) Bumps [lodash](https://github.com/lodash/lodash) from 4.17.20 to 4.17.21. - [Release notes](https://github.com/lodash/lodash/releases) - [Commits](https://github.com/lodash/lodash/compare/4.17.20...4.17.21) Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- yarn.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/yarn.lock b/yarn.lock index 02093b37b..49e8c9d4e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8944,9 +8944,9 @@ lodash@4.17.15: integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A== lodash@^4.15.0, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.3, lodash@^4.17.5, lodash@^4.2.1: - version "4.17.20" - resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52" - integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA== + version "4.17.21" + resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" + integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== log-symbols@^1.0.2: version "1.0.2" From d11c41cf355707f1de841e6fddbbaaf7bff6b3d5 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Sun, 9 May 2021 23:51:09 +1000 Subject: [PATCH 03/79] build(deps): bump handlebars from 4.7.6 to 4.7.7 (#1841) Bumps [handlebars](https://github.com/wycats/handlebars.js) from 4.7.6 to 4.7.7. - [Release notes](https://github.com/wycats/handlebars.js/releases) - [Changelog](https://github.com/handlebars-lang/handlebars.js/blob/master/release-notes.md) - [Commits](https://github.com/wycats/handlebars.js/compare/v4.7.6...v4.7.7) Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- yarn.lock | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/yarn.lock b/yarn.lock index 49e8c9d4e..ff2f9d733 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6883,9 +6883,9 @@ handle-thing@^2.0.0: integrity sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg== handlebars@^4.4.0: - version "4.7.6" - resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.7.6.tgz#d4c05c1baf90e9945f77aa68a7a219aa4a7df74e" - integrity sha512-1f2BACcBfiwAfStCKZNrUCgqNZkGsAT7UM3kkYtXuLo0KnaVfjKOyf7PRzB6++aK9STyT1Pd2ZCPe3EGOXleXA== + version "4.7.7" + resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.7.7.tgz#9ce33416aad02dbd6c8fafa8240d5d98004945a1" + integrity sha512-aAcXm5OAfE/8IXkcZvCepKU3VzW1/39Fb5ZuqMtgI/hT8X2YgoMvBY5dLhq/cpOvw7Lk1nK/UF71aLG/ZnVYRA== dependencies: minimist "^1.2.5" neo-async "^2.6.0" @@ -13125,9 +13125,9 @@ uglify-js@3.3.x: source-map "~0.6.1" uglify-js@^3.1.4: - version "3.10.4" - resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.10.4.tgz#dd680f5687bc0d7a93b14a3482d16db6eba2bfbb" - integrity sha512-kBFT3U4Dcj4/pJ52vfjCSfyLyvG9VYYuGYPmrPvAxRw/i7xHiT4VvCev+uiEMcEEiu6UNB6KgWmGtSUYIWScbw== + version "3.13.5" + resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.13.5.tgz#5d71d6dbba64cf441f32929b1efce7365bb4f113" + integrity sha512-xtB8yEqIkn7zmOyS2zUNBsYCBRhDkvlNxMMY2smuJ/qA8NCHeQvKCF3i9Z4k8FJH4+PJvZRtMrPynfZ75+CSZw== uid-number@0.0.6: version "0.0.6" From d55f8f1ebaf4d09418509ab2c0961ac5635a52d1 Mon Sep 17 00:00:00 2001 From: sergey Date: Mon, 10 May 2021 02:57:56 +0300 Subject: [PATCH 04/79] Update testing-async-components.md (#1836) * Update testing-async-components.md * Update testing-async-components.md --- docs/ru/guides/testing-async-components.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/ru/guides/testing-async-components.md b/docs/ru/guides/testing-async-components.md index fb67b9bce..f9b0d893e 100644 --- a/docs/ru/guides/testing-async-components.md +++ b/docs/ru/guides/testing-async-components.md @@ -44,7 +44,9 @@ export default { ```js import { shallowMount } from '@vue/test-utils' import Foo from './Foo' -jest.mock('axios') +jest.mock('axios', () => ({ + get: Promise.resolve({ data: 'value' }) +})) it('делает асинхронный запрос при нажатии кнопки', () => { const wrapper = shallowMount(Foo) From 7e78174672321882d373158eb599bfbd6e9584a2 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Wed, 12 May 2021 10:42:29 +1000 Subject: [PATCH 05/79] build(deps): bump hosted-git-info from 2.8.5 to 2.8.9 (#1844) Bumps [hosted-git-info](https://github.com/npm/hosted-git-info) from 2.8.5 to 2.8.9. - [Release notes](https://github.com/npm/hosted-git-info/releases) - [Changelog](https://github.com/npm/hosted-git-info/blob/v2.8.9/CHANGELOG.md) - [Commits](https://github.com/npm/hosted-git-info/compare/v2.8.5...v2.8.9) Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- yarn.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/yarn.lock b/yarn.lock index ff2f9d733..13ca4de3c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7046,9 +7046,9 @@ homedir-polyfill@^1.0.1: parse-passwd "^1.0.0" hosted-git-info@^2.1.4, hosted-git-info@^2.7.1: - version "2.8.5" - resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.5.tgz#759cfcf2c4d156ade59b0b2dfabddc42a6b9c70c" - integrity sha512-kssjab8CvdXfcXMXVcvsXum4Hwdq9XGtRD3TteMEvEbq0LXyiNQr6AprqKqfeaDXze7SxWvRxdpwE6ku7ikLkg== + version "2.8.9" + resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9" + integrity sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw== hpack.js@^2.1.6: version "2.1.6" From 83aa823b5c2c230bded1f7dcf349166a05886262 Mon Sep 17 00:00:00 2001 From: Pete Hegman Date: Tue, 25 May 2021 21:04:19 -0600 Subject: [PATCH 06/79] docs(test-utils): add tip about using `trigger('focus')` (#1848) When using `trigger('focus')` with jsdom v16.4.0 and above you must use `attachTo` when mounting the component. Co-authored-by: peterhegman --- docs/api/wrapper/trigger.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/api/wrapper/trigger.md b/docs/api/wrapper/trigger.md index 74e3e88bf..3d8720bb3 100644 --- a/docs/api/wrapper/trigger.md +++ b/docs/api/wrapper/trigger.md @@ -38,6 +38,10 @@ test('trigger demo', async () => { }) ``` +::: tip +When using `trigger('focus')` with [jsdom v16.4.0](https://github.com/jsdom/jsdom/releases/tag/16.4.0) and above you must use the [attachTo](../options.md#attachto) option when mounting the component. This is because a bug fix in [jsdom v16.4.0](https://github.com/jsdom/jsdom/releases/tag/16.4.0) changed `el.focus()` to do nothing on elements that are disconnected from the DOM. +::: + - **Setting the event target:** Under the hood, `trigger` creates an `Event` object and dispatches the event on the Wrapper element. From 9efab9053ffc04b938f3237d8b6f046a27ff5014 Mon Sep 17 00:00:00 2001 From: Joshua Dyer <51426088+dyerjos@users.noreply.github.com> Date: Tue, 8 Jun 2021 09:25:36 -0500 Subject: [PATCH 07/79] docs: Update setProps.md (#1856) change 'could' to 'should' --- docs/api/wrapper/setProps.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/api/wrapper/setProps.md b/docs/api/wrapper/setProps.md index 9a86ea0e1..74317335c 100644 --- a/docs/api/wrapper/setProps.md +++ b/docs/api/wrapper/setProps.md @@ -9,7 +9,7 @@ Sets `Wrapper` `vm` props and forces update. ::: warning -`setProps` could be called only for top-level component, mounted by `mount` or `shallowMount` +`setProps` should be called only for top-level component, mounted by `mount` or `shallowMount` ::: ```js From 9c05f2e11e1cf956a9127a66b54e39824331b1ee Mon Sep 17 00:00:00 2001 From: Raphael DDL Oliveira Date: Sun, 13 Jun 2021 08:31:16 -0300 Subject: [PATCH 08/79] fix: Updates attachToDocument documentation tip (#1852) Closes #1725 Updates attachToDocument documentation tip from the div boilerplate from #1584 & #1611 to the new handling from #1578 & #1699 --- docs/api/options.md | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/docs/api/options.md b/docs/api/options.md index 1bbdd2ae0..c2f31793b 100644 --- a/docs/api/options.md +++ b/docs/api/options.md @@ -336,15 +336,12 @@ wrapper.destroy() `attachToDocument` is deprecated and will be removed in future releases. Use [`attachTo`](#attachto) instead. For example, if you need to attach the component to the document.body: ```js -const elem = document.createElement('div') -if (document.body) { - document.body.appendChild(elem) -} wrapper = mount(Component, { - attachTo: elem + attachTo: document.body }) ``` +For more information, see [`attachTo`](#attachto)'s tip above. ::: Like [`attachTo`](#attachto), but automatically creates a new `div` element for you and inserts it into the body. From b118dcd1e2fca70921deeca717dc7be73fc200e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A9dric?= Date: Sun, 13 Jun 2021 13:31:36 +0200 Subject: [PATCH 09/79] [Doc] Typo in findAllComponents page (#1858) --- docs/api/wrapper/findAllComponents.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/api/wrapper/findAllComponents.md b/docs/api/wrapper/findAllComponents.md index 3da54c393..6b3256e16 100644 --- a/docs/api/wrapper/findAllComponents.md +++ b/docs/api/wrapper/findAllComponents.md @@ -19,5 +19,5 @@ const wrapper = mount(Foo) const bar = wrapper.findAllComponents(Bar).at(0) expect(bar.exists()).toBeTruthy() const bars = wrapper.findAllComponents(Bar) -expect(bar).toHaveLength(1) +expect(bars).toHaveLength(1) ``` From 82370abb3adc362459e3633c0255d7f0833a8c60 Mon Sep 17 00:00:00 2001 From: koooge Date: Sun, 13 Jun 2021 13:36:38 +0200 Subject: [PATCH 10/79] docs(docs): update guide (#1853) --- .github/CONTRIBUTING.md | 3 --- 1 file changed, 3 deletions(-) diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index e1eb7800e..6f3c102ab 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -57,9 +57,6 @@ $ yarn test:unit # run the full test suite, include linting / type checking $ yarn test - -# run tests against src files only. Allows inline debugging. -$ yarn test:unit:only:dev ``` There are some other scripts available in the `scripts` section of the `package.json` file. From 21f3ab18bfa0239145618b71c4255b867a54ad22 Mon Sep 17 00:00:00 2001 From: Pim Date: Mon, 14 Jun 2021 07:48:10 +0200 Subject: [PATCH 11/79] fix #1845: add functional component check in component name match (#1857) --- packages/test-utils/src/matches.js | 8 ++++++-- .../components/component-with-name-prop.vue | 12 ++++++++++++ test/specs/wrapper/find.spec.js | 10 ++++++++++ 3 files changed, 28 insertions(+), 2 deletions(-) create mode 100644 test/resources/components/component-with-name-prop.vue diff --git a/packages/test-utils/src/matches.js b/packages/test-utils/src/matches.js index 477d66cd1..6acba7661 100644 --- a/packages/test-utils/src/matches.js +++ b/packages/test-utils/src/matches.js @@ -3,16 +3,20 @@ import { COMPONENT_SELECTOR, FUNCTIONAL_OPTIONS } from 'shared/consts' -import { isConstructor } from 'shared/validators' +import { isConstructor, isFunctionalComponent } from 'shared/validators' import { capitalize, camelize } from 'shared/util' function vmMatchesName(vm, name) { // We want to mirror how Vue resolves component names in SFCs: // For example, , and ` // all resolve to the same component - const componentName = vm.name || (vm.$options && vm.$options.name) || '' + const componentName = isFunctionalComponent(vm) + ? vm.name + : vm.$options && vm.$options.name + return ( !!name && + !!componentName && (componentName === name || // testComponent -> TestComponent componentName === capitalize(name) || diff --git a/test/resources/components/component-with-name-prop.vue b/test/resources/components/component-with-name-prop.vue new file mode 100644 index 000000000..394222356 --- /dev/null +++ b/test/resources/components/component-with-name-prop.vue @@ -0,0 +1,12 @@ + + + diff --git a/test/specs/wrapper/find.spec.js b/test/specs/wrapper/find.spec.js index 5c7c34483..2e53577ee 100644 --- a/test/specs/wrapper/find.spec.js +++ b/test/specs/wrapper/find.spec.js @@ -3,6 +3,7 @@ import { createLocalVue, shallowMount } from 'packages/test-utils/src' import Vue from 'vue' import VueRouter from 'vue-router' import ComponentWithChild from '~resources/components/component-with-child.vue' +import ComponentWithNameProp from '~resources/components/component-with-name-prop.vue' import ComponentWithoutName from '~resources/components/component-without-name.vue' import ComponentWithSlots from '~resources/components/component-with-slots.vue' import ComponentWithVFor from '~resources/components/component-with-v-for.vue' @@ -556,6 +557,15 @@ describeWithShallowAndMount('find', mountingMethod => { expect(wrapper.find({ name: 'CamelCase' }).name()).toEqual('camel-case') }) + it('returns a Wrapper matching a component name if Component has a name prop', () => { + const wrapper = mountingMethod(ComponentWithNameProp, { + propsData: { name: 'prop1' } + }) + expect( + wrapper.findComponent({ name: 'component-with-name-prop' }).vnode + ).toBeTruthy() + }) + it('returns Wrapper of Vue Component matching the ref in options object', () => { const wrapper = mountingMethod(ComponentWithChild) expect(wrapper.find({ ref: 'child' }).isVueInstance()).toEqual(true) From 1999417f0e64bcabb1525d9195c66e08540f43c6 Mon Sep 17 00:00:00 2001 From: Lachlan Miller Date: Mon, 14 Jun 2021 16:13:56 +1000 Subject: [PATCH 12/79] chore: publish v1.2.1 --- packages/server-test-utils/dist/vue-server-test-utils.js | 6 +++++- packages/test-utils/dist/vue-test-utils.iife.js | 8 +++++++- packages/test-utils/dist/vue-test-utils.js | 8 +++++++- packages/test-utils/dist/vue-test-utils.umd.js | 8 +++++++- 4 files changed, 26 insertions(+), 4 deletions(-) diff --git a/packages/server-test-utils/dist/vue-server-test-utils.js b/packages/server-test-utils/dist/vue-server-test-utils.js index f7bf2ae0a..a776b04a8 100644 --- a/packages/server-test-utils/dist/vue-server-test-utils.js +++ b/packages/server-test-utils/dist/vue-server-test-utils.js @@ -1885,9 +1885,13 @@ function vmMatchesName(vm, name) { // We want to mirror how Vue resolves component names in SFCs: // For example, , and ` // all resolve to the same component - var componentName = vm.name || (vm.$options && vm.$options.name) || ''; + var componentName = isFunctionalComponent(vm) + ? vm.name + : vm.$options && vm.$options.name; + return ( !!name && + !!componentName && (componentName === name || // testComponent -> TestComponent componentName === capitalize(name) || diff --git a/packages/test-utils/dist/vue-test-utils.iife.js b/packages/test-utils/dist/vue-test-utils.iife.js index 3febb6af9..3016098c3 100644 --- a/packages/test-utils/dist/vue-test-utils.iife.js +++ b/packages/test-utils/dist/vue-test-utils.iife.js @@ -2713,9 +2713,13 @@ var VueTestUtils = (function (exports, Vue, vueTemplateCompiler) { // We want to mirror how Vue resolves component names in SFCs: // For example, , and ` // all resolve to the same component - var componentName = vm.name || (vm.$options && vm.$options.name) || ''; + var componentName = isFunctionalComponent(vm) + ? vm.name + : vm.$options && vm.$options.name; + return ( !!name && + !!componentName && (componentName === name || // testComponent -> TestComponent componentName === capitalize(name) || @@ -14114,10 +14118,12 @@ var VueTestUtils = (function (exports, Vue, vueTemplateCompiler) { default: 'a' }, exact: Boolean, + exactPath: Boolean, append: Boolean, replace: Boolean, activeClass: String, exactActiveClass: String, + exactPathActiveClass: String, event: { type: eventTypes, default: 'click' diff --git a/packages/test-utils/dist/vue-test-utils.js b/packages/test-utils/dist/vue-test-utils.js index d3bd510d0..de7a46dc4 100644 --- a/packages/test-utils/dist/vue-test-utils.js +++ b/packages/test-utils/dist/vue-test-utils.js @@ -2717,9 +2717,13 @@ function vmMatchesName(vm, name) { // We want to mirror how Vue resolves component names in SFCs: // For example, , and ` // all resolve to the same component - var componentName = vm.name || (vm.$options && vm.$options.name) || ''; + var componentName = isFunctionalComponent(vm) + ? vm.name + : vm.$options && vm.$options.name; + return ( !!name && + !!componentName && (componentName === name || // testComponent -> TestComponent componentName === capitalize(name) || @@ -14118,10 +14122,12 @@ var RouterLinkStub = { default: 'a' }, exact: Boolean, + exactPath: Boolean, append: Boolean, replace: Boolean, activeClass: String, exactActiveClass: String, + exactPathActiveClass: String, event: { type: eventTypes, default: 'click' diff --git a/packages/test-utils/dist/vue-test-utils.umd.js b/packages/test-utils/dist/vue-test-utils.umd.js index d288e4c75..1d1f11d6c 100644 --- a/packages/test-utils/dist/vue-test-utils.umd.js +++ b/packages/test-utils/dist/vue-test-utils.umd.js @@ -2716,9 +2716,13 @@ // We want to mirror how Vue resolves component names in SFCs: // For example, , and ` // all resolve to the same component - var componentName = vm.name || (vm.$options && vm.$options.name) || ''; + var componentName = isFunctionalComponent(vm) + ? vm.name + : vm.$options && vm.$options.name; + return ( !!name && + !!componentName && (componentName === name || // testComponent -> TestComponent componentName === capitalize(name) || @@ -14117,10 +14121,12 @@ default: 'a' }, exact: Boolean, + exactPath: Boolean, append: Boolean, replace: Boolean, activeClass: String, exactActiveClass: String, + exactPathActiveClass: String, event: { type: eventTypes, default: 'click' From 38072d5ea51a7feeb174e3a7cc77b1cb5f087c9f Mon Sep 17 00:00:00 2001 From: Lachlan Miller Date: Mon, 14 Jun 2021 16:19:40 +1000 Subject: [PATCH 13/79] v1.2.1 --- lerna.json | 2 +- packages/server-test-utils/package.json | 2 +- packages/test-utils/package.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/lerna.json b/lerna.json index b26e6a73c..b0c58ac01 100644 --- a/lerna.json +++ b/lerna.json @@ -5,5 +5,5 @@ ], "npmClient": "yarn", "useWorkspaces": true, - "version": "1.2.0" + "version": "1.2.1" } diff --git a/packages/server-test-utils/package.json b/packages/server-test-utils/package.json index 63b51340e..9439ed907 100644 --- a/packages/server-test-utils/package.json +++ b/packages/server-test-utils/package.json @@ -1,6 +1,6 @@ { "name": "@vue/server-test-utils", - "version": "1.2.0", + "version": "1.2.1", "description": "Utilities for testing Vue components.", "main": "dist/vue-server-test-utils.js", "types": "types/index.d.ts", diff --git a/packages/test-utils/package.json b/packages/test-utils/package.json index fcd14c8f9..07fc483d8 100644 --- a/packages/test-utils/package.json +++ b/packages/test-utils/package.json @@ -1,6 +1,6 @@ { "name": "@vue/test-utils", - "version": "1.2.0", + "version": "1.2.1", "description": "Utilities for testing Vue components.", "main": "dist/vue-test-utils.js", "types": "types/index.d.ts", From a451289b8305529bc25973938be7f50c7cc78206 Mon Sep 17 00:00:00 2001 From: David Uri Date: Mon, 14 Jun 2021 12:14:33 +0200 Subject: [PATCH 14/79] Update findAllComponents.md (#1859) --- docs/zh/api/wrapper/findAllComponents.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/zh/api/wrapper/findAllComponents.md b/docs/zh/api/wrapper/findAllComponents.md index ce93af3a2..67d5491fa 100644 --- a/docs/zh/api/wrapper/findAllComponents.md +++ b/docs/zh/api/wrapper/findAllComponents.md @@ -19,5 +19,5 @@ const wrapper = mount(Foo) const bar = wrapper.findAllComponents(Bar).at(0) expect(bar.exists()).toBeTruthy() const bars = wrapper.findAllComponents(Bar) -expect(bar).toHaveLength(1) +expect(bars).toHaveLength(1) ``` From d7fcff06d3f703878c0b0998087de5779ee2861f Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Wed, 7 Jul 2021 15:00:51 +1000 Subject: [PATCH 15/79] build(deps): bump prismjs from 1.23.0 to 1.24.0 (#1866) Bumps [prismjs](https://github.com/PrismJS/prism) from 1.23.0 to 1.24.0. - [Release notes](https://github.com/PrismJS/prism/releases) - [Changelog](https://github.com/PrismJS/prism/blob/master/CHANGELOG.md) - [Commits](https://github.com/PrismJS/prism/compare/v1.23.0...v1.24.0) --- updated-dependencies: - dependency-name: prismjs dependency-type: indirect ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- yarn.lock | 39 +++------------------------------------ 1 file changed, 3 insertions(+), 36 deletions(-) diff --git a/yarn.lock b/yarn.lock index 13ca4de3c..6b522333a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4081,15 +4081,6 @@ cli-width@^2.0.0: version "2.2.0" resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639" -clipboard@^2.0.0: - version "2.0.6" - resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.6.tgz#52921296eec0fdf77ead1749421b21c968647376" - integrity sha512-g5zbiixBRk/wyKakSwCKd7vQXDjFnAMGHoEyBogG/bw9kTD9GvdAvaoRR1ALcEzt3pVKxZR0pViekPMIS0QyGg== - dependencies: - good-listener "^1.2.2" - select "^1.1.2" - tiny-emitter "^2.0.0" - cliui@^5.0.0: version "5.0.0" resolved "https://registry.yarnpkg.com/cliui/-/cliui-5.0.0.tgz#deefcfdb2e800784aa34f46fa08e06851c7bbbc5" @@ -5254,11 +5245,6 @@ delayed-stream@~1.0.0: resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619" integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk= -delegate@^3.1.2: - version "3.2.0" - resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166" - integrity sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw== - delegates@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a" @@ -6834,13 +6820,6 @@ globby@^9.2.0: pify "^4.0.1" slash "^2.0.0" -good-listener@^1.2.2: - version "1.2.2" - resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50" - integrity sha1-1TswzfkxPf+33JoNR3CWqm0UXFA= - dependencies: - delegate "^3.1.2" - got@^9.6.0: version "9.6.0" resolved "https://registry.yarnpkg.com/got/-/got-9.6.0.tgz#edf45e7d67f99545705de1f7bbeeeb121765ed85" @@ -10873,11 +10852,9 @@ pretty@^2.0.0: js-beautify "^1.6.12" prismjs@^1.13.0: - version "1.23.0" - resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.23.0.tgz#d3b3967f7d72440690497652a9d40ff046067f33" - integrity sha512-c29LVsqOaLbBHuIbsTxaKENh1N2EQBOHaWv7gkHN4dgRbxSREqDnDbtFJYdpPauS4YCplMSNCABQ6Eeor69bAA== - optionalDependencies: - clipboard "^2.0.0" + version "1.24.0" + resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.24.0.tgz#0409c30068a6c52c89ef7f1089b3ca4de56be2ac" + integrity sha512-SqV5GRsNqnzCL8k5dfAjCNhUrF3pR0A9lTDSCUZeh/LIshheXJEaP0hwLz2t4XHivd2J/v2HR+gRnigzeKe3cQ== process-nextick-args@~2.0.0: version "2.0.1" @@ -11805,11 +11782,6 @@ select-hose@^2.0.0: resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca" integrity sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo= -select@^1.1.2: - version "1.1.2" - resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d" - integrity sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0= - selfsigned@^1.10.7: version "1.10.7" resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.7.tgz#da5819fd049d5574f28e88a9bcc6dbc6e6f3906b" @@ -12862,11 +12834,6 @@ timsort@^0.3.0: resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4" integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q= -tiny-emitter@^2.0.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423" - integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q== - tmp@0.2.1: version "0.2.1" resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.1.tgz#8457fc3037dcf4719c251367a1af6500ee1ccf14" From c2ee13b3837b8e80a5a83773322ddca6269b40b6 Mon Sep 17 00:00:00 2001 From: Sergey Vishnevsky <57719759+standbyoneself@users.noreply.github.com> Date: Mon, 12 Jul 2021 08:59:02 +0300 Subject: [PATCH 16/79] feat: add generic for wrapper.find() and wrapper.get() (#1871) * feat: add generic for wrapper.find() and wrapper.get() * refactor: change HTMLElement -> Element * fix: fix the tests for wrapper * fix: forgot to apply the generic * test: added the simple test --- packages/test-utils/types/index.d.ts | 8 ++++---- packages/test-utils/types/test/wrapper.ts | 4 +++- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/test-utils/types/index.d.ts b/packages/test-utils/types/index.d.ts index ee3938787..0b6e1abd2 100644 --- a/packages/test-utils/types/index.d.ts +++ b/packages/test-utils/types/index.d.ts @@ -75,15 +75,15 @@ interface BaseWrapper { selector: Selector | void } -export interface Wrapper extends BaseWrapper { +export interface Wrapper extends BaseWrapper { readonly vm: V - readonly element: HTMLElement + readonly element: el readonly options: WrapperOptions get (selector: VueClass): Wrapper get (selector: ComponentOptions): Wrapper get>(selector: FunctionalComponentOptions): Wrapper - get (selector: string): Wrapper + get(selector: string): Wrapper get (selector: RefSelector): Wrapper get (selector: NameSelector): Wrapper @@ -96,7 +96,7 @@ export interface Wrapper extends BaseWrapper { find (selector: VueClass): Wrapper find (selector: ComponentOptions): Wrapper find>(selector: FunctionalComponentOptions): Wrapper - find (selector: string): Wrapper + find(selector: string): Wrapper find (selector: RefSelector): Wrapper find (selector: NameSelector): Wrapper diff --git a/packages/test-utils/types/test/wrapper.ts b/packages/test-utils/types/test/wrapper.ts index 46800da67..a19ed7959 100644 --- a/packages/test-utils/types/test/wrapper.ts +++ b/packages/test-utils/types/test/wrapper.ts @@ -51,7 +51,7 @@ wrapper.findComponent(ClassComponent) wrapper.vm.foo wrapper.vm.$emit('event', 'arg') -let el: HTMLElement = wrapper.element +let el: Element = wrapper.element let selector: Selector | void @@ -68,6 +68,8 @@ selector = found.selector found = wrapper.find({ name: 'my-button' }) selector = found.selector +wrapper.find('input').element.value + let array = wrapper.findAll('.bar') selector = array.selector array = wrapper.findAll(normalOptions) From 9965f5f91842d91a144ba91064620689ab5471fa Mon Sep 17 00:00:00 2001 From: coolboy0961 Date: Mon, 12 Jul 2021 15:18:02 +0900 Subject: [PATCH 17/79] fix: add options param to createLocalVue types (#1873) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: 陳 佳冬 --- packages/test-utils/types/index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/test-utils/types/index.d.ts b/packages/test-utils/types/index.d.ts index 0b6e1abd2..d2ad4695c 100644 --- a/packages/test-utils/types/index.d.ts +++ b/packages/test-utils/types/index.d.ts @@ -183,7 +183,7 @@ interface VueTestUtilsConfigOptions { deprecationWarningHandler?: Function } -export declare function createLocalVue (): typeof Vue +export declare function createLocalVue (options?: any): typeof Vue export declare let config: VueTestUtilsConfigOptions export declare function mount (component: VueClass, options?: ThisTypedMountOptions): Wrapper From d56d9453ca7143d97c5483e287d626c999cd30bd Mon Sep 17 00:00:00 2001 From: Lachlan Miller Date: Thu, 22 Jul 2021 21:24:33 +1000 Subject: [PATCH 18/79] v1.2.2 --- lerna.json | 2 +- packages/test-utils/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/lerna.json b/lerna.json index b0c58ac01..9e1e63009 100644 --- a/lerna.json +++ b/lerna.json @@ -5,5 +5,5 @@ ], "npmClient": "yarn", "useWorkspaces": true, - "version": "1.2.1" + "version": "1.2.2" } diff --git a/packages/test-utils/package.json b/packages/test-utils/package.json index 07fc483d8..2d115f8ef 100644 --- a/packages/test-utils/package.json +++ b/packages/test-utils/package.json @@ -1,6 +1,6 @@ { "name": "@vue/test-utils", - "version": "1.2.1", + "version": "1.2.2", "description": "Utilities for testing Vue components.", "main": "dist/vue-test-utils.js", "types": "types/index.d.ts", From c0d7f2b1d540a38583a8a8d3704a28f51d3bbafc Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Wed, 11 Aug 2021 08:47:50 +0200 Subject: [PATCH 19/79] build(deps): bump path-parse from 1.0.6 to 1.0.7 (#1893) Bumps [path-parse](https://github.com/jbgutierrez/path-parse) from 1.0.6 to 1.0.7. - [Release notes](https://github.com/jbgutierrez/path-parse/releases) - [Commits](https://github.com/jbgutierrez/path-parse/commits/v1.0.7) --- updated-dependencies: - dependency-name: path-parse dependency-type: indirect ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- yarn.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/yarn.lock b/yarn.lock index 6b522333a..c56f09ba9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10318,9 +10318,9 @@ path-key@^3.0.0, path-key@^3.1.0: integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q== path-parse@^1.0.6: - version "1.0.6" - resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c" - integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw== + version "1.0.7" + resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735" + integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw== path-to-regexp@0.1.7: version "0.1.7" From e639009f33cf59829546c17643b57add2d8c2c1d Mon Sep 17 00:00:00 2001 From: wxsm Date: Fri, 27 Aug 2021 15:42:11 +0800 Subject: [PATCH 20/79] docs: fix zh links (#1890) --- docs/zh/api/wrapper/README.md | 54 +++++++++++++++++------------------ 1 file changed, 27 insertions(+), 27 deletions(-) diff --git a/docs/zh/api/wrapper/README.md b/docs/zh/api/wrapper/README.md index 9aff7a56e..3995160f1 100644 --- a/docs/zh/api/wrapper/README.md +++ b/docs/zh/api/wrapper/README.md @@ -28,30 +28,30 @@ Vue Test Utils 是一个基于包裹器的 API。 ## 方法 -!!!include(docs/api/wrapper/attributes.md)!!! -!!!include(docs/api/wrapper/classes.md)!!! -!!!include(docs/api/wrapper/contains.md)!!! -!!!include(docs/api/wrapper/destroy.md)!!! -!!!include(docs/api/wrapper/emitted.md)!!! -!!!include(docs/api/wrapper/emittedByOrder.md)!!! -!!!include(docs/api/wrapper/exists.md)!!! -!!!include(docs/api/wrapper/find.md)!!! -!!!include(docs/api/wrapper/findAll.md)!!! -!!!include(docs/api/wrapper/findComponent.md)!!! -!!!include(docs/api/wrapper/findAllComponents.md)!!! -!!!include(docs/api/wrapper/html.md)!!! -!!!include(docs/api/wrapper/get.md)!!! -!!!include(docs/api/wrapper/is.md)!!! -!!!include(docs/api/wrapper/isEmpty.md)!!! -!!!include(docs/api/wrapper/isVisible.md)!!! -!!!include(docs/api/wrapper/isVueInstance.md)!!! -!!!include(docs/api/wrapper/name.md)!!! -!!!include(docs/api/wrapper/props.md)!!! -!!!include(docs/api/wrapper/setChecked.md)!!! -!!!include(docs/api/wrapper/setData.md)!!! -!!!include(docs/api/wrapper/setMethods.md)!!! -!!!include(docs/api/wrapper/setProps.md)!!! -!!!include(docs/api/wrapper/setSelected.md)!!! -!!!include(docs/api/wrapper/setValue.md)!!! -!!!include(docs/api/wrapper/text.md)!!! -!!!include(docs/api/wrapper/trigger.md)!!! +!!!include(docs/zh/api/wrapper/attributes.md)!!! +!!!include(docs/zh/api/wrapper/classes.md)!!! +!!!include(docs/zh/api/wrapper/contains.md)!!! +!!!include(docs/zh/api/wrapper/destroy.md)!!! +!!!include(docs/zh/api/wrapper/emitted.md)!!! +!!!include(docs/zh/api/wrapper/emittedByOrder.md)!!! +!!!include(docs/zh/api/wrapper/exists.md)!!! +!!!include(docs/zh/api/wrapper/find.md)!!! +!!!include(docs/zh/api/wrapper/findAll.md)!!! +!!!include(docs/zh/api/wrapper/findComponent.md)!!! +!!!include(docs/zh/api/wrapper/findAllComponents.md)!!! +!!!include(docs/zh/api/wrapper/html.md)!!! +!!!include(docs/zh/api/wrapper/get.md)!!! +!!!include(docs/zh/api/wrapper/is.md)!!! +!!!include(docs/zh/api/wrapper/isEmpty.md)!!! +!!!include(docs/zh/api/wrapper/isVisible.md)!!! +!!!include(docs/zh/api/wrapper/isVueInstance.md)!!! +!!!include(docs/zh/api/wrapper/name.md)!!! +!!!include(docs/zh/api/wrapper/props.md)!!! +!!!include(docs/zh/api/wrapper/setChecked.md)!!! +!!!include(docs/zh/api/wrapper/setData.md)!!! +!!!include(docs/zh/api/wrapper/setMethods.md)!!! +!!!include(docs/zh/api/wrapper/setProps.md)!!! +!!!include(docs/zh/api/wrapper/setSelected.md)!!! +!!!include(docs/zh/api/wrapper/setValue.md)!!! +!!!include(docs/zh/api/wrapper/text.md)!!! +!!!include(docs/zh/api/wrapper/trigger.md)!!! From b4201332158ae2ad96611c953a88590c9da94154 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 6 Sep 2021 10:53:03 +1000 Subject: [PATCH 21/79] build(deps): bump tar from 4.4.13 to 4.4.19 (#1900) Bumps [tar](https://github.com/npm/node-tar) from 4.4.13 to 4.4.19. - [Release notes](https://github.com/npm/node-tar/releases) - [Changelog](https://github.com/npm/node-tar/blob/main/CHANGELOG.md) - [Commits](https://github.com/npm/node-tar/compare/v4.4.13...v4.4.19) --- updated-dependencies: - dependency-name: tar dependency-type: indirect ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- yarn.lock | 47 ++++++++++++++++++++++++----------------------- 1 file changed, 24 insertions(+), 23 deletions(-) diff --git a/yarn.lock b/yarn.lock index c56f09ba9..850f03eac 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4009,10 +4009,10 @@ chokidar@^3.0.0, chokidar@^3.4.1: optionalDependencies: fsevents "~2.1.2" -chownr@^1.1.1, chownr@^1.1.2: - version "1.1.3" - resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.3.tgz#42d837d5239688d55f303003a508230fa6727142" - integrity sha512-i70fVHhmV3DtTl6nqvZOnIjbY0Pe4kAUjwHj8z0zAdgBtYrJyYwLKCCuRBQ5ppkyL0AkN7HKRnETdmdp1zqNXw== +chownr@^1.1.1, chownr@^1.1.2, chownr@^1.1.4: + version "1.1.4" + resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b" + integrity sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg== chrome-trace-event@^1.0.2: version "1.0.2" @@ -6471,11 +6471,12 @@ fs-extra@^7.0.1: jsonfile "^4.0.0" universalify "^0.1.0" -fs-minipass@^1.2.5: - version "1.2.5" - resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-1.2.5.tgz#06c277218454ec288df77ada54a03b8702aacb9d" +fs-minipass@^1.2.7: + version "1.2.7" + resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-1.2.7.tgz#ccff8570841e7fe4265693da88936c55aed7f7c7" + integrity sha512-GWSSJGFy4e9GUeCcbIkED+bgAoFyj7XF1mV8rma3QW4NIqX9Kyx79N/PF61H5udOV3aY1IaMLs6pGbH71nlCTA== dependencies: - minipass "^2.2.1" + minipass "^2.6.0" fs-write-stream-atomic@^1.0.8: version "1.0.10" @@ -9390,7 +9391,7 @@ minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0, minimist@^1.2.5: resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602" integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw== -minipass@^2.2.1, minipass@^2.3.5, minipass@^2.8.6, minipass@^2.9.0: +minipass@^2.3.5, minipass@^2.6.0, minipass@^2.9.0: version "2.9.0" resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.9.0.tgz#e713762e7d3e32fed803115cf93e04bca9fcc9a6" integrity sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg== @@ -9398,7 +9399,7 @@ minipass@^2.2.1, minipass@^2.3.5, minipass@^2.8.6, minipass@^2.9.0: safe-buffer "^5.1.2" yallist "^3.0.0" -minizlib@^1.2.1: +minizlib@^1.3.3: version "1.3.3" resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-1.3.3.tgz#2290de96818a34c29551c8a8d301216bd65a861d" integrity sha512-6ZYMOEnmVsdCeTJVE0W9ZD+pVnE8h9Hma/iOwwRDsdQoePpoX56/8B6z3P9VNwppJuBKNRuFDRNRqRWexT9G9Q== @@ -9441,7 +9442,7 @@ mkdirp-promise@^5.0.1: dependencies: mkdirp "*" -mkdirp@*, mkdirp@0.5.x, mkdirp@0.x, mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@^0.5.5, mkdirp@~0.5.1: +mkdirp@*, mkdirp@0.5.x, mkdirp@0.x, mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@^0.5.5, mkdirp@~0.5.1: version "0.5.5" resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def" integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ== @@ -11699,7 +11700,7 @@ safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1: resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d" integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g== -safe-buffer@>=5.1.0, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@^5.2.0, safe-buffer@~5.2.0: +safe-buffer@>=5.1.0, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@^5.2.0, safe-buffer@^5.2.1, safe-buffer@~5.2.0: version "5.2.1" resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6" integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ== @@ -12701,17 +12702,17 @@ tar-stream@^2.0.0: readable-stream "^3.1.1" tar@^4.4.10, tar@^4.4.12, tar@^4.4.8: - version "4.4.13" - resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.13.tgz#43b364bc52888d555298637b10d60790254ab525" - integrity sha512-w2VwSrBoHa5BsSyH+KxEqeQBAllHhccyMFVHtGtdMpF4W7IRWfZjFiQceJPChOeTsSDVUpER2T8FA93pr0L+QA== + version "4.4.19" + resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.19.tgz#2e4d7263df26f2b914dee10c825ab132123742f3" + integrity sha512-a20gEsvHnWe0ygBY8JbxoM4w3SJdhc7ZAuxkLqh+nvNQN2IOt0B5lLgM490X5Hl8FF0dl0tOf2ewFYAlIFgzVA== dependencies: - chownr "^1.1.1" - fs-minipass "^1.2.5" - minipass "^2.8.6" - minizlib "^1.2.1" - mkdirp "^0.5.0" - safe-buffer "^5.1.2" - yallist "^3.0.3" + chownr "^1.1.4" + fs-minipass "^1.2.7" + minipass "^2.9.0" + minizlib "^1.3.3" + mkdirp "^0.5.5" + safe-buffer "^5.2.1" + yallist "^3.1.1" temp-dir@^1.0.0: version "1.0.0" @@ -14177,7 +14178,7 @@ yallist@^2.1.2: version "2.1.2" resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52" -yallist@^3.0.0, yallist@^3.0.2, yallist@^3.0.3: +yallist@^3.0.0, yallist@^3.0.2, yallist@^3.1.1: version "3.1.1" resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd" integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g== From 60a34388ae6df2cbb3d1fc90c475c47953d4a7d0 Mon Sep 17 00:00:00 2001 From: phrobinet <38053370+phrobinet@users.noreply.github.com> Date: Fri, 24 Sep 2021 03:08:19 +0200 Subject: [PATCH 22/79] docs: Add french Version (#1837) * add french version * add more * update of the french version in relation to the feedback * docs: fix some errors in linting docs * fixed the sidebar and updated the README files in the Wrapper and Installation folders * update with prettier run Co-authored-by: Lachlan Miller --- docs/.vuepress/config.js | 37 ++ docs/fr/README.md | 90 ++++ docs/fr/api/README.md | 11 + docs/fr/api/components/README.md | 4 + docs/fr/api/components/RouterLinkStub.md | 20 + docs/fr/api/config.md | 114 +++++ docs/fr/api/createLocalVue.md | 59 +++ docs/fr/api/createWrapper.md | 25 + docs/fr/api/enableAutoDestroy.md | 25 + docs/fr/api/mount.md | 137 +++++ docs/fr/api/options.md | 475 ++++++++++++++++++ docs/fr/api/render.md | 103 ++++ docs/fr/api/renderToString.md | 101 ++++ docs/fr/api/selectors.md | 60 +++ docs/fr/api/shallowMount.md | 118 +++++ docs/fr/api/wrapper-array/README.md | 29 ++ docs/fr/api/wrapper-array/at.md | 26 + docs/fr/api/wrapper-array/contains.md | 24 + docs/fr/api/wrapper-array/destroy.md | 16 + docs/fr/api/wrapper-array/exists.md | 18 + docs/fr/api/wrapper-array/filter.md | 25 + docs/fr/api/wrapper-array/is.md | 20 + docs/fr/api/wrapper-array/isEmpty.md | 24 + docs/fr/api/wrapper-array/isVisible.md | 21 + docs/fr/api/wrapper-array/isVueInstance.md | 25 + docs/fr/api/wrapper-array/setChecked.md | 39 ++ docs/fr/api/wrapper-array/setData.md | 22 + docs/fr/api/wrapper-array/setMethods.md | 36 ++ docs/fr/api/wrapper-array/setProps.md | 22 + docs/fr/api/wrapper-array/setValue.md | 38 ++ docs/fr/api/wrapper-array/trigger.md | 27 + docs/fr/api/wrapper/README.md | 57 +++ docs/fr/api/wrapper/attributes.md | 20 + docs/fr/api/wrapper/classes.md | 22 + docs/fr/api/wrapper/contains.md | 27 + docs/fr/api/wrapper/destroy.md | 23 + docs/fr/api/wrapper/emitted.md | 61 +++ docs/fr/api/wrapper/emittedByOrder.md | 33 ++ docs/fr/api/wrapper/exists.md | 20 + docs/fr/api/wrapper/find.md | 43 ++ docs/fr/api/wrapper/findAll.md | 32 ++ docs/fr/api/wrapper/findAllComponents.md | 23 + docs/fr/api/wrapper/findComponent.md | 26 + docs/fr/api/wrapper/get.md | 23 + docs/fr/api/wrapper/getComponent.md | 25 + docs/fr/api/wrapper/html.md | 15 + docs/fr/api/wrapper/is.md | 36 ++ docs/fr/api/wrapper/isEmpty.md | 23 + docs/fr/api/wrapper/isVisible.md | 20 + docs/fr/api/wrapper/isVueInstance.md | 23 + docs/fr/api/wrapper/name.md | 21 + docs/fr/api/wrapper/overview.md | 47 ++ docs/fr/api/wrapper/props.md | 26 + docs/fr/api/wrapper/setChecked.md | 30 ++ docs/fr/api/wrapper/setData.md | 22 + docs/fr/api/wrapper/setMethods.md | 34 ++ docs/fr/api/wrapper/setProps.md | 53 ++ docs/fr/api/wrapper/setSelected.md | 26 + docs/fr/api/wrapper/setValue.md | 42 ++ docs/fr/api/wrapper/text.md | 15 + docs/fr/api/wrapper/trigger.md | 53 ++ docs/fr/guides/README.md | 9 + docs/fr/guides/common-tips.md | 343 +++++++++++++ docs/fr/guides/dom-events.md | 217 ++++++++ docs/fr/guides/getting-started.md | 76 +++ docs/fr/guides/testing-async-components.md | 143 ++++++ .../fr/guides/useful-libraries-for-testing.md | 21 + docs/fr/guides/using-with-typescript.md | 157 ++++++ docs/fr/guides/using-with-vue-router.md | 83 +++ docs/fr/guides/using-with-vuex.md | 392 +++++++++++++++ docs/fr/installation/README.md | 5 + docs/fr/installation/semantic-versioning.md | 3 + .../installation/using-other-test-runners.md | 60 +++ docs/fr/installation/using-with-jest.md | 119 +++++ packages/vue2 - Raccourci.lnk | Bin 0 -> 981 bytes 75 files changed, 4340 insertions(+) create mode 100644 docs/fr/README.md create mode 100644 docs/fr/api/README.md create mode 100644 docs/fr/api/components/README.md create mode 100644 docs/fr/api/components/RouterLinkStub.md create mode 100644 docs/fr/api/config.md create mode 100644 docs/fr/api/createLocalVue.md create mode 100644 docs/fr/api/createWrapper.md create mode 100644 docs/fr/api/enableAutoDestroy.md create mode 100644 docs/fr/api/mount.md create mode 100644 docs/fr/api/options.md create mode 100644 docs/fr/api/render.md create mode 100644 docs/fr/api/renderToString.md create mode 100644 docs/fr/api/selectors.md create mode 100644 docs/fr/api/shallowMount.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/exists.md create mode 100644 docs/fr/api/wrapper-array/filter.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/isVisible.md create mode 100644 docs/fr/api/wrapper-array/isVueInstance.md create mode 100644 docs/fr/api/wrapper-array/setChecked.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/setValue.md create mode 100644 docs/fr/api/wrapper-array/trigger.md create mode 100644 docs/fr/api/wrapper/README.md create mode 100644 docs/fr/api/wrapper/attributes.md create mode 100644 docs/fr/api/wrapper/classes.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/findAllComponents.md create mode 100644 docs/fr/api/wrapper/findComponent.md create mode 100644 docs/fr/api/wrapper/get.md create mode 100644 docs/fr/api/wrapper/getComponent.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/isVisible.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/overview.md create mode 100644 docs/fr/api/wrapper/props.md create mode 100644 docs/fr/api/wrapper/setChecked.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/setSelected.md create mode 100644 docs/fr/api/wrapper/setValue.md create mode 100644 docs/fr/api/wrapper/text.md create mode 100644 docs/fr/api/wrapper/trigger.md create mode 100644 docs/fr/guides/README.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-async-components.md create mode 100644 docs/fr/guides/useful-libraries-for-testing.md create mode 100644 docs/fr/guides/using-with-typescript.md create mode 100644 docs/fr/guides/using-with-vue-router.md create mode 100644 docs/fr/guides/using-with-vuex.md create mode 100644 docs/fr/installation/README.md create mode 100644 docs/fr/installation/semantic-versioning.md create mode 100644 docs/fr/installation/using-other-test-runners.md create mode 100644 docs/fr/installation/using-with-jest.md create mode 100644 packages/vue2 - Raccourci.lnk diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 96abb7d92..ce06a350a 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -19,6 +19,11 @@ module.exports = { lang: 'ru', title: 'Vue Test Utils', description: 'Библиотека для тестирования Vue-компонентов' + }, + '/fr/': { + title: 'Vue Test Utils', + lang: 'fr', + description: 'Utilitaires pour tester les composants Vue' } }, plugins: ['@vuepress/pwa'], @@ -167,6 +172,38 @@ module.exports = { '/ru/api/options', '/ru/api/components/' ] + }, + '/fr/': { + label: 'Français', + selectText: 'langue', + editLinkText: 'Modifier cette page sur GitHub', + nav: [ + { + text: 'API', + link: '/fr/api/' + }, + { + text: 'Guides', + link: '/fr/guides/', + items: [ + { + text: '2.x-beta', + link: + 'https://vuejs.github.io/vue-test-utils-next-docs/guide/introduction.html' + } + ] + } + ], + sidebar: [ + '/fr/', + '/fr/installation/', + '/fr/guides/', + '/fr/api/', + '/fr/api/wrapper/', + '/fr/api/wrapper-array/', + '/fr/api/options', + '/fr/api/components/' + ] } } }, diff --git a/docs/fr/README.md b/docs/fr/README.md new file mode 100644 index 000000000..0a348e614 --- /dev/null +++ b/docs/fr/README.md @@ -0,0 +1,90 @@ +# Introduction + +Vue Test Utils est la bibliothèque officielle de tests unitaires pour Vue.js. + +Voici la documentation de Vue Test Utils v1, qui vise Vue 2 et les versions antérieures. + +En bref : + +- [Vue Test Utils 1](https://github.com/vuejs/vue-test-utils/) ciblant [Vue 2](https://github.com/vuejs/vue/). +- [Vue Test Utils 2](https://github.com/vuejs/vue-test-utils-next/) ciblant [Vue 3](https://github.com/vuejs/vue-next/). + +
Apprenez comment tester les composants de Vue.js avec Vue School
+ +- [Installation](./installation/) +- [Guides](./guides/) + - [Pour commencer](./guides/getting-started.md) + - [Les Conseils pratiques](guides/common-tips.md) + - [Test des touches, de la souris et d'autres événements DOM](guides/dom-events.md) + - [Tester le comportement asynchrone](guides/testing-async-components.md) + - [Utilisation avec TypeScript](guides/using-with-typescript.md) + - [Utilisation avec Vue Router](guides/using-with-vue-router.md) + - [Utilisation avec Vuex](guides/using-with-vuex.md) + - [Bibliothèques utiles pour les tests](guides/useful-libraries-for-testing.md) +- [API](api/) + - [mount](api/mount.md) + - [shallowMount](api/shallowMount.md) + - [render](api/render.md) + - [renderToString](api/renderToString.md) + - [Mounting Options](api/options.md) + - [context](api/options.md#context) + - [slots](api/options.md#slots) + - [scopedSlots](api/options.md#scopedslots) + - [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) + - [propsData](api/options.md#propsdata) + - [listeners](api/options.md#listeners) + - [parentComponent](api/options.md#parentComponent) + - [provide](api/options.md#provide) + - [other options](api/options.md#other-options) + - [Wrapper](api/wrapper/) + - [attributes](api/wrapper/attributes.md) + - [classes](api/wrapper/classes.md) + - [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) + - [get](api/wrapper/get.md) + - [html](api/wrapper/html.md) + - [is](api/wrapper/is.md) + - [isEmpty](api/wrapper/isEmpty.md) + - [isVueInstance](api/wrapper/isVueInstance.md) + - [name](api/wrapper/name.md) + - [props](api/wrapper/props.md) + - [setChecked](api/wrapper/setChecked.md) + - [setData](api/wrapper/setData.md) + - [setMethods](api/wrapper/setMethods.md) + - [setProps](api/wrapper/setProps.md) + - [setSelected](api/wrapper/setSelected.md) + - [setValue](api/wrapper/setValue.md) + - [text](api/wrapper/text.md) + - [trigger](api/wrapper/trigger.md) + - [isVisible](api/wrapper/isVisible.md) + - [WrapperArray](api/wrapper-array/) + - [at](api/wrapper-array/at.md) + - [contains](api/wrapper-array/contains.md) + - [exists](api/wrapper/exists.md) + - [destroy](api/wrapper-array/destroy.md) + - [filter](api/wrapper-array/filter.md) + - [is](api/wrapper-array/is.md) + - [isEmpty](api/wrapper-array/isEmpty.md) + - [isVueInstance](api/wrapper-array/isVueInstance.md) + - [setChecked](api/wrapper-array/setChecked.md) + - [setData](api/wrapper-array/setData.md) + - [setMethods](api/wrapper-array/setMethods.md) + - [setProps](api/wrapper-array/setProps.md) + - [setValue](api/wrapper-array/setValue.md) + - [trigger](api/wrapper-array/trigger.md) + - [isVisible](api/wrapper-array/isVisible.md) + - [components](api/components/) + - [RouterLinkStub](api/components/RouterLinkStub.md) + - [Selectors](api/selectors.md) + - [createWrapper](api/createWrapper.md) + - [createLocalVue](api/createLocalVue.md) + - [config](api/config.md) diff --git a/docs/fr/api/README.md b/docs/fr/api/README.md new file mode 100644 index 000000000..a5ce70cf9 --- /dev/null +++ b/docs/fr/api/README.md @@ -0,0 +1,11 @@ +# API + +!!!include(docs/fr/api/mount.md)!!! +!!!include(docs/fr/api/shallowMount.md)!!! +!!!include(docs/fr/api/render.md)!!! +!!!include(docs/fr/api/renderToString.md)!!! +!!!include(docs/fr/api/selectors.md)!!! +!!!include(docs/fr/api/createLocalVue.md)!!! +!!!include(docs/fr/api/createWrapper.md)!!! +!!!include(docs/fr/api/config.md)!!! +!!!include(docs/fr/api/enableAutoDestroy.md)!!! diff --git a/docs/fr/api/components/README.md b/docs/fr/api/components/README.md new file mode 100644 index 000000000..f2da50ea6 --- /dev/null +++ b/docs/fr/api/components/README.md @@ -0,0 +1,4 @@ +# Components + +Vue Test Utils comprend des composants utilitaires que vous pouvez utiliser pour avoir des composants de remplacement (stubs). +!!!include(docs/fr/api/components/RouterLinkStub.md)!!! diff --git a/docs/fr/api/components/RouterLinkStub.md b/docs/fr/api/components/RouterLinkStub.md new file mode 100644 index 000000000..7fd0ba7eb --- /dev/null +++ b/docs/fr/api/components/RouterLinkStub.md @@ -0,0 +1,20 @@ +## RouterLinkStub + +Un composant pour mettre en place le composant Vue Router `router-link`. + +Vous pouvez utiliser ce composant pour trouver un composant router-link dans l'arbre de rendu. + +- **Usage:** + +Pour le définir comme un stub dans les options de montage : + +```js +import { mount, RouterLinkStub } from '@vue/test-utils' + +const wrapper = mount(Component, { + stubs: { + RouterLink: RouterLinkStub + } +}) +expect(wrapper.find(RouterLinkStub).props().to).toBe('/some/path') +``` diff --git a/docs/fr/api/config.md b/docs/fr/api/config.md new file mode 100644 index 000000000..416587948 --- /dev/null +++ b/docs/fr/api/config.md @@ -0,0 +1,114 @@ +## Config + +Vue Test Utils comprend un objet de configuration des options définies utilisées par Vue Test Utils. + +### Vue Test Utils Config Options + +### `showDeprecationWarnings` + +- type: `Boolean` +- default: `true` + +Contrôler s'il faut ou non afficher des avertissements de dépréciation . Lorsqu'il est sur `true`, tous les avertissements de dépréciation sont visibles dans la console. + +Exemple: + +```js +import { config } from '@vue/test-utils' + +config.showDeprecationWarnings = false +``` + +### `deprecationWarningHandler` + +- type: `Function` + +Permet un contrôle fin des avertissements de dépréciation. Lorsque `showDeprecationWarnings` est défini à `true`, tous les avertissements de dépréciation seront passés à ce gestionnaire avec le nom de la méthode comme premier argument et le message original comme second. + +::: tip +Cela peut être utile pour enregistrer les messages de dépréciation à un endroit séparé ou pour aider à la mise à jour progressive de la base de code vers la dernière version de test utils en ignorant certains avertissements de fonctions dépréciées. +::: + +Example: + +```js +import { config } from '@vue/test-utils' + +config.showDeprecationWarnings = true +config.deprecationWarningHandler = (method, message) => { + if (method === 'emittedByOrder') return + + console.error(msg) +} +``` + +### `stubs` + +- type: `{ [name: string]: Component | boolean | string }` +- default: `{}` + +Le stub stocké dans `config.stubs` est utilisé par défaut. +Les stubs sont à utiliser dans les composants. Ils sont écrasés par les `stubs` passés dans les options de montage. + +Lorsque l'on passe des `stubs` sous forme de tableau dans les options de montage, les `config.stubs` sont convertis en un tableau, et vont stuber les composants avec un composant de base qui retourne `<${component name}-stub>`. + +Exemple: + +```js +import { config } from '@vue/test-utils' + +config.stubs['my-component'] = '
' +``` + +### `mocks` + +- type: `Object` +- default: `{}` + +Comme pour les `stubs`, les valeurs passées à `config.mocks` sont utilisées par défaut. Toute valeur passée à l'objet d'options de montage `mocks` aura la priorité sur celles déclarées dans `config.mocks`. + +Exemple: + +```js +import { config } from '@vue/test-utils' + +config.mocks['$store'] = { + state: { + id: 1 + } +} +``` + +### `methods` + +- type: `{ [name: string]: Function }` +- default: `{}` + +Vous pouvez configurer les méthodes par défaut en utilisant l'objet `config`. Cela peut être utile pour les plugins qui injectent des méthodes aux composants, comme [VeeValidate](https://logaretm.github.io/vee-validate/). Vous pouvez surcharger les méthodes définies dans `config` en passant des `méthodes` dans les options de montage. + +Exemple: + +```js +import { config } from '@vue/test-utils' + +config.methods['getData'] = () => {} +``` + +### `provide` + +- type: `Object` +- default: `{}` + +Comme les `stubs` ou `mocks`, les valeurs passées à "config.provide" sont utilisées par défaut. Toutes les valeurs passées à l'objet d'options de montage `provide` auront la priorité sur celles déclarées dans `config.provide`. **Veuillez noter qu'il n'est pas possible de passer une fonction comme `config.provide`.** + +Exemple: + +```js +import { config } from '@vue/test-utils' + +config.provide['$logger'] = { + log: (...args) => { + console.log(...args) + } +} +``` diff --git a/docs/fr/api/createLocalVue.md b/docs/fr/api/createLocalVue.md new file mode 100644 index 000000000..a8d646872 --- /dev/null +++ b/docs/fr/api/createLocalVue.md @@ -0,0 +1,59 @@ +## createLocalVue() + +- **Arguments:** + + - `{Object} options` + - `{Function} errorHandler` + +- **Retours:** + + - `{Component}` + +- **Usage:** + +`createLocalVue` renvoie une classe Vue pour que vous puissiez ajouter des composants, des mixins et installer des plugins sans polluer la classe Vue globale. + +L'option `errorHandler` peut être utilisée pour gérer les erreurs non attrapées pendant la fonction de rendu du composant et les observateurs. + +Utilisez-la avec `options.localVue`: + +**Sans les options:** + +```js +import { createLocalVue, shallowMount } from '@vue/test-utils' +import MyPlugin from 'my-plugin' +import Foo from './Foo.vue' + +const localVue = createLocalVue() +localVue.use(MyPlugin) +const wrapper = shallowMount(Foo, { + localVue, + mocks: { foo: true } +}) +expect(wrapper.vm.foo).toBe(true) + +const freshWrapper = shallowMount(Foo) +expect(freshWrapper.vm.foo).toBe(false) +``` + +**Avec l'option [`errorHandler`](https://vuejs.org/v2/api/#errorHandler):** + +```js +import { createLocalVue, shallowMount } from '@vue/test-utils' +import Foo from './Foo.vue' + +const errorHandler = (err, vm, info) => { + expect(err).toBeInstanceOf(Error) +} + +const localVue = createLocalVue({ + errorHandler +}) + +// Foo lance une erreur à l'intérieur d'un crochet de cycle de vie +const wrapper = shallowMount(Foo, { + localVue +}) +``` + +- **Voir aussi:** [Common Tips](../guides/common-tips.md#applying-global-plugins-and-mixins) diff --git a/docs/fr/api/createWrapper.md b/docs/fr/api/createWrapper.md new file mode 100644 index 000000000..d750d1893 --- /dev/null +++ b/docs/fr/api/createWrapper.md @@ -0,0 +1,25 @@ +## createWrapper(node [, options]) + +- **Arguments:** + + - `{vm|HTMLElement} node` + - `{Object} options` + - `{Boolean} attachedToDocument` + +- **Retours:** + + - `{Wrapper}` + +- **Usage:** + +`createWrapper` crée un `Wrapper` pour une instance Vue montée, ou un élément HTML. + +```js +import { createWrapper } from '@vue/test-utils' +import Foo from './Foo.vue' + +const Constructor = Vue.extend(Foo) +const vm = new Constructor().$mount() +const wrapper = createWrapper(vm) +expect(wrapper.vm.foo).toBe(true) +``` diff --git a/docs/fr/api/enableAutoDestroy.md b/docs/fr/api/enableAutoDestroy.md new file mode 100644 index 000000000..3f14e31f2 --- /dev/null +++ b/docs/fr/api/enableAutoDestroy.md @@ -0,0 +1,25 @@ +## enableAutoDestroy(hook) + +- **Arguments:** + + - `{Function} hook` + +- **Usage:** + +`enableAutoDestroy` détruira toutes les instances de `Wrapper` en utilisant la fonction de hook passée (par exemple [`afterEach`](https://jestjs.io/docs/en/api#aftereachfn-timeout)). Après avoir appelé la méthode, vous pouvez revenir au comportement par défaut en appelant la méthode `resetAutoDestroyState`. + +```js +import { enableAutoDestroy, mount } from '@vue/test-utils' +import Foo from './Foo.vue' + +// appelle wrapper.destroy() après chaque test +enableAutoDestroy(afterEach) + +describe('Foo', () => { + it('renders a div', () => { + const wrapper = mount(Foo) + expect(wrapper.contains('div')).toBe(true) + // pas besoin d'appeler wrapper.destroy() ici + }) +}) +``` diff --git a/docs/fr/api/mount.md b/docs/fr/api/mount.md new file mode 100644 index 000000000..924d51448 --- /dev/null +++ b/docs/fr/api/mount.md @@ -0,0 +1,137 @@ +## mount() + +- **Arguments:** + + - `{Component} component` + - `{Object} options` + +- **Retours:** `{Wrapper}` + +- **Options:** + +Voir [options](options.md) + +- **Usage:** + +Crée un [`Wrapper`](wrapper/) qui contient le composant Vue monté et rendu. + +**Sans les options:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' + +describe('Foo', () => { + it('renders a div', () => { + const wrapper = mount(Foo) + expect(wrapper.contains('div')).toBe(true) + }) +}) +``` + +**Avec les options Vue:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' + +describe('Foo', () => { + it('renders a div', () => { + const wrapper = mount(Foo, { + propsData: { + color: 'red' + } + }) + expect(wrapper.props().color).toBe('red') + }) +}) +``` + +**Attacher au DOM:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' + +describe('Foo', () => { + it('renders a div', () => { + const div = document.createElement('div') + document.body.appendChild(div) + const wrapper = mount(Foo, { + attachTo: div + }) + expect(wrapper.contains('div')).toBe(true) + wrapper.destroy() + }) +}) +``` + +**Les slots par défauts et nommés :** + +```js +import { mount } from '@vue/test-utils' +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, // Correspondra ``. + foo: '
' + } + }) + expect(wrapper.contains('div')).toBe(true) + }) +}) +``` + +**Les propriétés globales des Stubbing :** + +```js +import { mount } from '@vue/test-utils' +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) + }) +}) +``` + +**Les composants Stubbing** + +```js +import { mount } from '@vue/test-utils' +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, { + stubs: { + BarFoo: true, + FooBar: Faz, + Bar: { template: '
' } + } + }) + expect(wrapper.contains('.stubbed')).toBe(true) + expect(wrapper.contains(Bar)).toBe(true) + }) +}) +``` + +**Avis de déprédation:** + +Lors du stubbing de composants, la fourniture d'une chaîne de caractères (`ComponentToStub : '
`) n'est plus supportée. + +- **Voir aussi :** [Wrapper](wrapper/) diff --git a/docs/fr/api/options.md b/docs/fr/api/options.md new file mode 100644 index 000000000..ed2171e5f --- /dev/null +++ b/docs/fr/api/options.md @@ -0,0 +1,475 @@ +# L'option Mount + +Options pour `mount` et `shallowMount`. + +:::tip +Outre les options documentées ci-dessous, l'objet `options` peut contenir toute option qui serait valide dans un appel à `new Vue ({ /*les options ici*/ }). Ces options seront fusionnées avec les options existantes du composant lorsqu'il sera monté avec`mount`/`shallowMount` + +[Voir les autres options pour des exemples](#other-options) +::: + +- [Mounting Options](#mounting-options) + - [context](#context) + - [data](#data) + - [slots](#slots) + - [scopedSlots](#scopedslots) + - [stubs](#stubs) + - [mocks](#mocks) + - [localVue](#localvue) + - [attachTo](#attachto) + - [attachToDocument](#attachtodocument) + - [attrs](#attrs) + - [propsData](#propsdata) + - [listeners](#listeners) + - [parentComponent](#parentcomponent) + - [provide](#provide) + - [Other options](#other-options) + +## context + +- type: `Object` + +Transmet du contexte à la composante fonctionnelle. Ne peut être utilisé qu'avec des [composants fonctionnels](https://vuejs.org/v2/guide/render-function.html#Functional-Components). + +Exemple: + +```js +import Foo from './Foo.vue' +import Bar from './Bar.vue' + +const wrapper = mount(Component, { + context: { + props: { show: true }, + children: [Foo, Bar] + } +}) + +expect(wrapper.is(Component)).toBe(true) +``` + +## data + +- type: `Function` + +Transmet les données à un composant. Il fusionnera avec la fonction `data` existante. + +Exemple: + +```js +const Component = { + template: ` +
+ {{ foo }} + {{ bar }} +
+ `, + + data() { + return { + foo: 'foo', + bar: 'bar' + } + } +} + +const wrapper = mount(Component, { + data() { + return { + bar: 'my-override' + } + } +}) + +wrapper.find('#foo').text() // 'foo' +wrapper.find('#bar').text() // 'my-override' +``` + +## slots + +- type: `{ [name: string]: Array|Component|string }` + +Fournis un objet de contenu slot au composant . La clé correspond au nom du slot. La valeur peut être soit un composant , soit un tableau de composants, soit une chaîne de modèle, soit du texte. + +Exemple: + +```js +import Foo from './Foo.vue' +import MyComponent from './MyComponent.vue' + +const bazComponent = { + name: 'baz-component', + template: '

baz

' +} + +const yourComponent = { + props: { + foo: { + type: String, + required: true + } + }, + render(h) { + return h('p', this.foo) + } +} + +const wrapper = shallowMount(Component, { + slots: { + default: [Foo, '', 'text'], + fooBar: Foo, // Correspondra à ``. + foo: '
', + bar: 'bar', + baz: bazComponent, + qux: '', + quux: '' + }, + stubs: { + // utilisé pour enregistrer les composants personnalisés + 'my-component': MyComponent, + 'your-component': yourComponent + }, + mocks: { + // utilisé pour ajouter des propriétés au contexte de rendu + yourProperty: 'ipsum' + } +}) + +expect(wrapper.find('div')).toBe(true) +``` + +## scopedSlots + +- type: `{ [name: string]: string|Function }` + +Fournis un objet de portée slot au composant. La clé correspond au nom du slot. + +Vous pouvez définir le nom des props à l'aide de l'attribut slot-scope : + +```js +shallowMount(Component, { + scopedSlots: { + foo: '

{{foo.index}},{{foo.text}}

' + } +}) +``` + +Sinon, les props sont disponibles en tant qu'objet `props` lorsque le slot est évalué : + +```js +shallowMount(Component, { + scopedSlots: { + default: '

{{props.index}},{{props.text}}

' + } +}) +``` + +Vous pouvez également passer une fonction qui prend les props comme argument : + +```js +shallowMount(Component, { + scopedSlots: { + foo: function(props) { + return this.$createElement('div', props.index) + } + } +}) +``` + +Ou vous pouvez utiliser JSX. Si vous écrivez JSX dans une méthode, `this.$createElement` est auto-injectée par babel-plugin-transform-vue-jsx : + +```js +shallowMount(Component, { + scopedSlots: { + foo(props) { + return
{props.text}
+ } + } +}) +``` + +::: warning Élément Racine requis +En raison de la mise en œuvre interne de cette fonctionnalité, le contenu du slot doit renvoyer un élément racine, même si un slot porté est autorisé à renvoyer un ensemble d'éléments. + +Si vous avez besoin de cette fonctionnalité dans un test, la solution recommandée est d'envelopper le composant testé dans un autre composant et de monter celui-ci : +::: + +```javascript +const WrapperComp = { + template: ` + +

Using the {{props.a}}

+

Using the {{props.a}}

+ + `, + components: { + ComponentUnderTest + } +} +const wrapper = mount(WrapperComp).find(ComponentUnderTest) +``` + +## stubs + +- type: `{ [name: string]: Component | string | boolean } | Array` + +Les composants enfants Stubs peuvent être un tableau de noms de composants à un stub, ou un objet. Si le `stubs` est un tableau, chaque stub est `<${component name}-stub>`. + +**Avis de déprédation :** + +Lors de l'ajout de composants, la fourniture d'une chaîne de caractères (`ComponentToStub: '
`) n'est plus supportée. + +Exemple: + +```js +import Foo from './Foo.vue' + +mount(Component, { + stubs: ['registered-component'] +}) + +shallowMount(Component, { + stubs: { + // stub avec une implémentation spécifique + 'registered-component': Foo, + // créer un stub par défaut. + // le nom du composant du stub par défaut est un autre composant dans ce cas. + // le stub par défaut est <${the component name of default stub}-stub>. + 'another-component': true + } +}) +``` + +## mocks + +- type: `Object` + +Ajouter des propriétés supplémentaires à l'instance. Utile pour simuler des injections globales. + +Exemple: + +```js +const $route = { path: 'http://www.example-path.com' } +const wrapper = shallowMount(Component, { + mocks: { + $route + } +}) +expect(wrapper.vm.$route.path).toBe($route.path) +``` + +::: tip +Pour simuler `$root` veuillez utiliser l'option `parentComponent` comme décrit [ici](https://github.com/vuejs/vue-test-utils/issues/481#issuecomment-423716430) +::: + +## localVue + +- type: `Vue` + +Une copie locale de Vue créée par [`createLocalVue`](./createLocalVue.md) à utiliser lors du montage du composant. L'installation de plugins sur cette copie de `Vue` évite de polluer la copie originale de `Vue`. + +Exemple: + +```js +import { createLocalVue, mount } from '@vue/test-utils' +import VueRouter from 'vue-router' +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) +``` + +## attachTo + +- type: `HTMLElement | string` +- default: `null` + +Il spécifie soit un HTMLElement spécifique, soit une chaîne de sélection CSS ciblant un HTMLElement, sur lequel votre composant sera entièrement monté dans le document. + +Lorsque vous le fixez au DOM, vous devez appeler `wrapper.destroy()` à la fin de votre test pour +supprimer les éléments rendus du document et détruire l'instance constitutive. + +::: tip +Lorsque vous utilisez `attachTo : document.body`, une nouvelle `div` sera ajoutée au lieu de remplacer le corps entier. Ceci est conçu pour imiter le comportement de Vue3 et simplifier une future migration. Voir [ce commentaire](https://github.com/vuejs/vue-test-utils/issues/1578#issuecomment-674652747) pour plus de détails +::: + +```js +const div = document.createElement('div') +div.id = 'root' +document.body.appendChild(div) + +const Component = { + template: '
ABC
' +} +let wrapper = mount(Component, { + attachTo: '#root' +}) +expect(wrapper.vm.$el.parentNode).to.not.be.null +wrapper.destroy() + +wrapper = mount(Component, { + attachTo: document.getElementById('root') +}) +expect(wrapper.vm.$el.parentNode).to.not.be.null +wrapper.destroy() +``` + +## attachToDocument + +- type: `boolean` +- default: `false` + +::: warning Avertissement de déprédation +L'option `attachToDocument` est dépréciée et sera supprimée dans les prochaines versions. Utilisez plutôt [`attachTo`](#attachto). Par exemple, si vous devez attacher le composant au document.body : + +```js +const elem = document.createElement('div') +if (document.body) { + document.body.appendChild(elem) +} +wrapper = mount(Component, { + attachTo: elem +}) +``` + +::: + +Comme [`attachTo`](#attachto), mais crée automatiquement un nouvel élément `div` pour vous et l'insère dans le corps. + +Lorsque vous l'attachez au DOM, vous devez appeler `wrapper.destroy()` à la fin de votre test pour +supprimer les éléments rendus du document et détruire l'instance constitutive. + +## attrs + +- type: `Object` + +Défini l'objet `$attrs` de l'instance du composant. + +## propsData + +- type: `Object` + +Défini les props de l'instance du composant lorsque le composant est monté. + +Exemple: + +```js +const Component = { + template: '
{{ msg }}
', + props: ['msg'] +} +const wrapper = mount(Component, { + propsData: { + msg: 'aBC' + } +}) +expect(wrapper.text()).toBe('aBC') +``` + +::: tip +Il convient de noter que "propsData" est en fait une [API Vue](https://vuejs.org/v2/api/#propsData), et non une +option de montage de Vue Test Utils. Il est traité par [`extends`](https://vuejs.org/v2/api/#extends). +Veuillez consulter [les autres options](#other-options). +::: + +## listeners + +- type: `Object` + +Défini l'objet `$listeners`de l'instance du composant. + +Exemple: + +```js +const Component = { + template: '' +} +const onClick = jest.fn() +const wrapper = mount(Component, { + listeners: { + click: onClick + } +}) + +wrapper.trigger('click') +expect(onClick).toHaveBeenCalled() +``` + +## parentComponent + +- type: `Object` + +Composant à utiliser comme parent pour un composant monté. + +Exemple: + +```js +import Foo from './Foo.vue' + +const wrapper = shallowMount(Component, { + parentComponent: Foo +}) +expect(wrapper.vm.$parent.$options.name).toBe('foo') +``` + +## provide + +- type: `Object` + +Passe les propriétés des composants à utiliser dans l'injection. Voir [provide/inject](https://vuejs.org/v2/api/#provide-inject). + +Exemple: + +```js +const Component = { + inject: ['foo'], + template: '
{{this.foo()}}
' +} + +const wrapper = shallowMount(Component, { + provide: { + foo() { + return 'fooValue' + } + } +}) + +expect(wrapper.text()).toBe('fooValue') +``` + +## Les autres options + +Lorsque les options pour `mount` et `shallowMount` contiennent des options autres que les options de montage, les options des composants sont écrasées par celles qui utilisent [extends](https://vuejs.org/v2/api/#extends). + +```js +const Component = { + template: '
{{ foo }}
', + data() { + return { + foo: 'fromComponent' + } + } +} +const options = { + data() { + return { + foo: 'fromOptions' + } + } +} + +const wrapper = mount(Component, options) + +expect(wrapper.text()).toBe('fromOptions') +``` diff --git a/docs/fr/api/render.md b/docs/fr/api/render.md new file mode 100644 index 000000000..ced641c95 --- /dev/null +++ b/docs/fr/api/render.md @@ -0,0 +1,103 @@ +## render() + +- **Arguments:** + + - `{Component} component` + - `{Object} options` + - `{Object} context` + - `{Array|Component} children` + - `{Object} slots` + - `{Array|Component|String} default` + - `{Array|Component|String} named` + - `{Object} mocks` + - `{Object|Array} stubs` + - `{Vue} localVue` + +- **Retours:** `{Promise}` + +- **Options:** + +Voir [les options](./options.md) + +- **Usage:** + +Rend un objet en chaîne de caractères et retourne un [cheerio wrapper](https://github.com/cheeriojs/cheerio). + +Cheerio est une bibliothèque de type jQuery pour parcourir le DOM dans Node.js. Elle possède une API similaire à celle de [`Wrapper`](wrapper/) Vue Test Utils . + +`render` utilise [`vue-server-renderer`](https://ssr.vuejs.org/en/basic.html) sous le capot, pour rendre un composant en HTML statique. + +`render` est inclus dans le paquet `@vue/server-test-utils`. + +**Sans les options:** + +```js +import { render } from '@vue/server-test-utils' +import Foo from './Foo.vue' + +describe('Foo', () => { + it('renders a div', async () => { + const wrapper = await render(Foo) + expect(wrapper.text()).toContain('
') + }) +}) +``` + +**Avec les options de Vue:** + +```js +import { render } from '@vue/server-test-utils' +import Foo from './Foo.vue' + +describe('Foo', () => { + it('renders a div', async () => { + const wrapper = await render(Foo, { + propsData: { + color: 'red' + } + }) + expect(wrapper.text()).toContain('red') + }) +}) +``` + +**Les slots par défaut et nommés:** + +```js +import { render } from '@vue/server-test-utils' +import Foo from './Foo.vue' +import Bar from './Bar.vue' +import FooBar from './FooBar.vue' + +describe('Foo', () => { + it('renders a div', async () => { + const wrapper = await render(Foo, { + slots: { + default: [Bar, FooBar], + fooBar: FooBar, // Correspondra à , + foo: '
' + } + }) + expect(wrapper.text()).toContain('
') + }) +}) +``` + +**Les propriétés globales des Stubbing:** + +```js +import { render } from '@vue/server-test-utils' +import Foo from './Foo.vue' + +describe('Foo', () => { + it('renders a div', async () => { + const $route = { path: 'http://www.example-path.com' } + const wrapper = await render(Foo, { + mocks: { + $route + } + }) + expect(wrapper.text()).toContain($route.path) + }) +}) +``` diff --git a/docs/fr/api/renderToString.md b/docs/fr/api/renderToString.md new file mode 100644 index 000000000..608116502 --- /dev/null +++ b/docs/fr/api/renderToString.md @@ -0,0 +1,101 @@ +## renderToString() + +- **Arguments:** + + - `{Component} component` + - `{Object} options` + - `{Object} context` + - `{Array|Component} children` + - `{Object} slots` + - `{Array|Component|String} default` + - `{Array|Component|String} named` + - `{Object} mocks` + - `{Object|Array} stubs` + - `{Vue} localVue` + +- **Retours:** `{Promise}` + +- **Options:** + +See [options](./options.md) + +- **Usage:** + +Rends un composant en HTML. + +`renderToString` utilise [`vue-server-renderer`](https://ssr.vuejs.org/en/basic.html) sous le capot, pour rendre un composant en HTML statique. + +`renderToString` est inclus dans le paquet `@vue/server-test-utils`. + +**Sans les options:** + +```js +import { renderToString } from '@vue/server-test-utils' +import Foo from './Foo.vue' + +describe('Foo', () => { + it('renders a div', async () => { + const str = await renderToString(Foo) + expect(str).toContain('
') + }) +}) +``` + +**Avec les options de Vue:** + +```js +import { renderToString } from '@vue/server-test-utils' +import Foo from './Foo.vue' + +describe('Foo', () => { + it('renders a div', async () => { + const str = await renderToString(Foo, { + propsData: { + color: 'red' + } + }) + expect(str).toContain('red') + }) +}) +``` + +**Les slots par défaut et nommés:** + +```js +import { renderToString } from '@vue/server-test-utils' +import Foo from './Foo.vue' +import Bar from './Bar.vue' +import FooBar from './FooBar.vue' + +describe('Foo', () => { + it('renders a div', async () => { + const str = await renderToString(Foo, { + slots: { + default: [Bar, FooBar], + fooBar: FooBar, // Correspondra à , + foo: '
' + } + }) + expect(str).toContain('
') + }) +}) +``` + +**Les propriétés globales des Stubbing :** + +```js +import { renderToString } from '@vue/server-test-utils' +import Foo from './Foo.vue' + +describe('Foo', () => { + it('renders a div', async () => { + const $route = { path: 'http://www.example-path.com' } + const str = await renderToString(Foo, { + mocks: { + $route + } + }) + expect(str).toContain($route.path) + }) +}) +``` diff --git a/docs/fr/api/selectors.md b/docs/fr/api/selectors.md new file mode 100644 index 000000000..745278ae9 --- /dev/null +++ b/docs/fr/api/selectors.md @@ -0,0 +1,60 @@ +## Les Sélecteurs + +Beaucoup de méthodes prennent un sélecteur comme argument. Un sélecteur peut être soit un sélecteur CSS, un composant Vue ou un objet d'option de recherche. + +### Les sélecteurs CSS + +Mount gère tous les sélecteurs CSS valide : + +- sélecteur de balise (`div`, `foo`, `bar`) +- sélecteur de classe(`.foo`, `.bar`) +- sélecteur d'attribut(`[foo]`, `[foo="bar"]`) +- sélecteur d'ID (`#foo`, `#bar`) +- sélecteur de pseudo-classe (`div:first-of-type`) + +Vous pouvez également utiliser des combinateurs: + +- combinateurs de descendance direct (`div > #bar > .foo`) +- combinateurs de descendance général (`div #bar .foo`) +- sélecteur de frére adjacent (`div + .foo`) +- sélecteur de frère général (`div ~ .foo`) + +### Les composants Vue + +Les composants de Vue sont également des sélecteurs valables. + +```js +// Foo.vue + +export default { + name: 'FooComponent' +} +``` + +```js +import { shallowMount } from '@vue/test-utils' +import Foo from './Foo.vue' + +const wrapper = shallowMount(Foo) +expect(wrapper.is(Foo)).toBe(true) +``` + +### L'option objet `find` + +#### Name + +En utilisant un objet d'option de recherche, Vue Test Utils permet de sélectionner des éléments par un `name` de composant sur les composants wrapper. + +```js +const buttonWrapper = wrapper.find({ name: 'my-button' }) +buttonWrapper.trigger('click') +``` + +#### Ref + +En utilisant un objet d'option de recherche, Vue Test Utils permet de sélectionner des éléments par `$ref` sur les composants wrapper + +```js +const buttonWrapper = wrapper.find({ ref: 'myButton' }) +buttonWrapper.trigger('click') +``` diff --git a/docs/fr/api/shallowMount.md b/docs/fr/api/shallowMount.md new file mode 100644 index 000000000..6fce13b30 --- /dev/null +++ b/docs/fr/api/shallowMount.md @@ -0,0 +1,118 @@ +## shallowMount() + +- **Arguments:** + + - `{Component} component` + - `{Object} options` + - `{HTMLElement|string} string` + - `{boolean} attachToDocument` + - `{Object} context` + - `{Array|Component} children` + - `{Object} slots` + - `{Array|Component|String} default` + - `{Array|Component|String} named` + - `{Object} mocks` + - `{Object|Array} stubs` + - `{Vue} localVue` + +- **Retours:** `{Wrapper}` + +- **Options:** + +See [options](./options.md) + +- **Usage:** + +Comme [`mount`](mount.md), il crée un [`Wrapper`](wrapper/) qui contient le composant Vue monté et rendu, mais avec des composants enfants écrasés. + +**Sans les options:** + +```js +import { shallowMount } from '@vue/test-utils' +import Foo from './Foo.vue' + +describe('Foo', () => { + it('renders a div', () => { + const wrapper = shallowMount(Foo) + expect(wrapper.contains('div')).toBe(true) + }) +}) +``` + +**Avec les options de Vue:** + +```js +import { shallowMount } from '@vue/test-utils' +import Foo from './Foo.vue' + +describe('Foo', () => { + it('renders a div', () => { + const wrapper = shallowMount(Foo, { + propsData: { + color: 'red' + } + }) + expect(wrapper.props().color).toBe('red') + }) +}) +``` + +**Rattacher au DOM:** + +```js +import { shallowMount } from '@vue/test-utils' +import Foo from './Foo.vue' + +describe('Foo', () => { + it('renders a div', () => { + const div = document.createElement('div') + document.body.appendChild(div) + const wrapper = shallowMount(Foo, { + attachTo: div + }) + expect(wrapper.contains('div')).toBe(true) + wrapper.destroy() + }) +}) +``` + +**Slots par défaut et nommés:** + +```js +import { shallowMount } from '@vue/test-utils' +import Foo from './Foo.vue' +import Bar from './Bar.vue' +import FooBar from './FooBar.vue' + +describe('Foo', () => { + it('renders a div', () => { + const wrapper = shallowMount(Foo, { + slots: { + default: [Bar, FooBar], + fooBar: FooBar, // Correspondra à , + foo: '
' + } + }) + expect(wrapper.contains('div')).toBe(true) + }) +}) +``` + +**Les propriétés globales des Stubbing :** + +```js +import { shallowMount } from '@vue/test-utils' +import Foo from './Foo.vue' + +describe('Foo', () => { + it('renders a div', () => { + const $route = { path: 'http://www.example-path.com' } + const wrapper = shallowMount(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..252a44a01 --- /dev/null +++ b/docs/fr/api/wrapper-array/README.md @@ -0,0 +1,29 @@ +# WrapperArray + +Un `WrapperArray` est un objet qui contient un tableau de [`Wrappers`](../wrapper/), et des méthodes pour tester les `Wrappers`. + +## Propriétés + +### `wrappers` + +`array` (lecture seulement): les `Wrappers` contenus dans le `WrapperArray` + +### `length` + +`number` (lecture seulement): le nombre de `Wrappers`contenus dans le `WrapperArry` + +## Les Méthodes + +!!!include(docs/fr/api/wrapper-array/at.md)!!! +!!!include(docs/fr/api/wrapper-array/contains.md)!!! +!!!include(docs/fr/api/wrapper-array/destroy.md)!!! +!!!include(docs/fr/api/wrapper-array/filter.md)!!! +!!!include(docs/fr/api/wrapper-array/is.md)!!! +!!!include(docs/fr/api/wrapper-array/isEmpty.md)!!! +!!!include(docs/fr/api/wrapper-array/isVueInstance.md)!!! +!!!include(docs/fr/api/wrapper-array/setChecked.md)!!! +!!!include(docs/fr/api/wrapper-array/setData.md)!!! +!!!include(docs/fr/api/wrapper-array/setMethods.md)!!! +!!!include(docs/fr/api/wrapper-array/setProps.md)!!! +!!!include(docs/fr/api/wrapper-array/setValue.md)!!! +!!!include(docs/fr/api/wrapper-array/trigger.md)!!! diff --git a/docs/fr/api/wrapper-array/at.md b/docs/fr/api/wrapper-array/at.md new file mode 100644 index 000000000..8cbf95b12 --- /dev/null +++ b/docs/fr/api/wrapper-array/at.md @@ -0,0 +1,26 @@ +## at + +Retourne le `Wrapper` à `index` passé. Utilise une numérotation basée sur les zéros (c'est-à-dire que le premier élément est à l'index 0). +Si `index` est négatif, l'indexation commence à partir du dernier élément (c'est-à-dire que le premier élément est à l'index -1). + +- **Arguments:** + + - `{number} index` + +- **Retours:** `{Wrapper}` + +- **Exemple:** + +```js +import { shallowMount } from '@vue/test-utils' +import Foo from './Foo.vue' + +const wrapper = shallowMount(Foo) +const divArray = wrapper.findAll('div') + +const secondDiv = divArray.at(1) +expect(secondDiv.is('div')).toBe(true) + +const lastDiv = divArray.at(-1) +expect(lastDiv.is('div')).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..476d5be2f --- /dev/null +++ b/docs/fr/api/wrapper-array/contains.md @@ -0,0 +1,24 @@ +### contains + +Affirmer que chaque emballage dans `WrapperArray` contient un sélecteur. + +Utilisez tout [selector](../selectors.md) valide. + +- **Arguments:** + + - `{string|Component} selector` + +- **Retours:** `{boolean}` + +- **Exemple:** + +```js +import { shallowMount } from '@vue/test-utils' +import Foo from './Foo.vue' +import Bar from './Bar.vue' + +const wrapper = shallowMount(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..5449d6f90 --- /dev/null +++ b/docs/fr/api/wrapper-array/destroy.md @@ -0,0 +1,16 @@ +## destroy + +Détruit chaque Vue `Wrapper` dans `WrapperArray`. + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +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/exists.md b/docs/fr/api/wrapper-array/exists.md new file mode 100644 index 000000000..10c2d1f82 --- /dev/null +++ b/docs/fr/api/wrapper-array/exists.md @@ -0,0 +1,18 @@ +## exists + +Vérifie que `WrapperArray` existe. + +Renvoie false si elle est appelée sur un `WrapperArray` sans objets `Wrapper`, ou si l'un d'entre eux n'existe pas. + +- **Returns:** `{boolean}` + +- **Example:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +expect(wrapper.findAll('div').exists()).toBe(true) +expect(wrapper.findAll('does-not-exist').exists()).toBe(false) +``` diff --git a/docs/fr/api/wrapper-array/filter.md b/docs/fr/api/wrapper-array/filter.md new file mode 100644 index 000000000..da74cafb4 --- /dev/null +++ b/docs/fr/api/wrapper-array/filter.md @@ -0,0 +1,25 @@ +## filter + +Filtrez `WrapperArray` avec une fonction de prédicat sur les objets `Wrapper`. + +Le comportement de cette méthode est similaire à celui de [Array.prototype.filter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter). + +- **Arguments:** + + - `{function} predicate` + +- **Retours:** `{WrapperArray}` + +Une nouvelle instance `WrapperArray` contenant des instances de `Wrapper` qui retourne vrai pour la fonction prédicat. + +- **Exemple:** + +```js +import { shallowMount } from '@vue/test-utils' +import Foo from './Foo.vue' + +const wrapper = shallowMount(Foo) +const filteredDivArray = wrapper + .findAll('div') + .filter(w => !w.classes('filtered')) +``` diff --git a/docs/fr/api/wrapper-array/is.md b/docs/fr/api/wrapper-array/is.md new file mode 100644 index 000000000..465aecb37 --- /dev/null +++ b/docs/fr/api/wrapper-array/is.md @@ -0,0 +1,20 @@ +## is + +Affirmer que chaque `Wrapper` dans le noeud DOM `WrapperArray` ou `vm` correspond à [selector](../selectors.md). + +- **Arguments:** + + - `{string|Component} selector` + +- **Retours:** `{boolean}` + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +const divArray = wrapper.findAll('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..aac66f3ee --- /dev/null +++ b/docs/fr/api/wrapper-array/isEmpty.md @@ -0,0 +1,24 @@ +## isEmpty + +::: Avertissement de déprédation +`isEmpty` est dépréciée et sera supprimée dans les prochaines versions. + +Pensez à un matcheur personnalisé comme ceux fournis dans [jest-dom](https://github.com/testing-library/jest-dom#tobeempty). + +En cas d'utilisation avec findComponent, accédez à l'élément DOM avec findComponent(Comp).element +::: + +Affirmer que chaque `Wrapper` dans `WrapperArray` ne contient pas de nœud enfant. + +- **Retours:** `{boolean}` + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +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/isVisible.md b/docs/fr/api/wrapper-array/isVisible.md new file mode 100644 index 000000000..383ca85c0 --- /dev/null +++ b/docs/fr/api/wrapper-array/isVisible.md @@ -0,0 +1,21 @@ +## isVisible + +Affirme que chaque `Wrapper` de `WrapperArray` est visible. + +Retourne `false` si au moins un élément parent a le style `display: none`, `visibility hidden`, `opacity :0`, est situé à l'intérieur de la balise `
` fermée ou possède l'attribut `hidden`. + +Ceci peut être utilisé pour affirmer qu'un élément est caché par `v-show`. + +- **Retours:** `{boolean}` + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +expect(wrapper.isVisible()).toBe(true) +expect(wrapper.findAll('.is-not-visible').isVisible()).toBe(false) +expect(wrapper.findAll('.is-visible').isVisible()).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..0c86b8e0d --- /dev/null +++ b/docs/fr/api/wrapper-array/isVueInstance.md @@ -0,0 +1,25 @@ +## isVueInstance + +::: warning Avertissement de déprédation +`isVueInstance` est dépréciée et sera supprimée dans les prochaines versions. + +Les tests reposant sur l'affirmation "isVueInstance" n'ont que peu ou pas de valeur. Nous suggérons de les remplacer par des assertions intentionnelles. + +Pour conserver ces tests, un remplacement valable de `isVueInstance()` est une assertion véridique de `wrapper.find(...).vm`. +::: + +Affirmer que chaque `Wrapper` dans `WrapperArray` est une instance de Vue. + +- **Retours:** `{boolean}` + +- **Exemple:** + +```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) +expect(barArray.isVueInstance()).toBe(true) +``` diff --git a/docs/fr/api/wrapper-array/setChecked.md b/docs/fr/api/wrapper-array/setChecked.md new file mode 100644 index 000000000..151ce91d2 --- /dev/null +++ b/docs/fr/api/wrapper-array/setChecked.md @@ -0,0 +1,39 @@ +## setChecked + +Cette méthode est un alias du code suivant + +```js +wrapperArray.wrappers.forEach(wrapper => wrapper.setChecked(checked)) +``` + +- **Arguments:** + + - `{Boolean} checked (default: true)` + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' + +const wrapper = mount({ + data() { + return { + t1: false, + t2: '' + } + }, + template: ` +
+ + + +
` +}) + +const wrapperArray = wrapper.findAll('.foo') +expect(wrapper.vm.t1).toEqual(false) +expect(wrapper.vm.t2).toEqual('') +wrapperArray.setChecked() +expect(wrapper.vm.t1).toEqual(true) +expect(wrapper.vm.t2).toEqual('foo') +``` diff --git a/docs/fr/api/wrapper-array/setData.md b/docs/fr/api/wrapper-array/setData.md new file mode 100644 index 000000000..6e75829ec --- /dev/null +++ b/docs/fr/api/wrapper-array/setData.md @@ -0,0 +1,22 @@ +## setData + +Défini les données `Wrapper` `vm` sur chaque `Wrapper` dans `WrapperArray`. + +**Note chaque `Wrapper` doit contenir une instance de Vue.** + +- **Arguments:** + + - `{Object} data` + +- **Exemple:** + +```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.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..7c3ffa052 --- /dev/null +++ b/docs/fr/api/wrapper-array/setMethods.md @@ -0,0 +1,36 @@ +## setMethods + +::: warning Avertissement de déprédation +`setMethods` est dépréciée et sera supprimée dans les prochaines versions. + +Il n'y a pas de voie clair pour remplacer les "setMethods", car cela dépend vraiment de votre utilisation précédente. Cela conduit facilement à des tests bancals qui s'appuient sur des détails de mise en œuvre, ce qui [est déconseillé](https://github.com/vuejs/rfcs/blob/668866fa71d70322f6a7689e88554ab27d349f9c/active-rfcs/0000-vtu-api.md#setmethods). + +Nous suggérons de repenser ces tests. + +Pour mettre au point une méthode complexe, il faut l'extraire du composant et le tester de manière isolée. Pour affirmer qu'une méthode est appelée, utilisez votre testeur pour l'espionner. +::: + +Défini les `Wrapper` `vm` et force la mise à jour de chaque `Wrapper` dans `WrapperArray`. + +**Note chaque `Wrapper` doit contenir une instance de Vue.** + +- **Arguments:** + + - `{Object} methods` + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +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..3d6a2ddde --- /dev/null +++ b/docs/fr/api/wrapper-array/setProps.md @@ -0,0 +1,22 @@ +## setProps + +Défini les props de `Wrapper` `vm` et force la mise à jour de chaque `Wrapper` dans `WrapperArray`. + +**Note chaque `Wrapper` doit contenir une instance de Vue.** + +- **Arguments:** + + - `{Object} props` + +- **Exemple:** + +```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.setProps({ foo: 'bar' }) +expect(barArray.at(0).vm.foo).toBe('bar') +``` diff --git a/docs/fr/api/wrapper-array/setValue.md b/docs/fr/api/wrapper-array/setValue.md new file mode 100644 index 000000000..75ce0e857 --- /dev/null +++ b/docs/fr/api/wrapper-array/setValue.md @@ -0,0 +1,38 @@ +## setValue + +Cette méthode est un alias du code qui suivant. + +```js +wrapperArray.wrappers.forEach(wrapper => wrapper.setValue(value)) +``` + +- **Arguments:** + + - `{any} value` + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' + +const wrapper = mount({ + data() { + return { + t1: '', + t2: '' + } + }, + template: ` +
+ + +
` +}) + +const wrapperArray = wrapper.findAll('.foo') +expect(wrapper.vm.t1).toEqual('') +expect(wrapper.vm.t2).toEqual('') +wrapperArray.setValue('foo') +expect(wrapper.vm.t1).toEqual('foo') +expect(wrapper.vm.t2).toEqual('foo') +``` diff --git a/docs/fr/api/wrapper-array/trigger.md b/docs/fr/api/wrapper-array/trigger.md new file mode 100644 index 000000000..c859254de --- /dev/null +++ b/docs/fr/api/wrapper-array/trigger.md @@ -0,0 +1,27 @@ +## trigger + +Déclenche un [event](../../guides/dom-events.md#trigger-events) sur chaque `Wrapper` dans le nœud DOM `WrapperArray`. + +**Note chaque `Wrapper` doit contenir une instance de Vue.** + +- **Arguments:** + + - `{string} eventType` **required** + - `{Object} options` **optional** + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +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/README.md b/docs/fr/api/wrapper/README.md new file mode 100644 index 000000000..6aeacbc09 --- /dev/null +++ b/docs/fr/api/wrapper/README.md @@ -0,0 +1,57 @@ +# Wrapper + +Vue Test Utils est une API basée sur un wrapper + +Un `wrapper` est un objet qui contient un composant ou vnode monté et des méthodes pour tester le composant ou vnode + +
Découvrez l'objet Wrapper dans une leçon vidéo GRATUITE de Vue School
+ +## Propriétés + +### `vm` + +`Component`(lecture seule): c'est l'instance `Vue`. Vous pouvez accéder à toutes les [méthodes et propriétés de l'instance d'un vm](https://vuejs.org/v2/api/#Instance-Properties) avec un `wrapper.vm`. Ceci n'existe que pour le wrapper du composant Vue ou le wrapper du composant Vue liant les éléments HTMLE. + +### `element` + +`HTMLElement` (lecture seule): le nœud DOM racine du wrapper + +### `options` + +#### `options.attachedToDocument` + +`Boolean` (lecture seule): `true` si le composant est [joint au document](../options.md) lorsqu'il est rendu + +### `selector` + +`Selector`: le sélecteur qui a été utilisé par [`find()`](./find.md) ou [`findAll()`](./findAll.md) pour créer cette enveloppe. + +## Méthodes + +!!!include(docs/fr/api/wrapper/attributes.md)!!! +!!!include(docs/fr/api/wrapper/classes.md)!!! +!!!include(docs/fr/api/wrapper/contains.md)!!! +!!!include(docs/fr/api/wrapper/destroy.md)!!! +!!!include(docs/fr/api/wrapper/emitted.md)!!! +!!!include(docs/fr/api/wrapper/emittedByOrder.md)!!! +!!!include(docs/fr/api/wrapper/exists.md)!!! +!!!include(docs/fr/api/wrapper/find.md)!!! +!!!include(docs/fr/api/wrapper/findAll.md)!!! +!!!include(docs/fr/api/wrapper/findComponent.md)!!! +!!!include(docs/fr/api/wrapper/findAllComponents.md)!!! +!!!include(docs/fr/api/wrapper/html.md)!!! +!!!include(docs/fr/api/wrapper/get.md)!!! +!!!include(docs/fr/api/wrapper/is.md)!!! +!!!include(docs/fr/api/wrapper/isEmpty.md)!!! +!!!include(docs/fr/api/wrapper/isVisible.md)!!! +!!!include(docs/fr/api/wrapper/isVueInstance.md)!!! +!!!include(docs/fr/api/wrapper/name.md)!!! +!!!include(docs/fr/api/wrapper/props.md)!!! +!!!include(docs/fr/api/wrapper/setChecked.md)!!! +!!!include(docs/fr/api/wrapper/setData.md)!!! +!!!include(docs/fr/api/wrapper/setMethods.md)!!! +!!!include(docs/fr/api/wrapper/setProps.md)!!! +!!!include(docs/fr/api/wrapper/setSelected.md)!!! +!!!include(docs/fr/api/wrapper/setValue.md)!!! +!!!include(docs/fr/api/wrapper/text.md)!!! +!!!include(docs/fr/api/wrapper/trigger.md)!!! diff --git a/docs/fr/api/wrapper/attributes.md b/docs/fr/api/wrapper/attributes.md new file mode 100644 index 000000000..2aea32639 --- /dev/null +++ b/docs/fr/api/wrapper/attributes.md @@ -0,0 +1,20 @@ +## attributes + +Renvoie l'objet attribut de nœud DOM `Wrapper`. Si la `key` est fournie, la valeur de la `key` sera renvoyée. + +- **Arguments:** + + - `{string} key` **facultatif** + +- **Retours:** `{[attribute: string]: any} | string` + +- **Example:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +expect(wrapper.attributes().id).toBe('foo') +expect(wrapper.attributes('id')).toBe('foo') +``` diff --git a/docs/fr/api/wrapper/classes.md b/docs/fr/api/wrapper/classes.md new file mode 100644 index 000000000..026da61d0 --- /dev/null +++ b/docs/fr/api/wrapper/classes.md @@ -0,0 +1,22 @@ +## classes + +Retourne les classes de nœuds DOM `Wrapper`. + +Retourne un tableau de noms de classes ou un booléen si un nom de classe est fourni. + +- **Arguments:** + + - `{string} className` **facultatif** + +- **Retours:** `Array<{string}> | boolean` + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +expect(wrapper.classes()).toContain('bar') +expect(wrapper.classes('bar')).toBe(true) +``` diff --git a/docs/fr/api/wrapper/contains.md b/docs/fr/api/wrapper/contains.md new file mode 100644 index 000000000..21f94c36f --- /dev/null +++ b/docs/fr/api/wrapper/contains.md @@ -0,0 +1,27 @@ +## contains + +::: warning Avertissement de déprédation +L'utilisation de `contains` est déconseillée et sera supprimée dans les prochaines versions. Utilisez [`find`](./find.md) pour les nœuds DOM (en utilisant la syntaxe `querySelector`), [`findComponent`](./findComponent.md) pour les composants, ou [`wrapper.get`](./get.md) à la place. +::: + +Affirmer que le `Wrapper` contient un élément ou un composant correspondant [selector](../selectors.md). + +- **Arguments:** + + - `{string|Component} selector` + +- **Retours:** `{boolean}` + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +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) +``` + +- **Voir aussi :** [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..16f16a06f --- /dev/null +++ b/docs/fr/api/wrapper/destroy.md @@ -0,0 +1,23 @@ +## destroy + +Détruit une instance du composant Vue. + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +import sinon from 'sinon' + +const spy = sinon.stub() +mount({ + render: null, + destroyed() { + spy() + } +}).destroy() +expect(spy.calledOnce).toBe(true) +``` + +si l'option `attachTo` ou `attachToDocument` a provoqué le montage du composant sur le document, les éléments du DOM du composant seront également supprimés du document. + +Pour les composants fonctionnels, `destroy` ne supprime du document que les éléments DOM rendus. diff --git a/docs/fr/api/wrapper/emitted.md b/docs/fr/api/wrapper/emitted.md new file mode 100644 index 000000000..b79a8dc8a --- /dev/null +++ b/docs/fr/api/wrapper/emitted.md @@ -0,0 +1,61 @@ +## emitted + +Renvoie un objet contenant des événements personnalisés émis par le `Wrapper` `vm`. + +- **Retours:** `{ [name: string]: Array> }` + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' + +test('emit demo', async () => { + const wrapper = mount(Component) + + wrapper.vm.$emit('foo') + wrapper.vm.$emit('foo', 123) + + await wrapper.vm.$nextTick() // Attendre que les $emits aient été traités + + /* + wrapper.emitted() renvoie l'objet suivant : + { + foo: [[], [123]] + } + */ + + // Affirmation de l'élément émis + expect(wrapper.emitted().foo).toBeTruthy() + + // Affirmation du nombre d'élément + expect(wrapper.emitted().foo.length).toBe(2) + + // Affirmation du paramètre additionnel + expect(wrapper.emitted().foo[1]).toEqual([123]) +}) +``` + +Vous pouvez également écrire ce qui précède comme suit : + +```js +// Affirmation de l'élément émis +expect(wrapper.emitted('foo')).toBeTruthy() + +// Affirmation du nombre d'élément +expect(wrapper.emitted('foo').length).toBe(2) + +// Affirmation du paramètre additionnel +expect(wrapper.emitted('foo')[1]).toEqual([123]) +``` + +La méthode `.emitted()` renvoie le même objet chaque fois qu'il est appelé, et non un nouveau, et donc l'objet se met à jour lorsque de nouveaux événements sont déclenchés : + +```js +const emitted = wrapper.emitted() + +expect(emitted.foo.length).toBe(1) + +// Faire quelque chose pour que le "wrapper" émette l'événement "foo" + +expect(emitted.foo.length).toBe(2) +``` diff --git a/docs/fr/api/wrapper/emittedByOrder.md b/docs/fr/api/wrapper/emittedByOrder.md new file mode 100644 index 000000000..e58c21bcf --- /dev/null +++ b/docs/fr/api/wrapper/emittedByOrder.md @@ -0,0 +1,33 @@ +## emittedByOrder + +::: warning Avertissement de déprédation +Le terme `emittedByOrder` est obsolète et sera supprimé dans les prochaines versions. + +Utilisez plutôt `wrapper.emitted`. +::: + +Retourne un tableau contenant des événements personnalisés émis par le `Wrapper` `vm` . + +- **Retours:** `Array<{ name: string, args: Array }>` + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' + +const wrapper = mount(Component) + +wrapper.vm.$emit('foo') +wrapper.vm.$emit('bar', 123) + +/* +wrapper.emittedByOrder() renvoie le tableau suivant : +[ + { name: 'foo', args: [] }, + { name: 'bar', args: [123] } +] +*/ + +// Faire valoir l'ordre d'émission d'événement +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..70f0cdf19 --- /dev/null +++ b/docs/fr/api/wrapper/exists.md @@ -0,0 +1,20 @@ +## exists + +Affirmation de l'existence de `wrapper`. + +Renvoie faux si on l'appelle sur un `Wrapper` vide. + +- **Retours:** `{boolean}` + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +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..7f0fc0046 --- /dev/null +++ b/docs/fr/api/wrapper/find.md @@ -0,0 +1,43 @@ +## find + +::: warning Avertissement de déprédation +L'utilisation de `find` pour rechercher un composant est déconseillée et sera supprimée. Utilisez plutôt [findComponent](https://vue-test-utils.vuejs.org/api/wrapper/findComponent.html). +La méthode `find` continuera à fonctionner pour trouver des éléments en utilisant n'importe quel [selector] valide (../selectors.md). +::: + +Retourne le "wrapper" du premier nœud DOM ou le sélecteur de composants Vue correspondant. + +Utilisez n'importe quel sélecteur DOM valide (utilise la syntaxe querySelector). + +- **Arguments:** + + - `{string} selector` + +- **Retours:** `{Wrapper}` + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' +import Bar from './Bar.vue' + +const wrapper = mount(Foo) + +const div = wrapper.find('div') +expect(div.exists()).toBe(true) + +const byId = wrapper.find('#bar') +expect(byId.element.id).toBe('bar') +``` + +- **Note:** + + - Vous pouvez enchaîner les appels find ensemble : + +```js +const button = wrapper.find({ ref: 'testButton' }) +expect(button.find('.icon').exists()).toBe(true) +``` + +Voir aussi : [get](./get.md). diff --git a/docs/fr/api/wrapper/findAll.md b/docs/fr/api/wrapper/findAll.md new file mode 100644 index 000000000..34a9f2717 --- /dev/null +++ b/docs/fr/api/wrapper/findAll.md @@ -0,0 +1,32 @@ +## findAll + +::: warning Avertissement de déprédation +L'utilisation de `findAll` pour rechercher des composants est obsolète et sera supprimée. Utilisez plutôt findAllComponents. +La méthode `findAll` continuera à fonctionner pour trouver des éléments en utilisant n'importe quel [sélecteur] valide (../selectors.md). +::: + +Retourne un [`WrapperArray`](../wrapper-array/). + +Utilisez n'importe quel [selector](../selectors.md) valide. + +- **Arguments:** + + - `{string|Component} selector` + +- **Retours:** `{WrapperArray}` + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +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) // Utilisation dépréciée +expect(bar.is(Bar)).toBe(true) +``` diff --git a/docs/fr/api/wrapper/findAllComponents.md b/docs/fr/api/wrapper/findAllComponents.md new file mode 100644 index 000000000..59fad5553 --- /dev/null +++ b/docs/fr/api/wrapper/findAllComponents.md @@ -0,0 +1,23 @@ +## findAllComponents + +Retourne un [`WrapperArray`](../wrapper-array/) de tous les composants Vue correspondants. + +- **Arguments:** + + - `{Component|ref|name} selector` + +- **Retours:** `{WrapperArray}` + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' +import Bar from './Bar.vue' + +const wrapper = mount(Foo) +const bar = wrapper.findAllComponents(Bar).at(0) +expect(bar.exists()).toBeTruthy() +const bars = wrapper.findAllComponents(Bar) +expect(bar).toHaveLength(1) +``` diff --git a/docs/fr/api/wrapper/findComponent.md b/docs/fr/api/wrapper/findComponent.md new file mode 100644 index 000000000..4ec8363e0 --- /dev/null +++ b/docs/fr/api/wrapper/findComponent.md @@ -0,0 +1,26 @@ +## findComponent + +Retourne le `wrapper` du premier composant Vue correspondant. + +- **Arguments:** + + - `{Component|ref|name} selector` + +- **Retours:** `{Wrapper}` + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' +import Bar from './Bar.vue' + +const wrapper = mount(Foo) + +const bar = wrapper.findComponent(Bar) // => trouve Bar par instance de composant +expect(bar.exists()).toBe(true) +const barByName = wrapper.findComponent({ name: 'bar' }) // => trouve Bar par `name` +expect(barByName.exists()).toBe(true) +const barRef = wrapper.findComponent({ ref: 'bar' }) // => trouve Bar par `ref` +expect(barRef.exists()).toBe(true) +``` diff --git a/docs/fr/api/wrapper/get.md b/docs/fr/api/wrapper/get.md new file mode 100644 index 000000000..496a59b6d --- /dev/null +++ b/docs/fr/api/wrapper/get.md @@ -0,0 +1,23 @@ +## get + +::: warning Avertissement de déprédation +L'utilisation de `get` pour rechercher un Composant est dépréciée et sera supprimée. Utilisez plutôt [`getComponent`](./getComponent.md) +::: +Fonctionne exactement comme [find](./find.md), mais lance une erreur si aucun élément correspondant au sélecteur donné n'est trouvé. Vous devez utiliser `find` lorsque vous recherchez un élément qui peut ne pas exister. Vous devez utiliser cette méthode lorsque vous obtenez un élément qui devrait exister et elle fournira un beau message d'erreur si ce n'est pas le cas. + +```js +import { mount } from '@vue/test-utils' + +const wrapper = mount(Foo) + +// Similaire à `wrapper.find`. +// `get` lancera une erreur si un élément n'est pas trouvé. `find` ne fera rien. +expect(wrapper.get('.does-exist')) + +expect(() => wrapper.get('.does-not-exist')) + .to.throw() + .with.property( + 'message', + 'Unable to find .does-not-exist within:
the actual DOM here...
' + ) +``` diff --git a/docs/fr/api/wrapper/getComponent.md b/docs/fr/api/wrapper/getComponent.md new file mode 100644 index 000000000..fe6f3c328 --- /dev/null +++ b/docs/fr/api/wrapper/getComponent.md @@ -0,0 +1,25 @@ +## getComponent + +Fonctionne comme [findComponent](./findComponent.md) mais génère une erreur si rien ne correspond au sélecteur donné. +le sélecteur donné n'est trouvé. Vous devriez utiliser `findComponent` lorsque vous recherchez un élément qui peut ne pas exister. Vous devriez utiliser cette méthode lorsque vous obtenez un élément qui devrait exister et il fournira un message d'erreur sympa si ce n'est pas le cas. + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' +import Bar from './Bar.vue' + +const wrapper = mount(Foo) + +// Similaire à `wrapper.findComponent`. +// `getComponent` lancera une erreur si un élément n'est pas trouvé. `findComponent` ne fera rien. +expect(wrapper.getComponent(Bar)) // => gets Bar by component instance +expect(wrapper.getComponent({ name: 'bar' })) // => gets Bar by `name` +expect(wrapper.getComponent({ ref: 'bar' })) // => gets Bar by `ref` + +expect(() => wrapper.getComponent({ name: 'does-not-exist' })) + .to.throw() + .with.property( + 'message', + "Unable to get a component named 'does-not-exist' within:
the actual DOM here...
" + ) +``` diff --git a/docs/fr/api/wrapper/html.md b/docs/fr/api/wrapper/html.md new file mode 100644 index 000000000..608943088 --- /dev/null +++ b/docs/fr/api/wrapper/html.md @@ -0,0 +1,15 @@ +## html + +Renvoie le HTML du nœud DOM `Wrapper` sous forme de chaîne. + +- **Retours:** `{string}` + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +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..d312fbb53 --- /dev/null +++ b/docs/fr/api/wrapper/is.md @@ -0,0 +1,36 @@ +## is + +::: warning Avertissement de déprédation +L'utilisation de `is` pour affirmer que le nœud DOM est déprécié et sera supprimé. + +Considérez un appariement personnalisé tel que ceux fournis dans [jest-dom](https://github.com/testing-library/jest-dom#custom-matchers). +ou pour l'assertion de type d'élément DOM, utilisez native [`Element.tagName`](https://developer.mozilla.org/en-US/docs/Web/API/Element/tagName) à la place. + +Pour conserver ces tests, un remplacement valable pour : + +- `is('DOM_SELECTOR')` est une affirmation de `wrapper.element.tagName`. +- `is('ATTR_NAME')` est une affirmation véridique d `wrapper.attributes('ATTR_NAME')`. +- `is('CLASS_NAME')` est une affirmation véridique d `wrapper.classes('CLASS_NAME')`. + +L'affirmation contre la définition du composant n'est pas dépréciée + +En cas d'utilisation avec findComponent, accédez à l'élément DOM avec `findComponent(Comp).element` +::: + +Affirmer `Wrapper` le noeud DOM ou `vm` correspond. [selector](../selectors.md). + +- **Arguments:** + + - `{string|Component} selector` + +- **Retours:** `{boolean}` + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +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..fd9440425 --- /dev/null +++ b/docs/fr/api/wrapper/isEmpty.md @@ -0,0 +1,23 @@ +## isEmpty + +::: warning Avertissement de déprédation +`isEmpty` est déprécié et sera supprimé dans les prochaines versions. + +Considérez un appariement personnalisé tel que ceux fournis dans [jest-dom](https://github.com/testing-library/jest-dom#tobeempty). + +En cas d'utilisation avec findComponent, accédez à l'élément DOM avec `findComponent(Comp).element` +::: + +Affirmer que `Wrapper` ne contient pas de nœud enfant. + +- **Retours:** `{boolean}` + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +expect(wrapper.isEmpty()).toBe(true) +``` diff --git a/docs/fr/api/wrapper/isVisible.md b/docs/fr/api/wrapper/isVisible.md new file mode 100644 index 000000000..8c0dabb6a --- /dev/null +++ b/docs/fr/api/wrapper/isVisible.md @@ -0,0 +1,20 @@ +## isVisible + +Affirmer que `Wrapper` est visible. + +Retourne `false` si un élément parent a le style `display: none` ou `visibility: hidden`, est situé à l'intérieur de la balise `
` fermée ou possède un attribut caché. + +Ceci peut être utilisé pour affirmer qu'un élément est caché par `v-show`. + +- **Retours:** `{boolean}` + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +expect(wrapper.isVisible()).toBe(true) +expect(wrapper.find('.is-not-visible').isVisible()).toBe(false) +``` diff --git a/docs/fr/api/wrapper/isVueInstance.md b/docs/fr/api/wrapper/isVueInstance.md new file mode 100644 index 000000000..db7e71721 --- /dev/null +++ b/docs/fr/api/wrapper/isVueInstance.md @@ -0,0 +1,23 @@ +## isVueInstance + +::: warning Avertissement de déprédation +`isVueInstance` est dépréciée et sera supprimée dans les prochaines versions. + +Les tests reposant sur l'affirmation `isVueInstance` n'ont que peu ou pas de valeur. Nous suggérons de les remplacer par des assertions ciblées. + +Pour conserver ces tests, un remplacement valable de `isVueInstance()` est une assertion véridique de `wrapper.find(...).vm`. + +L'assertion Wrapper est l'instance de Vue. +::: + +- **Retours:** `{boolean}` + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +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..e87541dd2 --- /dev/null +++ b/docs/fr/api/wrapper/name.md @@ -0,0 +1,21 @@ +## name + +::: warning Avertissement de déprédation +`name` est dépréciée et sera supprimée dans les prochaines versions. +::: + +Retourne le nom du composant si `Wrapper` contient une instance de Vue, ou le nom du tag du nœud DOM `Wrapper` si `Wrapper` ne contient pas d'instance de Vue. + +- **Retours:** `{string}` + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +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/overview.md b/docs/fr/api/wrapper/overview.md new file mode 100644 index 000000000..5ff613a05 --- /dev/null +++ b/docs/fr/api/wrapper/overview.md @@ -0,0 +1,47 @@ +## overview + +::: warning Avertissement de déprédation +`overview` est dépréciée et sera supprimée dans les prochaines versions. +::: + +Affiche un simple aperçu du `Wrapper`. + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +import Component from './Component.vue' + +const wrapper = mount(Component) +wrapper.overview() + +// Console output +/* +Wrapper (Visible): + +Html: +
+

My name is Tess Ting

+
+ +Data: { + firstName: Tess, + lastName: Ting +} + +Computed: { + fullName: Tess Ting' +} + +Emitted: {', + foo: [', + 0: [ hello, world ], + 1: [ bye, world ]' + ], + bar: [ + 0: [ hey ]' + ] +} + +*/ +``` diff --git a/docs/fr/api/wrapper/props.md b/docs/fr/api/wrapper/props.md new file mode 100644 index 000000000..785be95d0 --- /dev/null +++ b/docs/fr/api/wrapper/props.md @@ -0,0 +1,26 @@ +## props + +Retourne l'objet props `Wrapper` `vm`. Si `key` est fourni, la valeur pour `key` sera retournée. + +**Note : le Wrapper doit contenir une instance de Vue.** + +- **Arguments:** + + - `{string} key` **facultatif** + +- **Retours:** `{[prop: string]: any} | any` + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' + +const wrapper = mount(Foo, { + propsData: { + bar: 'baz' + } +}) +expect(wrapper.props().bar).toBe('baz') +expect(wrapper.props('bar')).toBe('baz') +``` diff --git a/docs/fr/api/wrapper/setChecked.md b/docs/fr/api/wrapper/setChecked.md new file mode 100644 index 000000000..33ef3d275 --- /dev/null +++ b/docs/fr/api/wrapper/setChecked.md @@ -0,0 +1,30 @@ +## setChecked + +Définis la valeur cochée pour l'élément d'entrée de type case à cocher ou radio et met à jour les données liées au `v-model`. + +- **Arguments:** + + - `{Boolean} checked (default: true)` + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +const radioInput = wrapper.find('input[type="radio"]') +radioInput.setChecked() +``` + +- **Note:** + +Lorsque vous essayez de mettre la valeur à l'état via `v-model` par `radioInput.element.checked = true ; radioInput.trigger('input')`, `v-model` n'est pas déclenché. Le `v-model` est déclenché par l'événement `change`. + +`checkboxInput.setChecked(checked)` est un alias du code suivant. + +```js +checkboxInput.element.checked = checked +checkboxInput.trigger('click') +checkboxInput.trigger('change') +``` diff --git a/docs/fr/api/wrapper/setData.md b/docs/fr/api/wrapper/setData.md new file mode 100644 index 000000000..af6f9985e --- /dev/null +++ b/docs/fr/api/wrapper/setData.md @@ -0,0 +1,22 @@ +## setData + +Définis les données `Wrapper` `vm`. + +setData fonctionne en appelant récursivement Vue.set. + +**Note - le Wrapper doit contenir une instance de Vue.** + +- **Arguments:** + + - `{Object} data` + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +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..3eed2fa82 --- /dev/null +++ b/docs/fr/api/wrapper/setMethods.md @@ -0,0 +1,34 @@ +## setMethods + +::: warning Avertissement de déprédation +`setMethods` est dépréciée et sera supprimée dans les prochaines versions. + +Il n'y a pas de voie claire pour remplacer les `setMethods`, car cela dépend vraiment de votre utilisation précédente. Cela conduit facilement à des tests bancals qui s'appuient sur des détails d'implémentation, ce qui [est déconseillé](https://github.com/vuejs/rfcs/blob/668866fa71d70322f6a7689e88554ab27d349f9c/active-rfcs/0000-vtu-api.md#setmethods) + +Nous suggérons de repenser ces tests. + +Pour mettre au point une méthode complexe, il faut l'extraire du composant et le tester de manière isolée. Pour affirmer qu'une méthode est appelée, utilisez votre testeur pour l'espionner. +::: + +Définis les méthodes `Wrapper` `vm` et les met à jour. + +**Note le Wrapper doit contenir une instance de Vue.** + +- **Arguments:** + + - `{Object} methods` + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +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..d34ddcb88 --- /dev/null +++ b/docs/fr/api/wrapper/setProps.md @@ -0,0 +1,53 @@ +## setProps + +- **Arguments:** + + - `{Object} props` + +- **Usage:** + +Définir les props de `Wrapper` `vm` et forcer à mettre à jour + +::: avertissement +`setProps` ne peut être appelé que pour un composant de haut niveau, monté par `mount` ou `shallowMount`. +::: + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' + +test('setProps demo', async () => { + const wrapper = mount(Foo) + + await wrapper.setProps({ foo: 'bar' }) + + expect(wrapper.vm.foo).toBe('bar') +}) +``` + +Vous pouvez également passer un objet `propsData`, qui initialisera l'instance de Vue avec les valeurs passées. + +```js +// Foo.vue +export default { + props: { + foo: { + type: String, + required: true + } + } +} +``` + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' + +const wrapper = mount(Foo, { + propsData: { + foo: 'bar' + } +}) + +expect(wrapper.vm.foo).toBe('bar') +``` diff --git a/docs/fr/api/wrapper/setSelected.md b/docs/fr/api/wrapper/setSelected.md new file mode 100644 index 000000000..a366d3936 --- /dev/null +++ b/docs/fr/api/wrapper/setSelected.md @@ -0,0 +1,26 @@ +## setSelected + +Sélectionne un élément d'option et met à jour les données liées au `v-model`. + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) +const options = wrapper.find('select').findAll('option') + +options.at(1).setSelected() +``` + +- **Note:** + +Lorsque vous essayez de mettre la valeur à l'état via `v-model` par `option.element.selected = true ; parentSelect.trigger('input')`, `v-model` n'est pas déclenché. Le `v-model` est déclenché par l'événement `change`. + +`option.setSelected()` est un alias du code suivant. + +```js +option.element.selected = true +parentSelect.trigger('change') +``` diff --git a/docs/fr/api/wrapper/setValue.md b/docs/fr/api/wrapper/setValue.md new file mode 100644 index 000000000..7d005d803 --- /dev/null +++ b/docs/fr/api/wrapper/setValue.md @@ -0,0 +1,42 @@ +## setValue + +Définis la valeur d'une entrée de contrôle de texte ou d'un élément de sélection et met à jour les données liées au `v-model`. + +- **Arguments:** + + - `{any} value` + +- **Exemple:** + +```js +import { mount } from '@vue/test-utils' +import Foo from './Foo.vue' + +const wrapper = mount(Foo) + +const textInput = wrapper.find('input[type="text"]') +textInput.setValue('some value') + +const select = wrapper.find('select') +select.setValue('option value') + +// nécessite