From 57aab162c11eae8eaf8999add2471128d606658f Mon Sep 17 00:00:00 2001 From: Alexandre Bonhomme Date: Mon, 14 Jan 2019 17:18:34 +0100 Subject: [PATCH 001/109] docs(mocha-webpack): replace mocha-webpack by mochapack fork --- ...single-file-components-with-mocha-webpack.md | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/docs/guides/testing-single-file-components-with-mocha-webpack.md b/docs/guides/testing-single-file-components-with-mocha-webpack.md index c4be44b84..7f708401d 100644 --- a/docs/guides/testing-single-file-components-with-mocha-webpack.md +++ b/docs/guides/testing-single-file-components-with-mocha-webpack.md @@ -1,19 +1,17 @@ ## Testing Single-File Components with Mocha + webpack -> An example project for this setup is available on [GitHub](https://github.com/vuejs/vue-test-utils-mocha-webpack-example). - Another strategy for testing SFCs is compiling all our tests via webpack and then run it in a test runner. The advantage of this approach is that it gives us full support for all webpack and `vue-loader` features, so we don't have to make compromises in our source code. -You can technically use any test runner you like and manually wire things together, but we've found [`mocha-webpack`](https://github.com/zinserjan/mocha-webpack) to provide a very streamlined experience for this particular task. +You can technically use any test runner you like and manually wire things together, but we've found [`mochapack`](https://github.com/sysgears/mochapack) to provide a very streamlined experience for this particular task. -### Setting Up `mocha-webpack` +### Setting Up `mochapack` We will assume you are starting with a setup that already has webpack, vue-loader and Babel properly configured - e.g. the `webpack-simple` template scaffolded by `vue-cli`. The first thing to do is installing test dependencies: ``` bash -npm install --save-dev @vue/test-utils mocha mocha-webpack +npm install --save-dev @vue/test-utils mocha mochapack ``` Next we need to define a test script in our `package.json`. @@ -22,7 +20,7 @@ Next we need to define a test script in our `package.json`. // package.json { "scripts": { - "test": "mocha-webpack --webpack-config webpack.config.js --require test/setup.js test/**/*.spec.js" + "test": "mochapack --webpack-config webpack.config.js --require test/setup.js test/**/*.spec.js" } } ``` @@ -53,7 +51,7 @@ module.exports = { #### Source Maps -Source maps need to be inlined to be picked up by `mocha-webpack`. The recommended config is: +Source maps need to be inlined to be picked up by `mochapack`. The recommended config is: ``` js module.exports = { @@ -172,13 +170,12 @@ Woohoo, we got our tests running! ### Coverage -To setup code coverage to `mocha-webpack`, follow [the `mocha-webpack` code coverage guide](https://github.com/zinserjan/mocha-webpack/blob/master/docs/guides/code-coverage.md). +To setup code coverage to `mochapack`, follow [the `mochapack` code coverage guide](https://github.com/sysgears/mochapack/blob/master/docs/guides/code-coverage.md). ### Resources -- [Example project for this setup](https://github.com/vuejs/vue-test-utils-mocha-webpack-example) - [Mocha](https://mochajs.org/) -- [mocha-webpack](http://zinserjan.github.io/mocha-webpack/) +- [mochapack](https://github.com/sysgears/mochapack/) - [Chai](http://chaijs.com/) - [Sinon](http://sinonjs.org/) - [jest/expect](http://facebook.github.io/jest/docs/en/expect.html#content) From 64caba72e6917175a0899440d81561506b2f7ccb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thorsten=20L=C3=BCnborg?= Date: Fri, 19 Apr 2019 09:59:23 +0200 Subject: [PATCH 002/109] Add warning about scoped Slot implementation --- docs/api/options.md | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/docs/api/options.md b/docs/api/options.md index 13f9f7788..fe70d22ca 100644 --- a/docs/api/options.md +++ b/docs/api/options.md @@ -124,6 +124,28 @@ shallowMount(Component, { } }) ``` +::: warning Root Element required +Due to the internal implementatioj of this feature, the slot content has to return a root element, even though a scoped slot is allowed to return an array of elements. + +If you ever need this in a test, the recommended workaround is to wrap the component under test in another component and mount that one: +::: + +```javascript +const WrapperComp = { + template: ` + +

Using the {{props.a}}

+

Using the {{props.a}}

