From 356d62427057e48c3ea1712db5d356af24692cfc Mon Sep 17 00:00:00 2001 From: dfcook Date: Thu, 27 Dec 2018 09:27:43 +0000 Subject: [PATCH 1/3] Support all mount options in vue-test-utils --- package.json | 2 +- src/index.js | 8 ++++--- tests/__tests__/components/Button.vue | 26 ++++++++++++----------- tests/__tests__/components/Form.vue | 22 +++++++++++++++++++ tests/__tests__/integration-with-stubs.js | 11 ++++++++++ tests/__tests__/simple-button.js | 6 +++--- 6 files changed, 56 insertions(+), 19 deletions(-) create mode 100644 tests/__tests__/components/Form.vue create mode 100644 tests/__tests__/integration-with-stubs.js diff --git a/package.json b/package.json index 3a2b72ee..ab347b1a 100644 --- a/package.json +++ b/package.json @@ -46,7 +46,7 @@ "babel-eslint": "^10.0.1", "babel-jest": "^23.6.0", "coveralls": "^3.0.2", - "eslint": "^5.11.0", + "eslint": "^5.11.1", "eslint-config-standard": "^12.0.0", "eslint-plugin-import": "^2.14.0", "eslint-plugin-node": "^8.0.0", diff --git a/src/index.js b/src/index.js index 7782dc2f..c887c45e 100644 --- a/src/index.js +++ b/src/index.js @@ -13,9 +13,9 @@ import { const mountedWrappers = new Set() function render (TestComponent, { - props = null, store = null, - routes = null + routes = null, + ...mountOptions } = {}, configurationCb) { const localVue = createLocalVue() let vuexStore = null @@ -39,13 +39,15 @@ function render (TestComponent, { configurationCb(localVue) } + const { props, ...rest } = mountOptions const wrapper = mount(TestComponent, { localVue, router, store: vuexStore, propsData: { ...props }, attachToDocument: true, - sync: false + sync: false, + ...rest }) mountedWrappers.add(wrapper) diff --git a/tests/__tests__/components/Button.vue b/tests/__tests__/components/Button.vue index dbddb62f..383c1b18 100644 --- a/tests/__tests__/components/Button.vue +++ b/tests/__tests__/components/Button.vue @@ -1,5 +1,8 @@ \ No newline at end of file + return 'button' + } + } +} + diff --git a/tests/__tests__/components/Form.vue b/tests/__tests__/components/Form.vue new file mode 100644 index 00000000..f5702ebd --- /dev/null +++ b/tests/__tests__/components/Form.vue @@ -0,0 +1,22 @@ + + + diff --git a/tests/__tests__/integration-with-stubs.js b/tests/__tests__/integration-with-stubs.js new file mode 100644 index 00000000..05bb8dc9 --- /dev/null +++ b/tests/__tests__/integration-with-stubs.js @@ -0,0 +1,11 @@ +import { render, cleanup } from '../../src' +import Form from './components/Form' + +afterEach(cleanup) + +test('Form contains search button', () => { + const { getByText } = render(Form, { + stubs: ['FontAwesomeIcon'] + }) + getByText('Search now') +}) diff --git a/tests/__tests__/simple-button.js b/tests/__tests__/simple-button.js index 2bf5ada3..6e20ad34 100644 --- a/tests/__tests__/simple-button.js +++ b/tests/__tests__/simple-button.js @@ -1,5 +1,5 @@ -import { render, cleanup, fireEvent } from '../../src'; -import SimpleButton from './components/Button'; +import { render, cleanup, fireEvent } from '../../src' +import SimpleButton from './components/Button' afterEach(cleanup) @@ -20,4 +20,4 @@ test('clicked prop is called when button is clicked', () => { }) fireEvent.click(getByText(text)) expect(clicked).toBeCalled() -}) \ No newline at end of file +}) From 47c99aa11df15f63519d77203a981c82ccaee7f7 Mon Sep 17 00:00:00 2001 From: dfcook Date: Thu, 27 Dec 2018 09:46:06 +0000 Subject: [PATCH 2/3] Move props to propsData to sync with vue-test-utils --- README.md | 2 +- src/index.js | 9 ++++++--- yarn.lock | 8 ++++---- 3 files changed, 11 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index f89b5a0c..845f8ce7 100644 --- a/README.md +++ b/README.md @@ -116,9 +116,9 @@ The `render` function takes up to 3 parameters and returns an object with some h 1. Component - the Vue component to be tested. 2. RenderOptions - an object containing additional information to be passed to @vue/test-utils mount. This can be: -* props - The component props to be passed to TestComponent * store - The object definition of a Vuex store, if present `render` will configure a Vuex store and pass to mount. * routes - A set of routes, if present render will configure VueRouter and pass to mount. +All additional render options are passed to the vue-test-utils mount function in its options. 3. configurationCb - A callback to be called passing the Vue instance when created. This allows 3rd party plugins to be installed prior to mount. ### fireEvent diff --git a/src/index.js b/src/index.js index c887c45e..f9a176df 100644 --- a/src/index.js +++ b/src/index.js @@ -39,15 +39,18 @@ function render (TestComponent, { configurationCb(localVue) } - const { props, ...rest } = mountOptions + if (!mountOptions.propsData && !!mountOptions.props) { + mountOptions.propsData = mountOptions.props + delete mountOptions.props + } + const wrapper = mount(TestComponent, { localVue, router, store: vuexStore, - propsData: { ...props }, attachToDocument: true, sync: false, - ...rest + ...mountOptions }) mountedWrappers.add(wrapper) diff --git a/yarn.lock b/yarn.lock index dc097307..bf102c6d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1873,10 +1873,10 @@ eslint-visitor-keys@^1.0.0: resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#3f3180fb2e291017716acb4c9d6d5b5c34a6a81d" integrity sha512-qzm/XxIbxm/FHyH341ZrbnMUpe+5Bocte9xkmFMzPMjRaZMcXww+MpBptFvtU+79L362nqiLhekCxCxDPaUMBQ== -eslint@^5.11.0: - version "5.11.0" - resolved "https://registry.yarnpkg.com/eslint/-/eslint-5.11.0.tgz#51a0e70f137a425fe044cd48273b96f28a774b1f" - integrity sha512-gbEg0ttToZPkZUv2yYjpipxuYrv/9aSSmgM4V6GkiO3u04QosHYBtduUCqLEulEg3YvNDAkk3OWzyQJ/heZ3Nw== +eslint@^5.11.1: + version "5.11.1" + resolved "https://registry.yarnpkg.com/eslint/-/eslint-5.11.1.tgz#8deda83db9f354bf9d3f53f9677af7e0e13eadda" + integrity sha512-gOKhM8JwlFOc2acbOrkYR05NW8M6DCMSvfcJiBB5NDxRE1gv8kbvxKaC9u69e6ZGEMWXcswA/7eKR229cEIpvg== dependencies: "@babel/code-frame" "^7.0.0" ajv "^6.5.3" From d4d87553d64ec5f0fae3143d976f4a547fa0b173 Mon Sep 17 00:00:00 2001 From: dfcook Date: Thu, 27 Dec 2018 09:47:49 +0000 Subject: [PATCH 3/3] Update test to use propsData --- tests/__tests__/fetch.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/__tests__/fetch.js b/tests/__tests__/fetch.js index 5479bc72..25ed5a14 100644 --- a/tests/__tests__/fetch.js +++ b/tests/__tests__/fetch.js @@ -10,7 +10,7 @@ test('Fetch makes an API call and displays the greeting when load-greeting is cl }) ) - const { html, getByText } = render(Fetch, { props: { url: '/greeting' } }) + const { html, getByText } = render(Fetch, { propsData: { url: '/greeting' } }) // Act await fireEvent.click(getByText('Fetch'))