From 3e074e0e404848554515167c98d0e5b5a8829ea0 Mon Sep 17 00:00:00 2001
From: Promise Olubudo <254755326+baedboibidex-cmyk@users.noreply.github.com>
Date: Mon, 27 Jul 2026 12:27:53 +0000
Subject: [PATCH] test(trade-dialog): add integration test for buy price
 preview

---
 src/components/common/TradeDialog.tsx         | 16 +++++
 .../TradeDialog.buyPricePreview.test.tsx      | 63 +++++++++++++++++++
 2 files changed, 79 insertions(+)
 create mode 100644 src/components/common/__tests__/TradeDialog.buyPricePreview.test.tsx

diff --git a/src/components/common/TradeDialog.tsx b/src/components/common/TradeDialog.tsx
index 14038b4f..064f01c4 100644
--- a/src/components/common/TradeDialog.tsx
+++ b/src/components/common/TradeDialog.tsx
@@ -88,6 +88,14 @@ const TradeDialog: React.FC<TradeDialogProps> = ({
 		return estimateSellProceeds(keyPriceStroops, currentSupply, parsedAmount);
 	}, [side, keyPriceStroops, currentSupply, parsedAmount]);
 
+	const estimatedTotalStroops = useMemo(() => {
+		if (side !== 'buy' || !Number.isFinite(parsedAmount) || parsedAmount <= 0) {
+			return null;
+		}
+		if (keyPriceStroops == null) return null;
+		return keyPriceStroops * parsedAmount;
+	}, [side, keyPriceStroops, parsedAmount]);
+
 	return (
 		<Dialog
 			open={open}
@@ -187,6 +195,14 @@ const TradeDialog: React.FC<TradeDialogProps> = ({
 							className="text-white/45"
 						/>
 					)}
+					{side === 'buy' && estimatedTotalStroops != null && (
+						<div className="text-xs text-white/45 mt-2">
+							Estimated total (approximate):{' '}
+							<span className="font-semibold text-amber-300/90 tabular-nums">
+								{formatDisplayKeyPrice(estimatedTotalStroops)}
+							</span>
+						</div>
+					)}
 					{side === 'sell' && (
 						<div className="text-xs text-white/45 mt-2">
 							{estimatedProceedsStroops != null ? (
diff --git a/src/components/common/__tests__/TradeDialog.buyPricePreview.test.tsx b/src/components/common/__tests__/TradeDialog.buyPricePreview.test.tsx
new file mode 100644
index 00000000..b23afda7
--- /dev/null
+++ b/src/components/common/__tests__/TradeDialog.buyPricePreview.test.tsx
@@ -0,0 +1,63 @@
+import { describe, expect, it, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import TradeDialog from '@/components/common/TradeDialog';
+
+describe('TradeDialog buy price preview', () => {
+	function renderDialog(
+		overrides: Partial<React.ComponentProps<typeof TradeDialog>> = {}
+	) {
+		return render(
+			<TradeDialog
+				open={true}
+				side="buy"
+				creatorName="Alice"
+				availableHoldings={10}
+				keyPriceStroops={100_000}
+				onOpenChange={vi.fn()}
+				onConfirm={vi.fn()}
+				{...overrides}
+			/>
+		);
+	}
+
+	it('shows the price preview for quantity 1', () => {
+		renderDialog();
+
+		expect(screen.getByTestId('trade-dialog-amount')).toHaveValue('1');
+		expect(screen.getByText('Estimated total (approximate):')).toBeInTheDocument();
+	});
+
+	it('updates the price preview when quantity changes to 2', () => {
+		renderDialog();
+
+		const input = screen.getByTestId('trade-dialog-amount') as HTMLInputElement;
+		fireEvent.change(input, { target: { value: '2' } });
+
+		expect(screen.getByText('Estimated total (approximate):')).toBeInTheDocument();
+		expect(screen.getByText('0.02 XLM')).toBeInTheDocument();
+	});
+
+	it('does not show the price preview when quantity input is empty', () => {
+		renderDialog();
+
+		const input = screen.getByTestId('trade-dialog-amount') as HTMLInputElement;
+		fireEvent.change(input, { target: { value: '' } });
+
+		expect(screen.queryByText(/estimated total/i)).not.toBeInTheDocument();
+	});
+
+	it('does not show the price preview when quantity is zero', () => {
+		renderDialog();
+
+		const input = screen.getByTestId('trade-dialog-amount') as HTMLInputElement;
+		fireEvent.change(input, { target: { value: '0' } });
+
+		expect(screen.queryByText(/estimated total/i)).not.toBeInTheDocument();
+	});
+
+	it('does not show the price preview when keyPriceStroops is not provided', () => {
+		renderDialog({ keyPriceStroops: null });
+
+		expect(screen.queryByText(/estimated total/i)).not.toBeInTheDocument();
+	});
+});
\ No newline at end of file