From 1f3afca48235efaf0a0ba03fd124fd98be8f8a24 Mon Sep 17 00:00:00 2001
From: Sami Mazouz <sychocouldy@gmail.com>
Date: Sat, 28 Sep 2024 16:11:50 +0100
Subject: [PATCH] fix: regression in typings

---
 framework/core/js/src/@types/global.d.ts                 | 7 +++++++
 framework/core/js/src/common/components/Avatar.tsx       | 2 +-
 framework/core/js/src/common/components/Badge.tsx        | 2 +-
 framework/core/js/src/common/components/ModalManager.tsx | 4 ++--
 framework/core/js/src/forum/components/UserCard.js       | 2 +-
 js-packages/jest-config/setup-env.js                     | 3 +--
 6 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/framework/core/js/src/@types/global.d.ts b/framework/core/js/src/@types/global.d.ts
index 77fb705f8..0e10ddecb 100644
--- a/framework/core/js/src/@types/global.d.ts
+++ b/framework/core/js/src/@types/global.d.ts
@@ -112,6 +112,13 @@ interface FlarumObject {
 
 declare const flarum: FlarumObject;
 
+interface Window {
+  /**
+   * Whether we are in testing mode or not.
+   */
+  testing?: boolean;
+}
+
 // Extend JQuery with our custom functions, defined with $.fn
 interface JQuery {
   /**
diff --git a/framework/core/js/src/common/components/Avatar.tsx b/framework/core/js/src/common/components/Avatar.tsx
index 5e5e27b2a..3b279864f 100644
--- a/framework/core/js/src/common/components/Avatar.tsx
+++ b/framework/core/js/src/common/components/Avatar.tsx
@@ -36,7 +36,7 @@ export default class Avatar<CustomAttrs extends IAvatarAttrs = IAvatarAttrs> ext
       }
 
       content = username.charAt(0).toUpperCase();
-      attrs.style = !process.env.testing && { '--avatar-bg': user.color() };
+      attrs.style = !window.testing && { '--avatar-bg': user.color() };
     }
 
     return <span {...attrs}>{content}</span>;
diff --git a/framework/core/js/src/common/components/Badge.tsx b/framework/core/js/src/common/components/Badge.tsx
index b905213fb..e145979ed 100644
--- a/framework/core/js/src/common/components/Badge.tsx
+++ b/framework/core/js/src/common/components/Badge.tsx
@@ -34,7 +34,7 @@ export default class Badge<CustomAttrs extends IBadgeAttrs = IBadgeAttrs> extend
 
     const newStyle = { ...style };
 
-    if (!process.env.testing) {
+    if (!window.testing) {
       newStyle['--badge-bg'] = color;
     }
 
diff --git a/framework/core/js/src/common/components/ModalManager.tsx b/framework/core/js/src/common/components/ModalManager.tsx
index b11677f26..498fa401d 100644
--- a/framework/core/js/src/common/components/ModalManager.tsx
+++ b/framework/core/js/src/common/components/ModalManager.tsx
@@ -43,7 +43,7 @@ export default class ModalManager extends Component<IModalManagerAttrs> {
               data-modal-number={i}
               role="dialog"
               aria-modal="true"
-              style={!process.env.testing && { '--modal-number': i }}
+              style={!window.testing && { '--modal-number': i }}
               aria-hidden={this.attrs.state.modal !== modal && 'true'}
             >
               {!!Tag && [
@@ -66,7 +66,7 @@ export default class ModalManager extends Component<IModalManagerAttrs> {
             className="Modal-backdrop backdrop"
             ontransitionend={this.onBackdropTransitionEnd.bind(this)}
             data-showing={!!this.attrs.state.modalList.length || this.attrs.state.loadingModal}
-            style={!process.env.testing && { '--modal-count': this.attrs.state.modalList.length + Number(this.attrs.state.loadingModal) }}
+            style={!window.testing && { '--modal-count': this.attrs.state.modalList.length + Number(this.attrs.state.loadingModal) }}
           >
             {this.attrs.state.loadingModal && <LoadingIndicator />}
           </div>
diff --git a/framework/core/js/src/forum/components/UserCard.js b/framework/core/js/src/forum/components/UserCard.js
index 49e4c4e42..edbb5f0ee 100644
--- a/framework/core/js/src/forum/components/UserCard.js
+++ b/framework/core/js/src/forum/components/UserCard.js
@@ -30,7 +30,7 @@ export default class UserCard extends Component {
     const color = user.color();
 
     return (
-      <div className={classList('UserCard', this.attrs.className)} style={color && !process.env.testing && { '--usercard-bg': color }}>
+      <div className={classList('UserCard', this.attrs.className)} style={color && !window.testing && { '--usercard-bg': color }}>
         <div className="darkenBackground">
           <div className="container">
             <div className="UserCard-profile">{this.profileItems().toArray()}</div>
diff --git a/js-packages/jest-config/setup-env.js b/js-packages/jest-config/setup-env.js
index 2be8db7bc..9e14e0fae 100644
--- a/js-packages/jest-config/setup-env.js
+++ b/js-packages/jest-config/setup-env.js
@@ -12,8 +12,6 @@ import jsdom from 'jsdom';
 dayjs.extend(relativeTime);
 dayjs.extend(localizedFormat);
 
-process.env.testing = true;
-
 const dom = new jsdom.JSDOM('', {
   pretendToBeVisual: false,
 });
@@ -26,6 +24,7 @@ global.requestAnimationFrame = (callback) => callback();
 
 // Some other needed pollyfills.
 window.$ = jquery;
+window.testing = true;
 window.m = m;
 window.$.fn.tooltip = () => {};
 window.matchMedia = () => ({