fix(thumbnails): Replace remove method that is unsupported in IE11 (#…

…1323)
box · Jan 29, 2021 · 3c37b79 · 3c37b79
1 parent bd66999
commit 3c37b79
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 16 deletions.
diff --git a/src/lib/VirtualScroller.js b/src/lib/VirtualScroller.js
@@ -73,8 +73,8 @@ class VirtualScroller {
      * @return {void}
      */
     destroy() {
-        if (this.scrollingEl) {
-            this.scrollingEl.remove();
+        if (this.anchorEl && this.scrollingEl) {
+            this.anchorEl.removeChild(this.scrollingEl);
         }
 
         this.scrollingEl = null;

diff --git a/src/lib/__tests__/VirtualScroller-test.js b/src/lib/__tests__/VirtualScroller-test.js
@@ -33,15 +33,14 @@ describe('VirtualScroller', () => {
 
     describe('destroy()', () => {
         test('should remove the HTML element references', () => {
-            const scrollingEl = { remove: () => {} };
-            jest.spyOn(scrollingEl, 'remove').mockImplementation();
+            jest.spyOn(virtualScroller.anchorEl, 'removeChild').mockImplementation();
 
-            virtualScroller.scrollingEl = scrollingEl;
+            virtualScroller.scrollingEl = document.createElement('div');
             virtualScroller.listEl = {};
 
             virtualScroller.destroy();
 
-            expect(scrollingEl.remove).toBeCalled();
+            expect(virtualScroller.anchorEl.removeChild).toBeCalled();
             expect(virtualScroller.scrollingEl).toBeNull();
             expect(virtualScroller.listEl).toBeNull();
         });
@@ -464,14 +463,15 @@ describe('VirtualScroller', () => {
 
         beforeEach(() => {
             stubs.dispatchEvent = jest.fn();
-            scrollingEl = { remove: () => {}, dispatchEvent: stubs.dispatchEvent };
+            scrollingEl = { dispatchEvent: stubs.dispatchEvent };
 
             virtualScroller.totalItems = 10;
             virtualScroller.itemHeight = 10;
             virtualScroller.margin = 0;
             virtualScroller.scrollingEl = scrollingEl;
 
             stubs.isVisible = jest.spyOn(virtualScroller, 'isVisible').mockImplementation();
+            stubs.removeChild = jest.spyOn(virtualScroller.anchorEl, 'removeChild').mockImplementation();
             stubs.scrollIntoView = jest.fn();
 
             listEl = {
@@ -555,8 +555,9 @@ describe('VirtualScroller', () => {
 
     describe('isVisible()', () => {
         beforeEach(() => {
-            const scrollingEl = { scrollTop: 100, remove: () => {} };
-            virtualScroller.scrollingEl = scrollingEl;
+            jest.spyOn(virtualScroller.anchorEl, 'removeChild').mockImplementation();
+
+            virtualScroller.scrollingEl = { scrollTop: 100 };
             virtualScroller.containerHeight = 100;
             virtualScroller.itemHeight = 20;
         });

diff --git a/src/lib/viewers/doc/DocBaseViewer.js b/src/lib/viewers/doc/DocBaseViewer.js
@@ -227,7 +227,7 @@ class DocBaseViewer extends BaseViewer {
             // Since we are cleaning up make sure the thumbnails open class is
             // removed so that the content div shifts back left
             this.rootEl.classList.remove(CLASS_BOX_PREVIEW_THUMBNAILS_OPEN);
-            this.thumbnailsSidebarEl.remove();
+            this.rootEl.removeChild(this.thumbnailsSidebarEl);
             this.thumbnailsSidebarEl = null;
         }
 

diff --git a/src/lib/viewers/doc/__tests__/DocBaseViewer-test.js b/src/lib/viewers/doc/__tests__/DocBaseViewer-test.js
@@ -255,6 +255,10 @@ describe('src/lib/viewers/doc/DocBaseViewer', () => {
         });
 
         describe('destroy()', () => {
+            beforeEach(() => {
+                jest.spyOn(docBase.rootEl, 'removeChild').mockImplementation();
+            });
+
             test('should unbind listeners and clear the print blob', () => {
                 const unbindDomStub = jest.spyOn(docBase, 'unbindDOMListeners').mockImplementation();
                 const unbindEventBusStub = jest.spyOn(docBase, 'unbindEventBusListeners').mockImplementation();
@@ -313,14 +317,11 @@ describe('src/lib/viewers/doc/DocBaseViewer', () => {
                 docBase.thumbnailsSidebar = {
                     destroy: jest.fn(),
                 };
-                const thumbnailsSidebarEl = {
-                    remove: jest.fn(),
-                };
-                docBase.thumbnailsSidebarEl = thumbnailsSidebarEl;
+                docBase.thumbnailsSidebarEl = document.createElement('div');
 
                 docBase.destroy();
                 expect(docBase.thumbnailsSidebar.destroy).toBeCalled();
-                expect(thumbnailsSidebarEl.remove).toBeCalled();
+                expect(docBase.rootEl.removeChild).toBeCalled();
                 expect(stubs.classListRemove).toBeCalled();
             });
         });
@@ -2467,6 +2468,8 @@ describe('src/lib/viewers/doc/DocBaseViewer', () => {
 
         describe('handleAnnotatorEvents()', () => {
             beforeEach(() => {
+                jest.spyOn(docBase.rootEl, 'removeChild').mockImplementation();
+
                 stubs.classListAdd = jest.fn();
                 stubs.classListRemove = jest.fn();
                 stubs.handleAnnotatorEvents = jest
@@ -2478,7 +2481,6 @@ describe('src/lib/viewers/doc/DocBaseViewer', () => {
                         add: stubs.classListAdd,
                         remove: stubs.classListRemove,
                     },
-                    remove: jest.fn(),
                 };
             });