From 1f1557906f341a649b2f01588de68968ede8ae83 Mon Sep 17 00:00:00 2001
From: Akmal Djumakhodjaev <akmal@binary.com>
Date: Fri, 17 May 2024 14:16:49 +0800
Subject: [PATCH] feat: add test coverage for empty trade history message and
 indicative cell (#15194)

---
 .../contract-card-sell.tsx                    |  1 +
 .../empty-trade-history-message.spec.tsx      | 30 ++++++++
 .../__tests__/indicative-cell.spec.tsx        | 72 +++++++++++++++++++
 .../src/Components/indicative-cell.tsx        |  3 +-
 4 files changed, 105 insertions(+), 1 deletion(-)
 create mode 100644 packages/reports/src/Components/__tests__/empty-trade-history-message.spec.tsx
 create mode 100644 packages/reports/src/Components/__tests__/indicative-cell.spec.tsx

diff --git a/packages/components/src/components/contract-card/contract-card-items/contract-card-sell.tsx b/packages/components/src/components/contract-card/contract-card-items/contract-card-sell.tsx
index cb6c8778190c..a7f663e99434 100644
--- a/packages/components/src/components/contract-card/contract-card-items/contract-card-sell.tsx
+++ b/packages/components/src/components/contract-card/contract-card-items/contract-card-sell.tsx
@@ -32,6 +32,7 @@ const ContractCardSell = ({ contract_info, getCardLabels, is_sell_requested, onC
                     className={classNames('dc-btn--sell', {
                         'dc-btn--loading': is_sell_requested,
                     })}
+                    data-testid='dt_contract_card_sell'
                     is_disabled={is_sell_requested}
                     text={getCardLabels().SELL}
                     onClick={onClick}
diff --git a/packages/reports/src/Components/__tests__/empty-trade-history-message.spec.tsx b/packages/reports/src/Components/__tests__/empty-trade-history-message.spec.tsx
new file mode 100644
index 000000000000..8a9c5f3d7017
--- /dev/null
+++ b/packages/reports/src/Components/__tests__/empty-trade-history-message.spec.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import EmptyTradeHistoryMessage from '../empty-trade-history-message';
+
+const mockProps = {
+    component_icon: 'calendar',
+    has_selected_date: false,
+    localized_message: 'No trades in your history yet.',
+    localized_period_message: 'No trades for the selected period.',
+};
+
+describe('EmptyTradeHistoryMessage component', () => {
+    it('should render the message without a selected date', () => {
+        render(<EmptyTradeHistoryMessage {...mockProps} />);
+
+        const icon = screen.getByTestId('dt_empty_trade_history_icon');
+        const text = screen.getByText(mockProps.localized_message);
+
+        expect(icon).toBeInTheDocument();
+        expect(text).toBeInTheDocument();
+    });
+
+    it('should render the message for a selected date', () => {
+        render(<EmptyTradeHistoryMessage {...mockProps} has_selected_date={true} />);
+
+        const text = screen.getByText(mockProps.localized_period_message);
+
+        expect(text).toBeInTheDocument();
+    });
+});
diff --git a/packages/reports/src/Components/__tests__/indicative-cell.spec.tsx b/packages/reports/src/Components/__tests__/indicative-cell.spec.tsx
new file mode 100644
index 000000000000..9c47d0377f37
--- /dev/null
+++ b/packages/reports/src/Components/__tests__/indicative-cell.spec.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { mockStore } from '@deriv/stores';
+import ReportsProviders from '../../reports-providers';
+import IndicativeCell from '../indicative-cell';
+
+const customStore = mockStore({
+    portfolio: {
+        onClickSell: jest.fn(),
+    },
+});
+
+const mockProps = {
+    amount: 100.01,
+    contract_info: { id: '123' },
+    currency: 'USD',
+    is_footer: false,
+    is_sell_requested: false,
+    profit: '5.23',
+};
+
+describe('IndicativeCell component', () => {
+    it('should render the amount and arrow indicator', () => {
+        render(
+            <ReportsProviders store={customStore}>
+                <IndicativeCell {...mockProps} />
+            </ReportsProviders>
+        );
+
+        const amountElement = screen.getByText(Math.abs(mockProps.amount).toString());
+        const arrow = screen.getByTestId('dt_arrow_indicator');
+
+        expect(amountElement).toBeInTheDocument();
+        expect(arrow).toBeInTheDocument();
+    });
+
+    it('should render the profit amount with a profit class', () => {
+        render(
+            <ReportsProviders store={customStore}>
+                <IndicativeCell {...mockProps} />
+            </ReportsProviders>
+        );
+
+        const amountContainer = screen.getByTestId('dt_amount_container');
+
+        expect(amountContainer).toHaveClass('dc-contract-card--profit');
+    });
+
+    it('should render the loss amount with a loss class', () => {
+        render(
+            <ReportsProviders store={customStore}>
+                <IndicativeCell {...mockProps} profit='-2.35' />
+            </ReportsProviders>
+        );
+
+        const amountContainer = screen.getByTestId('dt_amount_container');
+
+        expect(amountContainer).toHaveClass('dc-contract-card--loss');
+    });
+
+    it('should not render the ContractCard.Sell component for footer cells', () => {
+        render(
+            <ReportsProviders store={customStore}>
+                <IndicativeCell {...mockProps} is_footer={true} />
+            </ReportsProviders>
+        );
+
+        const sellButton = screen.queryByTestId('dt_contract_card_sell');
+
+        expect(sellButton).not.toBeInTheDocument();
+    });
+});
diff --git a/packages/reports/src/Components/indicative-cell.tsx b/packages/reports/src/Components/indicative-cell.tsx
index c0d196f377bd..7c16bdf7da72 100644
--- a/packages/reports/src/Components/indicative-cell.tsx
+++ b/packages/reports/src/Components/indicative-cell.tsx
@@ -27,10 +27,11 @@ const IndicativeCell = observer((props: TIndicativeCell) => {
                         'dc-contract-card--profit': Number(profit) > 0,
                         'dc-contract-card--loss': Number(profit) < 0,
                     })}
+                    data-testid='dt_amount_container'
                 >
                     <Money amount={Math.abs(amount)} currency={currency} />
                 </div>
-                <ArrowIndicator value={amount} />
+                <ArrowIndicator value={amount} data-testid='dt_arrow_indicator' />
             </div>
             <DesktopWrapper>
                 {!is_footer && (