From b1bf4ecd4e44c0ed722a8623a201a3b1ff39ed01 Mon Sep 17 00:00:00 2001 From: kate-deriv <121025168+kate-deriv@users.noreply.github.com> Date: Thu, 13 Jun 2024 05:30:32 +0300 Subject: [PATCH] refactor: add tests for reports package (#15622) --- .../__tests__/indicative-cell.spec.tsx | 43 +++++++++++++++++-- .../__tests__/placeholder-component.spec.tsx | 32 ++++++++++++++ .../__tests__/profit-loss-cell.spec.tsx | 29 +++++++++++++ .../__tests__/reports-meta.spec.tsx | 25 +++++++++++ ...fit_loss_cell.tsx => profit-loss-cell.tsx} | 0 .../reports/src/Components/reports-meta.tsx | 2 +- .../src/Constants/data-table-constants.tsx | 3 +- 7 files changed, 128 insertions(+), 6 deletions(-) create mode 100644 packages/reports/src/Components/__tests__/placeholder-component.spec.tsx create mode 100644 packages/reports/src/Components/__tests__/profit-loss-cell.spec.tsx create mode 100644 packages/reports/src/Components/__tests__/reports-meta.spec.tsx rename packages/reports/src/Components/{profit_loss_cell.tsx => profit-loss-cell.tsx} (100%) diff --git a/packages/reports/src/Components/__tests__/indicative-cell.spec.tsx b/packages/reports/src/Components/__tests__/indicative-cell.spec.tsx index 9c47d0377f37..cb2f3fd1c56a 100644 --- a/packages/reports/src/Components/__tests__/indicative-cell.spec.tsx +++ b/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( + + + + ); + + 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( + + + + ); + + userEvent.click(screen.getByText('Sell')); + + expect(customStore.portfolio.onClickSell).toHaveBeenCalledWith(contractID); + }); + it('should not render the ContractCard.Sell component for footer cells', () => { render( - + ); diff --git a/packages/reports/src/Components/__tests__/placeholder-component.spec.tsx b/packages/reports/src/Components/__tests__/placeholder-component.spec.tsx new file mode 100644 index 000000000000..de77b049a3c3 --- /dev/null +++ b/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(); + + expect(container).toBeEmptyDOMElement(); + }); + + it('should render loader if is_loading === true', () => { + render(); + + 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(); + + expect(screen.getByTestId('dt_empty_trade_history_icon')).toBeInTheDocument(); + expect(screen.getByText('localized message')).toBeInTheDocument(); + }); +}); diff --git a/packages/reports/src/Components/__tests__/profit-loss-cell.spec.tsx b/packages/reports/src/Components/__tests__/profit-loss-cell.spec.tsx new file mode 100644 index 000000000000..e9bf092f205c --- /dev/null +++ b/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(); + + expect(screen.getByText(mockChild)).toBeInTheDocument(); + }); + + it('should render passed children with correct className if passed value >= 0', () => { + render(); + + expect(screen.getByText(mockChild)).toHaveClass('amount--profit'); + }); + + it('should render passed children with correct className if passed value < 0', () => { + render(); + + expect(screen.getByText(mockChild)).toHaveClass('amount--loss'); + }); +}); diff --git a/packages/reports/src/Components/__tests__/reports-meta.spec.tsx b/packages/reports/src/Components/__tests__/reports-meta.spec.tsx new file mode 100644 index 000000000000..cffd2903c93e --- /dev/null +++ b/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(); + + 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(); + + expect(screen.getByText(mockFilterComponent)).toHaveClass('reports__meta-filter--statement'); + }); +}); diff --git a/packages/reports/src/Components/profit_loss_cell.tsx b/packages/reports/src/Components/profit-loss-cell.tsx similarity index 100% rename from packages/reports/src/Components/profit_loss_cell.tsx rename to packages/reports/src/Components/profit-loss-cell.tsx diff --git a/packages/reports/src/Components/reports-meta.tsx b/packages/reports/src/Components/reports-meta.tsx index de30c37d6123..ce6dbb689390 100644 --- a/packages/reports/src/Components/reports-meta.tsx +++ b/packages/reports/src/Components/reports-meta.tsx @@ -9,7 +9,7 @@ type TReportsMeta = { const ReportsMeta = ({ filter_component, className, is_statement }: TReportsMeta) => { return ( -
+
{filter_component && (