From a10ca8c7f1b0dba35d3f8747f6bd8a766fa0a60a Mon Sep 17 00:00:00 2001 From: kate-deriv Date: Sat, 11 Nov 2023 13:58:49 +0300 Subject: [PATCH 1/3] refactor: add test for positions drawer --- .../__tests__/positions-drawer.spec.tsx | 136 ++++++++++++++++++ 1 file changed, 136 insertions(+) create mode 100644 packages/trader/src/App/Components/Elements/PositionsDrawer/__tests__/positions-drawer.spec.tsx diff --git a/packages/trader/src/App/Components/Elements/PositionsDrawer/__tests__/positions-drawer.spec.tsx b/packages/trader/src/App/Components/Elements/PositionsDrawer/__tests__/positions-drawer.spec.tsx new file mode 100644 index 000000000000..5fc4e783060a --- /dev/null +++ b/packages/trader/src/App/Components/Elements/PositionsDrawer/__tests__/positions-drawer.spec.tsx @@ -0,0 +1,136 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import { mockStore, useStore } from '@deriv/stores'; +import { TCoreStores } from '@deriv/stores/types'; +import { VANILLALONG, TURBOS } from '@deriv/shared'; +import PositionsDrawer from '../positions-drawer'; +import TraderProviders from '../../../../../trader-providers'; + +type TAllPositions = ReturnType['portfolio']['all_positions']; +const mocked_store = { + modules: { + trade: { + symbol: '1HZ100V', + contract_type: 'rise_fall' as string, + }, + }, + portfolio: { all_positions: [] as TAllPositions, error: '', onHoverPosition: jest.fn() }, +}; +const empty_portfolio_message = 'EmptyPortfolioMessage'; +const position_drawer_card = 'PositionsDrawerCard'; + +jest.mock('react-router-dom', () => ({ + ...jest.requireActual('react-router-dom'), + NavLink: jest.fn(({ children }) =>
{children}
), +})); +jest.mock('react-transition-group', () => ({ + ...jest.requireActual('react-transition-group'), + CSSTransition: jest.fn(({ children }) =>
{children}
), +})); +jest.mock('@deriv/components', () => ({ + ...jest.requireActual('@deriv/components'), + DataList: jest.fn(props =>
{props.data_source.map(() => props.rowRenderer())}
), + PositionsDrawerCard: jest.fn(props => ( +
+ +
+ )), +})); +jest.mock('../../EmptyPortfolioMessage', () => jest.fn(() =>
{empty_portfolio_message}
)); + +describe('', () => { + const mockPositionsDrawer = (mocked_store: TCoreStores) => { + return ( + + + + ); + }; + + it('should render Recent positions with empty portfolio message if there is no positions', () => { + render(mockPositionsDrawer(mockStore(mocked_store))); + + expect(screen.getByText('Recent positions')).toBeInTheDocument(); + expect(screen.getByText(empty_portfolio_message)).toBeInTheDocument(); + expect(screen.getByText('Go to Reports')).toBeInTheDocument(); + }); + it('should render Recent positions with empty portfolio message if there is an error in portfolio', () => { + mocked_store.portfolio.error = 'Some error'; + mocked_store.portfolio.all_positions = [ + { + contract_info: { + underlying: '1HZ100V', + contract_type: 'CALL', + shortcode: 'CALL_1HZ100V_10.00_1699697112_1699697772_S0P_2.33136_1699697111', + }, + }, + ] as TAllPositions; + render(mockPositionsDrawer(mockStore(mocked_store))); + + expect(screen.getByText('Recent positions')).toBeInTheDocument(); + expect(screen.getByText(empty_portfolio_message)).toBeInTheDocument(); + expect(screen.getByText('Go to Reports')).toBeInTheDocument(); + }); + it('should render PositionsDrawerCard if portfolio is not empty and there is no error', () => { + mocked_store.portfolio.error = ''; + render(mockPositionsDrawer(mockStore(mocked_store))); + + expect(screen.queryByText(empty_portfolio_message)).not.toBeInTheDocument(); + expect(screen.getByText(position_drawer_card)).toBeInTheDocument(); + }); + it('should render both PositionsDrawerCard if for Turbos Long and Short', () => { + mocked_store.modules.trade.contract_type = TURBOS.LONG; + mocked_store.portfolio.all_positions = [ + { + contract_info: { + underlying: '1HZ100V', + contract_type: TURBOS.LONG.toUpperCase(), + shortcode: 'TURBOSLONG_1HZ100V_10.00_1699697112_1699697772_S0P_2.33136_1699697111', + }, + }, + { + contract_info: { + underlying: '1HZ100V', + contract_type: TURBOS.SHORT.toUpperCase(), + shortcode: 'TURBOSSHORT_1HZ100V_10.00_1699697112_1699697772_S0P_2.33136_1699697111', + }, + }, + ] as TAllPositions; + render(mockPositionsDrawer(mockStore(mocked_store))); + + expect(screen.getAllByText(position_drawer_card)).toHaveLength(2); + }); + it('should render both PositionsDrawerCard if for Vanilla Call and Put', () => { + mocked_store.modules.trade.contract_type = VANILLALONG.CALL; + mocked_store.portfolio.all_positions = [ + { + contract_info: { + underlying: '1HZ100V', + contract_type: VANILLALONG.CALL.toUpperCase(), + shortcode: 'VANILLALONGCALL_1HZ100V_10.00_1699697112_1699697772_S0P_2.33136_1699697111', + }, + }, + { + contract_info: { + underlying: '1HZ100V', + contract_type: VANILLALONG.PUT.toUpperCase(), + shortcode: 'VANILLALONGPUT_1HZ100V_10.00_1699697112_1699697772_S0P_2.33136_1699697111', + }, + }, + ] as TAllPositions; + render(mockPositionsDrawer(mockStore(mocked_store))); + + expect(screen.getAllByText(position_drawer_card)).toHaveLength(2); + }); + it('should call onHoverPosition if user hover on position drawer card and should call it twice if he unhover it', async () => { + render(mockPositionsDrawer(mockStore(mocked_store))); + + userEvent.hover(screen.getAllByText(position_drawer_card)[0]); + userEvent.unhover(screen.getAllByText(position_drawer_card)[0]); + + await (() => expect(mocked_store.portfolio.onHoverPosition).toBeCalledTimes(2)); + }); +}); From 28bbc264ca7b3b422cf7764696ff6229ce0b79d8 Mon Sep 17 00:00:00 2001 From: kate-deriv Date: Sat, 11 Nov 2023 14:06:00 +0300 Subject: [PATCH 2/3] chore: correct grammar --- .../PositionsDrawer/__tests__/positions-drawer.spec.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/trader/src/App/Components/Elements/PositionsDrawer/__tests__/positions-drawer.spec.tsx b/packages/trader/src/App/Components/Elements/PositionsDrawer/__tests__/positions-drawer.spec.tsx index 5fc4e783060a..534de303d2ad 100644 --- a/packages/trader/src/App/Components/Elements/PositionsDrawer/__tests__/positions-drawer.spec.tsx +++ b/packages/trader/src/App/Components/Elements/PositionsDrawer/__tests__/positions-drawer.spec.tsx @@ -50,14 +50,14 @@ describe('', () => { ); }; - it('should render Recent positions with empty portfolio message if there is no positions', () => { + it('should render Recent positions with empty portfolio message if there is no open positions', () => { render(mockPositionsDrawer(mockStore(mocked_store))); expect(screen.getByText('Recent positions')).toBeInTheDocument(); expect(screen.getByText(empty_portfolio_message)).toBeInTheDocument(); expect(screen.getByText('Go to Reports')).toBeInTheDocument(); }); - it('should render Recent positions with empty portfolio message if there is an error in portfolio', () => { + it('should render Recent positions with empty portfolio message if there is an error in portfolio even though there is match in open position', () => { mocked_store.portfolio.error = 'Some error'; mocked_store.portfolio.all_positions = [ { @@ -81,7 +81,7 @@ describe('', () => { expect(screen.queryByText(empty_portfolio_message)).not.toBeInTheDocument(); expect(screen.getByText(position_drawer_card)).toBeInTheDocument(); }); - it('should render both PositionsDrawerCard if for Turbos Long and Short', () => { + it('should render both PositionsDrawerCard for Turbos Long and Short', () => { mocked_store.modules.trade.contract_type = TURBOS.LONG; mocked_store.portfolio.all_positions = [ { @@ -103,7 +103,7 @@ describe('', () => { expect(screen.getAllByText(position_drawer_card)).toHaveLength(2); }); - it('should render both PositionsDrawerCard if for Vanilla Call and Put', () => { + it('should render both PositionsDrawerCard for Vanilla Call and Put', () => { mocked_store.modules.trade.contract_type = VANILLALONG.CALL; mocked_store.portfolio.all_positions = [ { From 1d6f2f67855c5142fbdd7e3520d2574f4e978f2b Mon Sep 17 00:00:00 2001 From: kate-deriv Date: Sat, 11 Nov 2023 14:07:33 +0300 Subject: [PATCH 3/3] refactor: remove code smell --- .../PositionsDrawer/__tests__/positions-drawer.spec.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/trader/src/App/Components/Elements/PositionsDrawer/__tests__/positions-drawer.spec.tsx b/packages/trader/src/App/Components/Elements/PositionsDrawer/__tests__/positions-drawer.spec.tsx index 534de303d2ad..c62b385b2c78 100644 --- a/packages/trader/src/App/Components/Elements/PositionsDrawer/__tests__/positions-drawer.spec.tsx +++ b/packages/trader/src/App/Components/Elements/PositionsDrawer/__tests__/positions-drawer.spec.tsx @@ -125,12 +125,12 @@ describe('', () => { expect(screen.getAllByText(position_drawer_card)).toHaveLength(2); }); - it('should call onHoverPosition if user hover on position drawer card and should call it twice if he unhover it', async () => { + it('should call onHoverPosition if user hover on position drawer card and should call it twice if he unhover it', () => { render(mockPositionsDrawer(mockStore(mocked_store))); userEvent.hover(screen.getAllByText(position_drawer_card)[0]); userEvent.unhover(screen.getAllByText(position_drawer_card)[0]); - await (() => expect(mocked_store.portfolio.onHoverPosition).toBeCalledTimes(2)); + expect(mocked_store.portfolio.onHoverPosition).toBeCalledTimes(2); }); });