From 78c01acf91b33bdb7c1b39bf529499bdec5cc917 Mon Sep 17 00:00:00 2001 From: eddyerburgh Date: Sat, 2 Mar 2019 18:10:17 +0000 Subject: [PATCH 1/6] fix: set renderToString to return promise --- package.json | 2 +- packages/server-test-utils/src/render.js | 6 +- .../server-test-utils/src/renderToString.js | 16 +- test/specs/mounting-options/attrs.spec.js | 10 +- test/specs/mounting-options/context.spec.js | 54 +- test/specs/mounting-options/localVue.spec.js | 8 +- test/specs/mounting-options/methods.spec.js | 13 +- test/specs/mounting-options/mocks.spec.js | 107 ++-- .../mounting-options/parentComponent.spec.js | 8 +- test/specs/mounting-options/provide.spec.js | 41 +- test/specs/mounting-options/slots.spec.js | 559 +++++++----------- test/specs/mounting-options/stubs.spec.js | 188 +++--- test/specs/render.spec.js | 7 +- test/specs/renderToString.spec.js | 99 +++- 14 files changed, 472 insertions(+), 646 deletions(-) diff --git a/package.json b/package.json index ed4dc1ded..15b5f907b 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,7 @@ "test:unit:debug": "npm run build:test && node --inspect-brk node_modules/.bin/mocha-webpack --webpack-config test/setup/webpack.test.config.js test/specs --recursive --require test/setup/mocha.setup.js", "test:unit:karma": "npm run build:test && TARGET=browser karma start test/setup/karma.conf.js --single-run", "test:unit:node": "npm run build:test && npm run test:unit:node:only", - "test:unit:node:only": "cross-env TEST_ENV=node mocha-webpack --webpack-config test/setup/webpack.test.config.js test/specs --recursive --require test/setup/mocha.setup.js", + "test:unit:node:only": "cross-env TEST_ENV=node mocha-webpack --webpack-config test/setup/webpack.test.config.js test/specs/render.spec.js test/specs/renderToString.spec.js --require test/setup/mocha.setup.js", "test:types": "tsc -p packages/test-utils/types && tsc -p packages/server-test-utils/types" }, "devDependencies": { diff --git a/packages/server-test-utils/src/render.js b/packages/server-test-utils/src/render.js index cd5fea340..e9e04cc43 100644 --- a/packages/server-test-utils/src/render.js +++ b/packages/server-test-utils/src/render.js @@ -3,10 +3,10 @@ import renderToString from './renderToString' import cheerio from 'cheerio' -export default function render( +export default async function render( component: Component, options: Options = {} -): string { - const renderedString = renderToString(component, options) +): Promise { + const renderedString = await renderToString(component, options) return cheerio.load('')(renderedString) } diff --git a/packages/server-test-utils/src/renderToString.js b/packages/server-test-utils/src/renderToString.js index 9b8ac5dc7..84ede530b 100644 --- a/packages/server-test-utils/src/renderToString.js +++ b/packages/server-test-utils/src/renderToString.js @@ -20,12 +20,12 @@ export default function renderToString( if (!renderer) { throwError( - `renderToString must be run in node. It cannot be ` + `run in a browser` + `renderToString must be run in node. It cannot be run in a browser` ) } if (options.attachToDocument) { - throwError(`you cannot use attachToDocument with ` + `renderToString`) + throwError(`you cannot use attachToDocument with renderToString`) } const mergedOptions = mergeOptions(options, config) @@ -36,14 +36,6 @@ export default function renderToString( mergedOptions, testUtils.createLocalVue(options.localVue) ) - let renderedString = '' - - // $FlowIgnore - renderer.renderToString(vm, (err, res) => { - if (err) { - throw err - } - renderedString = res - }) - return renderedString + + return renderer.renderToString(vm) } diff --git a/test/specs/mounting-options/attrs.spec.js b/test/specs/mounting-options/attrs.spec.js index 5394bc305..c0282f82a 100644 --- a/test/specs/mounting-options/attrs.spec.js +++ b/test/specs/mounting-options/attrs.spec.js @@ -1,16 +1,14 @@ import { attrsSupported } from '~resources/utils' import { - describeWithMountingMethods, + describeWithShallowAndMount, isRunningPhantomJS, vueVersion } from '~resources/utils' import { itSkipIf, itDoNotRunIf } from 'conditional-specs' -describeWithMountingMethods('options.attrs', mountingMethod => { +describeWithShallowAndMount('options.attrs', mountingMethod => { itDoNotRunIf( - vueVersion < 2.4 || - mountingMethod.name === 'renderToString' || - isRunningPhantomJS, + vueVersion < 2.4 || isRunningPhantomJS, 'handles inherit attrs', () => { if (!attrsSupported) return @@ -28,7 +26,7 @@ describeWithMountingMethods('options.attrs', mountingMethod => { ) itSkipIf( - mountingMethod.name === 'renderToString' || vueVersion < 2.5, + vueVersion < 2.5, 'defines attrs as empty object even when not passed', () => { const wrapper = mountingMethod({ template: '

' }) diff --git a/test/specs/mounting-options/context.spec.js b/test/specs/mounting-options/context.spec.js index 621559e68..0c2a506ae 100644 --- a/test/specs/mounting-options/context.spec.js +++ b/test/specs/mounting-options/context.spec.js @@ -1,30 +1,28 @@ import Vue from 'vue' import { vueVersion } from '~resources/utils' -import { describeWithMountingMethods } from '~resources/utils' +import { describeWithShallowAndMount } from '~resources/utils' +import { itDoNotRunIf } from 'conditional-specs' -describeWithMountingMethods('options.context', mountingMethod => { - it('mounts functional component when passed context object', () => { - if (vueVersion <= 2.2) { - console.log( - 'WARN: no current way to test functional component in vue@2.1' - ) - return - } +describeWithShallowAndMount('options.context', mountingMethod => { + itDoNotRunIf( + vueVersion <= 2.2, + 'mounts functional component when passed context object', + () => { + const Component = { + functional: true, + render(h, { props }) { + return h('div') + }, + name: 'common' + } + const context = { + data: { hello: true }, + props: { show: true } + } - const Component = { - functional: true, - render(h, { props }) { - return h('div') - }, - name: 'common' - } - const context = { - data: { hello: true }, - props: { show: true } + mountingMethod(Component, { context }) } - - mountingMethod(Component, { context }) - }) + ) it('throws error if non functional component is passed with context option', () => { const Component = { @@ -76,9 +74,7 @@ describeWithMountingMethods('options.context', mountingMethod => { render: (h, { props }) => h('div', props.testProp) } const wrapper = mountingMethod(Component) - const HTML = - mountingMethod.name === 'renderToString' ? wrapper : wrapper.html() - expect(HTML).to.contain(defaultValue) + expect(wrapper.html()).to.contain(defaultValue) }) it('mounts functional component with a defined context.children text', () => { @@ -93,9 +89,7 @@ describeWithMountingMethods('options.context', mountingMethod => { children: ['render text'] } }) - const HTML = - mountingMethod.name === 'renderToString' ? wrapper : wrapper.html() - expect(HTML).to.contain('render text') + expect(wrapper.html()).to.contain('render text') }) it('mounts functional component with a defined context.children element', () => { @@ -110,8 +104,6 @@ describeWithMountingMethods('options.context', mountingMethod => { children: [h => h('div', 'render component')] } }) - const HTML = - mountingMethod.name === 'renderToString' ? wrapper : wrapper.html() - expect(HTML).to.contain('render component') + expect(wrapper.html()).to.contain('render component') }) }) diff --git a/test/specs/mounting-options/localVue.spec.js b/test/specs/mounting-options/localVue.spec.js index b2614bd51..f78eeab44 100644 --- a/test/specs/mounting-options/localVue.spec.js +++ b/test/specs/mounting-options/localVue.spec.js @@ -1,6 +1,6 @@ import Vue from 'vue' import { - describeWithMountingMethods, + describeWithShallowAndMount, isRunningPhantomJS, vueVersion } from '~resources/utils' @@ -8,7 +8,7 @@ import { createLocalVue, shallowMount, mount } from '~vue/test-utils' import { itSkipIf, itRunIf, itDoNotRunIf } from 'conditional-specs' import Vuex from 'vuex' -describeWithMountingMethods('options.localVue', mountingMethod => { +describeWithShallowAndMount('options.localVue', mountingMethod => { itSkipIf( isRunningPhantomJS, 'mounts component using passed localVue as base Vue', @@ -21,9 +21,7 @@ describeWithMountingMethods('options.localVue', mountingMethod => { const wrapper = mountingMethod(TestComponent, { localVue: localVue }) - const HTML = - mountingMethod.name === 'renderToString' ? wrapper : wrapper.html() - expect(HTML).to.contain('some value') + expect(wrapper.html()).to.contain('some value') } ) diff --git a/test/specs/mounting-options/methods.spec.js b/test/specs/mounting-options/methods.spec.js index c95d6e6d4..352f1643c 100644 --- a/test/specs/mounting-options/methods.spec.js +++ b/test/specs/mounting-options/methods.spec.js @@ -1,14 +1,12 @@ import { config } from '~vue/test-utils' -import { describeWithMountingMethods } from '~resources/utils' +import { describeWithShallowAndMount } from '~resources/utils' -describeWithMountingMethods('options.methods', mountingMethod => { +describeWithShallowAndMount('options.methods', mountingMethod => { it('prioritize mounting options over config', () => { config.methods['val'] = () => 'methodFromConfig' const TestComponent = { - template: ` -

{{ val() }}
- ` + template: `
{{ val() }}
` } const wrapper = mountingMethod(TestComponent, { @@ -18,8 +16,7 @@ describeWithMountingMethods('options.methods', mountingMethod => { } } }) - const HTML = - mountingMethod.name === 'renderToString' ? wrapper : wrapper.html() - expect(HTML).to.contain('methodFromOptions') + + expect(wrapper.html()).to.contain('methodFromOptions') }) }) diff --git a/test/specs/mounting-options/mocks.spec.js b/test/specs/mounting-options/mocks.spec.js index 91cbb6a52..e8478c463 100644 --- a/test/specs/mounting-options/mocks.spec.js +++ b/test/specs/mounting-options/mocks.spec.js @@ -2,10 +2,10 @@ import { createLocalVue, config } from '~vue/test-utils' import Vue from 'vue' import Component from '~resources/components/component.vue' import ComponentWithVuex from '~resources/components/component-with-vuex.vue' -import { describeWithMountingMethods, vueVersion } from '~resources/utils' +import { describeWithShallowAndMount, vueVersion } from '~resources/utils' import { itDoNotRunIf, itSkipIf, itRunIf } from 'conditional-specs' -describeWithMountingMethods('options.mocks', mountingMethod => { +describeWithShallowAndMount('options.mocks', mountingMethod => { const sandbox = sinon.createSandbox() let configMocksSave @@ -38,10 +38,8 @@ describeWithMountingMethods('options.mocks', mountingMethod => { $route } }) - const HTML = - mountingMethod.name === 'renderToString' ? wrapper : wrapper.html() - expect(HTML).contains('true') - expect(HTML).contains('http://test.com') + expect(wrapper.html()).contains('true') + expect(wrapper.html()).contains('http://test.com') }) itSkipIf(vueVersion < 2.3, 'adds variables to extended components', () => { @@ -61,46 +59,35 @@ describeWithMountingMethods('options.mocks', mountingMethod => { $route } }) - const HTML = - mountingMethod.name === 'renderToString' ? wrapper : wrapper.html() - expect(HTML).contains('http://test.com') + expect(wrapper.html()).contains('http://test.com') }) - // render returns a string so reactive does not apply - itDoNotRunIf( - mountingMethod.name === 'renderToString', - 'adds variables as reactive properties to vm when passed', - async () => { - const stub = sandbox.stub() - const $reactiveMock = { value: 'value' } - const wrapper = mountingMethod( - { - template: ` -
- {{value}} -
- `, - computed: { - value() { - return this.$reactiveMock.value - } - }, - watch: { - value() { - stub() - } + it('adds variables as reactive properties to vm when passed', async () => { + const stub = sandbox.stub() + const $reactiveMock = { value: 'value' } + const wrapper = mountingMethod( + { + template: `
{{value}}
`, + computed: { + value() { + return this.$reactiveMock.value } }, - { - mocks: { $reactiveMock } + watch: { + value() { + stub() + } } - ) - expect(wrapper.text()).to.contain('value') - $reactiveMock.value = 'changed value' - await Vue.nextTick() - expect(wrapper.text()).to.contain('changed value') - } - ) + }, + { + mocks: { $reactiveMock } + } + ) + expect(wrapper.text()).to.contain('value') + $reactiveMock.value = 'changed value' + await Vue.nextTick() + expect(wrapper.text()).to.contain('changed value') + }) itDoNotRunIf( mountingMethod.name === 'shallowMount', @@ -118,9 +105,7 @@ describeWithMountingMethods('options.mocks', mountingMethod => { mocks: { $store: { state: { count, foo: {} } } } } ) - const HTML = - mountingMethod.name === 'renderToString' ? wrapper : wrapper.html() - expect(HTML).contains(count) + expect(wrapper.html()).contains(count) } ) @@ -142,27 +127,21 @@ describeWithMountingMethods('options.mocks', mountingMethod => { localVue } ) - const HTML = - mountingMethod.name === 'renderToString' ? wrapper : wrapper.html() - expect(HTML).contains(count) + expect(wrapper.html()).contains(count) } ) - itDoNotRunIf( - mountingMethod.name === 'renderToString', - 'does not affect global vue class when passed as mocks object', - () => { - const $store = { store: true } - const wrapper = mountingMethod(Component, { - mocks: { - $store - } - }) - expect(wrapper.vm.$store).to.equal($store) - const freshWrapper = mountingMethod(Component) - expect(typeof freshWrapper.vm.$store).to.equal('undefined') - } - ) + it('does not affect global vue class when passed as mocks object', () => { + const $store = { store: true } + const wrapper = mountingMethod(Component, { + mocks: { + $store + } + }) + expect(wrapper.vm.$store).to.equal($store) + const freshWrapper = mountingMethod(Component) + expect(typeof freshWrapper.vm.$store).to.equal('undefined') + }) it('logs that a property cannot be overwritten if there are problems writing', () => { const localVue = createLocalVue() @@ -197,9 +176,7 @@ describeWithMountingMethods('options.mocks', mountingMethod => { $global: 'locallyMockedValue' } }) - const HTML = - mountingMethod.name === 'renderToString' ? wrapper : wrapper.html() - expect(HTML).to.contain('locallyMockedValue') + expect(wrapper.html()).to.contain('locallyMockedValue') }) itRunIf( diff --git a/test/specs/mounting-options/parentComponent.spec.js b/test/specs/mounting-options/parentComponent.spec.js index f6eb82735..5ce65f3dc 100644 --- a/test/specs/mounting-options/parentComponent.spec.js +++ b/test/specs/mounting-options/parentComponent.spec.js @@ -1,6 +1,6 @@ -import { describeWithMountingMethods } from '~resources/utils' +import { describeWithShallowAndMount } from '~resources/utils' -describeWithMountingMethods('options.parentComponent', mountingMethod => { +describeWithShallowAndMount('options.parentComponent', mountingMethod => { it('mounts component with $parent set to options.parentComponent', () => { const Parent = { data: () => ({ @@ -13,9 +13,7 @@ describeWithMountingMethods('options.parentComponent', mountingMethod => { const wrapper = mountingMethod(TestComponent, { parentComponent: Parent }) - const HTML = - mountingMethod.name === 'renderToString' ? wrapper : wrapper.html() - expect(HTML).to.contain('Parent Name') + expect(wrapper.html()).to.contain('Parent Name') }) it('validates parentComponent option', () => { diff --git a/test/specs/mounting-options/provide.spec.js b/test/specs/mounting-options/provide.spec.js index eb356f81d..97bb9d32c 100644 --- a/test/specs/mounting-options/provide.spec.js +++ b/test/specs/mounting-options/provide.spec.js @@ -1,10 +1,10 @@ import { config } from '~vue/test-utils' import ComponentWithInject from '~resources/components/component-with-inject.vue' import { injectSupported } from '~resources/utils' -import { describeWithMountingMethods } from '~resources/utils' +import { describeWithShallowAndMount } from '~resources/utils' import { itDoNotRunIf, itSkipIf } from 'conditional-specs' -describeWithMountingMethods('options.provide', mountingMethod => { +describeWithShallowAndMount('options.provide', mountingMethod => { let configProvideSave beforeEach(() => { @@ -25,9 +25,7 @@ describeWithMountingMethods('options.provide', mountingMethod => { const wrapper = mountingMethod(ComponentWithInject, { provide: { fromMount: 'objectValue' } }) - const HTML = - mountingMethod.name === 'renderToString' ? wrapper : wrapper.html() - expect(HTML).to.contain('objectValue') + expect(wrapper.html()).to.contain('objectValue') } ) @@ -42,9 +40,7 @@ describeWithMountingMethods('options.provide', mountingMethod => { } } }) - const HTML = - mountingMethod.name === 'renderToString' ? wrapper : wrapper.html() - expect(HTML).to.contain('functionValue') + expect(wrapper.html()).to.contain('functionValue') } ) @@ -72,10 +68,7 @@ describeWithMountingMethods('options.provide', mountingMethod => { config.provide['fromMount'] = 'globalConfig' const wrapper = mountingMethod(ComponentWithInject) - const HTML = - mountingMethod.name === 'renderToString' ? wrapper : wrapper.html() - - expect(HTML).to.contain('globalConfig') + expect(wrapper.html()).to.contain('globalConfig') } ) @@ -88,24 +81,18 @@ describeWithMountingMethods('options.provide', mountingMethod => { const wrapper = mountingMethod(ComponentWithInject, { provide: { fromMount: '_' } }) - const HTML = - mountingMethod.name === 'renderToString' ? wrapper : wrapper.html() - expect(HTML).to.contain('_') + expect(wrapper.html()).to.contain('_') } ) - itSkipIf( - mountingMethod.name === 'renderToString', - 'config with function throws', - () => { - config.provide = () => {} + it('config with function throws', () => { + config.provide = () => {} - expect(() => { - mountingMethod(ComponentWithInject, { - provide: { fromMount: '_' } - }) - }).to.throw() - } - ) + expect(() => { + mountingMethod(ComponentWithInject, { + provide: { fromMount: '_' } + }) + }).to.throw() + }) }) diff --git a/test/specs/mounting-options/slots.spec.js b/test/specs/mounting-options/slots.spec.js index 423d50bf6..ee399c333 100644 --- a/test/specs/mounting-options/slots.spec.js +++ b/test/specs/mounting-options/slots.spec.js @@ -3,20 +3,16 @@ import Component from '~resources/components/component.vue' import ComponentWithSlots from '~resources/components/component-with-slots.vue' import ComponentAsAClass from '~resources/components/component-as-a-class.vue' import ComponentWithParentName from '~resources/components/component-with-parent-name.vue' -import { describeWithMountingMethods, vueVersion } from '~resources/utils' -import { itSkipIf, itDoNotRunIf } from 'conditional-specs' +import { describeWithShallowAndMount, vueVersion } from '~resources/utils' +import { itDoNotRunIf } from 'conditional-specs' import { mount, createLocalVue } from '~vue/test-utils' -describeWithMountingMethods('options.slots', mountingMethod => { +describeWithShallowAndMount('options.slots', mountingMethod => { it('mounts component with default slot if passed component in slot object', () => { const wrapper = mountingMethod(ComponentWithSlots, { slots: { default: Component } }) - if (mountingMethod.name === 'renderToString') { - expect(wrapper).contains('
') - } else { - expect(wrapper.contains(Component)).to.equal(true) - } + expect(wrapper.contains(Component)).to.equal(true) }) itDoNotRunIf( @@ -37,11 +33,7 @@ describeWithMountingMethods('options.slots', mountingMethod => { }, localVue }) - if (mountingMethod.name === 'renderToString') { - expect(wrapper).contains('