From b1333aed062dd27077170d845393d7f854df9a15 Mon Sep 17 00:00:00 2001
From: Catherine Angel <catheriner40540@gmail.com>
Date: Thu, 9 May 2024 23:29:58 +0700
Subject: [PATCH] [RED] add test for payment success page

---
 .../payment/payment-details-no-url.test.tsx   | 23 +++++-
 ....tsx => payment-details-with-url.test.tsx} | 10 ++-
 __tests__/payment/payment-success.test.tsx    | 76 +++++++++++++++++++
 src/app/payment/success/page.tsx              |  3 +
 4 files changed, 104 insertions(+), 8 deletions(-)
 rename __tests__/payment/{payment-details-with-url.test copy.tsx => payment-details-with-url.test.tsx} (83%)
 create mode 100644 __tests__/payment/payment-success.test.tsx
 create mode 100644 src/app/payment/success/page.tsx

diff --git a/__tests__/payment/payment-details-no-url.test.tsx b/__tests__/payment/payment-details-no-url.test.tsx
index b359c16..061b43c 100644
--- a/__tests__/payment/payment-details-no-url.test.tsx
+++ b/__tests__/payment/payment-details-no-url.test.tsx
@@ -1,6 +1,7 @@
 import '@testing-library/jest-dom'
 import { render, waitFor } from '@testing-library/react'
 import PaymentPage from '@/app/payment/page'
+import { useLazyGetTransactionQuery } from '@/redux/api/paymentApi'
 
 jest.mock('next/navigation', () => ({
   useSearchParams: jest.fn(() => ({
@@ -13,10 +14,12 @@ jest.mock('@/redux/api/paymentApi', () => ({
     jest.fn(),
     {
       data: {
-        package: { name: 'Test Package' },
-        payment_type: 'Test Payment Type',
-        payment_merchant: 'Test Payment Merchant',
-        midtrans_url: null,
+        transaction_detail: {
+          package: { name: 'Test Package' },
+          payment_type: 'Test Payment Type',
+          payment_merchant: 'Test Payment Merchant',
+          midtrans_url: null,
+        },
       },
       isLoading: false,
     },
@@ -37,4 +40,16 @@ describe('Payment Detail Page No Midtrans Url', () => {
     })
     expect(continueButton).toBeDisabled()
   })
+  it('shows loading state when query is still loading', async () => {
+    ;(useLazyGetTransactionQuery as jest.Mock).mockReturnValue([
+      jest.fn(),
+      {
+        data: null,
+        isLoading: true,
+      },
+    ])
+    const { queryByTestId } = render(<PaymentPage />)
+
+    await waitFor(() => expect(queryByTestId('loader')).toBeInTheDocument())
+  })
 })
diff --git a/__tests__/payment/payment-details-with-url.test copy.tsx b/__tests__/payment/payment-details-with-url.test.tsx
similarity index 83%
rename from __tests__/payment/payment-details-with-url.test copy.tsx
rename to __tests__/payment/payment-details-with-url.test.tsx
index 3c3bce5..0c994bf 100644
--- a/__tests__/payment/payment-details-with-url.test copy.tsx	
+++ b/__tests__/payment/payment-details-with-url.test.tsx
@@ -13,10 +13,12 @@ jest.mock('@/redux/api/paymentApi', () => ({
     jest.fn(),
     {
       data: {
-        package: { name: 'Test Package' },
-        payment_type: 'Test Payment Type',
-        payment_merchant: 'Test Payment Merchant',
-        midtrans_url: 'https://example.com/midtrans',
+        transaction_detail: {
+          package: { name: 'Test Package' },
+          payment_type: 'Test Payment Type',
+          payment_merchant: 'Test Payment Merchant',
+          midtrans_url: 'https://example.com/midtrans',
+        },
       },
       isLoading: false,
     },
diff --git a/__tests__/payment/payment-success.test.tsx b/__tests__/payment/payment-success.test.tsx
new file mode 100644
index 0000000..33001b0
--- /dev/null
+++ b/__tests__/payment/payment-success.test.tsx
@@ -0,0 +1,76 @@
+import { render, waitFor } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import PaymentSuccessPage from '@/app/payment/success/page'
+import { useLazyGetTransactionQuery } from '@/redux/api/paymentApi'
+
+jest.mock('next/link', () => {
+  const MockedLink = ({ children, href }: any) => <a href={href}>{children}</a>
+
+  MockedLink.displayName = 'MockedNextLink'
+
+  return MockedLink
+})
+
+jest.mock('next/navigation', () => ({
+  useSearchParams: jest.fn(() => ({
+    get: jest.fn(() => 'test_order_id'),
+  })),
+}))
+
+jest.mock('@/redux/api/paymentApi', () => ({
+  useLazyGetTransactionQuery: jest.fn(),
+}))
+describe('PaymentSuccess Component', () => {
+  it('renders the success message when data is loaded', async () => {
+    ;(useLazyGetTransactionQuery as jest.Mock).mockReturnValue([
+      jest.fn(),
+      {
+        data: {
+          transaction_detail: {
+            id: 'transaction_id',
+            package: {
+              id: 2,
+              name: 'Premium',
+            },
+            midtrans_url: null,
+            midtrans_transaction_id: 'midtrans_id',
+            order_id: 'order_id',
+            price: 10000,
+            checkout_time: '2024-05-06T14:49:19Z',
+            expiry_time: '2024-05-06T15:04:19Z',
+            payment_type: 'qris',
+            payment_merchant: 'gopay',
+            status: 'settlement',
+          },
+        },
+        isLoading: false,
+      },
+    ])
+
+    const { getByText, getByRole } = render(<PaymentSuccessPage />)
+
+    await waitFor(() => {
+      expect(getByText('Payment Success')).toBeInTheDocument()
+      expect(getByText('Premium')).toBeInTheDocument()
+      const button = getByRole('button', { name: 'Go to transactions' })
+      expect(button.closest('a')).toHaveAttribute(
+        'href',
+        '/payment/transactions/'
+      )
+    })
+  })
+
+  it('shows loader when data is still loading', () => {
+    ;(useLazyGetTransactionQuery as jest.Mock).mockReturnValue([
+      jest.fn(),
+      {
+        data: null,
+        isLoading: true,
+      },
+    ])
+
+    const { getByTestId } = render(<PaymentSuccessPage />)
+
+    expect(getByTestId('loader')).toBeInTheDocument()
+  })
+})
diff --git a/src/app/payment/success/page.tsx b/src/app/payment/success/page.tsx
new file mode 100644
index 0000000..8b7c1e2
--- /dev/null
+++ b/src/app/payment/success/page.tsx
@@ -0,0 +1,3 @@
+export default function PaymentSuccessPage() {
+  return <div></div>
+}