fix(zoom): Round scale before comparing against max and min values (#…

…1290)

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

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"

src/lib/viewers/controls/zoom/__tests__/ZoomControls-test.tsx

@@ -32,26 +32,27 @@ 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 });
 
             expect(getZoomOut(wrapper).prop('disabled')).toBe(disabled);
         });
 
         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 });