chore(overlays): use browserDetection from @lion/ui/core

ing-bank · Nov 21, 2023 · caa7ac8 · caa7ac8
1 parent b845e91
commit caa7ac8
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 28 deletions.
diff --git a/packages/ui/components/overlays/src/OverlaysManager.js b/packages/ui/components/overlays/src/OverlaysManager.js
@@ -1,23 +1,12 @@
+import { browserDetection } from '@lion/ui/core.js';
+
 /**
  * @typedef {import('lit').CSSResult} CSSResult
  * @typedef {import('./OverlayController.js').OverlayController} OverlayController
  */
 
 import { overlayDocumentStyle } from './overlayDocumentStyle.js';
 
-// Export this as protected var, so that we can easily mock it in tests
-// TODO: combine with browserDetection of core?
-export const _browserDetection = {
-  isIOS: /iPhone|iPad|iPod/i.test(navigator.userAgent),
-  isMacSafari:
-    navigator.vendor &&
-    navigator.vendor.indexOf('Apple') > -1 &&
-    navigator.userAgent &&
-    navigator.userAgent.indexOf('CriOS') === -1 &&
-    navigator.userAgent.indexOf('FxiOS') === -1 &&
-    navigator.appVersion.indexOf('Mac') !== -1,
-};
-
 /**
  * `OverlaysManager` which manages overlays which are rendered into the body
  */
@@ -182,7 +171,7 @@ export class OverlaysManager {
 
   // eslint-disable-next-line class-methods-use-this
   requestToPreventScroll() {
-    const { isIOS, isMacSafari } = _browserDetection;
+    const { isIOS, isMacSafari } = browserDetection;
     // no check as classList will dedupe it anyways
     document.body.classList.add('overlays-scroll-lock');
     if (isIOS || isMacSafari) {
@@ -203,7 +192,7 @@ export class OverlaysManager {
       return;
     }
 
-    const { isIOS, isMacSafari } = _browserDetection;
+    const { isIOS, isMacSafari } = browserDetection;
     document.body.classList.remove('overlays-scroll-lock');
     if (isIOS || isMacSafari) {
       document.body.classList.remove('overlays-scroll-lock-ios-fix');

diff --git a/packages/ui/components/overlays/test-suites/OverlayMixin.suite.js b/packages/ui/components/overlays/test-suites/OverlayMixin.suite.js
@@ -4,7 +4,7 @@ import sinon from 'sinon';
 import { overlays as overlaysManager, OverlayController } from '@lion/ui/overlays.js';
 
 import '@lion/ui/define/lion-dialog.js';
-import { _browserDetection } from '../src/OverlaysManager.js';
+import { browserDetection } from '@lion/ui/core.js';
 
 /**
  * @typedef {import('../types/OverlayConfig.js').OverlayConfig} OverlayConfig
@@ -99,7 +99,7 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
       // For now, we skip this test for MacSafari, since the body.overlays-scroll-lock-ios-fix
       // class results in a scrollbar when preventsScroll is true.
       // However, fully functioning interacive elements (input fields) in the dialog are more important
-      if (_browserDetection.isMacSafari && elWithBigParent._overlayCtrl.preventsScroll) {
+      if (browserDetection.isMacSafari && elWithBigParent._overlayCtrl.preventsScroll) {
         return;
       }
 

diff --git a/packages/ui/components/overlays/test/OverlaysManager.test.js b/packages/ui/components/overlays/test/OverlaysManager.test.js
@@ -1,7 +1,8 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
+import sinon from 'sinon';
+import { browserDetection } from '@lion/ui/core.js';
 import { OverlayController, OverlaysManager } from '@lion/ui/overlays.js';
-import { _browserDetection } from '../src/OverlaysManager.js';
 
 /**
  * @typedef {import('../types/OverlayConfig.js').OverlayConfig} OverlayConfig
@@ -101,24 +102,24 @@ describe('OverlaysManager', () => {
   });
 
   describe('Browser/device edge cases', () => {
-    const isIOSOriginal = _browserDetection.isIOS;
-    const isMacSafariOriginal = _browserDetection.isMacSafari;
+    const isIOSDetectionStub = sinon.stub(browserDetection, 'isIOS');
+    const isMacSafariDetectionStub = sinon.stub(browserDetection, 'isMacSafari');
 
     function mockIOS() {
-      _browserDetection.isIOS = true;
-      _browserDetection.isMacSafari = false;
+      isIOSDetectionStub.value(true);
+      isMacSafariDetectionStub.value(false);
     }
 
     function mockMacSafari() {
       // When we are iOS
-      _browserDetection.isIOS = false;
-      _browserDetection.isMacSafari = true;
+      isIOSDetectionStub.value(false);
+      isMacSafariDetectionStub.value(true);
     }
 
     afterEach(() => {
       // Restore original values
-      _browserDetection.isIOS = isIOSOriginal;
-      _browserDetection.isMacSafari = isMacSafariOriginal;
+      isIOSDetectionStub.restore();
+      isMacSafariDetectionStub.restore();
     });
 
     describe('When initialized with "preventsScroll: true"', () => {
@@ -137,8 +138,8 @@ describe('OverlaysManager', () => {
         );
 
         // When we are not iOS nor MacSafari
-        _browserDetection.isIOS = false;
-        _browserDetection.isMacSafari = false;
+        isIOSDetectionStub.value(false);
+        isMacSafariDetectionStub.value(false);
 
         const dialog2 = new OverlayController({ ...defaultOptions, preventsScroll: true }, mngr);
         await dialog2.show();