From d9e2027d47446591f3b13cf84cd94f6ca7d0abe9 Mon Sep 17 00:00:00 2001 From: Lachlan Miller Date: Wed, 18 Mar 2020 17:48:29 +1000 Subject: [PATCH 1/3] feat: support object class binding in stubbed functional components --- .../create-instance/create-component-stubs.js | 21 +++++++++++++++--- .../component-with-functional-child.vue | 22 +++++++++++++++++++ test/specs/shallow-mount.spec.js | 12 ++++++++++ 3 files changed, 52 insertions(+), 3 deletions(-) create mode 100644 test/resources/components/component-with-functional-child.vue diff --git a/packages/create-instance/create-component-stubs.js b/packages/create-instance/create-component-stubs.js index b82addd99..d6b1cecd9 100644 --- a/packages/create-instance/create-component-stubs.js +++ b/packages/create-instance/create-component-stubs.js @@ -60,10 +60,25 @@ function getCoreProperties(componentOptions: Component): Object { } function createClassString(staticClass, dynamicClass) { - if (staticClass && dynamicClass) { - return staticClass + ' ' + dynamicClass + // :class="someComputedObject" can return a string, object or undefined + // if it is a string, we don't need to do anything special. + let evalutedDynamicClass = dynamicClass + + // if it is an object, eg { 'foo': true }, we need to evaluate it. + // see https://github.com/vuejs/vue-test-utils/issues/1474 for more context. + if (typeof dynamicClass === 'object') { + evalutedDynamicClass = Object.keys(dynamicClass).reduce((acc, key) => { + if (dynamicClass[key] === true) { + return acc + ' ' + key + } + return acc + }, '') + } + + if (staticClass && evalutedDynamicClass) { + return staticClass + ' ' + evalutedDynamicClass } - return staticClass || dynamicClass + return staticClass || evalutedDynamicClass } function resolveOptions(component, _Vue) { diff --git a/test/resources/components/component-with-functional-child.vue b/test/resources/components/component-with-functional-child.vue new file mode 100644 index 000000000..5d18f7272 --- /dev/null +++ b/test/resources/components/component-with-functional-child.vue @@ -0,0 +1,22 @@ + + + diff --git a/test/specs/shallow-mount.spec.js b/test/specs/shallow-mount.spec.js index 3f3fb2864..eb3f444f0 100644 --- a/test/specs/shallow-mount.spec.js +++ b/test/specs/shallow-mount.spec.js @@ -3,6 +3,7 @@ import Vue from 'vue' import { mount, shallowMount, createLocalVue } from '@vue/test-utils' import Component from '~resources/components/component.vue' import ComponentWithChild from '~resources/components/component-with-child.vue' +import ComponentWithFunctionalChild from '~resources/components/component-with-functional-child.vue' import ComponentWithNestedChildren from '~resources/components/component-with-nested-children.vue' import ComponentWithLifecycleHooks from '~resources/components/component-with-lifecycle-hooks.vue' import ComponentWithoutName from '~resources/components/component-without-name.vue' @@ -25,6 +26,17 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => { sandbox.restore() }) + it('renders dynamic class of functional child', () => { + const wrapper = shallowMount(ComponentWithFunctionalChild) + expect(wrapper.find('functional-component-stub').classes()).to.contain( + 'foo', + 'bar' + ) + expect(wrapper.find('functional-component-stub').classes()).not.to.contain( + 'qux' + ) + }) + it('returns new VueWrapper of Vue localVue if no options are passed', () => { const compiled = compileToFunctions('
') const wrapper = shallowMount(compiled) From 02b0e7cb00fec37101d35b4899c7c780a944448f Mon Sep 17 00:00:00 2001 From: Lachlan Miller Date: Wed, 18 Mar 2020 20:08:23 +1000 Subject: [PATCH 2/3] fix: typo --- packages/create-instance/create-component-stubs.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/create-instance/create-component-stubs.js b/packages/create-instance/create-component-stubs.js index d6b1cecd9..bc7636f0f 100644 --- a/packages/create-instance/create-component-stubs.js +++ b/packages/create-instance/create-component-stubs.js @@ -62,12 +62,12 @@ function getCoreProperties(componentOptions: Component): Object { function createClassString(staticClass, dynamicClass) { // :class="someComputedObject" can return a string, object or undefined // if it is a string, we don't need to do anything special. - let evalutedDynamicClass = dynamicClass + let evaluatedDynamicClass = dynamicClass // if it is an object, eg { 'foo': true }, we need to evaluate it. // see https://github.com/vuejs/vue-test-utils/issues/1474 for more context. if (typeof dynamicClass === 'object') { - evalutedDynamicClass = Object.keys(dynamicClass).reduce((acc, key) => { + evaluatedDynamicClass = Object.keys(dynamicClass).reduce((acc, key) => { if (dynamicClass[key] === true) { return acc + ' ' + key } @@ -75,10 +75,10 @@ function createClassString(staticClass, dynamicClass) { }, '') } - if (staticClass && evalutedDynamicClass) { - return staticClass + ' ' + evalutedDynamicClass + if (staticClass && evaluatedDynamicClass) { + return staticClass + ' ' + evaluatedDynamicClass } - return staticClass || evalutedDynamicClass + return staticClass || evaluatedDynamicClass } function resolveOptions(component, _Vue) { From fe4b36adbe4f11420f914505c37fc67b6cae52bd Mon Sep 17 00:00:00 2001 From: Lachlan Miller Date: Fri, 20 Mar 2020 16:46:11 +1000 Subject: [PATCH 3/3] fix: do not check for strict true --- packages/create-instance/create-component-stubs.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/create-instance/create-component-stubs.js b/packages/create-instance/create-component-stubs.js index bc7636f0f..a831c3e05 100644 --- a/packages/create-instance/create-component-stubs.js +++ b/packages/create-instance/create-component-stubs.js @@ -68,7 +68,7 @@ function createClassString(staticClass, dynamicClass) { // see https://github.com/vuejs/vue-test-utils/issues/1474 for more context. if (typeof dynamicClass === 'object') { evaluatedDynamicClass = Object.keys(dynamicClass).reduce((acc, key) => { - if (dynamicClass[key] === true) { + if (dynamicClass[key]) { return acc + ' ' + key } return acc