test(jest): Fix image zoom and dash viewer tests

box · Sep 24, 2020 · 678e77d · 678e77d
1 parent 911e5df
commit 678e77d
Show file tree

Hide file tree

Showing 5 changed files with 162 additions and 124 deletions.
diff --git a/build/jest/envWindow.js b/build/jest/envWindow.js
@@ -27,5 +27,9 @@ Object.defineProperty(HTMLElement.prototype, 'offsetParent', {
     },
 });
 
+Object.defineProperty(HTMLMediaElement.prototype, 'duration', { writable: true });
+Object.defineProperty(HTMLMediaElement.prototype, 'ended', { writable: true });
 Object.defineProperty(HTMLMediaElement.prototype, 'load', { value: jest.fn() });
+Object.defineProperty(HTMLMediaElement.prototype, 'paused', { writable: true });
 Object.defineProperty(HTMLMediaElement.prototype, 'play', { value: jest.fn() });
+Object.defineProperty(HTMLMediaElement.prototype, 'played', { writable: true });
diff --git a/src/lib/__tests__/DownloadReachability-test.js b/src/lib/__tests__/DownloadReachability-test.js
@@ -11,7 +11,7 @@ jest.mock('../util', () => ({
     openUrlInsideIframe: jest.fn(),
 }));
 
