diff --git a/packages/trader/src/AppV2/Components/ActiveSymbolsList/__tests__/active-symbols-list.spec.tsx b/packages/trader/src/AppV2/Components/ActiveSymbolsList/__tests__/active-symbols-list.spec.tsx index f853f0e886df..84a3052b14af 100644 --- a/packages/trader/src/AppV2/Components/ActiveSymbolsList/__tests__/active-symbols-list.spec.tsx +++ b/packages/trader/src/AppV2/Components/ActiveSymbolsList/__tests__/active-symbols-list.spec.tsx @@ -4,10 +4,15 @@ import ActiveSymbolsList from '../active-symbols-list'; import TraderProviders from '../../../../trader-providers'; import { TCoreStores } from '@deriv/stores/types'; import { mockStore } from '@deriv/stores'; +import { TRADE_TYPES } from '@deriv/shared'; +import userEvent from '@testing-library/user-event'; -jest.mock('AppV2/Components/SymbolSearchResults', () => jest.fn(() =>
MockedSymbolSearchResults
)); -jest.mock('AppV2/Components/SymbolsSearchField', () => jest.fn(() =>
MockedSymbolsSearchField
)); -jest.mock('AppV2/Components/MarketCategories', () => jest.fn(() =>
MockedMarketCategories
)); +const input_placeholder_text = 'Search markets on Rise/Fall'; +const symbol_search_results = 'MockedSymbolSearchResults'; +const market_categories = 'MockedMarketCategories'; + +jest.mock('AppV2/Components/SymbolSearchResults', () => jest.fn(() =>
{symbol_search_results}
)); +jest.mock('AppV2/Components/MarketCategories', () => jest.fn(() =>
{market_categories}
)); jest.mock('AppV2/Hooks/useActiveSymbols', () => ({ ...jest.requireActual('AppV2/Hooks/useActiveSymbols'), @@ -22,30 +27,63 @@ describe('', () => { isOpen: true, setIsOpen: jest.fn(), }; - const mocked_store = { - modules: { - trade: { - symbol: '', - setTickData: jest.fn(), + let default_mock_store: ReturnType; + + beforeEach(() => { + default_mock_store = mockStore({ + modules: { + trade: { + symbol: '1H100Z', + contract_type: TRADE_TYPES.RISE_FALL, + setTickData: jest.fn(), + setDigitStats: jest.fn(), + }, }, - }, - }; - const MockActiveSymbolsList = ( - mocked_store: TCoreStores, - mocked_props: Parameters[0] - ) => { + }); + }); + + const MockActiveSymbolsList = (mocked_store: TCoreStores) => { return ( ); }; - it('renders SymbolsSearchField', () => { - render(MockActiveSymbolsList(mockStore(mocked_store), mocked_props)); - expect(screen.getByText('MockedSymbolsSearchField')).toBeInTheDocument(); + it('renders SymbolsSearchField component with MarketCategories if user is not searching', () => { + render(MockActiveSymbolsList(default_mock_store)); + + expect(screen.getByRole('textbox')).toHaveAttribute('placeholder', input_placeholder_text); + expect(screen.getByText(market_categories)).toBeInTheDocument(); + expect(screen.queryByText(symbol_search_results)).not.toBeInTheDocument(); }); - it('renders MarketCategories when not searching', () => { - render(MockActiveSymbolsList(mockStore(mocked_store), mocked_props)); - expect(screen.getByText('MockedMarketCategories')).toBeInTheDocument(); + it('renders SymbolsSearchField component with MockedSymbolSearchResults if user is searching', () => { + render(MockActiveSymbolsList(default_mock_store)); + + const search_input = screen.getByRole('textbox'); + expect(search_input).toHaveAttribute('placeholder', input_placeholder_text); + expect(screen.getByText(market_categories)).toBeInTheDocument(); + + userEvent.type(search_input, 'some_symbol'); + expect(screen.getByText(symbol_search_results)).toBeInTheDocument(); + expect(screen.queryByText(market_categories)).not.toBeInTheDocument(); + }); + it('calls setTickData and setDigitStats on mount and on symbol change', () => { + const updated_store = mockStore({ + modules: { + trade: { + symbol: 'mock_symbol', + contract_type: TRADE_TYPES.RISE_FALL, + setTickData: jest.fn(), + setDigitStats: jest.fn(), + }, + }, + }); + const { rerender } = render(MockActiveSymbolsList(default_mock_store)); + expect(default_mock_store.modules.trade.setTickData).toBeCalledWith(null); + expect(default_mock_store.modules.trade.setDigitStats).toBeCalledWith([]); + + rerender(MockActiveSymbolsList(updated_store)); + expect(default_mock_store.modules.trade.setTickData).toBeCalledWith(null); + expect(default_mock_store.modules.trade.setDigitStats).toBeCalledWith([]); }); }); diff --git a/packages/trader/src/AppV2/Components/ActiveSymbolsList/active-symbols-list.tsx b/packages/trader/src/AppV2/Components/ActiveSymbolsList/active-symbols-list.tsx index b58e2c449b8c..7a6345b72adc 100644 --- a/packages/trader/src/AppV2/Components/ActiveSymbolsList/active-symbols-list.tsx +++ b/packages/trader/src/AppV2/Components/ActiveSymbolsList/active-symbols-list.tsx @@ -13,7 +13,7 @@ type TActiveSymbolsList = { }; const ActiveSymbolsList = observer(({ isOpen, setIsOpen }: TActiveSymbolsList) => { - const { setTickData, symbol, contract_type } = useTraderStore(); + const { setTickData, setDigitStats, symbol, contract_type } = useTraderStore(); const [isSearching, setIsSearching] = useState(false); const [selectedSymbol, setSelectedSymbol] = useState(symbol); const [searchValue, setSearchValue] = useState(''); @@ -23,7 +23,8 @@ const ActiveSymbolsList = observer(({ isOpen, setIsOpen }: TActiveSymbolsList) = useEffect(() => { setSelectedSymbol(symbol); setTickData(null); - }, [setTickData, symbol]); + setDigitStats([]); + }, [setDigitStats, setTickData, symbol]); return ( diff --git a/packages/trader/src/AppV2/Components/TradeParameters/LastDigitPrediction/digit.tsx b/packages/trader/src/AppV2/Components/TradeParameters/LastDigitPrediction/digit.tsx index ab1e49353c46..f7a13ecb8795 100644 --- a/packages/trader/src/AppV2/Components/TradeParameters/LastDigitPrediction/digit.tsx +++ b/packages/trader/src/AppV2/Components/TradeParameters/LastDigitPrediction/digit.tsx @@ -39,7 +39,7 @@ const Digit = ({ digit, digit_stats = [], is_active, is_disabled, is_max, is_min {display_percentage}% ) : ( - + )} );