feat: add test coverage for empty trade history message and indicativ…

…e cell (#15194)

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}

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();
+    });
+});

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();
+    });
+});

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 && (