feat(tests): update Alpaca API tests to include range parameters and improve stock database cleanup
Run Tests / test (push) Failing after 8s
Run Tests / test (push) Failing after 8s
- Modified Alpaca Historical Bars tests to include range parameters in API requests. - Updated test descriptions for clarity. - Added cleanup step to delete test ticker after verification in stock database tests. - Adjusted Vitest configuration to exclude test files from coverage.
This commit is contained in:
@@ -6,11 +6,11 @@ export const meta = () => [{ title: "Stock Detail - AITrader" }];
|
||||
|
||||
interface LoaderData {
|
||||
ticker: string;
|
||||
position: number | null;
|
||||
position: { qty: number; avg_entry_price: number; current_price: number; market_value: number; unrealized_pl: number } | null;
|
||||
orders: any[];
|
||||
bars: any[];
|
||||
timeframe: string;
|
||||
limit: number;
|
||||
range: string;
|
||||
}
|
||||
|
||||
const TIMEFRAMES = [
|
||||
@@ -21,70 +21,85 @@ const TIMEFRAMES = [
|
||||
{ value: "1W", label: "1 Week" },
|
||||
];
|
||||
|
||||
const RANGES = [
|
||||
{ value: "1D", label: "1 Day" },
|
||||
{ value: "1W", label: "1 Week" },
|
||||
{ value: "1M", label: "1 Month" },
|
||||
{ value: "3M", label: "3 Months" },
|
||||
{ value: "1Y", label: "1 Year" },
|
||||
{ value: "3Y", label: "3 Years" },
|
||||
{ value: "ALL", label: "All" },
|
||||
];
|
||||
|
||||
export async function loader({ params, request }: { params: { ticker: string }; request: Request }) {
|
||||
const ticker = params.ticker?.toUpperCase() || "";
|
||||
const url = new URL(request.url);
|
||||
const timeframe = url.searchParams.get("timeframe") || "1D";
|
||||
const limit = parseInt(url.searchParams.get("limit") || "30", 10);
|
||||
console.log(`analyze/${ticker}: loader called with timeframe=${timeframe}, limit=${limit}`);
|
||||
const range = url.searchParams.get("range") || "1M";
|
||||
|
||||
// Build base URL from request for server-side fetches
|
||||
const reqUrl = new URL(request.url);
|
||||
const host = request.headers.get("host") || reqUrl.host;
|
||||
const protocol = reqUrl.protocol;
|
||||
const baseUrl = `${protocol}//${host}`;
|
||||
console.log(`analyze/${ticker}: baseUrl = ${baseUrl}`);
|
||||
|
||||
let position = null;
|
||||
let orders = [];
|
||||
let bars = [];
|
||||
|
||||
try {
|
||||
// Fetch position
|
||||
// Fetch positions
|
||||
const posRes = await fetch(`${baseUrl}/api/alpaca/positions`);
|
||||
console.log(`analyze/${ticker}: positions status = ${posRes.status}`);
|
||||
const positions = posRes.ok ? await posRes.json() : [];
|
||||
position = positions.find((p: any) => p.ticker === ticker)?.qty ?? null;
|
||||
position = positions.find((p: any) => p.ticker === ticker) ?? null;
|
||||
|
||||
// Fetch orders
|
||||
const ordRes = await fetch(`${baseUrl}/api/alpaca/orders`);
|
||||
const ordersData = ordRes.ok ? await ordRes.json() : { orders: [] };
|
||||
orders = ordersData.orders?.filter((o: any) => o.symbol === ticker) || [];
|
||||
|
||||
// Fetch bars for chart with timeframe and limit
|
||||
console.log(`analyze/${ticker}: fetching bars from ${baseUrl}/api/alpaca/quote/${ticker}?timeframe=${timeframe}&limit=${limit}`);
|
||||
const barsRes = await fetch(`${baseUrl}/api/alpaca/quote/${ticker}?timeframe=${timeframe}&limit=${limit}`);
|
||||
console.log(`analyze/${ticker}: bars response status = ${barsRes.status}`);
|
||||
// Fetch bars for chart with timeframe and range
|
||||
const barsRes = await fetch(`${baseUrl}/api/alpaca/quote/${ticker}?timeframe=${timeframe}&range=${range}`);
|
||||
const barsData = barsRes.ok ? await barsRes.json() : null;
|
||||
console.log(`analyze/${ticker}: barsData =`, JSON.stringify(barsData));
|
||||
bars = barsData?.bars || [];
|
||||
} catch (err) {
|
||||
console.error(`analyze/${ticker}: loader error`, err);
|
||||
}
|
||||
|
||||
return Response.json({ ticker, position, orders, bars, timeframe, limit });
|
||||
return Response.json({ ticker, position, orders, bars, timeframe, range });
|
||||
}
|
||||
|
||||
export default function StockDetail() {
|
||||
const { ticker, position, orders, bars, timeframe, limit } = useLoaderData() as LoaderData;
|
||||
const { ticker, position, orders, bars, timeframe, range } = useLoaderData() as LoaderData;
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
|
||||
const updateParams = (newTimeframe: string, newLimit: number) => {
|
||||
const updateParams = (newTimeframe: string, newRange: string) => {
|
||||
const searchParams = new URLSearchParams(location.search);
|
||||
searchParams.set("timeframe", newTimeframe);
|
||||
searchParams.set("limit", newLimit.toString());
|
||||
searchParams.set("range", newRange);
|
||||
navigate(`${location.pathname}?${searchParams.toString()}`, { replace: true });
|
||||
};
|
||||
|
||||
// Convert Alpaca bars to TradingView format (YYYY-MM-DD for time)
|
||||
const chartData = bars?.map((bar: any) => {
|
||||
// Convert Alpaca bars to TradingView format
|
||||
// Keep full timestamp for intraday, use date-only for daily
|
||||
// Sort bars by timestamp to ensure ascending order
|
||||
const sortedBars = [...(bars || [])].sort((a, b) => {
|
||||
const timeA = a.t ? new Date(a.t).getTime() : 0;
|
||||
const timeB = b.t ? new Date(b.t).getTime() : 0;
|
||||
return timeA - timeB;
|
||||
});
|
||||
|
||||
const chartData = sortedBars?.map((bar: any) => {
|
||||
// Handle timestamp - could be string, number, or Date
|
||||
let time = "";
|
||||
let time: string | number = "";
|
||||
if (bar.t) {
|
||||
const date = new Date(bar.t);
|
||||
if (!isNaN(date.getTime())) {
|
||||
time = date.toISOString().split('T')[0];
|
||||
// Use Unix timestamp for intraday, date string for daily
|
||||
time = ["1Min", "5Min", "15Min", "30Min", "1H"].includes(timeframe)
|
||||
? Math.floor(date.getTime() / 1000)
|
||||
: date.toISOString().split('T')[0];
|
||||
}
|
||||
}
|
||||
return {
|
||||
@@ -94,9 +109,12 @@ export default function StockDetail() {
|
||||
low: bar.l,
|
||||
close: bar.c,
|
||||
};
|
||||
}).filter((bar: any) => bar.time && bar.open != null && bar.high != null && bar.low != null && bar.close != null) || [];
|
||||
|
||||
console.log(`StockDetail: loaded ${bars?.length ?? 0} bars, transformed to ${chartData.length} chart points`);
|
||||
})
|
||||
// Remove duplicates by time (keep first occurrence) and filter valid bars
|
||||
.filter((bar: any, index: number, arr: any[]) =>
|
||||
bar.time && bar.open != null && bar.high != null && bar.low != null && bar.close != null &&
|
||||
index === arr.findIndex((b: any) => b.time === bar.time)
|
||||
) || [];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-gray-50 to-blue-50">
|
||||
@@ -109,7 +127,7 @@ export default function StockDetail() {
|
||||
<span className="text-gray-700 font-medium">Timeframe:</span>
|
||||
<select
|
||||
value={timeframe}
|
||||
onChange={(e) => updateParams(e.target.value, limit)}
|
||||
onChange={(e) => updateParams(e.target.value, range)}
|
||||
className="border border-gray-300 rounded-lg px-3 py-1.5 text-gray-900 focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
{TIMEFRAMES.map((tf) => (
|
||||
@@ -117,16 +135,15 @@ export default function StockDetail() {
|
||||
))}
|
||||
</select>
|
||||
|
||||
<span className="text-gray-700 font-medium">Bars:</span>
|
||||
<span className="text-gray-700 font-medium">Range:</span>
|
||||
<select
|
||||
value={limit}
|
||||
onChange={(e) => updateParams(timeframe, parseInt(e.target.value))}
|
||||
value={range}
|
||||
onChange={(e) => updateParams(timeframe, e.target.value)}
|
||||
className="border border-gray-300 rounded-lg px-3 py-1.5 text-gray-900 focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value={10}>10</option>
|
||||
<option value={30}>30</option>
|
||||
<option value={50}>50</option>
|
||||
<option value={100}>100</option>
|
||||
{RANGES.map((r) => (
|
||||
<option key={r.value} value={r.value}>{r.label}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
@@ -135,7 +152,34 @@ export default function StockDetail() {
|
||||
|
||||
<div className="mt-6 bg-white rounded-xl shadow-lg p-6 border border-gray-200">
|
||||
<h2 className="text-xl font-bold text-gray-900 mb-4">Position</h2>
|
||||
<p className="text-gray-600">{position ? `Quantity: ${position} shares` : "No position held"}</p>
|
||||
{position ? (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<tbody>
|
||||
<tr className="border-b border-gray-100">
|
||||
<td className="py-2 px-3 font-medium text-gray-700">Quantity</td>
|
||||
<td className="py-2 px-3 text-gray-900">{position.qty} shares</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-100">
|
||||
<td className="py-2 px-3 font-medium text-gray-700">Ticker</td>
|
||||
<td className="py-2 px-3 text-gray-900">{ticker}</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-100">
|
||||
<td className="py-2 px-3 font-medium text-gray-700">Current Value</td>
|
||||
<td className="py-2 px-3 text-gray-900">${position.market_value.toFixed(2)}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="py-2 px-3 font-medium text-gray-700">Earnings</td>
|
||||
<td className={`py-2 px-3 font-bold ${position.unrealized_pl >= 0 ? "text-green-600" : "text-red-600"}`}>
|
||||
${position.unrealized_pl.toFixed(2)}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-gray-600">No position held</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mt-6 bg-white rounded-xl shadow-lg p-6 border border-gray-200">
|
||||
|
||||
Reference in New Issue
Block a user