fix: add stubbed components to ignored elements (#714)

vuejs · Jun 14, 2018 · 5072274 · 5072274
1 parent dae0b1c
commit 5072274
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 19 deletions.
diff --git a/packages/shared/stub-components.js b/packages/shared/stub-components.js
@@ -62,10 +62,17 @@ function createStubFromString (
 }
 
 function createBlankStub (originalComponent: Component) {
+  const name = `${originalComponent.name}-stub`
+
+  // ignoreElements does not exist in Vue 2.0.x
+  if (Vue.config.ignoredElements) {
+    Vue.config.ignoredElements.push(name)
+  }
+
   return {
     ...getCoreProperties(originalComponent),
     render (h) {
-      return h(`${originalComponent.name}-stub`)
+      return h(name)
     }
   }
 }
@@ -131,10 +138,6 @@ export function createComponentStubs (
           }
         }
       }
-      // ignoreElements does not exist in Vue 2.0.x
-      if (Vue.config.ignoredElements) {
-        Vue.config.ignoredElements.push(`${stub}-stub`)
-      }
     })
   }
   return components
@@ -148,11 +151,6 @@ function stubComponents (components: Object, stubbedComponents: Object) {
       components[component].name = component
     }
     stubbedComponents[component] = createBlankStub(components[component])
-
-    // ignoreElements does not exist in Vue 2.0.x
-    if (Vue.config.ignoredElements) {
-      Vue.config.ignoredElements.push(`${components[component].name}-stub`)
-    }
   })
 }
 
@@ -163,6 +161,8 @@ export function createComponentStubsForAll (component: Component): Object {
     stubComponents(component.components, stubbedComponents)
   }
 
+  stubbedComponents[component.name] = createBlankStub(component)
+
   let extended = component.extends
 
   // Loop through extended component chains to stub all child components

diff --git a/test/specs/shallow-mount.spec.js b/test/specs/shallow-mount.spec.js
@@ -9,18 +9,18 @@ import ComponentWithoutName from '~resources/components/component-without-name.v
 import ComponentAsAClassWithChild from '~resources/components/component-as-a-class-with-child.vue'
 import RecursiveComponent from '~resources/components/recursive-component.vue'
 import { vueVersion } from '~resources/utils'
-import { describeRunIf } from 'conditional-specs'
+import { describeRunIf, itDoNotRunIf } from 'conditional-specs'
 
 describeRunIf(process.env.TEST_ENV !== 'node',
   'shallowMount', () => {
-    let info
-
     beforeEach(() => {
-      info = sinon.stub(console, 'info')
+      sinon.stub(console, 'info')
+      sinon.stub(console, 'error')
     })
 
     afterEach(() => {
-      info.restore()
+      console.info.restore()
+      console.error.restore()
     })
 
     it('returns new VueWrapper of Vue localVue if no options are passed', () => {
@@ -61,7 +61,7 @@ describeRunIf(process.env.TEST_ENV !== 'node',
       localVue.component('registered-component', ComponentWithLifecycleHooks)
       mount(TestComponent, { localVue })
 
-      expect(info.callCount).to.equal(4)
+      expect(console.info.callCount).to.equal(4)
     })
 
     it('stubs globally registered components', () => {
@@ -72,12 +72,52 @@ describeRunIf(process.env.TEST_ENV !== 'node',
       shallowMount(Component)
       mount(Component)
 
-      expect(info.callCount).to.equal(4)
-    })
+      expect(console.info.callCount).to.equal(4)
+    })
+
+    itDoNotRunIf(
+      vueVersion < 2.1,
+      'adds stubbed components to ignored elements', () => {
+        const TestComponent = {
+          template: `
+          <div>
+            <router-link>
+            </router-link>
+            <custom-component />
+          </div>
+        `,
+          components: {
+            'router-link': {
+              template: '<div/>'
+            },
+            'custom-component': {
+              template: '<div/>'
+            }
+          }
+        }
+        shallowMount(TestComponent)
+        expect(console.error).not.called
+      })
+
+    itDoNotRunIf(
+      vueVersion < 2.1,
+      'handles recursive components', () => {
+        const TestComponent = {
+          template: `
+          <div>
+            <test-component />
+          </div>
+        `,
+          name: 'test-component'
+        }
+        const wrapper = shallowMount(TestComponent)
+        expect(wrapper.html()).to.contain('<test-component-stub>')
+        expect(console.error).not.called
+      })
 
     it('does not call stubbed children lifecycle hooks', () => {
       shallowMount(ComponentWithNestedChildren)
-      expect(info.called).to.equal(false)
+      expect(console.info.called).to.equal(false)
     })
 
     it('stubs extended components', () => {