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