Migrate browser_spec to Jest

Closes https://gitlab.com/gitlab-org/gitlab/-/issues/287678

spec/javascripts/lib/utils/browser_spec.js → spec/frontend_integration/lib/utils/browser_spec.js

-/**
- * This file should only contain browser specific specs.
- * If you need to add or update a spec, please see spec/frontend/lib/utils/*.js
- * https://gitlab.com/gitlab-org/gitlab/issues/194242#note_292137135
- * https://gitlab.com/groups/gitlab-org/-/epics/895#what-if-theres-a-karma-spec-which-is-simply-unmovable-to-jest-ie-it-is-dependent-on-a-running-browser-environment
- */
-
 import { GlBreakpointInstance as breakpointInstance } from '@gitlab/ui/dist/utils';
 import * as commonUtils from '~/lib/utils/common_utils';
 
 describe('common_utils browser specific specs', () => {
+  const mockOffsetHeight = (elem, offsetHeight) => {
+    Object.defineProperty(elem, 'offsetHeight', { value: offsetHeight });
+  };
+
+  const mockBoundingClientRect = (elem, rect) => {
+    jest.spyOn(elem, 'getBoundingClientRect').mockReturnValue(rect);
+  };
+
   describe('contentTop', () => {
     it('does not add height for fileTitle or compareVersionsHeader if screen is too small', () => {
-      spyOn(breakpointInstance, 'isDesktop').and.returnValue(false);
+      jest.spyOn(breakpointInstance, 'isDesktop').mockReturnValue(false);
 
       setFixtures(`
           <div class="diff-file file-title-flex-parent">
@@ -26,7 +27,7 @@ describe('common_utils browser specific specs', () => {
     });
 
     it('adds height for fileTitle and compareVersionsHeader screen is large enough', () => {
-      spyOn(breakpointInstance, 'isDesktop').and.returnValue(true);
+      jest.spyOn(breakpointInstance, 'isDesktop').mockReturnValue(true);
 
       setFixtures(`
           <div class="diff-file file-title-flex-parent">
@@ -37,6 +38,8 @@ describe('common_utils browser specific specs', () => {
           </div>
         `);
 
+      mockOffsetHeight(document.querySelector('.diff-file'), 100);
+      mockOffsetHeight(document.querySelector('.mr-version-controls'), 18);
       expect(commonUtils.contentTop()).toBe(18);
     });
   });
@@ -54,6 +57,17 @@ describe('common_utils browser specific specs', () => {
 
     it('returns true when provided `el` is in viewport', () => {
       el.setAttribute('style', `position: absolute; right: ${window.innerWidth + 0.2};`);
+      mockBoundingClientRect(el, {
+        x: 8,
+        y: 8,
+        width: 0,
+        height: 0,
+        top: 8,
+        right: 8,
+        bottom: 8,
+        left: 8,
+      });
+
       document.body.appendChild(el);
 
       expect(commonUtils.isInViewport(el)).toBe(true);
@@ -61,6 +75,17 @@ describe('common_utils browser specific specs', () => {
 
     it('returns false when provided `el` is not in viewport', () => {
       el.setAttribute('style', 'position: absolute; top: -1000px; left: -1000px;');
+      mockBoundingClientRect(el, {
+        x: -1000,
+        y: -1000,
+        width: 0,
+        height: 0,
+        top: -1000,
+        right: -1000,
+        bottom: -1000,
+        left: -1000,
+      });
+
       document.body.appendChild(el);
 
       expect(commonUtils.isInViewport(el)).toBe(false);