diff --git a/packages/trader/src/Modules/Trading/Containers/Multiplier/__tests__/multiplier-options.spec.jsx b/packages/trader/src/Modules/Trading/Containers/Multiplier/__tests__/multiplier-options.spec.jsx new file mode 100644 index 000000000000..54d802a763d3 --- /dev/null +++ b/packages/trader/src/Modules/Trading/Containers/Multiplier/__tests__/multiplier-options.spec.jsx @@ -0,0 +1,106 @@ +import React from 'react'; +// import ReactDOM from 'react-dom'; +// import userEvent from '@testing-library/user-event'; +import { render, screen } from '@testing-library/react'; +import { mockStore } from '@deriv/stores'; +import TraderProviders from '../../../../../trader-providers'; +import MultiplierOptions from '../multiplier-options'; + +const default_mocked_props = { + toggleModal: jest.fn(), +}; +const default_mock_store = { + modules: { + trade: { + amount: 0, + multiplier: '', + multiplier_range_list: [], + onChange: jest.fn(), + }, + }, +}; + +jest.mock('Modules/Trading/Components/Form/TradeParams/Multiplier/info', () => + jest.fn(props => ( +
+ MultipliersInfo component + {props.amount} +
+ )) +); +jest.mock('Modules/Trading/Components/Form/RadioGroupWithInfoMobile', () => + jest.fn(() => ( +
+ RadioGroupWithInfoMobile component +
+ )) +); +jest.mock('Stores/Modules/Trading/Helpers/preview-proposal', () => ({ + ...jest.requireActual('Stores/Modules/Trading/Helpers/preview-proposal'), + requestPreviewProposal: (store, new_store, fn) => + fn({ + proposal: { commission: '1%', limit_order: { stop_out: { order_amount: '10' } } }, + echo_req: { contract_type: 'MULTUP', amount: 20 }, + subscription: { id: '123' }, + }), +})); +jest.mock('@deriv/shared', () => ({ + ...jest.requireActual('@deriv/shared'), + WS: { + forget: jest.fn(), + }, +})); + +describe('', () => { + const mockMultiplierOptions = (mocked_store, mocked_props) => { + return ( + + + + ); + }; + it('should render child components', () => { + const mock_root_store = mockStore(default_mock_store); + render(mockMultiplierOptions(mock_root_store, default_mocked_props)); + + expect(screen.getByText(/MultipliersInfo component/i)).toBeInTheDocument(); + expect(screen.getByText(/0/i)).toBeInTheDocument(); + expect(screen.getByText(/RadioGroupWithInfoMobile component/i)).toBeInTheDocument(); + }); + it('should change the amount after rerendering', () => { + const new_mocked_store = { ...default_mock_store }; + new_mocked_store.modules = { + trade: { + amount: 20, + multiplier: '', + multiplier_range_list: [], + onChange: jest.fn(), + }, + }; + const mock_root_store = mockStore(new_mocked_store); + const { rerender } = render(mockMultiplierOptions(mock_root_store, default_mocked_props)); + + expect(screen.getByText(/0/i)).toBeInTheDocument(); + + rerender(mockMultiplierOptions(mock_root_store, default_mocked_props)); + + expect(screen.getByText(/20/i)).toBeInTheDocument(); + }); + it('should not change the amount after rerendering if echo_req.amount !== amount and amount is falsy', () => { + const new_mocked_store = { ...default_mock_store }; + new_mocked_store.modules = { + trade: { + amount: 10, + multiplier: '', + multiplier_range_list: [], + onChange: jest.fn(), + }, + }; + const mock_root_store = mockStore(new_mocked_store); + const { rerender } = render(mockMultiplierOptions(mock_root_store, default_mocked_props)); + + rerender(mockMultiplierOptions(mock_root_store, default_mocked_props)); + + expect(screen.queryByText(/20/i)).not.toBeInTheDocument(); + }); +});