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}%
) : (
-
+
)}
);