refactor: add tests for reports package (binary-com#15622)

packages/reports/src/Components/__tests__/indicative-cell.spec.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { mockStore } from '@deriv/stores';
+import { mockContractInfo } from '@deriv/shared';
 import ReportsProviders from '../../reports-providers';
 import IndicativeCell from '../indicative-cell';
 
@@ -9,16 +11,27 @@ const customStore = mockStore({
         onClickSell: jest.fn(),
     },
 });
-
+const contractID = 12546512435612;
 const mockProps = {
     amount: 100.01,
-    contract_info: { id: '123' },
+    contract_info: mockContractInfo({ contract_id: contractID }),
     currency: 'USD',
     is_footer: false,
     is_sell_requested: false,
     profit: '5.23',
 };
 
+jest.mock('@deriv/components', () => ({
+    ...jest.requireActual('@deriv/components'),
+    DesktopWrapper: jest.fn(({ children }) => children),
+}));
+
+jest.mock('@deriv/shared', () => ({
+    ...jest.requireActual('@deriv/shared'),
+    hasContractEntered: jest.fn().mockReturnValue(true),
+    isValidToSell: jest.fn().mockReturnValue(true),
+}));
+
 describe('IndicativeCell component', () => {
     it('should render the amount and arrow indicator', () => {
         render(
@@ -58,10 +71,34 @@ describe('IndicativeCell component', () => {
         expect(amountContainer).toHaveClass('dc-contract-card--loss');
     });
 
+    it('should not call onClickSell if user clicks on Sell button, but contract_id is falsy', () => {
+        render(
+            <ReportsProviders store={customStore}>
+                <IndicativeCell {...mockProps} contract_info={mockContractInfo({ contract_id: 0 })} />
+            </ReportsProviders>
+        );
+
+        userEvent.click(screen.getByText('Sell'));
+
+        expect(customStore.portfolio.onClickSell).not.toHaveBeenCalled();
+    });
+
+    it('should call onClickSell with contract_id if user clicks on Sell button', () => {
+        render(
+            <ReportsProviders store={customStore}>
+                <IndicativeCell {...mockProps} />
+            </ReportsProviders>
+        );
+
+        userEvent.click(screen.getByText('Sell'));
+
+        expect(customStore.portfolio.onClickSell).toHaveBeenCalledWith(contractID);
+    });
+
     it('should not render the ContractCard.Sell component for footer cells', () => {
         render(
             <ReportsProviders store={customStore}>
-                <IndicativeCell {...mockProps} is_footer={true} />
+                <IndicativeCell {...mockProps} is_footer />
             </ReportsProviders>
         );
 

packages/reports/src/Components/__tests__/placeholder-component.spec.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import PlaceholderComponent from '../placeholder-component';
+import EmptyTradeHistoryMessage from 'Components/empty-trade-history-message';
+
+describe('PlaceholderComponent', () => {
+    it('should not render component without props', () => {
+        const { container } = render(<PlaceholderComponent />);
+
+        expect(container).toBeEmptyDOMElement();
+    });
+
+    it('should render loader if is_loading === true', () => {
+        render(<PlaceholderComponent is_loading />);
+
+        expect(screen.getByTestId('dt_loading_component')).toBeInTheDocument();
+    });
+
+    it('should render passed component (as empty_message_component prop) if is_empty === true', () => {
+        const mockProps = {
+            component_icon: 'icon',
+            empty_message_component: EmptyTradeHistoryMessage,
+            is_empty: true,
+            localized_message: 'localized message',
+            localized_period_message: 'localized period message',
+        };
+        render(<PlaceholderComponent {...mockProps} />);
+
+        expect(screen.getByTestId('dt_empty_trade_history_icon')).toBeInTheDocument();
+        expect(screen.getByText('localized message')).toBeInTheDocument();
+    });
+});

packages/reports/src/Components/__tests__/profit-loss-cell.spec.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import ProfitLossCell from '../profit-loss-cell';
+
+const mockChild = 'mockChild';
+const mockProps = {
+    value: '+23,06',
+    children: mockChild,
+};
+
+describe('ProfitLossCell', () => {
+    it('should render passed children', () => {
+        render(<ProfitLossCell {...mockProps} />);
+
+        expect(screen.getByText(mockChild)).toBeInTheDocument();
+    });
+
+    it('should render passed children with correct className if passed value >= 0', () => {
+        render(<ProfitLossCell {...mockProps} />);
+
+        expect(screen.getByText(mockChild)).toHaveClass('amount--profit');
+    });
+
+    it('should render passed children with correct className if passed value < 0', () => {
+        render(<ProfitLossCell {...mockProps} value='-0,34' />);
+
+        expect(screen.getByText(mockChild)).toHaveClass('amount--loss');
+    });
+});

packages/reports/src/Components/__tests__/reports-meta.spec.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ReportsMeta } from '../reports-meta';
+
+const mockFilterComponent = 'mockFilterComponent';
+const mockClassName = 'mockClassName';
+const mockProps = {
+    filter_component: mockFilterComponent,
+    className: mockClassName,
+};
+
+describe('ReportsMeta', () => {
+    it('should render passed filter_component inside of wrapper div with specific className if className was passed', () => {
+        render(<ReportsMeta {...mockProps} />);
+
+        expect(screen.getByTestId('dt_reports_meta_wrapper')).toHaveClass(mockClassName);
+        expect(screen.getByText(mockFilterComponent)).toBeInTheDocument();
+    });
+
+    it('should render filter_component with specific className if is_statement === true', () => {
+        render(<ReportsMeta {...mockProps} is_statement />);
+
+        expect(screen.getByText(mockFilterComponent)).toHaveClass('reports__meta-filter--statement');
+    });
+});

packages/reports/src/Components/reports-meta.tsx

@@ -9,7 +9,7 @@ type TReportsMeta = {
 
 const ReportsMeta = ({ filter_component, className, is_statement }: TReportsMeta) => {
     return (
-        <div className={classNames('reports__meta', className)}>
+        <div className={classNames('reports__meta', className)} data-testid='dt_reports_meta_wrapper'>
             {filter_component && (
                 <div
                     className={classNames('reports__meta-filter', {

packages/reports/src/Constants/data-table-constants.tsx

@@ -5,7 +5,6 @@ import {
     isMobile,
     getCurrencyDisplayCode,
     getTotalProfit,
-    shouldShowCancellation,
     getGrowthRatePercentage,
     getCardLabels,
 } from '@deriv/shared';
@@ -15,7 +14,7 @@ import { TCellContentProps, THeaderProps } from 'Types';
 import { getProfitOrLoss } from '../Helpers/profit-loss';
 import IndicativeCell from '../Components/indicative-cell';
 import MarketSymbolIconRow from '../Components/market-symbol-icon-row';
-import ProfitLossCell from '../Components/profit_loss_cell';
+import ProfitLossCell from '../Components/profit-loss-cell';
 import CurrencyWrapper from '../Components/currency-wrapper';
 import { useStore } from '@deriv/stores';
 import moment from 'moment';