Add unit testing for breakpoint code

Author: jonathanKingston

src/features/runtime-checks.js

@@ -4,6 +4,7 @@ import ContentFeature from '../content-feature.js'
 import { DDGProxy, getStackTraceOrigins, getStack, matchHostname, injectGlobalStyles, createStyleElement, postDebugMessage, taintSymbol, hasTaintedMethod, taintedOrigins, getTabHostname } from '../utils.js'
 import { defineProperty } from '../wrapper-utils.js'
 import { wrapScriptCodeOverload } from './runtime-checks/script-overload.js'
+import { findClosestBreakpoint } from './runtime-checks/helpers.js'
 import { Reflect } from '../captured-globals.js'
 
 let stackDomains = []
@@ -724,9 +725,7 @@ export default class RuntimeChecks extends ContentFeature {
     }
 
     /**
-     * @typedef {object} Sizing
-     * @property {number} height
-     * @property {number} width
+     * @typedef {import('./runtime-checks/helpers.js').Sizing} Sizing
      */
 
     /**
@@ -779,20 +778,3 @@ export default class RuntimeChecks extends ContentFeature {
         })
     }
 }
-
-function findClosestBreakpoint (breakpoints, screenSize) {
-    let closestBreakpoint = null
-    let closestDistance = Infinity
-
-    for (let i = 0; i < breakpoints.length; i++) {
-        const breakpoint = breakpoints[i]
-        const distance = Math.sqrt(Math.pow(breakpoint.height - screenSize.height, 2) + Math.pow(breakpoint.width - screenSize.width, 2))
-
-        if (distance < closestDistance) {
-            closestBreakpoint = breakpoint
-            closestDistance = distance
-        }
-    }
-
-    return closestBreakpoint
-}

src/features/runtime-checks/helpers.js

@@ -0,0 +1,27 @@
+/**
+ * @typedef {object} Sizing
+ * @property {number} height
+ * @property {number} width
+ */
+
+/**
+ * @param {Sizing[]} breakpoints
+ * @param {Sizing} screenSize
+ * @returns { Sizing | null}
+ */
+export function findClosestBreakpoint (breakpoints, screenSize) {
+    let closestBreakpoint = null
+    let closestDistance = Infinity
+
+    for (let i = 0; i < breakpoints.length; i++) {
+        const breakpoint = breakpoints[i]
+        const distance = Math.sqrt(Math.pow(breakpoint.height - screenSize.height, 2) + Math.pow(breakpoint.width - screenSize.width, 2))
+
+        if (distance < closestDistance) {
+            closestBreakpoint = breakpoint
+            closestDistance = distance
+        }
+    }
+
+    return closestBreakpoint
+}

unit-test/runtime-checks.js

@@ -0,0 +1,67 @@
+import { findClosestBreakpoint } from '../src/features/runtime-checks/helpers.js'
+
+describe('Runtime checks', () => {
+    describe('findClosestBreakpoint', () => {
+        it('no breakpoints returns null', () => {
+            const closest = findClosestBreakpoint([], { height: 1, width: 1 })
+            expect(closest).toBeNull()
+        })
+
+        it('picks closest when exact match', () => {
+            const closest = findClosestBreakpoint([
+                { height: 1, width: 1 },
+                { height: 1024, width: 768 }
+            ], { height: 1024, width: 768 })
+            expect(closest).toEqual({ height: 1024, width: 768 })
+        })
+
+        it('picks closest when close matches', () => {
+            const closest = findClosestBreakpoint([
+                { height: 1, width: 1 },
+                { height: 1000, width: 700 }
+            ], { height: 1024, width: 768 })
+            expect(closest).toEqual({ height: 1000, width: 700 })
+
+            const closest2 = findClosestBreakpoint([
+                { height: 1, width: 1 },
+                { height: 1000, width: 700 },
+                { height: 2000, width: 800 }
+            ], { height: 1024, width: 768 })
+            expect(closest2).toEqual({ height: 1000, width: 700 })
+
+            // Picks the first one if there's a tie
+            const closest3 = findClosestBreakpoint([
+                { height: 1, width: 1 },
+                { height: 1023, width: 768 },
+                { height: 1025, width: 768 }
+            ], { height: 1024, width: 768 })
+            expect(closest3).toEqual({ height: 1023, width: 768 })
+
+            const closest4 = findClosestBreakpoint([
+                { height: 1, width: 1 },
+                { height: 1023, width: 767 },
+                { height: 1023, width: 769 },
+                { height: 1025, width: 767 },
+                { height: 1025, width: 769 }
+            ], { height: 1024, width: 768 })
+            expect(closest4).toEqual({ height: 1023, width: 767 })
+        })
+
+        it('picks closest when clear match', () => {
+            const breakpoints = [
+                { height: 500, width: 600 },
+                { height: 1024, width: 768 },
+                { height: 2000, width: 1000 },
+                { height: 20000, width: 8000 }
+            ]
+            const closest = findClosestBreakpoint(breakpoints, { height: 1024, width: 768 })
+            expect(closest).toEqual({ height: 1024, width: 768 })
+
+            const closest2 = findClosestBreakpoint(breakpoints, { height: 800, width: 600 })
+            expect(closest2).toEqual({ height: 1024, width: 768 })
+
+            const closest3 = findClosestBreakpoint(breakpoints, { height: 550, width: 600 })
+            expect(closest3).toEqual({ height: 500, width: 600 })
+        })
+    })
+})