CU-868ffcgaz PR#169 fixes

ucswift · ucswift · commit 1e102e0ad568 · 2025-09-04T19:24:44.000-07:00
diff --git a/__mocks__/expo-location.ts b/__mocks__/expo-location.ts
@@ -43,7 +43,13 @@ export const getCurrentPositionAsync = jest.fn().mockResolvedValue({
 });
 
 export const watchPositionAsync = jest.fn().mockImplementation((options, callback) => {
-  const interval = setInterval(() => {
+  let timeoutId: ReturnType<typeof setTimeout> | null = null;
+  let hasTimedOut = false;
+
+  // Use setTimeout for a one-shot callback to avoid timer leaks
+  timeoutId = setTimeout(() => {
+    hasTimedOut = true;
+    timeoutId = null;
     callback({
       coords: {
         latitude: 40.7128,
@@ -56,10 +62,16 @@ export const watchPositionAsync = jest.fn().mockImplementation((options, callbac
       },
       timestamp: Date.now(),
     });
-  }, 1000);
+  }, 100); // Shorter delay for faster tests
 
   return Promise.resolve({
-    remove: () => clearInterval(interval),
+    remove: () => {
+      if (timeoutId && !hasTimedOut) {
+        clearTimeout(timeoutId);
+        timeoutId = null;
+      }
+      // Safe no-op if timeout already fired
+    },
   });
 });
 
diff --git a/jest-setup.ts b/jest-setup.ts
@@ -35,23 +35,47 @@ jest.mock('expo-audio', () => ({
 }));
 
 // Mock the host component names function to prevent testing library errors
-jest.mock('@testing-library/react-native/build/helpers/host-component-names', () => ({
-  getHostComponentNames: jest.fn(() => ({
-    text: 'Text',
-    view: 'View',
-    scrollView: 'ScrollView',
-    touchable: 'TouchableOpacity',
-    switch: 'Switch',
-    textInput: 'TextInput',
-  })),
-  configureHostComponentNamesIfNeeded: jest.fn(),
-  isHostText: jest.fn((element) => element?.type === 'Text' || element?._fiber?.type === 'Text' || (typeof element === 'object' && element?.props?.children && typeof element.props.children === 'string')),
-  isHostTextInput: jest.fn((element) => element?.type === 'TextInput' || element?._fiber?.type === 'TextInput'),
-  isHostImage: jest.fn((element) => element?.type === 'Image' || element?._fiber?.type === 'Image'),
-  isHostSwitch: jest.fn((element) => element?.type === 'Switch' || element?._fiber?.type === 'Switch'),
-  isHostScrollView: jest.fn((element) => element?.type === 'ScrollView' || element?._fiber?.type === 'ScrollView'),
-  isHostModal: jest.fn((element) => element?.type === 'Modal' || element?._fiber?.type === 'Modal'),
-}));
+// Check if the internal module exists (for pre-v13 compatibility)
+try {
+  require.resolve('@testing-library/react-native/build/helpers/host-component-names');
+  // If the internal module exists, mock it (pre-v13)
+  jest.mock('@testing-library/react-native/build/helpers/host-component-names', () => ({
+    getHostComponentNames: jest.fn(() => ({
+      text: 'Text',
+      view: 'View',
+      scrollView: 'ScrollView',
+      touchable: 'TouchableOpacity',
+      switch: 'Switch',
+      textInput: 'TextInput',
+    })),
+    configureHostComponentNamesIfNeeded: jest.fn(),
+    isHostText: jest.fn((element) => element?.type === 'Text' || element?._fiber?.type === 'Text' || (typeof element === 'object' && element?.props?.children && typeof element.props.children === 'string')),
+    isHostTextInput: jest.fn((element) => element?.type === 'TextInput' || element?._fiber?.type === 'TextInput'),
+    isHostImage: jest.fn((element) => element?.type === 'Image' || element?._fiber?.type === 'Image'),
+    isHostSwitch: jest.fn((element) => element?.type === 'Switch' || element?._fiber?.type === 'Switch'),
+    isHostScrollView: jest.fn((element) => element?.type === 'ScrollView' || element?._fiber?.type === 'ScrollView'),
+    isHostModal: jest.fn((element) => element?.type === 'Modal' || element?._fiber?.type === 'Modal'),
+  }));
+} catch (error) {
+  // Module doesn't exist (v13+), try to use the public API if available
+  try {
+    const { configureHostComponentNames } = require('@testing-library/react-native');
+    // Configure host component names using the public API (v13+)
+    if (configureHostComponentNames) {
+      configureHostComponentNames({
+        text: 'Text',
+        view: 'View',
+        scrollView: 'ScrollView',
+        touchable: 'TouchableOpacity',
+        switch: 'Switch',
+        textInput: 'TextInput',
+      });
+    }
+  } catch (publicApiError) {
+    // If neither internal nor public API is available, log a warning but continue
+    console.warn('Unable to configure host component names for @testing-library/react-native. Tests may fail if they rely on component type detection.');
+  }
+}
 
 // Global mocks for common problematic modules
 jest.mock('@notifee/react-native', () => {
diff --git a/src/app/(app)/_layout.tsx b/src/app/(app)/_layout.tsx
@@ -232,17 +232,12 @@ export default function TabLayout() {
             <Sidebar />
           </View>
         ) : (
-          <Drawer isOpen={isOpen} onClose={() => setIsOpen(false)}>
+          <Drawer isOpen={isOpen} onClose={() => setIsOpen(false)} {...({} as any)}>
             <DrawerBackdrop onPress={() => setIsOpen(false)} />
             <DrawerContent className="w-4/5 bg-white p-1 dark:bg-gray-900">
               <DrawerBody>
                 <Sidebar />
               </DrawerBody>
-              <DrawerFooter>
-                <Button onPress={() => setIsOpen(false)} className="w-full bg-primary-600">
-                  <ButtonText>Close</ButtonText>
-                </Button>
-              </DrawerFooter>
             </DrawerContent>
           </Drawer>
         )}
diff --git a/src/app/login/index.tsx b/src/app/login/index.tsx
@@ -68,6 +68,7 @@ export default function Login() {
           setIsErrorModalVisible(false);
         }}
         size="full"
+        {...({} as any)}
       >
         <ModalBackdrop />
         <ModalContent className="m-4 w-full max-w-3xl rounded-2xl">
diff --git a/src/components/calls/full-screen-image-modal.tsx b/src/components/calls/full-screen-image-modal.tsx
@@ -117,7 +117,7 @@ const FullScreenImageModal: React.FC<FullScreenImageModalProps> = ({ isOpen, onC
   });
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose} size="full">
+    <Modal isOpen={isOpen} onClose={onClose} size="full" {...({} as any)}>
       <ModalBackdrop onPress={onClose} className="bg-black/90" />
       <ModalContent className="flex size-full items-center justify-center border-0 bg-transparent p-0 shadow-none">
         <StatusBar hidden />
diff --git a/src/components/notifications/NotificationInbox.tsx b/src/components/notifications/NotificationInbox.tsx
@@ -314,7 +314,7 @@ export const NotificationInbox = ({ isOpen, onClose }: NotificationInboxProps) =
       </Animated.View>
 
       {/* Delete Confirmation Modal */}
-      <Modal isOpen={showDeleteConfirmModal} onClose={() => setShowDeleteConfirmModal(false)}>
+      <Modal isOpen={showDeleteConfirmModal} onClose={() => setShowDeleteConfirmModal(false)} {...({} as any)}>
         <ModalBackdrop />
         <ModalContent>
           <ModalHeader>
diff --git a/src/components/push-notification/push-notification-modal.tsx b/src/components/push-notification/push-notification-modal.tsx
@@ -104,7 +104,7 @@ export const PushNotificationModal: React.FC = () => {
   const typeText = getNotificationTypeText(notification.type);
 
   return (
-    <Modal isOpen={isOpen} onClose={handleClose} size="md">
+    <Modal isOpen={isOpen} onClose={handleClose} size="md" {...({} as any)}>
       <ModalBackdrop />
       <ModalContent className="mx-4">
         <ModalHeader className="pb-4">
diff --git a/src/components/roles/roles-modal.tsx b/src/components/roles/roles-modal.tsx
@@ -75,7 +75,7 @@ export const RolesModal: React.FC<RolesModalProps> = ({ isOpen, onClose }) => {
   }, [activeUnit, pendingAssignments, onClose]);
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose} size="full">
+    <Modal isOpen={isOpen} onClose={onClose} size="full" {...({} as any)}>
       <ModalBackdrop />
       <ModalContent className="m-4 w-full max-w-3xl rounded-2xl">
         <ModalHeader>
diff --git a/src/components/settings/__tests__/server-url-bottom-sheet-simple.test.tsx b/src/components/settings/__tests__/server-url-bottom-sheet-simple.test.tsx
@@ -1,9 +1,3 @@
-// Mock Platform first, before any other imports
-jest.mock('react-native/Libraries/Utilities/Platform', () => ({
-  OS: 'ios',
-  select: jest.fn().mockImplementation((obj) => obj.ios || obj.default),
-}));
-
 import { render, screen } from '@testing-library/react-native';
 import React from 'react';
 
diff --git a/src/components/settings/__tests__/unit-selection-bottom-sheet-simple.test.tsx b/src/components/settings/__tests__/unit-selection-bottom-sheet-simple.test.tsx
@@ -1,17 +1,7 @@
-// Mock react-i18next first
+// Mock react-i18next
 jest.mock('react-i18next', () => ({
   useTranslation: () => ({
-    t: jest.fn((key: string, options?: any) => {
-      const translations: { [key: string]: string } = {
-        'settings.select_unit': 'Select Unit',
-        'settings.current_unit': 'Current Unit',
-        'settings.no_units_available': 'No units available',
-        'common.cancel': 'Cancel',
-        'settings.unit_selected_successfully': `${options?.unitName || 'Unit'} selected successfully`,
-        'settings.unit_selection_failed': 'Failed to select unit. Please try again.',
-      };
-      return translations[key] || key;
-    }),
+    t: (key: string, options?: any) => key,
   }),
 }));
 
@@ -90,12 +80,6 @@ jest.mock('@/stores/toast/store', () => ({
   useToastStore: jest.fn(),
 }));
 
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}));
-
 // Mock lucide icons to avoid SVG issues in tests
 jest.mock('lucide-react-native', () => ({
   Check: 'Check',
diff --git a/src/components/settings/__tests__/unit-selection-bottom-sheet.test.tsx b/src/components/settings/__tests__/unit-selection-bottom-sheet.test.tsx
@@ -20,7 +20,6 @@ jest.mock('@/stores/app/core-store');
 jest.mock('@/stores/roles/store');
 jest.mock('@/stores/units/store');
 jest.mock('@/stores/toast/store');
-jest.mock('lucide-react-native');
 
 // Mock logger
 jest.mock('@/lib/logging', () => ({
diff --git a/src/components/sidebar/__tests__/unit-sidebar-minimal.test.tsx b/src/components/sidebar/__tests__/unit-sidebar-minimal.test.tsx
@@ -16,15 +16,26 @@ jest.mock('react-native/Libraries/Utilities/Platform', () => mockPlatform);
 // Mock react-native-svg to avoid Platform.OS issues
 jest.mock('react-native-svg', () => {
   const React = require('react');
+  const Svg = React.forwardRef((props: any, ref: any) => React.createElement('View', { ...props, ref, testID: 'mock-svg' }));
+  const Circle = (props: any) => React.createElement('View', { ...props, testID: 'mock-circle' });
+  const Path = (props: any) => React.createElement('View', { ...props, testID: 'mock-path' });
+  const G = (props: any) => React.createElement('View', { ...props, testID: 'mock-g' });
+  const Line = (props: any) => React.createElement('View', { ...props, testID: 'mock-line' });
+  const Polyline = (props: any) => React.createElement('View', { ...props, testID: 'mock-polyline' });
+  const Polygon = (props: any) => React.createElement('View', { ...props, testID: 'mock-polygon' });
+  const Rect = (props: any) => React.createElement('View', { ...props, testID: 'mock-rect' });
+
   return {
-    Svg: React.forwardRef((props: any, ref: any) => React.createElement('View', { ...props, ref, testID: 'mock-svg' })),
-    Circle: (props: any) => React.createElement('View', { ...props, testID: 'mock-circle' }),
-    Path: (props: any) => React.createElement('View', { ...props, testID: 'mock-path' }),
-    G: (props: any) => React.createElement('View', { ...props, testID: 'mock-g' }),
-    Line: (props: any) => React.createElement('View', { ...props, testID: 'mock-line' }),
-    Polyline: (props: any) => React.createElement('View', { ...props, testID: 'mock-polyline' }),
-    Polygon: (props: any) => React.createElement('View', { ...props, testID: 'mock-polygon' }),
-    Rect: (props: any) => React.createElement('View', { ...props, testID: 'mock-rect' }),
+    __esModule: true,
+    default: Svg,
+    Svg,
+    Circle,
+    Path,
+    G,
+    Line,
+    Polyline,
+    Polygon,
+    Rect,
   };
 });
 
diff --git a/src/components/status/__tests__/status-bottom-sheet.test.tsx b/src/components/status/__tests__/status-bottom-sheet.test.tsx
@@ -191,9 +191,11 @@ jest.mock('@/services/offline-event-manager.service', () => ({
   },
 }));
 
-jest.mock('@/stores/app/core-store', () => ({
-  useCoreStore: jest.fn(),
-}));
+jest.mock('@/stores/app/core-store', () => {
+  const mockStore = jest.fn();
+  (mockStore as any).getState = jest.fn();
+  return { useCoreStore: mockStore };
+});
 
 jest.mock('@/stores/app/location-store', () => ({
   useLocationStore: jest.fn(() => ({
@@ -229,26 +231,6 @@ import { StatusBottomSheet } from '../status-bottom-sheet';
 
 const mockSetActiveCall = jest.fn();
 
-jest.mock('@/stores/app/core-store', () => {
-  const mockStore = jest.fn();
-  (mockStore as any).getState = jest.fn();
-  return { useCoreStore: mockStore };
-});
-
-jest.mock('@/stores/roles/store', () => ({
-  useRolesStore: jest.fn(),
-}));
-
-jest.mock('@/stores/toast/store', () => ({
-  useToastStore: jest.fn(),
-}));
-
-jest.mock('@/services/offline-event-manager.service', () => ({
-  offlineEventManager: {
-    initialize: jest.fn(),
-  },
-}));
-
 // Mock the Actionsheet components
 jest.mock('@/components/ui/actionsheet', () => ({
   Actionsheet: ({ children, isOpen }: { children: React.ReactNode; isOpen: boolean }) => {
@@ -811,7 +793,7 @@ describe('StatusBottomSheet', () => {
     const submitButton = buttons.find(button => {
       try {
         const textElements = button.findAllByType('Text');
-        return textElements.some(text => text.props.children === 'Submit');
+        return textElements.some((text: any) => text.props.children === 'Submit');
       } catch (e) {
         return false;
       }
diff --git a/src/components/ui/bottomsheet/index.tsx b/src/components/ui/bottomsheet/index.tsx
@@ -36,14 +36,14 @@ const bottomSheetItemStyle = tva({
 
 const BottomSheetContext = createContext<{
   visible: boolean;
-  bottomSheetRef: React.RefObject<GorhomBottomSheet>;
+  bottomSheetRef: React.RefObject<GorhomBottomSheet | null>;
   handleClose: () => void;
   handleOpen: () => void;
 }>({
   visible: false,
-  bottomSheetRef: { current: null },
-  handleClose: () => {},
-  handleOpen: () => {},
+  bottomSheetRef: { current: null as any },
+  handleClose: () => { },
+  handleOpen: () => { },
 });
 
 type IBottomSheetProps = React.ComponentProps<typeof GorhomBottomSheet>;
@@ -166,14 +166,14 @@ export const BottomSheetContent = ({ ...props }: IBottomSheetContent) => {
   const keyDownHandlers = useMemo(() => {
     return Platform.OS === 'web'
       ? {
-          onKeyDown: (e: React.KeyboardEvent) => {
-            if (e.key === 'Escape') {
-              e.preventDefault();
-              handleClose();
-              return;
-            }
-          },
-        }
+        onKeyDown: (e: React.KeyboardEvent) => {
+          if (e.key === 'Escape') {
+            e.preventDefault();
+            handleClose();
+            return;
+          }
+        },
+      }
       : {};
   }, [handleClose]);
 
diff --git a/src/components/ui/drawer/index.tsx b/src/components/ui/drawer/index.tsx
@@ -30,7 +30,9 @@ const UIDrawer = createDrawer({
   AnimatePresence: AnimatePresence,
 });
 
+// @ts-ignore - Motion component type compatibility issue
 cssInterop(AnimatedPressable, { className: 'style' });
+// @ts-ignore - Motion component type compatibility issue
 cssInterop(Motion.View, { className: 'style' });
 
 const drawerStyle = tva({
diff --git a/src/components/ui/skeleton/index.tsx b/src/components/ui/skeleton/index.tsx
@@ -17,7 +17,7 @@ type ISkeletonTextProps = React.ComponentProps<typeof View> &
     startColor?: string;
   };
 
-const Skeleton = forwardRef<React.ElementRef<typeof Animated.View>, ISkeletonProps>(({ className, variant, children, startColor = 'bg-background-200', isLoaded = false, speed = 2, ...props }, ref) => {
+const Skeleton = forwardRef<any, ISkeletonProps>(({ className, variant, children, startColor = 'bg-background-200', isLoaded = false, speed = 2, ...props }, ref) => {
   const pulseAnim = new Animated.Value(1);
   const customTimingFunction = Easing.bezier(0.4, 0, 0.6, 1);
   const fadeDuration = 0.6;
diff --git a/src/hooks/use-map-signalr-updates.ts b/src/hooks/use-map-signalr-updates.ts
@@ -12,7 +12,7 @@ export const useMapSignalRUpdates = (onMarkersUpdate: (markers: MapMakerInfoData
   const lastProcessedTimestamp = useRef<number>(0);
   const isUpdating = useRef<boolean>(false);
   const pendingTimestamp = useRef<number | null>(null);
-  const debounceTimer = useRef<NodeJS.Timeout | null>(null);
+  const debounceTimer = useRef<number | null>(null);
   const abortController = useRef<AbortController | null>(null);
 
   const lastUpdateTimestamp = useSignalRStore((state) => state.lastUpdateTimestamp);
diff --git a/src/hooks/use-signalr-lifecycle.ts b/src/hooks/use-signalr-lifecycle.ts
@@ -31,8 +31,8 @@ export function useSignalRLifecycle({ isSignedIn, hasInitialized }: UseSignalRLi
   const lastAppState = useRef<string | null>(null);
   const isProcessing = useRef(false);
   const pendingOperations = useRef<AbortController | null>(null);
-  const backgroundTimer = useRef<NodeJS.Timeout | null>(null);
-  const resumeTimer = useRef<NodeJS.Timeout | null>(null);
+  const backgroundTimer = useRef<number | null>(null);
+  const resumeTimer = useRef<number | null>(null);
 
   const handleAppBackground = useCallback(async () => {
     logger.debug({
diff --git a/src/lib/i18n/index.tsx b/src/lib/i18n/index.tsx
@@ -1,4 +1,4 @@
-import { locale } from 'expo-localization';
+import * as Localization from 'expo-localization';
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 import { I18nManager } from 'react-native';
@@ -9,7 +9,7 @@ export * from './utils';
 
 i18n.use(initReactI18next).init({
   resources,
-  lng: getLanguage() || locale, // TODO: if you are not supporting multiple languages or languages with multiple directions you can set the default value to `en`
+  lng: getLanguage() || Localization.getLocales()[0]?.languageCode || 'en', // TODO: if you are not supporting multiple languages or languages with multiple directions you can set the default value to `en`
   fallbackLng: 'en',
   compatibilityJSON: 'v3', // By default React Native projects does not support Intl
 
diff --git a/src/services/__tests__/push-notification.test.ts b/src/services/__tests__/push-notification.test.ts
diff --git a/src/services/bluetooth-audio.service.ts b/src/services/bluetooth-audio.service.ts
diff --git a/src/services/offline-event-manager.service.ts b/src/services/offline-event-manager.service.ts
diff --git a/tsconfig.json b/tsconfig.json
diff --git a/types/gluestack-ui.d.ts b/types/gluestack-ui.d.ts

Original file line number	Diff line number	Diff line change
`@@ -68,6 +68,7 @@ export default function Login() {`
`68`	`68`	`setIsErrorModalVisible(false);`
`69`	`69`	`}}`
`70`	`70`	`size="full"`
	`71`	`+ {...({} as any)}`
`71`	`72`	`>`
`72`	`73`	`<ModalBackdrop />`
`73`	`74`	`<ModalContent className="m-4 w-full max-w-3xl rounded-2xl">`