+ + `, + components: { + ComponentUnderTest + } +} +const wrapper = mount(WrapperComp).find(ComponentUnderTest) + +``` + ## stubs From a433c91a6467a5525e6dca0babad03994a7de041 Mon Sep 17 00:00:00 2001 From: Schumilin Date: Tue, 23 Apr 2019 14:49:54 +0800 Subject: [PATCH 003/109] docs: update Karma docs link (#1208) --- docs/guides/testing-single-file-components-with-karma.md | 2 +- docs/ja/guides/testing-single-file-components-with-karma.md | 2 +- docs/ru/guides/testing-single-file-components-with-karma.md | 2 +- docs/zh/guides/testing-single-file-components-with-karma.md | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/guides/testing-single-file-components-with-karma.md b/docs/guides/testing-single-file-components-with-karma.md index e41468784..9d09b3a7b 100644 --- a/docs/guides/testing-single-file-components-with-karma.md +++ b/docs/guides/testing-single-file-components-with-karma.md @@ -59,7 +59,7 @@ This file is used to configure Karma. We need to preprocess our files with webpack. to do that, we add webpack as a preprocessor, and include our webpack config. We can use the webpack config file in the base of the project without changing anything. -In our configuration, we run the tests in Chrome. To add extra browsers, see [the Browsers section in the Karma docs](http://karma-runner.github.io/2.0/config/browsers.html). +In our configuration, we run the tests in Chrome. To add extra browsers, see [the Browsers section in the Karma docs](http://karma-runner.github.io/3.0/config/browsers.html). ### Picking an Assertion Library diff --git a/docs/ja/guides/testing-single-file-components-with-karma.md b/docs/ja/guides/testing-single-file-components-with-karma.md index 1642a68b2..26ef15c6b 100644 --- a/docs/ja/guides/testing-single-file-components-with-karma.md +++ b/docs/ja/guides/testing-single-file-components-with-karma.md @@ -59,7 +59,7 @@ module.exports = function(config) { ファイルを Webpack で前処理する必要があります。そのために、 Webpack をプリプロセッサとして加えます。そして、 Webpack の設定を含めます。プロジェクトに元々あった Webpack の設定ファイルを変更なしで使用することができます。 -この設定では、 Chrome でテストを実行します。他のブラウザを加える方法は [Karma のドキュメントにあるブラウザセクション](http://karma-runner.github.io/2.0/config/browsers.html) を見てください。 +この設定では、 Chrome でテストを実行します。他のブラウザを加える方法は [Karma のドキュメントにあるブラウザセクション](http://karma-runner.github.io/3.0/config/browsers.html) を見てください。 ### アサーションライブラリを選ぶ diff --git a/docs/ru/guides/testing-single-file-components-with-karma.md b/docs/ru/guides/testing-single-file-components-with-karma.md index eba4094a9..0105006e2 100644 --- a/docs/ru/guides/testing-single-file-components-with-karma.md +++ b/docs/ru/guides/testing-single-file-components-with-karma.md @@ -59,7 +59,7 @@ module.exports = function(config) { Нам нужно предварительно обработать файлы с помощью webpack. Для этого мы добавляем webpack в качестве препроцессора и включаем нашу конфигурацию webpack. Мы можем использовать конфигурационный файл webpack в корне проекте, ничего не меняя. -В нашей конфигурации мы запускаем тесты в Chrome. Для добавления дополнительных браузеров смотрите [раздел Браузеры в документации Karma](http://karma-runner.github.io/2.0/config/browsers.html). +В нашей конфигурации мы запускаем тесты в Chrome. Для добавления дополнительных браузеров смотрите [раздел Браузеры в документации Karma](http://karma-runner.github.io/3.0/config/browsers.html). ### Выбор библиотеки утверждений diff --git a/docs/zh/guides/testing-single-file-components-with-karma.md b/docs/zh/guides/testing-single-file-components-with-karma.md index 5f4e918d4..d31efe954 100644 --- a/docs/zh/guides/testing-single-file-components-with-karma.md +++ b/docs/zh/guides/testing-single-file-components-with-karma.md @@ -59,7 +59,7 @@ module.exports = function(config) { 我们需要用 webpack 预处理文件。为此，我们将 webpack 添加为预处理器，并引入我们的 webpack 配置。我们可以在项目基础中使用该 webpack 配置文件而无需任何修改。 -在我们的配置中，我们在 Chrome 中运行测试。如果想添加其它浏览器，可查阅[Karma 文档的浏览器章节](http://karma-runner.github.io/2.0/config/browsers.html)。 +在我们的配置中，我们在 Chrome 中运行测试。如果想添加其它浏览器，可查阅[Karma 文档的浏览器章节](http://karma-runner.github.io/3.0/config/browsers.html)。 ### 选用一个断言库 From a523085528b4e7fe8992be7592675bdf9ef2e691 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8B=BE=E4=B8=89=E8=82=A1=E5=9B=9B?= Date: Tue, 23 Apr 2019 18:21:07 +0800 Subject: [PATCH 004/109] docs(zh): update translation (#1194) --- docs/zh/api/options.md | 11 ++++++++++- docs/zh/api/wrapper/destroy.md | 4 ++++ .../testing-single-file-components-with-jest.md | 2 +- 3 files changed, 15 insertions(+), 2 deletions(-) diff --git a/docs/zh/api/options.md b/docs/zh/api/options.md index 7e09f3f15..c90c09c28 100644 --- a/docs/zh/api/options.md +++ b/docs/zh/api/options.md @@ -1,6 +1,13 @@ # 挂载选项 -即 `mount` 和 `shallowMount` 的选项。该对象同时包含了 Vue Test Utils 挂载选项和其它选项。 +`mount` 和 `shallowMount` 的选项。 + +:::tip +除了下方列出的选项，`options` 对象还可以包含任何 `new Vue ({ /*options here*/ })` 调用时的有效选项。 +当通过 `mount` / `shallowMount` 挂载时，这些选项将会合并入组件现有的选项中。 + +[查阅其它选项的例子](#其它选项) +::: - [`context`](#context) - [`slots`](#slots) @@ -199,6 +206,8 @@ expect(wrapper.vm.$route).toBeInstanceOf(Object) 当设为 `true` 时，组件在渲染时将会挂载到 DOM 上。 +如果添加到了 DOM 上，你应该在测试的最后调用 `wrapper.destroy()` 将元素从文档中移除并销毁组件实例。 + ## attrs - 类型：`Object` diff --git a/docs/zh/api/wrapper/destroy.md b/docs/zh/api/wrapper/destroy.md index 2136b1156..74e585d8a 100644 --- a/docs/zh/api/wrapper/destroy.md +++ b/docs/zh/api/wrapper/destroy.md @@ -17,3 +17,7 @@ mount({ }).destroy() expect(spy.calledOnce).toBe(true) ``` + +如果挂载时 `attachToDocument` 被设为 `true`，则组件的 DOM 元素也将会从文档中被移除。 + +对于函数式组件来说，`destroy` 只会从文档中移除渲染出来的 DOM 元素。 diff --git a/docs/zh/guides/testing-single-file-components-with-jest.md b/docs/zh/guides/testing-single-file-components-with-jest.md index 31d9d11a2..590844e3b 100644 --- a/docs/zh/guides/testing-single-file-components-with-jest.md +++ b/docs/zh/guides/testing-single-file-components-with-jest.md @@ -155,7 +155,7 @@ Jest 可以被用来生成多种格式的测试覆盖率报告。以下是一个 ### 测试规范示例 -如果你已经熟悉了 Jasmine，你应该很适应 Jest 的[断言 API](https://jestjs.io/docs/zh-Hans/expect.htm)： +如果你已经熟悉了 Jasmine，你应该很适应 Jest 的[断言 API](https://jestjs.io/docs/zh-Hans/expect)： ```js import { mount } from '@vue/test-utils' From aeb1b49264fd38e7c6dcae169ca7f9737e5e9c78 Mon Sep 17 00:00:00 2001 From: wiese Date: Tue, 23 Apr 2019 19:02:34 +0200 Subject: [PATCH 005/109] Update docs/api/options.md correct typo Co-Authored-By: LinusBorg --- docs/api/options.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/api/options.md b/docs/api/options.md index fe70d22ca..6b644da67 100644 --- a/docs/api/options.md +++ b/docs/api/options.md @@ -125,7 +125,7 @@ shallowMount(Component, { }) ``` ::: warning Root Element required -Due to the internal implementatioj of this feature, the slot content has to return a root element, even though a scoped slot is allowed to return an array of elements. +Due to the internal implementation of this feature, the slot content has to return a root element, even though a scoped slot is allowed to return an array of elements. If you ever need this in a test, the recommended workaround is to wrap the component under test in another component and mount that one: ::: From ff7d2f0b15bf9183ddb6368ed55d963c6a9ff193 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thorsten=20L=C3=BCnborg?= Date: Wed, 24 Apr 2019 12:50:20 +0200 Subject: [PATCH 006/109] adjust formatting --- docs/api/options.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/api/options.md b/docs/api/options.md index 6b644da67..e94e14800 100644 --- a/docs/api/options.md +++ b/docs/api/options.md @@ -124,11 +124,12 @@ shallowMount(Component, { } }) ``` + ::: warning Root Element required Due to the internal implementation of this feature, the slot content has to return a root element, even though a scoped slot is allowed to return an array of elements. If you ever need this in a test, the recommended workaround is to wrap the component under test in another component and mount that one: -::: +::: ```javascript const WrapperComp = { From ecfe22860ea05aa817068a9634909408e5e3b9b5 Mon Sep 17 00:00:00 2001 From: Dmitry Sharshakov Date: Fri, 26 Apr 2019 13:49:44 +0300 Subject: [PATCH 007/109] docs: update Russian translation (#1215) * docs: update russian translation * style: format docs pages * chore(docs): typo --- docs/ru/README.md | 1 + docs/ru/api/config.md | 2 +- docs/ru/api/createWrapper.md | 26 ++++++++++ docs/ru/api/options.md | 47 ++++++++++++----- docs/ru/api/wrapper/attributes.md | 7 ++- docs/ru/api/wrapper/classes.md | 7 ++- docs/ru/api/wrapper/destroy.md | 4 ++ docs/ru/api/wrapper/html.md | 2 +- docs/ru/api/wrapper/props.md | 7 ++- docs/ru/api/wrapper/setChecked.md | 4 +- docs/ru/api/wrapper/setValue.md | 4 +- docs/ru/guides/common-tips.md | 50 +++++++++++++++++++ docs/ru/guides/dom-events.md | 10 +++- ...esting-single-file-components-with-jest.md | 6 ++- ...ngle-file-components-with-mocha-webpack.md | 2 +- docs/ru/guides/using-with-typescript.md | 8 +-- docs/ru/guides/using-with-vuex.md | 7 +-- 17 files changed, 160 insertions(+), 34 deletions(-) create mode 100644 docs/ru/api/createWrapper.md diff --git a/docs/ru/README.md b/docs/ru/README.md index b014fff5b..fd592d272 100644 --- a/docs/ru/README.md +++ b/docs/ru/README.md @@ -80,5 +80,6 @@ Vue Test Utils — официальная библиотека модульно - [TransitionGroupStub](api/components/TransitionGroupStub.md) - [RouterLinkStub](api/components/RouterLinkStub.md) - [Селекторы](api/selectors.md) + - [createWrapper](api/createWrapper.md) - [createLocalVue](api/createLocalVue.md) - [Конфигурация](api/config.md) diff --git a/docs/ru/api/config.md b/docs/ru/api/config.md index d82aff8a7..d67fe4014 100644 --- a/docs/ru/api/config.md +++ b/docs/ru/api/config.md @@ -2,7 +2,7 @@ Vue Test Utils включает объект конфигурации для определения опций, используемых Vue Test Utils. -### Конфигурация настроек Vue Test Utils +### Настройки Vue Test Utils ### `stubs` diff --git a/docs/ru/api/createWrapper.md b/docs/ru/api/createWrapper.md new file mode 100644 index 000000000..1d791d306 --- /dev/null +++ b/docs/ru/api/createWrapper.md @@ -0,0 +1,26 @@ +## createWrapper(node [, options]) + +- **Аргументы:** + + - `{vm|HTMLElement} node` + - `{Object} options` + - `{Boolean} sync` + - `{Boolean} attachedToDocument` + +- **Возвращает:** + + - `{Wrapper}` + +- **Использование:** + +`createWrapper` создает `Wrapper` для смонтированного экземпляра Vue или 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/ru/api/options.md b/docs/ru/api/options.md index ada0ec4f8..aebfd7bb3 100644 --- a/docs/ru/api/options.md +++ b/docs/ru/api/options.md @@ -2,19 +2,28 @@ Опции для `mount` и `shallowMount`. Объект опций может содержать как настройки монтирования Vue Test Utils, так и другие опции Vue. -- [`context`](#context) -- [`slots`](#slots) -- [`scopedSlots`](#scopedslots) -- [`stubs`](#stubs) -- [`mocks`](#mocks) -- [`localVue`](#localvue) -- [`attachToDocument`](#attachtodocument) -- [`propsData`](#propsdata) -- [`attrs`](#attrs) -- [`listeners`](#listeners) -- [`parentComponent`](#parentcomponent) -- [`provide`](#provide) -- [`sync`](#sync) +:::tip СОВЕТ +Кроме опций, описанных ниже, объект `options` может содержать любую опцию, которую можно указать при вызове `new Vue ({ /* опции здесь */ })`. +Эти опции будут объединены с существующими опциями компонента при монтировании с помощью `mount` / `shallowMount` + +[См. другие опции в примере](#other-options) +::: + +- [Опции монтирования](#%D0%BE%D0%BF%D1%86%D0%B8%D0%B8-%D0%BC%D0%BE%D0%BD%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F) + - [context](#context) + - [slots](#slots) + - [scopedSlots](#scopedslots) + - [stubs](#stubs) + - [mocks](#mocks) + - [localVue](#localvue) + - [attachToDocument](#attachtodocument) + - [attrs](#attrs) + - [propsData](#propsdata) + - [listeners](#listeners) + - [parentComponent](#parentcomponent) + - [provide](#provide) + - [sync](#sync) + - [Другие опции](#%D0%B4%D1%80%D1%83%D0%B3%D0%B8%D0%B5-%D0%BE%D0%BF%D1%86%D0%B8%D0%B8) ## context @@ -108,6 +117,16 @@ shallowMount(Component, { Или вы можете использовать JSX. Если вы пишете JSX в методе, `this.$createElement` автоматически внедряется babel-plugin-transform-vue-jsx: +```js +shallowMount(Component, { + scopedSlots: { + foo(props) { + return
{props.text}
+ } + } +}) +``` + ## stubs - Тип: `{ [name: string]: Component | boolean } | Array` @@ -190,6 +209,8 @@ expect(wrapper.vm.$route).toBeInstanceOf(Object) Компонент будет прикрепляться к DOM при рендеринге, если установлено в `true`. +Если компонент прикреплен к DOM, вы должны вызвать `wrapper.destroy()` в конце вашего теста для того, чтобы удалить отрисованные элементы из документа и удалить экземпляр компонента. + ## attrs - Тип: `Object` diff --git a/docs/ru/api/wrapper/attributes.md b/docs/ru/api/wrapper/attributes.md index 2fcdc9a82..a80d7e8ed 100644 --- a/docs/ru/api/wrapper/attributes.md +++ b/docs/ru/api/wrapper/attributes.md @@ -1,6 +1,10 @@ ## attributes() -Возвращает объект атрибута DOM-узла `Wrapper`. +Возвращает объект атрибутов DOM-узла `Wrapper`. Если аргумент `key` присутствует, метод вернёт значение атрибута, заданного через `key`. + +- **Аргументы:** + + - `{string} key` **опционально** - **Возвращает:** `{[attribute: string]: any}` @@ -12,4 +16,5 @@ 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/ru/api/wrapper/classes.md b/docs/ru/api/wrapper/classes.md index a15de7701..d19931685 100644 --- a/docs/ru/api/wrapper/classes.md +++ b/docs/ru/api/wrapper/classes.md @@ -2,7 +2,11 @@ Возвращает классы DOM-узла `Wrapper`. -Возвращает массив имён классов. +Возвращает массив имён классов. Либо `true`/`false` если передано имя класса. + +- **Аргументы:** + + - `{string} className` **опционально** - **Возвращает:** `Array<{string}>` @@ -14,4 +18,5 @@ import Foo from './Foo.vue' const wrapper = mount(Foo) expect(wrapper.classes()).toContain('bar') +expect(wrapper.classes('bar')).toBe(true) ``` diff --git a/docs/ru/api/wrapper/destroy.md b/docs/ru/api/wrapper/destroy.md index 4ff04d42f..be8efc589 100644 --- a/docs/ru/api/wrapper/destroy.md +++ b/docs/ru/api/wrapper/destroy.md @@ -17,3 +17,7 @@ mount({ }).destroy() expect(spy.calledOnce).toBe(true) ``` + +Если опция `attachToDocument` была `true` при монтировании, DOM элементы компонента будут также удалены из документа. + +Для функциональных компонентов, `destroy` только удаляет отрисованные элементы DOM из документа. diff --git a/docs/ru/api/wrapper/html.md b/docs/ru/api/wrapper/html.md index eb0d42a54..3451f89bf 100644 --- a/docs/ru/api/wrapper/html.md +++ b/docs/ru/api/wrapper/html.md @@ -1,6 +1,6 @@ ## html() -Возвращает HTML `Wrapper` DOM-узла в виде строки. +Возвращает HTML-код DOM-узла `Wrapper`а в виде строки. - **Возвращает:** `{string}` diff --git a/docs/ru/api/wrapper/props.md b/docs/ru/api/wrapper/props.md index 7b8db0073..883d46f69 100644 --- a/docs/ru/api/wrapper/props.md +++ b/docs/ru/api/wrapper/props.md @@ -1,9 +1,13 @@ ## props() -Возвращает объект с входными параметрами `vm` для `Wrapper`. +Возвращает объект с входными параметрами `vm` для `Wrapper`. Если `key` передан, метод вернёт значения свойства с именем `key`. **Обратите внимание что Wrapper должен содержать экземпляр Vue.** +- **Принимает:** + + - `{string} key` **опйионально** + - **Возвращает:** `{[prop: string]: any}` - **Пример:** @@ -18,4 +22,5 @@ const wrapper = mount(Foo, { } }) expect(wrapper.props().bar).toBe('baz') +expect(wrapper.props('bar')).toBe('baz') ``` diff --git a/docs/ru/api/wrapper/setChecked.md b/docs/ru/api/wrapper/setChecked.md index 16365127f..41f6e3cd3 100644 --- a/docs/ru/api/wrapper/setChecked.md +++ b/docs/ru/api/wrapper/setChecked.md @@ -13,8 +13,8 @@ import { mount } from '@vue/test-utils' import Foo from './Foo.vue' const wrapper = mount(Foo) -const option = wrapper.find('input[type="radio"]') -option.setChecked() +const radioInput = wrapper.find('input[type="radio"]') +radioInput.setChecked() ``` - **Примечание:** diff --git a/docs/ru/api/wrapper/setValue.md b/docs/ru/api/wrapper/setValue.md index fc432d061..5c3b0521b 100644 --- a/docs/ru/api/wrapper/setValue.md +++ b/docs/ru/api/wrapper/setValue.md @@ -14,8 +14,8 @@ import Foo from './Foo.vue' const wrapper = mount(Foo) -const input = wrapper.find('input[type="text"]') -input.setValue('some value') +const textInput = wrapper.find('input[type="text"]') +textInput.setValue('some value') const select = wrapper.find('select') select.setValue('option value') diff --git a/docs/ru/guides/common-tips.md b/docs/ru/guides/common-tips.md index 58eda11a5..f7f33b313 100644 --- a/docs/ru/guides/common-tips.md +++ b/docs/ru/guides/common-tips.md @@ -58,6 +58,56 @@ expect(wrapper.emitted().foo[1]).toEqual([123]) Вы также можете получить массив событий в порядке их вызова с помощью [`wrapper.emittedByOrder()`](../api/wrapper/emittedByOrder.md). +### События дочерних компонентов + +Вы можете создавать пользовательские события в дочерних компонентах получая доступ к экземпляру. + +**Тестируемый компонент** + +```html + + + +``` + +**Тест** + +```js +import { shallowMount } from '@vue/test-utils' +import ParentComponent from '@/components/ParentComponent' +import ChildComponent from '@/components/ChildComponent' + +describe('ParentComponent', () => { + it("displays 'Emitted!' when custom event is emitted", () => { + const wrapper = shallowMount(ParentComponent) + wrapper.find(ChildComponent).vm.$emit('custom') + expect(wrapper.html()).toContain('Emitted!') + }) +}) +``` + ### Манипулирование состоянием компонента Вы можете напрямую манипулировать состоянием компонента с помощью методов `setData` или `setProps` на обёртке: diff --git a/docs/ru/guides/dom-events.md b/docs/ru/guides/dom-events.md index be49eaabe..b3ce272cb 100644 --- a/docs/ru/guides/dom-events.md +++ b/docs/ru/guides/dom-events.md @@ -41,14 +41,17 @@ wrapper.trigger('click', { button: 0 }) + diff --git a/test/resources/components/component-with-transition.vue b/test/resources/components/component-with-transition.vue deleted file mode 100644 index c7416666c..000000000 --- a/test/resources/components/component-with-transition.vue +++ /dev/null @@ -1,14 +0,0 @@ - - - diff --git a/test/specs/config.spec.js b/test/specs/config.spec.js index dc078413d..26b293957 100644 --- a/test/specs/config.spec.js +++ b/test/specs/config.spec.js @@ -1,6 +1,5 @@ import { describeWithShallowAndMount } from '~resources/utils' import ComponentWithProps from '~resources/components/component-with-props.vue' -import { itDoNotRunIf } from 'conditional-specs' import { config, createLocalVue } from '~vue/test-utils' describeWithShallowAndMount('config', mountingMethod => { @@ -21,24 +20,6 @@ describeWithShallowAndMount('config', mountingMethod => { sandbox.restore() }) - itDoNotRunIf( - mountingMethod.name === 'shallowMount', - 'stubs transition and transition-group by default', - () => { - const testComponent = { - template: ` -
-

