Merge pull request #592 from bigopon/fix-slot-remove

fix(ShadowDOM): respect `returnToCache` flag
aurelia · Jun 20, 2018 · 5d0f0c1 · 5d0f0c1
2 parents dc13301 + b4abe6e
commit 5d0f0c1
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 2 deletions.
diff --git a/src/view-slot.js b/src/view-slot.js
@@ -455,6 +455,9 @@ export class ViewSlot {
     if (this.isAttached) {
       view.detached();
     }
+    if (returnToCache) {
+      view.returnToCache();
+    }
   }
 
   _projectionRemoveAt(index, returnToCache) {
@@ -466,6 +469,9 @@ export class ViewSlot {
     if (this.isAttached) {
       view.detached();
     }
+    if (returnToCache) {
+      view.returnToCache();
+    }
   }
 
   _projectionRemoveMany(viewsToRemove, returnToCache?) {
@@ -476,10 +482,15 @@ export class ViewSlot {
     ShadowDOM.undistributeAll(this.projectToSlots, this);
 
     let children = this.children;
+    let ii = children.length;
 
     if (this.isAttached) {
-      for (let i = 0, ii = children.length; i < ii; ++i) {
-        children[i].detached();
+      for (let i = 0; i < ii; ++i) {
+        if (returnToCache) {
+          children[i].returnToCache();
+        } else {
+          children[i].detached();
+        }
       }
     }
 

diff --git a/test/view-slot.spec.js b/test/view-slot.spec.js
@@ -5,6 +5,7 @@ import {TemplatingEngine} from '../src/templating-engine';
 import {View} from '../src/view';
 import {ViewResources} from '../src/view-resources';
 import {ViewFactory} from '../src/view-factory';
+import {ShadowDOM} from '../src/shadow-dom'
 import {DOM} from 'aurelia-pal';
 
 describe('view-slot', () => {
@@ -225,6 +226,62 @@ describe('view-slot', () => {
         expect(view.returnToCache).toHaveBeenCalled();
       });
     });
+
+
+    describe('.remove with ShadowDOM', () => {
+      let { distributeView, undistributeAll, undistributeView } = ShadowDOM;
+      beforeAll(() => {
+        ShadowDOM.distributeView = ShadowDOM.undistributeView = ShadowDOM.undistributeAll = () => {};
+      });
+      afterAll(() => {
+        ShadowDOM.distributeView = distributeView;
+        ShadowDOM.undistributeView = undistributeView;
+        ShadowDOM.undistributeAll = undistributeAll;
+      });
+
+      beforeEach(() => {
+        viewSlot.projectTo({ _default_: {} });
+      });
+
+      it('removes a view from children', () => {
+        viewSlot.add(view);
+        expect(viewSlot.children.length).toEqual(1);
+        viewSlot.remove(view);
+        expect(viewSlot.children.length).toEqual(0);
+      });
+
+      it('calls detached if already attached when removed', () => {
+        spyOn(view, 'detached');
+        viewSlot.add(view);
+        viewSlot.attached();
+        viewSlot.remove(view);
+        expect(view.detached).toHaveBeenCalled();
+      });
+
+      describe('doesnt call return to cache when returnToCache', () => {
+
+        it('is set to false', () => {
+          spyOn(view, 'returnToCache');
+          viewSlot.add(view);
+          viewSlot.remove(view, false);
+          expect(view.returnToCache).not.toHaveBeenCalled();
+        });
+
+        it('is not set', () => {
+          spyOn(view, 'returnToCache');
+          viewSlot.add(view);
+          viewSlot.remove(view);
+          expect(view.returnToCache).not.toHaveBeenCalled();
+        });
+      });
+
+      it('calls return to cache when returnToCache is true', () => {
+        spyOn(view, 'returnToCache');
+        viewSlot.add(view);
+        viewSlot.remove(view, true);
+        expect(view.returnToCache).toHaveBeenCalled();
+      });
+    });
 
     describe('.removeAll', () => {
       it('removes all views from children', () => {