Fixes

packages/core/src/App/Containers/Layout/header/__tests__/dtrader-contract-details-header.spec.tsx

@@ -1,22 +1,39 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import { Router } from 'react-router-dom';
-import { createMemoryHistory } from 'history';
+import { BrowserRouter, useHistory, useLocation } from 'react-router-dom';
 import DTraderContractDetailsHeader from '../dtrader-v2-contract-detail-header';
 import userEvent from '@testing-library/user-event';
+import { StoreProvider, mockStore } from '@deriv/stores';
 
 jest.mock('@deriv-com/quill-ui', () => ({
     Text: () => <div>Contract Details</div>,
 }));
+jest.mock('react-router-dom', () => ({
+    ...jest.requireActual('react-router-dom'),
+    useLocation: jest.fn().mockReturnValue({ pathname: '' }),
+    useHistory: jest.fn().mockReturnValue({
+        goBack: jest.fn(),
+    }),
+}));
 
 describe('DTraderV2Header', () => {
+    const mock_store = mockStore({
+        contract_replay: {
+            onClickCancel: jest.fn(),
+            onClickSell: jest.fn(),
+            is_sell_requested: false,
+        },
+        common: {
+            routeBackInApp: jest.fn(),
+        },
+    });
     test('renders the header with localized text and an icon', () => {
-        const history = createMemoryHistory();
         render(
-            <Router history={history}>
-                <DTraderContractDetailsHeader />
-            </Router>
+            <StoreProvider store={mock_store}>
+                <BrowserRouter>
+                    <DTraderContractDetailsHeader />
+                </BrowserRouter>
+            </StoreProvider>
         );
 
         expect(screen.getByText('Contract Details')).toBeInTheDocument();
@@ -25,19 +42,46 @@ describe('DTraderV2Header', () => {
         expect(icon).toBeInTheDocument();
     });
 
-    test('clicking the back arrow calls history.goBack', () => {
-        const history = createMemoryHistory();
+    test('clicking the back arrow calls routeBackInApp from DTrader page', () => {
+        render(
+            <StoreProvider store={mock_store}>
+                <BrowserRouter>
+                    <DTraderContractDetailsHeader />
+                </BrowserRouter>
+            </StoreProvider>
+        );
 
-        history.goBack = jest.fn();
+        userEvent.click(screen.getByTestId('arrow'));
+
+        expect(mock_store.common.routeBackInApp).toHaveBeenCalled();
+    });
 
+    test('clicking the back arrow calls history go back from Reports page', () => {
+        const historyMock = {
+            goBack: jest.fn(),
+        };
+        (useLocation as jest.Mock).mockReturnValue({
+            pathname: '',
+            state: { from_table_row: true },
+        });
+        (useHistory as jest.Mock).mockReturnValue(historyMock);
         render(
-            <Router history={history}>
-                <DTraderContractDetailsHeader />
-            </Router>
+            <StoreProvider store={mock_store}>
+                <BrowserRouter>
+                    <DTraderContractDetailsHeader />
+                </BrowserRouter>
+            </StoreProvider>
         );
 
         userEvent.click(screen.getByTestId('arrow'));
 
-        expect(history.goBack).toHaveBeenCalled();
+        expect(historyMock.goBack).toHaveBeenCalled();
     });
 });
+// const mockGoBack = jest.fn();
+//         jest.mock('react-router-dom', () => ({
+//             ...jest.requireActual('react-router-dom'),
+//             useHistory: () => ({
+//                 goBack: mockGoBack,
+//             }),
+//         }));

packages/core/src/App/Containers/Layout/header/dtrader-v2-contract-detail-header.tsx

@@ -1,12 +1,21 @@
 import React from 'react';
-import { observer } from '@deriv/stores';
+import { observer, useStore } from '@deriv/stores';
 import { Text } from '@deriv-com/quill-ui';
 import { LabelPairedArrowLeftSmBoldIcon } from '@deriv/quill-icons';
 import { Localize } from '@deriv/translations';
-import { useHistory } from 'react-router-dom';
+import { useHistory, useLocation } from 'react-router-dom';
+import { isEmptyObject } from '@deriv/shared';
 
 const DTraderContractDetailsHeader = observer(() => {
+    const { state } = useLocation();
     const history = useHistory();
+    const { common } = useStore();
+    const { routeBackInApp } = common;
+
+    const handleBack = () => {
+        const is_from_table_row = !isEmptyObject(state) ? state.from_table_row : false;
+        return is_from_table_row ? history.goBack() : routeBackInApp(history);
+    };
 
     return (
         <header className='header contract-details-header-v2'>
@@ -16,7 +25,7 @@ const DTraderContractDetailsHeader = observer(() => {
                     width='13px'
                     className='arrow'
                     data-testid='arrow'
-                    onClick={() => history.goBack()}
+                    onClick={handleBack}
                 />
                 <Text size='md' bold>
                     <Localize i18n_default_text='Contract Details' />

packages/core/src/sass/app/_common/layout/header.scss

@@ -437,6 +437,7 @@
     padding: var(--core-spacing-600) var(--core-spacing-50);
     .arrow {
         position: absolute;
+        cursor: pointer;
         left: var(--core-size-1200);
     }
 }

packages/trader/src/AppV2/Components/ContractDetailsFooter/__tests__/contract-details-footer.spec.tsx

@@ -2,13 +2,12 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { StoreProvider, mockStore } from '@deriv/stores';
-import { getCardLabels, isValidToSell, isValidToCancel, isMultiplierContract } from '@deriv/shared';
+import { isValidToSell, isValidToCancel, isMultiplierContract } from '@deriv/shared';
 import ContractDetailsFooter from '../contract-details-footer';
 import userEvent from '@testing-library/user-event';
 
 jest.mock('@deriv/shared', () => ({
     ...jest.requireActual('@deriv/shared'),
-    getCardLabels: jest.fn(),
     isValidToSell: jest.fn(),
     isValidToCancel: jest.fn(),
     isMultiplierContract: jest.fn(),
@@ -34,15 +33,6 @@ describe('ContractDetailsFooter', () => {
         },
     });
 
-    beforeEach(() => {
-        (getCardLabels as jest.Mock).mockImplementation(() => ({
-            CLOSE: 'Close',
-            CANCEL: 'Cancel',
-            RESALE_NOT_OFFERED: 'Resale not offered',
-        }));
-        jest.clearAllMocks();
-    });
-
     const renderFooter = () => {
         render(
             <StoreProvider store={mock_store}>
@@ -94,6 +84,17 @@ describe('ContractDetailsFooter', () => {
         expect(mock_store.contract_replay.onClickSell).toHaveBeenCalledWith(1);
     });
 
+    it('should not call onClickSell if not valid to sell', () => {
+        (isMultiplierContract as jest.Mock).mockImplementation(() => false);
+        (isValidToSell as jest.Mock).mockImplementation(() => false);
+
+        renderFooter();
+
+        const closeButton = screen.queryByRole('button');
+        console.log(closeButton?.textContent);
+        expect(closeButton).toBeDisabled();
+    });
+
     it('should disable cancel button when profit is non-negative', () => {
         (isMultiplierContract as jest.Mock).mockImplementation(() => true);
         (isValidToCancel as jest.Mock).mockImplementation(() => true);
@@ -114,20 +115,6 @@ describe('ContractDetailsFooter', () => {
         expect(cancelButton).not.toBeInTheDocument();
     });
 
-    it('should not call onClickSell if not valid to sell', () => {
-        (isMultiplierContract as jest.Mock).mockImplementation(() => false);
-        (isValidToSell as jest.Mock).mockImplementation(() => false);
-
-        renderFooter();
-
-        const closeButton = screen.queryByRole('button', { name: /close @ 100.00 usd/i });
-        if (closeButton) {
-            userEvent.click(closeButton);
-        }
-
-        expect(mock_store.contract_replay.onClickSell).not.toHaveBeenCalled();
-    });
-
     it('should render correct button label for non-multiplier contract when not valid to sell', () => {
         (isMultiplierContract as jest.Mock).mockImplementation(() => false);
         (isValidToSell as jest.Mock).mockImplementation(() => false);

packages/trader/src/AppV2/Components/ContractDetailsFooter/contract-details-footer.tsx

@@ -5,6 +5,7 @@ import { useStore } from '@deriv/stores';
 import React from 'react';
 import { observer } from 'mobx-react';
 import { TRegularSizesWithExtraLarge } from '@deriv-com/quill-ui/dist/types';
+import { FormatUtils } from '@deriv-com/utils';
 
 type ContractInfoProps = {
     contract_info: TContractInfo;
@@ -82,7 +83,7 @@ const ContractDetailsFooter = observer(({ contract_info }: ContractInfoProps) =>
                 <Button
                     label={
                         is_valid_to_sell
-                            ? `${getCardLabels().CLOSE} @ ${bid_price?.toFixed(2)} ${currency}`
+                            ? `${getCardLabels().CLOSE} @ ${FormatUtils.formatMoney(bid_price || 0)} ${currency}`
                             : getCardLabels().RESALE_NOT_OFFERED
                     }
                     isLoading={is_sell_requested && is_valid_to_sell}

packages/trader/src/AppV2/Components/RiskManagementInfoModal/__tests__/risk-management-info-modal.spec.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
 
 import RiskManagementInfoModal from '../risk-management-info-modal';
+import userEvent from '@testing-library/user-event';
 
 jest.mock('@deriv/quill-icons', () => ({
     LabelPairedCircleInfoSmRegularIcon: () => <svg />,
@@ -38,13 +38,13 @@ describe('RiskManagementInfoModal', () => {
         );
 
         const button = screen.getByRole('button');
-        fireEvent.click(button);
+        userEvent.click(button);
 
         expect(screen.getByText(headerContent)).toBeInTheDocument();
         expect(screen.getByText(bodyContent)).toBeInTheDocument();
         expect(screen.getByText(infoMessage)).toBeInTheDocument();
 
-        fireEvent.click(button);
+        userEvent.click(button);
 
         expect(screen.queryByText(headerContent)).not.toBeInTheDocument();
     });
@@ -53,7 +53,7 @@ describe('RiskManagementInfoModal', () => {
         render(<RiskManagementInfoModal header_content={headerContent} body_content={bodyContent} />);
 
         const button = screen.getByRole('button');
-        fireEvent.click(button);
+        userEvent.click(button);
 
         expect(screen.getByText(headerContent)).toBeInTheDocument();
         expect(screen.getByText(bodyContent)).toBeInTheDocument();

packages/trader/src/AppV2/Containers/ContractDetails/contract-details.tsx

@@ -84,9 +84,9 @@ const ContractDetails = observer(() => {
                 <div className='contract-card-wrapper'>
                     <ContractCard contractInfo={contract_info} serverTime={server_time} />
                 </div>
-                <div className='placeholder'>
-                    <ChartPlaceholder />
-                </div>
+
+                <ChartPlaceholder />
+
                 <DealCancellation />
                 {showRiskManagement && (
                     <CardWrapper>

packages/trader/src/AppV2/Hooks/__tests__/useContractDetails.spec.tsx

@@ -13,6 +13,7 @@ jest.mock('@deriv/stores', () => ({
 
 describe('useContractDetails', () => {
     const mockOnMount = jest.fn();
+    const mockOnUnMount = jest.fn();
     const mockGetContractById = jest.fn();
     const mockContractInfo = { contract_id: null };
 
@@ -27,6 +28,7 @@ describe('useContractDetails', () => {
                     contract_info: { ...mockContractInfo, ...contractInfoOverride },
                 },
                 onMount: mockOnMount,
+                onUnmount: mockOnUnMount,
             },
             contract_trade: {
                 getContractById: mockGetContractById,
@@ -46,8 +48,11 @@ describe('useContractDetails', () => {
         expect(mockOnMount).toHaveBeenCalledWith(12345);
     });
 
-    it('should not call onMount if contract_id is available', () => {
+    it('should not call onMount if contract_id is equal to id from the url', () => {
         setupMocks({ contract_id: 67890 });
+        (useLocation as jest.Mock).mockReturnValue({
+            pathname: '//abc/contracts/67890',
+        });
 
         renderHook(() => useContractDetails());