Handle app-compat environment check where self does not exist (#8378)

.changeset/spicy-dragons-pay.md

@@ -0,0 +1,5 @@
+---
+'@firebase/app-compat': patch
+---
+
+Properly handle the case in app-compat checks where `window` exists but `self` does not. (This occurs in Ionic Stencil's Jest preset.)

packages/app-compat/src/index.ts

@@ -21,16 +21,22 @@ import { firebase as firebaseNamespace } from './firebaseNamespace';
 import { logger } from './logger';
 import { registerCoreComponents } from './registerCoreComponents';
 
+declare global {
+  interface Window {
+    firebase: FirebaseNamespace;
+  }
+}
+
 // Firebase Lite detection
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-if (isBrowser() && (self as any).firebase !== undefined) {
+if (isBrowser() && window.firebase !== undefined) {
   logger.warn(`
     Warning: Firebase is already defined in the global scope. Please make sure
     Firebase library is only loaded once.
   `);
 
   // eslint-disable-next-line
-  const sdkVersion = ((self as any).firebase as FirebaseNamespace).SDK_VERSION;
+  const sdkVersion = (window.firebase as FirebaseNamespace).SDK_VERSION;
   if (sdkVersion && sdkVersion.indexOf('LITE') >= 0) {
     logger.warn(`
     Warning: You are trying to load Firebase while using Firebase Performance standalone script.

packages/util/src/environment.ts

@@ -80,6 +80,9 @@ export function isNode(): boolean {
 
 /**
  * Detect Browser Environment
+ * Note: This will return true for certain test frameworks that are incompletely
+ * mimicking a browser, and should not lead to assuming all browser APIs are
+ * available.
  */
 export function isBrowser(): boolean {
   return typeof window !== 'undefined' || isWebWorker();