feat: support object class binding in stubbed functional components (#…

…1476)

* feat: support object class binding in stubbed functional components

* fix: typo

* fix: do not check for strict true

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 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') {
+    evaluatedDynamicClass = Object.keys(dynamicClass).reduce((acc, key) => {
+      if (dynamicClass[key]) {
+        return acc + ' ' + key
+      }
+      return acc
+    }, '')
+  }
+
+  if (staticClass && evaluatedDynamicClass) {
+    return staticClass + ' ' + evaluatedDynamicClass
   }
-  return staticClass || dynamicClass
+  return staticClass || evaluatedDynamicClass
 }
 
 function resolveOptions(component, _Vue) {

test/resources/components/component-with-functional-child.vue

@@ -0,0 +1,22 @@
+<template>
+  <functional-component
+    :class="{ bar: a + b === 2, foo: a === 1, qux: a === 2 }"
+  />
+</template>
+
+<script>
+import FunctionalComponent from './functional-component.vue'
+
+export default {
+  components: {
+    FunctionalComponent
+  },
+
+  data() {
+    return {
+      a: 1,
+      b: 1
+    }
+  }
+}
+</script>

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('<div><input /></div>')
     const wrapper = shallowMount(compiled)