-describe.only('lib/DownloadReachability', () => {
+describe('lib/DownloadReachability', () => {
     beforeEach(() => {
         jest.spyOn(DownloadReachability, 'isStorageAvailable').mockReturnValue(true);
 

diff --git a/src/lib/viewers/image/__tests__/ImageViewer-test.js b/src/lib/viewers/image/__tests__/ImageViewer-test.js
@@ -212,74 +212,70 @@ describe('lib/viewers/image/ImageViewer', () => {
         });
     });
 
-    // TODO: Fix height/width mocks
-    describe.skip('zoom()', () => {
+    describe('zoom()', () => {
+        const getValue = val => parseInt(val, 10);
+        const clientHeight = {
+            get() {
+                return getValue(this.style.height);
+            },
+        };
+        const clientWidth = {
+            get() {
+                return getValue(this.style.width);
+            },
+        };
+
         beforeEach(() => {
             jest.spyOn(image, 'appendAuthParams').mockReturnValue(imageUrl);
-            jest.spyOn(image, 'finishLoading');
+            jest.spyOn(image, 'finishLoading').mockImplementation();
+            jest.spyOn(image, 'getRepStatus').mockReturnValue({ getPromise: () => Promise.resolve() });
 
             // Stub out methods called in zoom()
-            stubs.adjustZoom = jest.spyOn(image, 'adjustImageZoomPadding');
-
-            // Set image height & width
-            image.imageEl.style.width = '100px';
-            image.imageEl.style.height = '100px';
-            image.wrapperEl.style.width = '50px';
-            image.wrapperEl.style.height = '50px';
+            stubs.adjustZoom = jest.spyOn(image, 'adjustImageZoomPadding').mockImplementation();
 
-            jest.spyOn(image, 'getRepStatus').mockReturnValue({ getPromise: () => Promise.resolve() });
             image.setup();
             image.load(imageUrl).catch(() => {});
+
+            // Set image height & width
+            Object.defineProperty(image.imageEl, 'offsetHeight', clientHeight);
+            Object.defineProperty(image.imageEl, 'offsetWidth', clientWidth);
+            Object.defineProperty(image.wrapperEl, 'clientHeight', { value: 50, writable: true });
+            Object.defineProperty(image.wrapperEl, 'clientWidth', { value: 50, writable: true });
         });
 
-        describe('should zoom in by modifying', () => {
-            test('width', () => {
-                image.imageEl.style.width = '200px';
+        test('should zoom in by modifying width', () => {
+            const origImageSize = 200;
 
-                const origImageSize = image.imageEl.getBoundingClientRect();
-                image.zoom('in');
-                const newImageSize = image.imageEl.getBoundingClientRect();
-                expect(newImageSize.width).toBeGreaterThan(origImageSize.width);
-            });
-        });
+            image.imageEl.style.width = `${origImageSize}px`;
+            image.zoom('in');
 
-        describe('should zoom out by modifying', () => {
-            test('width', () => {
-                image.imageEl.style.width = '200px';
+            expect(getValue(image.imageEl.style.width)).toBeGreaterThan(origImageSize);
+        });
 
-                const origImageSize = image.imageEl.getBoundingClientRect();
-                image.zoomOut();
-                const newImageSize = image.imageEl.getBoundingClientRect();
-                expect(newImageSize.width).toBeLessThan(origImageSize.width);
-                expect(stubs.adjustZoom).toBeCalled();
-            });
+        test('should zoom out by modifying width', () => {
+            const origImageSize = 200;
 
-            test('height', () => {
-                image.imageEl.style.height = '200px';
+            image.imageEl.style.width = `${origImageSize}px`;
+            image.zoom('out');
 
-                const origImageSize = image.imageEl.getBoundingClientRect();
-                image.zoomOut();
-                const newImageSize = image.imageEl.getBoundingClientRect();
-                expect(newImageSize.height).toBeLessThan(origImageSize.height);
-                expect(stubs.adjustZoom).toBeCalled();
-            });
+            expect(getValue(image.imageEl.style.width)).toBeLessThan(origImageSize);
+            expect(stubs.adjustZoom).toBeCalled();
         });
 
-        test('should zoom the width & height when the image rotated', () => {
+        test('should zoom the height when the image rotated', () => {
             jest.spyOn(image, 'isRotated').mockReturnValue(true);
 
+            const origImageHeight = 150;
+            const origImageWidth = 200;
+
             image.imageEl.style.transform = 'rotate(90deg)';
-            image.imageEl.style.width = '200px';
-            image.imageEl.setAttribute('originalWidth', '150');
-            image.imageEl.setAttribute('originalHeight', '100');
-            image.imageEl.src = imageUrl;
-            const origImageSize = image.imageEl.getBoundingClientRect();
-            image.zoomIn();
-            const newImageSize = image.imageEl.getBoundingClientRect();
-            expect(newImageSize.width).toBeGreaterThan(origImageSize.width);
-            expect(newImageSize.height).toBeGreaterThan(origImageSize.height);
+            image.imageEl.style.height = `${origImageHeight}px`;
+            image.imageEl.style.width = `${origImageWidth}px`;
+
+            image.zoom('in');
+
+            expect(getValue(image.imageEl.style.height)).toBeGreaterThan(origImageHeight);
             expect(stubs.adjustZoom).toBeCalled();
-            image.imageEl.style.transform = '';
         });
 
         test('should reset dimensions and adjust padding when called with reset', () => {

diff --git a/src/lib/viewers/image/__tests__/MultiImageViewer-test.js b/src/lib/viewers/image/__tests__/MultiImageViewer-test.js
@@ -283,14 +283,24 @@ describe('lib/viewers/image/MultiImageViewer', () => {
         });
     });
 
-    // TODO: Fix height/width mocks
-    describe.skip('zoom()', () => {
+    describe('zoom()', () => {
+        const clientWidth = {
+            get() {
+                return parseInt(this.style.width, 10);
+            },
+        };
+
         beforeEach(() => {
-            stubs.zoomEmit = jest.spyOn(multiImage, 'emit');
-            stubs.setScale = jest.spyOn(multiImage, 'setScale');
-            stubs.scroll = jest.spyOn(multiImage, 'setPage');
-            stubs.updatePannability = jest.spyOn(multiImage, 'updatePannability');
+            stubs.zoomEmit = jest.spyOn(multiImage, 'emit').mockImplementation();
+            stubs.setScale = jest.spyOn(multiImage, 'setScale').mockImplementation();
+            stubs.scroll = jest.spyOn(multiImage, 'setPage').mockImplementation();
+            stubs.updatePannability = jest.spyOn(multiImage, 'updatePannability').mockImplementation();
+
             multiImage.setup();
+            multiImage.imageEl.style.width = '100px';
+
+            Object.defineProperty(multiImage.imageEl, 'clientWidth', clientWidth);
+            Object.defineProperty(multiImage.imageEl.parentNode, 'clientWidth', clientWidth);
         });
 
         test('should increase the width by 100px on zoom in', () => {