Add tests for Alpaca Historical Bars API

- Implemented tests for fetching historical bars for AAPL with different timeframes (1D, 5Min, 1H).
- Verified response structure and data integrity for each timeframe.
- Ensured that the API returns valid data and appropriate status for the requests.

app/components/TradingViewChart.tsx

@@ -10,26 +10,46 @@ export default function TradingViewChart({ ticker, data }: TradingViewChartProps
   const containerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    if (!containerRef.current) return;
+    if (!containerRef.current) {
+      console.warn(`TradingViewChart: container not ready for ${ticker}`);
+      return;
+    }
 
+    console.log(`TradingViewChart: creating chart for ${ticker} with ${data?.length ?? 0} bars`);
+    
     const chart = LightweightCharts.createChart(containerRef.current, {
-      width: containerRef.current.clientWidth,
       height: 400,
+      autoSize: true,
     });
 
-    const candlestickSeries = chart.addSeries(LightweightCharts.CandlestickSeries);
+    const candlestickSeries = chart.addSeries(LightweightCharts.CandlestickSeries, {
+      upColor: "#26a69a",
+      downColor: "#ef5350",
+      borderUpColor: "#26a69a",
+      borderDownColor: "#ef5350",
+      wickUpColor: "#26a69a",
+      wickDownColor: "#ef5350",
+    });
     
     if (data && data.length > 0) {
-      candlestickSeries.setData(data);
+      console.log(`TradingViewChart: setting data for ${ticker}`, data.slice(0, 3));
+      try {
+        candlestickSeries.setData(data);
+        console.log(`TradingViewChart: data set successfully for ${ticker}`);
+      } catch (err) {
+        console.error(`TradingViewChart: error setting data for ${ticker}`, err);
+      }
+    } else {
+      console.log(`TradingViewChart: no data to set for ${ticker}`);
     }
 
     return () => chart.remove();
-  }, [data]);
+  }, [data, ticker]);
 
   return (
     <div className="bg-white rounded-xl shadow-lg p-4">
       <h3 className="text-lg font-bold mb-3">{ticker} Price Chart</h3>
-      <div ref={containerRef} />
+      <div ref={containerRef} className="w-full" />
     </div>
   );
 }

app/components/__tests__/TradingViewChart.test.tsx

@@ -1,20 +1,35 @@
 /// <reference types="vitest" />
-import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { describe, it, expect, vi, beforeEach } from "vitest";
 import { render, screen } from "@testing-library/react";
 import TradingViewChart from "../TradingViewChart";
 
-// Mock lightweight-charts
-vi.mock("lightweight-charts", () => ({
-  createChart: vi.fn(() => ({
+// Use vi.hoisted to define mock functions that will be available during hoisting
+const { mockSetData, mockCreateChart } = vi.hoisted(() => ({
+  mockSetData: vi.fn(),
+  mockCreateChart: vi.fn(() => ({
     addSeries: vi.fn(() => ({
       setData: vi.fn(),
     })),
     remove: vi.fn(),
   })),
+}));
+
+vi.mock("lightweight-charts", () => ({
+  createChart: mockCreateChart,
   CandlestickSeries: {},
 }));
 
 describe("TradingViewChart", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Update the mock's setData to track calls
+    const mockSeries = { setData: mockSetData };
+    mockCreateChart.mockReturnValue({
+      addSeries: vi.fn(() => mockSeries),
+      remove: vi.fn(),
+    });
+  });
+
   it("renders the ticker symbol as heading", () => {
     render(<TradingViewChart ticker="AAPL" />);
     expect(screen.getByText("AAPL Price Chart")).toBeInTheDocument();
@@ -23,14 +38,53 @@ describe("TradingViewChart", () => {
   it("renders without data prop", () => {
     render(<TradingViewChart ticker="MSFT" />);
     expect(screen.getByText("MSFT Price Chart")).toBeInTheDocument();
+    expect(mockSetData).not.toHaveBeenCalled();
   });
 
-  it("renders with data prop", () => {
+  it("calls setData with correct data format when data is provided", () => {
     const data = [
       { time: "2024-01-01", open: 100, high: 110, low: 95, close: 105 },
       { time: "2024-01-02", open: 105, high: 115, low: 100, close: 110 },
     ];
     render(<TradingViewChart ticker="GOOGL" data={data} />);
+    
     expect(screen.getByText("GOOGL Price Chart")).toBeInTheDocument();
+    expect(mockSetData).toHaveBeenCalledWith(data);
+  });
+
+  it("does not call setData when data array is empty", () => {
+    render(<TradingViewChart ticker="TSLA" data={[]} />);
+    
+    expect(screen.getByText("TSLA Price Chart")).toBeInTheDocument();
+    expect(mockSetData).not.toHaveBeenCalled();
+  });
+
+  it("creates chart with autoSize option for responsive sizing", () => {
+    render(<TradingViewChart ticker="TEST" />);
+    
+    expect(mockCreateChart).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.objectContaining({
+        autoSize: true,
+      })
+    );
+  });
+
+  it("creates candlestick series with explicit colors", () => {
+    const mockAddSeries = vi.fn();
+    mockCreateChart.mockReturnValue({
+      addSeries: mockAddSeries,
+      remove: vi.fn(),
+    });
+
+    render(<TradingViewChart ticker="TEST" />);
+
+    expect(mockAddSeries).toHaveBeenCalledWith(
+      {},
+      expect.objectContaining({
+        upColor: "#26a69a",
+        downColor: "#ef5350",
+      })
+    );
   });
 });