From 2fdc29e8e8ef5d712d4344a2f935c54630904c54 Mon Sep 17 00:00:00 2001
From: Torben Sorensen <torben.sorensen@gmail.com>
Date: Tue, 25 Nov 2025 12:56:21 -0800
Subject: [PATCH] ts fixes from reorg

---
 src/components/Header.test.tsx                |  4 +--
 src/features/charts/PriceChart.test.tsx       |  2 +-
 src/features/charts/PriceChart.tsx            | 27 +++++++++----------
 .../charts/PriceHistoryChart.test.tsx         |  8 ++++--
 src/features/flyer/AnalysisPanel.test.tsx     |  2 +-
 .../flyer/ExtractedDataTable.test.tsx         |  2 +-
 src/features/flyer/ProcessingStatus.tsx       |  2 +-
 7 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/src/components/Header.test.tsx b/src/components/Header.test.tsx
index 0167807e..a4bdd1e5 100644
--- a/src/components/Header.test.tsx
+++ b/src/components/Header.test.tsx
@@ -46,8 +46,8 @@ describe('Header', () => {
 
   it('should display unit system and theme mode', () => {
     renderWithRouter({ isDarkMode: true, unitSystem: 'metric' });
-    expect(screen.getByText('Metric')).toBeInTheDocument();
-    expect(screen.getByText('Dark Mode')).toBeInTheDocument();
+    expect(screen.getByText(/metric/i)).toBeInTheDocument();
+    expect(screen.getByText(/dark mode/i)).toBeInTheDocument();
   });
 
   describe('When user is logged out', () => {
diff --git a/src/features/charts/PriceChart.test.tsx b/src/features/charts/PriceChart.test.tsx
index 8b0d004c..2f80e2ee 100644
--- a/src/features/charts/PriceChart.test.tsx
+++ b/src/features/charts/PriceChart.test.tsx
@@ -1,4 +1,4 @@
-// src/components/PriceChart.test.tsx
+// src/features/charts/PriceChart.test.tsx
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { describe, it, expect } from 'vitest';
diff --git a/src/features/charts/PriceChart.tsx b/src/features/charts/PriceChart.tsx
index 8e7f52bb..d1794f5b 100644
--- a/src/features/charts/PriceChart.tsx
+++ b/src/features/charts/PriceChart.tsx
@@ -1,9 +1,9 @@
-// src/components/PriceChart.tsx
+// src/features/charts/PriceChart.tsx
 import React from 'react';
 import type { DealItem, User } from '../../types';
 import { TagIcon } from '../../components/icons/TagIcon';
 import { LoadingSpinner } from '../../components/LoadingSpinner';
-import { formatUnitPrice } from '../../utils/unitConverter';
+import { formatUnitPrice } from '../../utils/formatters';
 import { UserIcon } from '../../components/icons/UserIcon';
 
 interface PriceChartProps {
@@ -29,8 +29,8 @@ export const PriceChart: React.FC<PriceChartProps> = ({ deals, isLoading, unitSy
 
     if (isLoading) {
       return (
-        <div className="flex justify-center items-center h-full min-h-[100px]">
-          <LoadingSpinner /> <span className="ml-2 text-sm text-gray-500 dark:text-gray-400">Finding active deals...</span>
+        <div role="status" className="flex justify-center items-center h-full min-h-[100px]">
+          <div className="w-6 h-6 text-brand-primary"><LoadingSpinner /></div> <span className="ml-2 text-sm text-gray-500 dark:text-gray-400">Finding active deals...</span>
         </div>
       );
     }
@@ -52,7 +52,13 @@ export const PriceChart: React.FC<PriceChartProps> = ({ deals, isLoading, unitSy
           </thead>
           <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
             {deals.map((deal, index) => {
-              const formattedUnitPrice = formatUnitPrice(deal.unit_price, unitSystem);
+              // The formatUnitPrice function returns an object { price: string, unit: string }.
+              // We need to combine these into a single string for rendering and to match the test expectation.
+              const unitPriceData = deal.unit_price ? formatUnitPrice(deal.unit_price, unitSystem) : null;
+              const formattedUnitPriceString = unitPriceData 
+                ? `${unitPriceData.price}${unitPriceData.unit}` 
+                : 'N/A';
+
               return (
                 <tr key={`${deal.item}-${deal.storeName}-${index}`} className="hover:bg-gray-50 dark:hover:bg-gray-800/50">
                   <td className="px-4 py-2 font-semibold text-gray-900 dark:text-white">
@@ -69,16 +75,7 @@ export const PriceChart: React.FC<PriceChartProps> = ({ deals, isLoading, unitSy
                   <td className="px-4 py-2 text-left text-gray-700 dark:text-gray-200">{deal.storeName}</td>
                   <td className="px-4 py-2 text-right text-gray-700 dark:text-gray-200">{deal.price_display}</td>
                   <td className="px-4 py-2 text-right">
-                      <div className="flex flex-col items-end">
-                        <span className="font-semibold text-gray-700 dark:text-gray-300">
-                            {formattedUnitPrice.price}
-                        </span>
-                        {formattedUnitPrice.unit && (
-                            <span className="text-xs text-gray-500 dark:text-gray-400">
-                                {formattedUnitPrice.unit}
-                            </span>
-                        )}
-                      </div>
+                      {formattedUnitPriceString}
                   </td>
                 </tr>
               )
diff --git a/src/features/charts/PriceHistoryChart.test.tsx b/src/features/charts/PriceHistoryChart.test.tsx
index 3bb00813..df6190d7 100644
--- a/src/features/charts/PriceHistoryChart.test.tsx
+++ b/src/features/charts/PriceHistoryChart.test.tsx
@@ -6,10 +6,14 @@ import { PriceHistoryChart } from './PriceHistoryChart';
 import * as apiClient from '../../services/apiClient';
 import type { MasterGroceryItem } from '../../types';
 
-// Mock the apiClient
-vi.mock('../services/apiClient');
+// Mock the entire apiClient module. This is crucial for being able to
+// provide mock implementations for its exported functions.
+vi.mock('../../services/apiClient', () => ({
+  fetchHistoricalPriceData: vi.fn(),
+}));
 
 // Mock recharts library
+// This mock remains correct.
 vi.mock('recharts', async () => {
   const OriginalModule = await vi.importActual('recharts');
   return {
diff --git a/src/features/flyer/AnalysisPanel.test.tsx b/src/features/flyer/AnalysisPanel.test.tsx
index f0622269..18ab2926 100644
--- a/src/features/flyer/AnalysisPanel.test.tsx
+++ b/src/features/flyer/AnalysisPanel.test.tsx
@@ -1,4 +1,4 @@
-// src/components/AnalysisPanel.test.tsx
+// src/features/flyer/AnalysisPanel.test.tsx
 import React from 'react';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import { describe, it, expect, vi, beforeEach, type Mock } from 'vitest';
diff --git a/src/features/flyer/ExtractedDataTable.test.tsx b/src/features/flyer/ExtractedDataTable.test.tsx
index 928a06d3..d687842c 100644
--- a/src/features/flyer/ExtractedDataTable.test.tsx
+++ b/src/features/flyer/ExtractedDataTable.test.tsx
@@ -1,4 +1,4 @@
-// src/components/ExtractedDataTable.test.tsx
+// src/features/flyer/ExtractedDataTable.test.tsx
 import React from 'react';
 import { render, screen, fireEvent, within } from '@testing-library/react';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
diff --git a/src/features/flyer/ProcessingStatus.tsx b/src/features/flyer/ProcessingStatus.tsx
index ed6cfbf8..d7b9e27e 100644
--- a/src/features/flyer/ProcessingStatus.tsx
+++ b/src/features/flyer/ProcessingStatus.tsx
@@ -1,4 +1,4 @@
-// src/components/ProcessingStatus.tsx
+// src/features/flyer/ProcessingStatus.tsx
 import React, { useState, useEffect } from 'react';
 import { LoadingSpinner } from '../../components/LoadingSpinner';
 import { CheckCircleIcon } from '../../components/icons/CheckCircleIcon';