Merge pull request #851 from apedley/app-food-polish

App Food Management Polish + Bug Fixes

Author: CodeWithCJ

SparkyFitnessMobile/App.tsx

@@ -1,5 +1,5 @@
 import './global.css'
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { StatusBar, Platform, type ImageSourcePropType } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import {
@@ -59,8 +59,7 @@ function AppContent() {
   // Determine if we're in dark mode based on current theme
   const isDarkMode = theme === 'dark' || theme === 'amoled';
 
-  // Create navigation theme that matches app colors
-  const navigationTheme: Theme = {
+  const navigationTheme = useMemo<Theme>(() => ({
     dark: isDarkMode,
     colors: {
       primary: primary,
@@ -76,7 +75,7 @@ function AppContent() {
       bold: { fontFamily: 'System', fontWeight: '600' },
       heavy: { fontFamily: 'System', fontWeight: '700' },
     },
-  };
+  }), [isDarkMode, primary, bgPrimary, chrome, textPrimary, chromeBorder]);
 
   useEffect(() => {
     if (Platform.OS !== 'ios') {

SparkyFitnessMobile/__tests__/SyncScreen-test.tsx

@@ -1,20 +1,15 @@
 import { render, screen } from '@testing-library/react-native';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { QueryClientProvider } from '@tanstack/react-query';
 
 import SyncScreen from '@/src/screens/SyncScreen';
 import { NavigationContainer } from '@react-navigation/native';
 import SettingsScreen from '@/src/screens/SettingsScreen';
 import { createStackNavigator } from '@react-navigation/stack';
+import { createTestQueryClient } from './hooks/queryTestUtils';
 
 const Stack = createStackNavigator();
 
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      retry: false,
-    },
-  },
-});
+const queryClient = createTestQueryClient();
 
 const AppNavigator = () => {
   return (
@@ -30,9 +25,12 @@ const AppNavigator = () => {
 };
 
 describe('<SyncScreen />', () => {
+  afterEach(() => {
+    queryClient.clear();
+  });
+
   test('renders Sync Now button', async () => {
     render(<AppNavigator />);
-    expect(screen.getByText('Sync Now')).toBeVisible();
-    
+    expect(await screen.findByText('Sync Now')).toBeVisible();
   });
 });

SparkyFitnessMobile/__tests__/components/ChartTouchOverlay.test.tsx

@@ -0,0 +1,143 @@
+import React from 'react';
+import { act, fireEvent, render } from '@testing-library/react-native';
+import ChartTouchOverlay, {
+  CHART_TOUCH_LONG_PRESS_DELAY_MS,
+  buildChartTouchZones,
+  type ChartTouchLayout,
+} from '../../src/components/ChartTouchOverlay';
+
+const layout: ChartTouchLayout = {
+  chartBounds: {
+    left: 0,
+    right: 60,
+    top: 5,
+    bottom: 45,
+  },
+  points: [
+    { x: 10, xValue: '2026-03-01', y: 30, yValue: 1000 },
+    { x: 30, xValue: '2026-03-02', y: 20, yValue: 2000 },
+    { x: 50, xValue: '2026-03-03', y: 10, yValue: 3000 },
+  ],
+};
+
+const createTouchEvent = (locationX: number, locationY: number) => ({
+  nativeEvent: {
+    changedTouches: [{ locationX, locationY }],
+    touches: [{ locationX, locationY }],
+    locationX,
+    locationY,
+  },
+});
+
+describe('ChartTouchOverlay', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.runOnlyPendingTimers();
+    jest.useRealTimers();
+  });
+
+  it('builds touch zones from the midpoints between plotted points', () => {
+    expect(buildChartTouchZones(layout.points, layout.chartBounds)).toEqual([
+      { index: 0, left: 0, width: 20 },
+      { index: 1, left: 20, width: 20 },
+      { index: 2, left: 40, width: 20 },
+    ]);
+  });
+
+  it('waits for the long press delay before selecting a zone', () => {
+    const onSelect = jest.fn();
+    const onClear = jest.fn();
+    const screen = render(
+      <ChartTouchOverlay
+        layout={layout}
+        onSelect={onSelect}
+        onClear={onClear}
+        testIDPrefix="touch-overlay"
+      />,
+    );
+
+    fireEvent(
+      screen.getByTestId('touch-overlay'),
+      'touchStart',
+      createTouchEvent(25, 20),
+    );
+
+    expect(onSelect).not.toHaveBeenCalled();
+
+    act(() => {
+      jest.advanceTimersByTime(CHART_TOUCH_LONG_PRESS_DELAY_MS);
+    });
+
+    expect(onSelect).toHaveBeenCalledWith(1);
+
+    fireEvent(
+      screen.getByTestId('touch-overlay'),
+      'touchEnd',
+      createTouchEvent(25, 20),
+    );
+
+    expect(onClear).toHaveBeenCalledTimes(1);
+  });
+
+  it('cancels activation when the touch turns into a drag before the delay', () => {
+    const onSelect = jest.fn();
+    const screen = render(
+      <ChartTouchOverlay
+        layout={layout}
+        onSelect={onSelect}
+        testIDPrefix="touch-overlay"
+      />,
+    );
+
+    fireEvent(
+      screen.getByTestId('touch-overlay'),
+      'touchStart',
+      createTouchEvent(25, 20),
+    );
+    fireEvent(
+      screen.getByTestId('touch-overlay'),
+      'touchMove',
+      createTouchEvent(25, 35),
+    );
+
+    act(() => {
+      jest.advanceTimersByTime(CHART_TOUCH_LONG_PRESS_DELAY_MS);
+    });
+
+    expect(onSelect).not.toHaveBeenCalled();
+  });
+
+  it('updates the selected zone while dragging after activation', () => {
+    const onSelect = jest.fn();
+    const onClear = jest.fn();
+    const screen = render(
+      <ChartTouchOverlay
+        layout={layout}
+        onSelect={onSelect}
+        onClear={onClear}
+        testIDPrefix="touch-overlay"
+      />,
+    );
+
+    fireEvent(
+      screen.getByTestId('touch-overlay'),
+      'touchStart',
+      createTouchEvent(10, 20),
+    );
+    act(() => {
+      jest.advanceTimersByTime(CHART_TOUCH_LONG_PRESS_DELAY_MS);
+    });
+
+    fireEvent(
+      screen.getByTestId('touch-overlay'),
+      'touchMove',
+      createTouchEvent(45, 20),
+    );
+
+    expect(onSelect).toHaveBeenNthCalledWith(1, 0);
+    expect(onSelect).toHaveBeenNthCalledWith(2, 2);
+  });
+});

SparkyFitnessMobile/__tests__/hooks/queryTestUtils.ts

@@ -1,9 +1,15 @@
 import React from 'react';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { act } from '@testing-library/react-native';
+import { QueryClient, QueryClientProvider, notifyManager } from '@tanstack/react-query';
 import type { DefaultOptions } from '@tanstack/react-query';
 
 export type { QueryClient } from '@tanstack/react-query';
 
+// Ensure React Query state updates are wrapped in act() to avoid warnings
+notifyManager.setNotifyFunction((callback) => {
+  act(callback);
+});
+
 /**
  * Creates a QueryClient configured for tests: no retries and instant staleness.
  * Pass `options` to replace the default options entirely at the `defaultOptions` level.