DTRA-1487 / Kate / Add tests for new files (binary-com#151)

* feat: add tests for purchase buttom content file

* refactor: add tests for purchase button file

* refactor: change content for multipliers description

* refactor: add tests for trade type tabs file

* refactor: add tests for trade parameters container file

* refactor: add tests for trade parameters file

* chore: add more test cases

* chore: add mockcontractinfo function usage

packages/trader/src/AppV2/Components/Guide/Description/ContractDescription/multipliers-trade-description.tsx

@@ -115,6 +115,12 @@ const MultipliersTradeDescription = ({ onTermClick }: { onTermClick: (term: stri
                 <Localize i18n_default_text='For exit spot, the latest asset price when the trade closure is processed by our servers.' />
             ),
         },
+        {
+            type: 'paragraph',
+            text: (
+                <Localize i18n_default_text='Note: Deal cancellation is only available for Volatility Indices on Multipliers.' />
+            ),
+        },
     ];
 
     return <React.Fragment>{getContractDescription(content)}</React.Fragment>;

packages/trader/src/AppV2/Components/PurchaseButton/__tests__/purchase-button-content.spec.tsx

@@ -0,0 +1,145 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { getLocalizedBasis } from '@deriv/shared';
+import PurchaseButtonContent from '../purchase-button-content';
+
+type TInfo = React.ComponentProps<typeof PurchaseButtonContent>['info'];
+
+const mock_props = {
+    currency: 'USD',
+    current_stake: 12,
+    has_open_accu_contract: false,
+    info: {
+        has_error: false,
+        has_error_details: false,
+        obj_contract_basis: {
+            text: 'Payout',
+            value: 19.23,
+        },
+        payout: 19.23,
+        profit: '9.23',
+    } as TInfo,
+    is_accumulator: false,
+    is_multiplier: false,
+    is_turbos: false,
+    is_vanilla: false,
+    is_vanilla_fx: false,
+    is_reverse: false,
+};
+const wrapper_data_test_id = 'dt_purchase_button_wrapper';
+const localized_basis = getLocalizedBasis();
+
+describe('PurchaseButtonContent', () => {
+    it('should render empty wrapper with specific className if info prop is empty object or falsy', () => {
+        render(<PurchaseButtonContent {...mock_props} info={{} as TInfo} />);
+
+        expect(screen.getByTestId(wrapper_data_test_id)).toHaveClass(
+            'purchase-button__information__wrapper--disabled-placeholder'
+        );
+        expect(screen.queryByText(mock_props.currency)).not.toBeInTheDocument();
+    });
+
+    it('should render correct default text basis and amount if info was passed', () => {
+        render(<PurchaseButtonContent {...mock_props} />);
+
+        expect(screen.getByTestId(wrapper_data_test_id)).not.toHaveClass(
+            'purchase-button__information__wrapper--disabled-placeholder'
+        );
+        expect(screen.getByText(localized_basis.payout)).toBeInTheDocument();
+        expect(screen.getByText(/19.23/)).toBeInTheDocument();
+        expect(screen.getByText(/USD/i)).toBeInTheDocument();
+    });
+
+    it('should apply specific className to wrapper when is_reverse is true', () => {
+        render(<PurchaseButtonContent {...mock_props} is_reverse />);
+
+        expect(screen.getByTestId(wrapper_data_test_id)).toHaveClass('purchase-button__information__wrapper--reverse');
+    });
+
+    it('should render correct specific text basis and amount for Multipliers', () => {
+        const multipliers_info = {
+            has_error: false,
+            has_error_details: false,
+            obj_contract_basis: {
+                text: '',
+                value: '',
+            },
+            stake: '10.00',
+        };
+        render(<PurchaseButtonContent {...mock_props} is_multiplier info={multipliers_info as TInfo} />);
+
+        expect(screen.getByText(localized_basis.stake)).toBeInTheDocument();
+        expect(screen.getByText(/10/)).toBeInTheDocument();
+        expect(screen.getByText(/USD/i)).toBeInTheDocument();
+    });
+
+    it('should render correct specific text basis and amount for Accumulators (when there is no open contract and with it)', () => {
+        const accumulators_info = {
+            has_error: false,
+            has_error_details: false,
+            obj_contract_basis: {
+                text: '',
+                value: '',
+            },
+            maximum_payout: 4000,
+        };
+        const { rerender } = render(
+            <PurchaseButtonContent {...mock_props} is_accumulator info={accumulators_info as TInfo} />
+        );
+
+        expect(screen.getByText(localized_basis.max_payout)).toBeInTheDocument();
+        expect(screen.getByText(/4,000.00/)).toBeInTheDocument();
+        expect(screen.getByText(/USD/i)).toBeInTheDocument();
+
+        rerender(
+            <PurchaseButtonContent
+                {...mock_props}
+                is_accumulator
+                info={accumulators_info as TInfo}
+                has_open_accu_contract
+            />
+        );
+
+        expect(screen.getByText(localized_basis.current_stake)).toBeInTheDocument();
+        expect(screen.getByText(/12/)).toBeInTheDocument();
+        expect(screen.getByText(/USD/i)).toBeInTheDocument();
+    });
+
+    it('should render correct specific text basis and amount for Turbos', () => {
+        const turbos_info = {
+            has_error: false,
+            has_error_details: false,
+            obj_contract_basis: {
+                text: 'Payout per point',
+                value: '8.250455',
+            },
+        };
+        render(<PurchaseButtonContent {...mock_props} is_turbos info={turbos_info as TInfo} />);
+
+        expect(screen.getByText(localized_basis.payout_per_point)).toBeInTheDocument();
+        expect(screen.getByText(/8.250455/)).toBeInTheDocument();
+        expect(screen.getByText(/USD/i)).toBeInTheDocument();
+    });
+
+    it('should render correct specific text basis and amount for Vanilla (not fx and fx)', () => {
+        const vanilla_info = {
+            has_error: false,
+            has_error_details: false,
+            obj_contract_basis: {
+                text: 'Payout per point',
+                value: '12.77095',
+            },
+        };
+        const { rerender } = render(<PurchaseButtonContent {...mock_props} is_vanilla info={vanilla_info as TInfo} />);
+
+        expect(screen.getByText(localized_basis.payout_per_point)).toBeInTheDocument();
+        expect(screen.getByText(/12.77095/)).toBeInTheDocument();
+        expect(screen.getByText(/USD/i)).toBeInTheDocument();
+
+        rerender(<PurchaseButtonContent {...mock_props} is_vanilla is_vanilla_fx info={vanilla_info as TInfo} />);
+
+        expect(screen.getByText(localized_basis.payout_per_pip)).toBeInTheDocument();
+        expect(screen.getByText(/12.77095/)).toBeInTheDocument();
+        expect(screen.getByText(/USD/i)).toBeInTheDocument();
+    });
+});

packages/trader/src/AppV2/Components/PurchaseButton/__tests__/purchase-button.spec.tsx

@@ -0,0 +1,228 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { mockContractInfo } from '@deriv/shared';
+import { mockStore } from '@deriv/stores';
+import { ReportsStoreProvider } from '../../../../../../reports/src/Stores/useReportsStores';
+import TraderProviders from '../../../../trader-providers';
+import ModulesProvider from 'Stores/Providers/modules-providers';
+import PurchaseButton from '../purchase-button';
+
+describe('PositionsContent', () => {
+    let defaultMockStore: ReturnType<typeof mockStore>;
+
+    beforeEach(() => {
+        defaultMockStore = mockStore({
+            portfolio: {
+                all_positions: [
+                    {
+                        contract_info: {
+                            ...mockContractInfo({
+                                contract_id: 243687440268,
+                                contract_type: 'MULTUP',
+                                multiplier: 100,
+                            }),
+                        },
+                        details:
+                            "If you select 'Up', your total profit/loss will be the percentage increase in Volatility 100 (1s) Index, multiplied by 1000, minus commissions.",
+                        display_name: '',
+                        id: 243687440268,
+                        indicative: 41.4,
+                        purchase: 10,
+                        reference: 486015531488,
+                        type: 'MULTUP',
+                        contract_update: {
+                            stop_out: {
+                                display_name: 'Stop out',
+                                order_amount: -10,
+                                order_date: 1716877413,
+                                value: '774.81',
+                            },
+                        },
+                        entry_spot: 782.35,
+                        profit_loss: 31.4,
+                        is_valid_to_sell: true,
+                        status: 'profit',
+                    },
+                    {
+                        contract_info: {
+                            ...mockContractInfo({
+                                contract_id: 243705193508,
+                                contract_type: 'TURBOSLONG',
+                            }),
+                        },
+                        details:
+                            'You will receive a payout at expiry if the spot price never breaches the barrier. The payout is equal to the payout per point multiplied by the distance between the final price and the barrier.',
+                        display_name: '',
+                        id: 243705193508,
+                        indicative: 4.4,
+                        purchase: 10,
+                        reference: 486048790368,
+                        type: 'TURBOSLONG',
+                        barrier: 821.69,
+                        entry_spot: 824.24,
+                        profit_loss: -5.6,
+                        is_valid_to_sell: true,
+                        status: 'profit',
+                    },
+                    {
+                        contract_info: {
+                            ...mockContractInfo({
+                                contract_id: 249545026128,
+                                contract_type: 'ACCU',
+                                is_settleable: 0,
+                                is_sold: 0,
+                                is_valid_to_cancel: 0,
+                                is_valid_to_sell: 1,
+                                growth_rate: 0.03,
+                                entry_spot: 364.15,
+                                entry_spot_display_value: '364.15',
+                            }),
+                        },
+                        details:
+                            'After the entry spot tick, your stake will grow continuously by 3% for every tick that the spot price remains within the ± 0.03797% from the previous spot price.',
+                        display_name: 'Volatility 100 (1s) Index',
+                        id: 249545026128,
+                        indicative: 18.6,
+                        purchase: 10,
+                        type: 'ACCU',
+                        profit_loss: 8.6,
+                        is_valid_to_sell: true,
+                        current_tick: 21,
+                        status: 'profit',
+                        entry_spot: 364.15,
+                        high_barrier: 364.149,
+                        low_barrier: 363.871,
+                    },
+                ],
+            },
+            modules: {
+                trade: {
+                    ...mockStore({}).modules.trade,
+                    currency: 'USD',
+                    contract_type: 'rise_fall',
+                    is_purchase_enabled: true,
+                    proposal_info: {
+                        PUT: {
+                            id: 1234,
+                            has_error: false,
+                            has_error_details: false,
+                            message:
+                                'Win payout if Volatility 100 (1s) Index is strictly lower than entry spot at 10 minutes after contract start time.',
+                            obj_contract_basis: {
+                                text: 'Payout',
+                                value: 19.2,
+                            },
+                            payout: 19.2,
+                            profit: '9.20',
+                            returns: '92.00%',
+                            stake: '10.00',
+                            spot: 366.11,
+                            barrier: '366.11',
+                            growth_rate: 0.03,
+                            spot_time: 1721206371,
+                        },
+                        CALL: {
+                            id: 12345,
+                            has_error: false,
+                            has_error_details: false,
+                            message:
+                                'Win payout if Volatility 100 (1s) Index is strictly higher than entry spot at 10 minutes after contract start time.',
+                            obj_contract_basis: {
+                                text: 'Payout',
+                                value: 19.26,
+                            },
+                            payout: 19.26,
+                            profit: '9.26',
+                            returns: '92.60%',
+                            stake: '10.00',
+                            spot: 366.11,
+                            barrier: '366.11',
+                            growth_rate: 0.03,
+                            spot_time: 1721206371,
+                        },
+                    },
+                    symbol: '1HZ100V',
+                    trade_types: {
+                        CALL: 'Rise',
+                        PUT: 'Fall',
+                    },
+                },
+            },
+        });
+    });
+
+    const mockPurchaseButton = () => {
+        render(
+            <TraderProviders store={defaultMockStore}>
+                <ReportsStoreProvider>
+                    <ModulesProvider store={defaultMockStore}>
+                        <PurchaseButton />
+                    </ModulesProvider>
+                </ReportsStoreProvider>
+            </TraderProviders>
+        );
+    };
+
+    it('should render two buttons (for Rise and for Fall) with a proper content from proposal_info', () => {
+        mockPurchaseButton();
+
+        expect(screen.getAllByText('Payout')).toHaveLength(2);
+        expect(screen.getByText(/19.26/)).toBeInTheDocument();
+        expect(screen.getAllByText(/USD/i)).toHaveLength(2);
+        expect(screen.getByText('Rise')).toBeInTheDocument();
+        expect(screen.getByText('Fall')).toBeInTheDocument();
+    });
+
+    it('should switch to loading state (apply a proper className and show loader instead of button name) and call onPurchase function if user clicks on purchase button', () => {
+        mockPurchaseButton();
+
+        const purchase_button = screen.getAllByRole('button')[0];
+        expect(purchase_button).not.toHaveClass('purchase-button--loading');
+        expect(defaultMockStore.modules.trade.onPurchase).not.toBeCalled();
+        expect(screen.queryByTestId('button-loader')).not.toBeInTheDocument();
+
+        userEvent.click(purchase_button);
+
+        expect(purchase_button).toHaveClass('purchase-button--loading');
+        expect(defaultMockStore.modules.trade.onPurchase).toBeCalled();
+        expect(screen.getByTestId('button-loader')).toBeInTheDocument();
+    });
+
+    it('should disable the button if one of the prop is false (is_trade_enabled, is_proposal_empty, !info.id, is_purchase_enabled): button should have a specific attribute and if user clicks on it onPurchase will not be called', () => {
+        defaultMockStore.modules.trade.is_purchase_enabled = false;
+        mockPurchaseButton();
+
+        const purchase_button = screen.getAllByRole('button')[0];
+        expect(purchase_button).toBeDisabled();
+        expect(defaultMockStore.modules.trade.onPurchase).not.toBeCalled();
+
+        userEvent.click(purchase_button);
+
+        expect(defaultMockStore.modules.trade.onPurchase).not.toBeCalled();
+    });
+
+    it('should render only one button if trade_types have only one field', () => {
+        defaultMockStore.modules.trade.trade_types = {
+            CALL: 'Rise',
+        };
+        mockPurchaseButton();
+
+        const purchase_button = screen.getByRole('button');
+        expect(purchase_button).toBeInTheDocument();
+        expect(purchase_button).toHaveClass('purchase-button--single');
+    });
+
+    it('should render sell button for Accumulators contract if there is an open Accumulators contract; if user clicks on it - onClickSell should be called', () => {
+        defaultMockStore.modules.trade.has_open_accu_contract = true;
+        defaultMockStore.modules.trade.is_accumulator = true;
+        mockPurchaseButton();
+
+        const sell_button = screen.getByText('Sell');
+        expect(sell_button).toBeInTheDocument();
+        expect(defaultMockStore.portfolio.onClickSell).not.toBeCalled();
+
+        userEvent.click(sell_button);
+        expect(defaultMockStore.portfolio.onClickSell).toBeCalled();
+    });
+});

packages/trader/src/AppV2/Components/PurchaseButton/purchase-button-content.tsx

@@ -59,6 +59,7 @@ const PurchaseButtonContent = ({
                 is_reverse && 'purchase-button__information__wrapper--reverse',
                 is_content_empty && 'purchase-button__information__wrapper--disabled-placeholder'
             )}
+            data-testid='dt_purchase_button_wrapper'
         >
             {!is_content_empty && (
                 <React.Fragment>