-

-

- ` - } - const wrapper = mountingMethod(testComponent) - expect(wrapper.contains('p')).to.equal(true) - expect(wrapper.contains('span')).to.equal(true) - } - ) - it('mocks a global variable', () => { const localVue = createLocalVue() const t = 'real value' diff --git a/test/specs/create-wrapper.spec.js b/test/specs/create-wrapper.spec.js index 934725547..27173ecc1 100644 --- a/test/specs/create-wrapper.spec.js +++ b/test/specs/create-wrapper.spec.js @@ -22,10 +22,8 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'mount', () => { const Constructor = Vue.extend(Component) const vm = new Constructor().$mount() const wrapper = createWrapper(vm, { - sync: true, attachToDocument: true }) expect(wrapper.options.attachToDocument).to.equal(true) - expect(wrapper.options.sync).to.equal(true) }) }) From 913f047ba38873c428524313e8a2dbd6e37ce5e9 Mon Sep 17 00:00:00 2001 From: Jamie Stumme Date: Thu, 21 Nov 2019 18:43:25 -0600 Subject: [PATCH 043/109] Support composition api variable for provider --- packages/create-instance/create-instance.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/create-instance/create-instance.js b/packages/create-instance/create-instance.js index 562c1f852..c8db93446 100644 --- a/packages/create-instance/create-instance.js +++ b/packages/create-instance/create-instance.js @@ -82,6 +82,7 @@ export default function createInstance( const parentComponentOptions = options.parentComponent || {} parentComponentOptions.provide = options.provide + parentComponentOptions._provided = options.provide parentComponentOptions.$_doNotStubChildren = true parentComponentOptions._isFunctionalContainer = componentOptions.functional parentComponentOptions.render = function(h) { From 661ececa801b809396ab52fcdffe9f880c29ca71 Mon Sep 17 00:00:00 2001 From: Jamie Stumme Date: Fri, 22 Nov 2019 06:03:26 -0600 Subject: [PATCH 044/109] Add files for flow support in vscode and updated flow to 0.111.x --- .vscode/settings.json | 4 ++++ package.json | 2 +- yarn.lock | 7 ++++--- 3 files changed, 9 insertions(+), 4 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..2ed11fc0d --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,4 @@ +{ + "javascript.validate.enable": false, + "flow.pathToFlow": "${workspaceFolder}/node_modules/.bin/flow" +} \ No newline at end of file diff --git a/package.json b/package.json index 2b484ef4a..7b83a1a2b 100644 --- a/package.json +++ b/package.json @@ -51,7 +51,7 @@ "eslint-plugin-flowtype": "^2.46.1", "eslint-plugin-markdown": "^1.0.0-beta.6", "eslint-plugin-vue-libs": "^2.1.0", - "flow-bin": "^0.66.0", + "flow-bin": "^0.111.0", "jsdom": "^12.0.0", "jsdom-global": "^3.0.2", "karma": "^3.1.4", diff --git a/yarn.lock b/yarn.lock index a3b77dca7..a465ba1e1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4491,9 +4491,10 @@ flatten@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782" -flow-bin@^0.66.0: - version "0.66.0" - resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.66.0.tgz#a96dde7015dc3343fd552a7b4963c02be705ca26" +flow-bin@^0.111.0: + version "0.111.3" + resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.111.3.tgz#8653a413400ebc966097a47c81fb4e6b722a5921" + integrity sha512-Gn27aRTjSFicukZ/pq3raRERmSk9UWszhIK9eNtj6843L54YtK+jk2OkQWV70+VKi9LmWyfItCkhwoIVy7L2lA== flow-remove-types-no-whitespace@^1.0.3: version "1.0.5" From 358633686857fba511ae08de1e91701f8d543025 Mon Sep 17 00:00:00 2001 From: Jamie Stumme Date: Fri, 22 Nov 2019 06:39:38 -0600 Subject: [PATCH 045/109] Add test for injection on composition api component. --- package.json | 1 + .../component-with-inject-composition.vue | 22 +++++++++++++++++++ test/specs/mounting-options/provide.spec.js | 18 +++++++++++++++ yarn.lock | 12 ++++++++++ 4 files changed, 53 insertions(+) create mode 100644 test/resources/components/component-with-inject-composition.vue diff --git a/package.json b/package.json index 7b83a1a2b..2f0fa51c5 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "test:types": "tsc -p packages/test-utils/types && tsc -p packages/server-test-utils/types" }, "dependencies": { + "@vue/composition-api": "^0.3.2", "babel-core": "^6.26.0", "babel-eslint": "^8.2.2", "babel-loader": "^7.1.3", diff --git a/test/resources/components/component-with-inject-composition.vue b/test/resources/components/component-with-inject-composition.vue new file mode 100644 index 000000000..fe1a48d6a --- /dev/null +++ b/test/resources/components/component-with-inject-composition.vue @@ -0,0 +1,22 @@ + + + diff --git a/test/specs/mounting-options/provide.spec.js b/test/specs/mounting-options/provide.spec.js index 97bb9d32c..8cb3f3627 100644 --- a/test/specs/mounting-options/provide.spec.js +++ b/test/specs/mounting-options/provide.spec.js @@ -1,8 +1,11 @@ import { config } from '~vue/test-utils' +import { createLocalVue } from '~vue/test-utils' import ComponentWithInject from '~resources/components/component-with-inject.vue' +import CompositionComponentWithInject from '~resources/components/component-with-inject-composition.vue' import { injectSupported } from '~resources/utils' import { describeWithShallowAndMount } from '~resources/utils' import { itDoNotRunIf, itSkipIf } from 'conditional-specs' +import VueCompositionApi from '@vue/composition-api' describeWithShallowAndMount('options.provide', mountingMethod => { let configProvideSave @@ -86,6 +89,21 @@ describeWithShallowAndMount('options.provide', mountingMethod => { } ) + itDoNotRunIf( + !injectSupported, + 'injects in a composition api component', + () => { + const localVue = createLocalVue() + localVue.use(VueCompositionApi) + const wrapper = mountingMethod(CompositionComponentWithInject, { + provide: { fromMount: '_' }, + localVue + }) + + expect(wrapper.html()).to.contain('_') + } + ) + it('config with function throws', () => { config.provide = () => {} diff --git a/yarn.lock b/yarn.lock index a465ba1e1..8a9e8f81a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -810,6 +810,13 @@ source-map "^0.5.6" vue-template-es2015-compiler "^1.6.0" +"@vue/composition-api@^0.3.2": + version "0.3.2" + resolved "https://registry.yarnpkg.com/@vue/composition-api/-/composition-api-0.3.2.tgz#2d797028e489bf7812f08c7bb33ffd03ef23c617" + integrity sha512-fD4dn9cJX62QSP2TMFLXCOQOa+Bu2o7kWDjrU/FNLkNqPPcCKBLxCH/Lc+gNCRBKdEUGyI3arjAw7j0Yz1hnvw== + dependencies: + tslib "^1.9.3" + "@webassemblyjs/ast@1.4.3": version "1.4.3" resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.4.3.tgz#3b3f6fced944d8660273347533e6d4d315b5934a" @@ -9601,6 +9608,11 @@ trough@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/trough/-/trough-1.0.1.tgz#a9fd8b0394b0ae8fff82e0633a0a36ccad5b5f86" +tslib@^1.9.3: + version "1.10.0" + resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a" + integrity sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ== + tty-browserify@0.0.0: version "0.0.0" resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6" From 8667d1925f9bab33c25be77b58b0c9677e97884e Mon Sep 17 00:00:00 2001 From: Jamie Stumme Date: Fri, 22 Nov 2019 06:51:01 -0600 Subject: [PATCH 046/109] Fix prettier on vscode workspace settings. --- .vscode/settings.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 2ed11fc0d..9cc43d98e 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,4 +1,4 @@ { - "javascript.validate.enable": false, - "flow.pathToFlow": "${workspaceFolder}/node_modules/.bin/flow" -} \ No newline at end of file + "javascript.validate.enable": false, + "flow.pathToFlow": "${workspaceFolder}/node_modules/.bin/flow" +} From eef7ae6f1824ffc0de749c10acb088c9047bfeb2 Mon Sep 17 00:00:00 2001 From: Jamie Stumme Date: Fri, 22 Nov 2019 06:52:00 -0600 Subject: [PATCH 047/109] More prettier changes --- .../component-with-inject-composition.vue | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/test/resources/components/component-with-inject-composition.vue b/test/resources/components/component-with-inject-composition.vue index fe1a48d6a..b2b40e827 100644 --- a/test/resources/components/component-with-inject-composition.vue +++ b/test/resources/components/component-with-inject-composition.vue @@ -5,18 +5,24 @@ From 07e5eef2c73f0f3e41d73c53f972f078372499c4 Mon Sep 17 00:00:00 2001 From: Jamie Stumme Date: Fri, 22 Nov 2019 07:13:52 -0600 Subject: [PATCH 048/109] Removed unused imports from injection composition vue file --- .../resources/components/component-with-inject-composition.vue | 3 --- 1 file changed, 3 deletions(-) diff --git a/test/resources/components/component-with-inject-composition.vue b/test/resources/components/component-with-inject-composition.vue index b2b40e827..8b0deef96 100644 --- a/test/resources/components/component-with-inject-composition.vue +++ b/test/resources/components/component-with-inject-composition.vue @@ -7,9 +7,6 @@