fixes test case and header fix

packages/core/src/App/Containers/Layout/header/header.tsx

@@ -91,7 +91,7 @@ const Header = observer(() => {
             case pathname === routes.onboarding:
                 result = null;
                 break;
-            case is_dtrader_v2_enabled && is_mobile && pathname === routes.trade:
+            case is_dtrader_v2_enabled && is_mobile && pathname.startsWith(routes.trade):
                 result = <DTraderV2Header />;
                 break;
             case is_dtrader_v2_enabled &&

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

@@ -433,10 +433,10 @@
 .contract-details-header-v2 {
     display: flex;
     justify-content: center;
-    height: 48px;
-    padding: 12px 0px;
+    height: var(--core-spacing-2400);
+    padding: var(--core-spacing-600) var(--core-spacing-50);
     .arrow {
         position: absolute;
-        left: 24px;
+        left: var(--core-size-1200);
     }
 }

packages/trader/src/AppV2/Components/CardWrapper/__tests__/card-wrapper.spec.tsx

@@ -12,7 +12,7 @@ jest.mock('@deriv-com/quill-ui', () => ({
 describe('CardWrapper component', () => {
     it('renders without crashing', () => {
         render(
-            <CardWrapper>
+            <CardWrapper title='Test Title'>
                 <div>Child content</div>
             </CardWrapper>
         );

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

@@ -1,24 +1,18 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import { useStore } from '@deriv/stores';
+import { StoreProvider, mockStore } from '@deriv/stores';
 import { getCardLabels, isValidToSell, isValidToCancel, isMultiplierContract } from '@deriv/shared';
 import ContractDetailsFooter from '../contract-details-footer';
-import { getRemainingTime } from 'AppV2/Utils/helper';
 import userEvent from '@testing-library/user-event';
 
-jest.mock('@deriv/stores', () => ({
-    useStore: jest.fn(),
-}));
 jest.mock('@deriv/shared', () => ({
+    ...jest.requireActual('@deriv/shared'),
     getCardLabels: jest.fn(),
     isValidToSell: jest.fn(),
     isValidToCancel: jest.fn(),
     isMultiplierContract: jest.fn(),
 }));
-jest.mock('AppV2/Utils/helper', () => ({
-    getRemainingTime: jest.fn(),
-}));
 
 const mockContractInfo = {
     bid_price: 100,
@@ -29,21 +23,18 @@ const mockContractInfo = {
 };
 
 describe('ContractDetailsFooter', () => {
-    let mockStore: any;
+    const mock_store = mockStore({
+        contract_replay: {
+            onClickCancel: jest.fn(),
+            onClickSell: jest.fn(),
+            is_sell_requested: false,
+        },
+        common: {
+            server_time: new Date(),
+        },
+    });
 
     beforeEach(() => {
-        mockStore = {
-            contract_replay: {
-                onClickCancel: jest.fn(),
-                onClickSell: jest.fn(),
-                is_sell_requested: false,
-            },
-            common: {
-                server_time: new Date(),
-            },
-        };
-
-        (useStore as jest.Mock).mockImplementation(() => mockStore);
         (getCardLabels as jest.Mock).mockImplementation(() => ({
             CLOSE: 'Close',
             CANCEL: 'Cancel',
@@ -52,23 +43,27 @@ describe('ContractDetailsFooter', () => {
         jest.clearAllMocks();
     });
 
+    const renderFooter = () => {
+        render(
+            <StoreProvider store={mock_store}>
+                <ContractDetailsFooter contract_info={mockContractInfo} />
+            </StoreProvider>
+        );
+    };
+
     it('should render close button with bid price and currency for non-multiplier contracts', () => {
         (isMultiplierContract as jest.Mock).mockImplementation(() => false);
         (isValidToSell as jest.Mock).mockImplementation(() => true);
-
-        render(<ContractDetailsFooter contract_info={mockContractInfo} />);
-
-        const closeButton = screen.getByRole('button', { name: /close @ 100 usd/i });
+        renderFooter();
+        const closeButton = screen.getByRole('button', { name: /close @ 100.00 usd/i });
         expect(closeButton).toBeInTheDocument();
         expect(closeButton).toBeEnabled();
     });
 
     it('should render resale not offered message for non-valid sell contracts', () => {
         (isMultiplierContract as jest.Mock).mockImplementation(() => false);
         (isValidToSell as jest.Mock).mockImplementation(() => false);
-
-        render(<ContractDetailsFooter contract_info={mockContractInfo} />);
-
+        renderFooter();
         const resaleMessage = screen.getByText(/resale not offered/i);
         expect(resaleMessage).toBeInTheDocument();
     });
@@ -77,19 +72,11 @@ describe('ContractDetailsFooter', () => {
         (isMultiplierContract as jest.Mock).mockImplementation(() => true);
         (isValidToSell as jest.Mock).mockImplementation(() => true);
         (isValidToCancel as jest.Mock).mockImplementation(() => true);
-        (getRemainingTime as jest.Mock).mockImplementation(() => '10:00');
-
-        render(
-            <ContractDetailsFooter
-                contract_info={{
-                    ...mockContractInfo,
-                    contract_type: 'multiplier',
-                }}
-            />
-        );
+        mock_store.contract_replay.contract_store.contract_info.contract_type = 'multiplier';
+        renderFooter();
 
         const closeButton = screen.getByRole('button', { name: /close/i });
-        const cancelButton = screen.getByRole('button', { name: /cancel 10:00/i });
+        const cancelButton = screen.getByRole('button', { name: /cancel/i });
 
         expect(closeButton).toBeInTheDocument();
         expect(cancelButton).toBeInTheDocument();
@@ -99,52 +86,29 @@ describe('ContractDetailsFooter', () => {
         (isMultiplierContract as jest.Mock).mockImplementation(() => false);
         (isValidToSell as jest.Mock).mockImplementation(() => true);
 
-        render(<ContractDetailsFooter contract_info={mockContractInfo} />);
-
-        const closeButton = screen.getByRole('button', { name: /close @ 100 usd/i });
+        renderFooter();
+        const closeButton = screen.getByRole('button', { name: /close @ 100.00 usd/i });
 
         userEvent.click(closeButton);
 
-        expect(mockStore.contract_replay.onClickSell).toHaveBeenCalledWith(1);
-    });
-
-    it('should disable close button for multiplier contract when profit is negative and valid to cancel', () => {
-        (isMultiplierContract as jest.Mock).mockImplementation(() => true);
-        (isValidToSell as jest.Mock).mockImplementation(() => true);
-        (isValidToCancel as jest.Mock).mockImplementation(() => true);
-
-        render(
-            <ContractDetailsFooter contract_info={{ ...mockContractInfo, contract_type: 'multiplier', profit: -10 }} />
-        );
-
-        const closeButton = screen.getByRole('button', { name: /close/i });
-        expect(closeButton).toBeDisabled();
+        expect(mock_store.contract_replay.onClickSell).toHaveBeenCalledWith(1);
     });
 
     it('should disable cancel button when profit is non-negative', () => {
         (isMultiplierContract as jest.Mock).mockImplementation(() => true);
         (isValidToCancel as jest.Mock).mockImplementation(() => true);
-        (getRemainingTime as jest.Mock).mockImplementation(() => '10:00');
-
-        render(
-            <ContractDetailsFooter
-                contract_info={{
-                    ...mockContractInfo,
-                    contract_type: 'multiplier',
-                    profit: 0,
-                }}
-            />
-        );
-
-        const cancelButton = screen.getByRole('button', { name: /cancel 10:00/i });
+        mock_store.contract_replay.contract_store.contract_info.contract_type = 'multiplier';
+        mock_store.contract_replay.contract_store.contract_info.profit = 0;
+        renderFooter();
+        const cancelButton = screen.getByRole('button', { name: /cancel/i });
         expect(cancelButton).toBeDisabled();
     });
 
     it('should not render cancel button if not valid to cancel', () => {
         (isMultiplierContract as jest.Mock).mockImplementation(() => true);
         (isValidToCancel as jest.Mock).mockImplementation(() => false);
-
-        render(<ContractDetailsFooter contract_info={{ ...mockContractInfo, contract_type: 'multiplier' }} />);
+        mock_store.contract_replay.contract_store.contract_info.contract_type = 'multiplier';
+        renderFooter();
 
         const cancelButton = screen.queryByRole('button', { name: /cancel/i });
         expect(cancelButton).not.toBeInTheDocument();
@@ -154,21 +118,21 @@ describe('ContractDetailsFooter', () => {
         (isMultiplierContract as jest.Mock).mockImplementation(() => false);
         (isValidToSell as jest.Mock).mockImplementation(() => false);
 
-        render(<ContractDetailsFooter contract_info={mockContractInfo} />);
+        renderFooter();
 
-        const closeButton = screen.queryByRole('button', { name: /close @ 100 usd/i });
+        const closeButton = screen.queryByRole('button', { name: /close @ 100.00 usd/i });
         if (closeButton) {
             userEvent.click(closeButton);
         }
 
-        expect(mockStore.contract_replay.onClickSell).not.toHaveBeenCalled();
+        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);
 
-        render(<ContractDetailsFooter contract_info={mockContractInfo} />);
+        renderFooter();
 
         const resaleMessage = screen.getByRole('button', { name: /resale not offered/i });
         expect(resaleMessage).toBeInTheDocument();

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

@@ -1,22 +1,22 @@
-import { Button, Text } from '@deriv-com/quill-ui';
+import { Button, TButtonColor, TButtonVariant } from '@deriv-com/quill-ui';
 import { RemainingTime } from '@deriv/components';
-import {
-    TContractInfo,
-    formatMoney,
-    getCardLabels,
-    isMultiplierContract,
-    isValidToCancel,
-    isValidToSell,
-} from '@deriv/shared';
+import { TContractInfo, getCardLabels, isMultiplierContract, isValidToCancel, isValidToSell } from '@deriv/shared';
 import { useStore } from '@deriv/stores';
-import { getRemainingTime } from 'AppV2/Utils/helper';
-import { observer } from 'mobx-react';
 import React from 'react';
+import { observer } from 'mobx-react';
+import { TRegularSizesWithExtraLarge } from '@deriv-com/quill-ui/dist/types';
 
 type ContractInfoProps = {
     contract_info: TContractInfo;
 };
 
+type ButtonProps = {
+    variant: TButtonVariant;
+    color: TButtonColor;
+    size: TRegularSizesWithExtraLarge;
+    fullWidth: boolean;
+};
+
 const ContractDetailsFooter = observer(({ contract_info }: ContractInfoProps) => {
     const {
         bid_price,
@@ -38,24 +38,27 @@ const ContractDetailsFooter = observer(({ contract_info }: ContractInfoProps) =>
     const bidDetails = !is_valid_to_cancel ? `@${bid_price} ${currency}` : '';
     const label = `${cardLabels.CLOSE} ${bidDetails}`;
 
+    const buttonProps: ButtonProps = {
+        variant: 'secondary',
+        color: 'black',
+        size: 'lg',
+        fullWidth: true,
+    };
+
     return (
         <div className='contract-details-footer--container'>
             {is_multiplier ? (
                 <>
                     <Button
-                        variant='secondary'
                         label={label}
-                        color='black'
-                        size='lg'
                         isLoading={is_sell_requested}
                         disabled={is_sell_requested || (Number(profit) < 0 && is_valid_to_cancel)}
                         onClick={() => onClickSell(contract_id)}
-                        fullWidth
+                        {...buttonProps}
                     />
                     {is_valid_to_cancel && (
                         <Button
                             onClick={() => onClickCancel(contract_id)}
-                            variant='secondary'
                             label={
                                 <>
                                     {getCardLabels().CANCEL}
@@ -70,27 +73,22 @@ const ContractDetailsFooter = observer(({ contract_info }: ContractInfoProps) =>
                                     />
                                 </>
                             }
-                            color='black'
                             disabled={Number(profit) >= 0}
-                            size='lg'
-                            fullWidth
+                            {...buttonProps}
                         />
                     )}
                 </>
             ) : (
                 <Button
-                    variant='secondary'
                     label={
                         is_valid_to_sell
-                            ? `${getCardLabels().CLOSE} @ ${bid_price} ${formatMoney(currency)}`
+                            ? `${getCardLabels().CLOSE} @ ${bid_price?.toFixed(2)} ${currency}`
                             : getCardLabels().RESALE_NOT_OFFERED
                     }
-                    color='black'
-                    size='lg'
                     isLoading={is_sell_requested && is_valid_to_sell}
                     onClick={is_valid_to_sell ? () => onClickSell(contract_id) : undefined}
-                    fullWidth
                     disabled={!is_valid_to_sell}
+                    {...buttonProps}
                 />
             )}
         </div>

packages/trader/src/AppV2/Components/DealCancellation/__tests__/deal-cancellation.spec.tsx

@@ -33,6 +33,8 @@ jest.mock('../../RiskManagementItem', () => {
 });
 
 describe('DealCancellation component', () => {
+    const dealCancellation = 'Deal cancellation';
+
     const mockContractInfo = {
         contract_type: 'MULTIPLIER',
     };
@@ -54,47 +56,47 @@ describe('DealCancellation component', () => {
         (isValidToCancel as jest.Mock).mockReturnValue(true);
         (isOpen as jest.Mock).mockReturnValue(true);
         (getContractDetailsConfig as jest.Mock).mockReturnValue({
-            is_deal_cancellation_visible: true,
+            isDealCancellationVisible: true,
         });
 
         render(<DealCancellation />);
 
-        expect(screen.getByText('Deal cancellation')).toBeInTheDocument();
+        expect(screen.getByText(dealCancellation)).toBeInTheDocument();
     });
 
     it('does not render the DealCancellation component when isValidToCancel is false', () => {
         (isValidToCancel as jest.Mock).mockReturnValue(false);
         (isOpen as jest.Mock).mockReturnValue(true);
         (getContractDetailsConfig as jest.Mock).mockReturnValue({
-            is_deal_cancellation_visible: true,
+            isDealCancellationVisible: true,
         });
 
         render(<DealCancellation />);
 
-        expect(screen.queryByText('Deal cancellation')).not.toBeInTheDocument();
+        expect(screen.queryByText(dealCancellation)).not.toBeInTheDocument();
     });
 
     it('does not render the DealCancellation component when is_deal_cancellation_visible is false', () => {
         (isValidToCancel as jest.Mock).mockReturnValue(true);
         (isOpen as jest.Mock).mockReturnValue(true);
         (getContractDetailsConfig as jest.Mock).mockReturnValue({
-            is_deal_cancellation_visible: false,
+            isDealCancellationVisible: false,
         });
 
         render(<DealCancellation />);
 
-        expect(screen.queryByText('Deal cancellation')).not.toBeInTheDocument();
+        expect(screen.queryByText(dealCancellation)).not.toBeInTheDocument();
     });
 
     it('does not render the DealCancellation component when isOpen is false', () => {
         (isValidToCancel as jest.Mock).mockReturnValue(true);
         (isOpen as jest.Mock).mockReturnValue(false);
         (getContractDetailsConfig as jest.Mock).mockReturnValue({
-            is_deal_cancellation_visible: true,
+            isDealCancellationVisible: true,
         });
 
         render(<DealCancellation />);
 
-        expect(screen.queryByText('Deal cancellation')).not.toBeInTheDocument();
+        expect(screen.queryByText(dealCancellation)).not.toBeInTheDocument();
     });
 });