refactor: digit loader (#17331)

deriv-com · Nov 15, 2024 · f08c01b · f08c01b
1 parent f72a327
commit f08c01b
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 23 deletions.
diff --git a/...ages/trader/src/AppV2/Components/ActiveSymbolsList/__tests__/active-symbols-list.spec.tsx b/...ages/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(() => <div>MockedSymbolSearchResults</div>));
-jest.mock('AppV2/Components/SymbolsSearchField', () => jest.fn(() => <div>MockedSymbolsSearchField</div>));
-jest.mock('AppV2/Components/MarketCategories', () => jest.fn(() => <div>MockedMarketCategories</div>));
+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(() => <div>{symbol_search_results}</div>));
+jest.mock('AppV2/Components/MarketCategories', () => jest.fn(() => <div>{market_categories}</div>));
 
 jest.mock('AppV2/Hooks/useActiveSymbols', () => ({
     ...jest.requireActual('AppV2/Hooks/useActiveSymbols'),
@@ -22,30 +27,63 @@ describe('<ActiveSymbolsList />', () => {
         isOpen: true,
         setIsOpen: jest.fn(),
     };
-    const mocked_store = {
-        modules: {
-            trade: {
-                symbol: '',
-                setTickData: jest.fn(),
+    let default_mock_store: ReturnType<typeof mockStore>;
+
+    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<typeof ActiveSymbolsList>[0]
-    ) => {
+        });
+    });
+
+    const MockActiveSymbolsList = (mocked_store: TCoreStores) => {
         return (
             <TraderProviders store={mocked_store}>
                 <ActiveSymbolsList {...mocked_props} />
             </TraderProviders>
         );
     };
-    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
@@ -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 (
         <React.Fragment>

diff --git 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}%
                 </CaptionText>
             ) : (
-                <Skeleton.Square width={36} height={18} rounded />
+                <Skeleton.Square width={36} height={12} rounded />
             )}
         </div>
     );