From ccfc47f1779b0dba33104fa44d1a2a84c223958e Mon Sep 17 00:00:00 2001
From: Paul Cramer <paulccramer@gmail.com>
Date: Fri, 9 Aug 2024 14:34:57 -0700
Subject: [PATCH] chore: added testing to Transaction Toast. (#1023)

---
 .changeset/many-ravens-cry.md                 |   5 +
 .../components/TransactionToast.test.tsx      | 166 +++++++++++++++++-
 2 files changed, 170 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/many-ravens-cry.md

diff --git a/.changeset/many-ravens-cry.md b/.changeset/many-ravens-cry.md
new file mode 100644
index 0000000000..494c5a8579
--- /dev/null
+++ b/.changeset/many-ravens-cry.md
@@ -0,0 +1,5 @@
+---
+"@coinbase/onchainkit": patch
+---
+
+-**chore**: Add testing to Transaction Toast. By @cpcramer #1023
diff --git a/src/transaction/components/TransactionToast.test.tsx b/src/transaction/components/TransactionToast.test.tsx
index e975e679a8..7198110946 100644
--- a/src/transaction/components/TransactionToast.test.tsx
+++ b/src/transaction/components/TransactionToast.test.tsx
@@ -51,7 +51,7 @@ describe('TransactionToast', () => {
       isToastVisible: true,
       receipt: null,
       setIsToastVisible,
-      transactionHash: '123',
+      transactionHash: '0x123',
       transactionId: '',
     });
 
@@ -60,4 +60,168 @@ describe('TransactionToast', () => {
 
     expect(setIsToastVisible).toHaveBeenCalledWith(false);
   });
+
+  it('displays loading state correctly', () => {
+    (useTransactionContext as vi.Mock).mockReturnValue({
+      isLoading: true,
+      isToastVisible: true,
+      transactionHash: '',
+      errorMessage: '',
+    });
+
+    render(<TransactionToast>Transaction in progress</TransactionToast>);
+
+    expect(screen.getByText('Transaction in progress')).toBeInTheDocument();
+  });
+
+  it('displays transaction hash when available', () => {
+    const mockTransactionHash = '0x123';
+    (useTransactionContext as vi.Mock).mockReturnValue({
+      isLoading: false,
+      isToastVisible: true,
+      transactionHash: mockTransactionHash,
+      errorMessage: '',
+    });
+
+    render(<TransactionToast>Transaction completed</TransactionToast>);
+
+    expect(screen.getByText('Transaction completed')).toBeInTheDocument();
+  });
+
+  it('displays error message when present', () => {
+    const mockErrorMessage = 'Transaction failed';
+    (useTransactionContext as vi.Mock).mockReturnValue({
+      isLoading: false,
+      isToastVisible: true,
+      transactionHash: '',
+      errorMessage: mockErrorMessage,
+    });
+
+    render(<TransactionToast>Error occurred</TransactionToast>);
+
+    expect(screen.getByText('Error occurred')).toBeInTheDocument();
+  });
+
+  it('does not render when in progress', () => {
+    (useTransactionContext as vi.Mock).mockReturnValue({
+      isLoading: false,
+      isToastVisible: true,
+      transactionHash: '',
+      errorMessage: '',
+      receipt: null,
+      transactionId: '',
+    });
+
+    render(<TransactionToast>In Progress</TransactionToast>);
+
+    expect(screen.queryByText('In Progress')).not.toBeInTheDocument();
+  });
+
+  it('applies correct position class for bottom-right', () => {
+    (useTransactionContext as vi.Mock).mockReturnValue({
+      isLoading: false,
+      isToastVisible: true,
+      transactionHash: '0x123',
+      errorMessage: '',
+      receipt: null,
+      transactionId: 'test-id',
+    });
+
+    const { container } = render(
+      <TransactionToast position="bottom-right">Test</TransactionToast>,
+    );
+
+    const toastElement = container.firstChild as HTMLElement;
+    expect(toastElement).toHaveClass('bottom-5 left-3/4');
+  });
+
+  it('applies correct position class for top-right', () => {
+    (useTransactionContext as vi.Mock).mockReturnValue({
+      isLoading: false,
+      isToastVisible: true,
+      transactionHash: '0x123',
+      errorMessage: '',
+      receipt: null,
+      transactionId: 'test-id',
+    });
+
+    const { container } = render(
+      <TransactionToast position="top-right">Test</TransactionToast>,
+    );
+
+    const toastElement = container.firstChild as HTMLElement;
+    expect(toastElement).toHaveClass('top-[100px] left-3/4');
+  });
+
+  it('applies correct position class for top-center', () => {
+    (useTransactionContext as vi.Mock).mockReturnValue({
+      isLoading: false,
+      isToastVisible: true,
+      transactionHash: '0x123',
+      errorMessage: '',
+      receipt: null,
+      transactionId: 'test-id',
+    });
+
+    const { container } = render(
+      <TransactionToast position="top-center">Test</TransactionToast>,
+    );
+
+    const toastElement = container.firstChild as HTMLElement;
+    expect(toastElement).toHaveClass('top-[100px] left-2/4');
+  });
+
+  it('applies default position class when not specified', () => {
+    (useTransactionContext as vi.Mock).mockReturnValue({
+      isLoading: false,
+      isToastVisible: true,
+      transactionHash: '0x123',
+      errorMessage: '',
+      receipt: null,
+      transactionId: 'test-id',
+    });
+
+    const { container } = render(<TransactionToast>Test</TransactionToast>);
+
+    const toastElement = container.firstChild as HTMLElement;
+    expect(toastElement).toHaveClass('bottom-5 left-2/4');
+  });
+
+  it('hides toast after specified duration when receipt is available', () => {
+    vi.useFakeTimers();
+    const setIsToastVisible = vi.fn();
+    (useTransactionContext as vi.Mock).mockReturnValue({
+      isLoading: false,
+      isToastVisible: true,
+      transactionHash: '',
+      errorMessage: '',
+      receipt: {},
+      setIsToastVisible,
+    });
+
+    render(<TransactionToast durationMs={2000}>Test</TransactionToast>);
+
+    vi.advanceTimersByTime(2000);
+    expect(setIsToastVisible).toHaveBeenCalledWith(false);
+    vi.useRealTimers();
+  });
+
+  it('hides toast after specified duration when error message is present', () => {
+    vi.useFakeTimers();
+    const setIsToastVisible = vi.fn();
+    (useTransactionContext as vi.Mock).mockReturnValue({
+      isLoading: false,
+      isToastVisible: true,
+      transactionHash: '',
+      errorMessage: 'Error',
+      receipt: null,
+      setIsToastVisible,
+    });
+
+    render(<TransactionToast durationMs={2000}>Test</TransactionToast>);
+
+    vi.advanceTimersByTime(2000);
+    expect(setIsToastVisible).toHaveBeenCalledWith(false);
+    vi.useRealTimers();
+  });
 });