fix(platform): properly detect iPads running iPadOS (#19258)

* Add support for iPadOS * add better test * small tweak
ionic-team · Sep 16, 2019 · 4a90096 · 4a90096
1 parent c959d75
commit 4a90096
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 5 deletions.
diff --git a/core/src/utils/platform.ts b/core/src/utils/platform.ts
@@ -33,14 +33,25 @@ const detectPlatforms = (win: Window) =>
 const isMobileWeb = (win: Window): boolean =>
   isMobile(win) && !isHybrid(win);
 
-const isIpad = (win: Window) =>
-  testUserAgent(win, /iPad/i);
+const isIpad = (win: Window) => {
+  // iOS 12 and below
+  if (testUserAgent(win, /iPad/i)) {
+    return true;
+  }
+
+  // iOS 13+
+  if (testUserAgent(win, /Macintosh/i) && isMobile(win)) {
+    return true;
+  }
+
+  return false;
+};
 
 const isIphone = (win: Window) =>
   testUserAgent(win, /iPhone/i);
 
 const isIOS = (win: Window) =>
-  testUserAgent(win, /iPad|iPhone|iPod/i);
+  testUserAgent(win, /iPhone|iPod/i) || isIpad(win);
 
 const isAndroid = (win: Window) =>
   testUserAgent(win, /android|sink/i);

diff --git a/core/src/utils/test/platform.spec.ts b/core/src/utils/test/platform.spec.ts
@@ -63,10 +63,11 @@ describe('Platform Tests', () => {
       expect(isPlatform(win, 'desktop')).toEqual(true);
     });
 
-    it('should return true for "android" and "tablet" on an android tablet', () => {
+    it('should return true for "android" and "tablet" and false for "ios" on an android tablet', () => {
       const win = configureBrowser(PlatformConfiguration.AndroidTablet);
       expect(isPlatform(win, 'android')).toEqual(true);
       expect(isPlatform(win, 'tablet')).toEqual(true);
+      expect(isPlatform(win, 'ios')).toEqual(false);
     });
 
     it('should return true for "cordova" and "hybrid" in a Cordova app', () => {
@@ -95,10 +96,11 @@ describe('Platform Tests', () => {
       expect(isPlatform(win, 'desktop')).toEqual(false);
     });
 
-    it('should return false for "android" and "tablet" on desktop Safari', () => {
+    it('should return false for "android", "tablet", and "ipad" on desktop Safari', () => {
       const win = configureBrowser(PlatformConfiguration.DesktopSafari);
       expect(isPlatform(win, 'android')).toEqual(false);
       expect(isPlatform(win, 'tablet')).toEqual(false);
+      expect(isPlatform(win, 'ipad')).toEqual(false);
     });
 
     it('should return false for "android" and "tablet" and false for "desktop" on iPhone', () => {
@@ -120,5 +122,14 @@ describe('Platform Tests', () => {
       expect(isPlatform(win, 'pwa')).toEqual(true);
       expect(isPlatform(win, 'cordova')).toEqual(false);
     });
+
+    it('should return true for "ios", "ipad", and "tablet" and false for "iphone" and "android"', () => {
+      const win = configureBrowser(PlatformConfiguration.iPadOS);
+      expect(isPlatform(win, 'ios')).toEqual(true);
+      expect(isPlatform(win, 'ipad')).toEqual(true);
+      expect(isPlatform(win, 'tablet')).toEqual(true);
+      expect(isPlatform(win, 'iphone')).toEqual(false);
+      expect(isPlatform(win, 'android')).toEqual(false);
+    });
   })
 });
diff --git a/core/src/utils/test/platform.utils.ts b/core/src/utils/test/platform.utils.ts
@@ -85,5 +85,13 @@ export const PlatformConfiguration = {
     innerWidth: 360,
     innerHeight: 740,
     matchMedia: mockMatchMedia(['(any-pointer:coarse)'])
+  },
+  iPadOS: {
+    navigator: {
+      userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0 Safari/605.1.15'
+    },
+    innerWidth: 1024,
+    innerHeight: 1292,
+    matchMedia: mockMatchMedia(['(any-pointer:coarse)'])
   }
 };