fix: render classes of functional component stubs (#898)

vuejs · Aug 4, 2018 · 11cfee2 · 11cfee2
1 parent 1bc37f1
commit 11cfee2
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 1 deletion.
diff --git a/packages/shared/stub-components.js b/packages/shared/stub-components.js
@@ -83,6 +83,13 @@ function createStubFromString (
   }
 }
 
+function createClassString (staticClass, dynamicClass) {
+  if (staticClass && dynamicClass) {
+    return staticClass + ' ' + dynamicClass
+  }
+  return staticClass || dynamicClass
+}
+
 function createBlankStub (
   originalComponent: Component,
   name: string
@@ -105,7 +112,11 @@ function createBlankStub (
         {
           attrs: componentOptions.functional ? {
             ...context.props,
-            ...context.data.attrs
+            ...context.data.attrs,
+            class: createClassString(
+              context.data.staticClass,
+              context.data.class
+            )
           } : {
             ...this.$props
           }

diff --git a/test/specs/shallow-mount.spec.js b/test/specs/shallow-mount.spec.js
@@ -156,6 +156,22 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => {
       expect(wrapper.html()).to.contain('<child-stub prop="a" attr="hello"')
     })
 
+  itDoNotRunIf(
+    vueVersion < 2.2, // $props does not exist in Vue < 2.2
+    'renders stubs classes', () => {
+      const TestComponent = {
+        template: `<child :class="classA" class="b" />`,
+        data: () => ({
+          'classA': 'a'
+        }),
+        components: {
+          child: { template: '<div />' }
+        }
+      }
+      const wrapper = shallowMount(TestComponent)
+      expect(wrapper.html()).to.contain('<child-stub class="b a"')
+    })
+
   it('renders stubs props for functional components', () => {
     const TestComponent = {
       template: `<child :prop="propA" attr="hello" />`,
@@ -173,6 +189,41 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => {
     expect(wrapper.html()).to.contain('<child-stub prop="a" attr="hello"')
   })
 
+  it('renders classes for functional components', () => {
+    const components = {
+      Child: {
+        functional: true
+      }
+    }
+    const TestComponent = {
+      template: `<child :class="classA" class="b" />`,
+      data: () => ({
+        'classA': 'a'
+      }),
+      components
+    }
+    const wrapper = shallowMount(TestComponent)
+    expect(wrapper.html()).to.contain('<child-stub class="b a"')
+    const TestComponent2 = {
+      template: `<child :class="classA"/>`,
+      data: () => ({
+        'classA': 'a'
+      }),
+      components
+    }
+    const wrapper2 = shallowMount(TestComponent2)
+    expect(wrapper2.html()).to.contain('<child-stub class="a"')
+    const TestComponent3 = {
+      template: `<child class="b" />`,
+      data: () => ({
+        'classA': 'a'
+      }),
+      components
+    }
+    const wrapper3 = shallowMount(TestComponent3)
+    expect(wrapper3.html()).to.contain('<child-stub class="b"')
+  })
+
   itDoNotRunIf(vueVersion < 2.1, 'handles recursive components', () => {
     const TestComponent = {
       template: `