fix: should warn unknown components inside <keep-alive>

vuejs · Nov 17, 2017 · 6d6b373 · 6d6b373
1 parent f5cd29e
commit 6d6b373
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 68 deletions.
diff --git a/src/core/components/keep-alive.js b/src/core/components/keep-alive.js
@@ -81,7 +81,8 @@ export default {
   },
 
   render () {
-    const vnode: VNode = getFirstComponentChild(this.$slots.default)
+    const slot = this.$slots.default
+    const vnode: VNode = getFirstComponentChild(slot)
     const componentOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions
     if (componentOptions) {
       // check pattern
@@ -115,6 +116,6 @@ export default {
 
       vnode.data.keepAlive = true
     }
-    return vnode
+    return vnode || (slot && slot[0])
   }
 }
diff --git a/test/unit/features/component/component-keep-alive.spec.js b/test/unit/features/component/component-keep-alive.spec.js
@@ -477,6 +477,79 @@ describe('Component keep-alive', () => {
     }).then(done)
   })
 
+  it('max', done => {
+    const spyA = jasmine.createSpy()
+    const spyB = jasmine.createSpy()
+    const spyC = jasmine.createSpy()
+    const spyAD = jasmine.createSpy()
+    const spyBD = jasmine.createSpy()
+    const spyCD = jasmine.createSpy()
+
+    function assertCount (calls) {
+      expect([
+        spyA.calls.count(),
+        spyAD.calls.count(),
+        spyB.calls.count(),
+        spyBD.calls.count(),
+        spyC.calls.count(),
+        spyCD.calls.count()
+      ]).toEqual(calls)
+    }
+
+    const vm = new Vue({
+      template: `
+        <keep-alive max="2">
+          <component :is="n"></component>
+        </keep-alive>
+      `,
+      data: {
+        n: 'aa'
+      },
+      components: {
+        aa: {
+          template: '<div>a</div>',
+          created: spyA,
+          destroyed: spyAD
+        },
+        bb: {
+          template: '<div>bbb</div>',
+          created: spyB,
+          destroyed: spyBD
+        },
+        cc: {
+          template: '<div>ccc</div>',
+          created: spyC,
+          destroyed: spyCD
+        }
+      }
+    }).$mount()
+
+    assertCount([1, 0, 0, 0, 0, 0])
+    vm.n = 'bb'
+    waitForUpdate(() => {
+      assertCount([1, 0, 1, 0, 0, 0])
+      vm.n = 'cc'
+    }).then(() => {
+      // should prune A because max cache reached
+      assertCount([1, 1, 1, 0, 1, 0])
+      vm.n = 'bb'
+    }).then(() => {
+      // B should be reused, and made latest
+      assertCount([1, 1, 1, 0, 1, 0])
+      vm.n = 'aa'
+    }).then(() => {
+      // C should be pruned because B was used last so C is the oldest cached
+      assertCount([2, 1, 1, 0, 1, 1])
+    }).then(done)
+  })
+
+  it('should warn unknown component inside', () => {
+    new Vue({
+      template: `<keep-alive><foo/></keep-alive>`
+    }).$mount()
+    expect(`Unknown custom element: <foo>`).toHaveBeenWarned()
+  })
+
   if (!isIE9) {
     it('with transition-mode out-in', done => {
       let next
@@ -946,71 +1019,5 @@ describe('Component keep-alive', () => {
         }).then(done)
       }
     })
-
-    it('max', done => {
-      const spyA = jasmine.createSpy()
-      const spyB = jasmine.createSpy()
-      const spyC = jasmine.createSpy()
-      const spyAD = jasmine.createSpy()
-      const spyBD = jasmine.createSpy()
-      const spyCD = jasmine.createSpy()
-
-      function assertCount (calls) {
-        expect([
-          spyA.calls.count(),
-          spyAD.calls.count(),
-          spyB.calls.count(),
-          spyBD.calls.count(),
-          spyC.calls.count(),
-          spyCD.calls.count()
-        ]).toEqual(calls)
-      }
-
-      const vm = new Vue({
-        template: `
-          <keep-alive max="2">
-            <component :is="n"></component>
-          </keep-alive>
-        `,
-        data: {
-          n: 'aa'
-        },
-        components: {
-          aa: {
-            template: '<div>a</div>',
-            created: spyA,
-            destroyed: spyAD
-          },
-          bb: {
-            template: '<div>bbb</div>',
-            created: spyB,
-            destroyed: spyBD
-          },
-          cc: {
-            template: '<div>ccc</div>',
-            created: spyC,
-            destroyed: spyCD
-          }
-        }
-      }).$mount()
-
-      assertCount([1, 0, 0, 0, 0, 0])
-      vm.n = 'bb'
-      waitForUpdate(() => {
-        assertCount([1, 0, 1, 0, 0, 0])
-        vm.n = 'cc'
-      }).then(() => {
-        // should prune A because max cache reached
-        assertCount([1, 1, 1, 0, 1, 0])
-        vm.n = 'bb'
-      }).then(() => {
-        // B should be reused, and made latest
-        assertCount([1, 1, 1, 0, 1, 0])
-        vm.n = 'aa'
-      }).then(() => {
-        // C should be pruned because B was used last so C is the oldest cached
-        assertCount([2, 1, 1, 0, 1, 1])
-      }).then(done)
-    })
   }
 })