From 0dc7e655a20ed4714abe7e9fa19f3948029ed961 Mon Sep 17 00:00:00 2001
From: Jared Stoffan <jstoffan@users.noreply.github.com>
Date: Fri, 6 Nov 2020 14:15:04 -0800
Subject: [PATCH] fix(zoom): Round scale before comparing against max and min
 values (#1290)

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>
---
 .../viewers/controls/zoom/ZoomControls.tsx    |  8 +++---
 .../zoom/__tests__/ZoomControls-test.tsx      | 27 ++++++++++---------
 2 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/src/lib/viewers/controls/zoom/ZoomControls.tsx b/src/lib/viewers/controls/zoom/ZoomControls.tsx
index 6cb61a7ba..fd2e2ddd2 100644
--- a/src/lib/viewers/controls/zoom/ZoomControls.tsx
+++ b/src/lib/viewers/controls/zoom/ZoomControls.tsx
@@ -22,7 +22,7 @@ export default function ZoomControls({
     onZoomOut,
     scale = 1,
 }: Props): JSX.Element {
-    const currentZoom = Math.round(scale * 100);
+    const currentScale = Math.round((scale + Number.EPSILON) * 100) / 100;
     const maxScaleValue = isFinite(maxScale) ? Math.min(maxScale, MAX_SCALE) : MAX_SCALE;
     const minScaleValue = isFinite(minScale) ? Math.max(minScale, MIN_SCALE) : MIN_SCALE;
 
@@ -31,7 +31,7 @@ export default function ZoomControls({
             <button
                 className="bp-ZoomControls-button"
                 data-testid="bp-ZoomControls-out"
-                disabled={scale <= minScaleValue}
+                disabled={currentScale <= minScaleValue}
                 onClick={onZoomOut}
                 title={__('zoom_out')}
                 type="button"
@@ -42,11 +42,11 @@ export default function ZoomControls({
                 className="bp-ZoomControls-current"
                 data-testid="current-zoom"
                 title={__('zoom_current_scale')}
-            >{`${currentZoom}%`}</div>
+            >{`${Math.round(currentScale * 100)}%`}</div>
             <button
                 className="bp-ZoomControls-button"
                 data-testid="bp-ZoomControls-in"
-                disabled={scale >= maxScaleValue}
+                disabled={currentScale >= maxScaleValue}
                 onClick={onZoomIn}
                 title={__('zoom_in')}
                 type="button"
diff --git a/src/lib/viewers/controls/zoom/__tests__/ZoomControls-test.tsx b/src/lib/viewers/controls/zoom/__tests__/ZoomControls-test.tsx
index 2d611dba4..d4aee5de2 100644
--- a/src/lib/viewers/controls/zoom/__tests__/ZoomControls-test.tsx
+++ b/src/lib/viewers/controls/zoom/__tests__/ZoomControls-test.tsx
@@ -32,12 +32,13 @@ describe('ZoomControls', () => {
 
     describe('render', () => {
         test.each`
-            minScale | scale  | disabled
-            ${null}  | ${1}   | ${false}
-            ${0.5}   | ${1}   | ${false}
-            ${0.5}   | ${0.5} | ${true}
-            ${-50}   | ${0.1} | ${true}
-            ${-50}   | ${0.2} | ${false}
+            minScale | scale     | disabled
+            ${null}  | ${1}      | ${false}
+            ${0.5}   | ${1}      | ${false}
+            ${0.5}   | ${0.5005} | ${true}
+            ${0.5}   | ${0.5}    | ${true}
+            ${-50}   | ${0.1}    | ${true}
+            ${-50}   | ${0.2}    | ${false}
         `('should set disabled for zoom out to $disabled for $scale / $minScale', ({ disabled, minScale, scale }) => {
             const wrapper = getWrapper({ minScale, scale });
 
@@ -45,13 +46,13 @@ describe('ZoomControls', () => {
         });
 
         test.each`
-            maxScale | scale  | disabled
-            ${null}  | ${1}   | ${false}
-            ${10}    | ${1}   | ${false}
-            ${50}    | ${10}  | ${false}
-            ${50}    | ${50}  | ${true}
-            ${500}   | ${100} | ${true}
-            ${500}   | ${99}  | ${false}
+            maxScale | scale      | disabled
+            ${null}  | ${1}       | ${false}
+            ${10}    | ${1}       | ${false}
+            ${50}    | ${49.9999} | ${true}
+            ${50}    | ${50}      | ${true}
+            ${500}   | ${100}     | ${true}
+            ${500}   | ${99}      | ${false}
         `('should set disabled for zoom in to $disabled for $scale / $maxScale', ({ disabled, maxScale, scale }) => {
             const wrapper = getWrapper({ maxScale, scale });