fix: dtrader url params missing upon return from c.details/if DTrader…

… is selected from Header twice (deriv-com#15676)
kate-deriv · Jun 21, 2024 · 25de538 · 25de538
1 parent 87c0c35
commit 25de538
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 23 deletions.
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -58,6 +58,7 @@
         "eslint-plugin-react": "^7.22.0",
         "eslint-plugin-react-hooks": "^4.2.0",
         "file-loader": "^6.2.0",
+        "history": "^5.0.0",
         "gh-pages": "^2.1.1",
         "git-revision-webpack-plugin": "^5.0.0",
         "html-loader": "^1.3.2",

diff --git a/packages/core/src/App/Components/Layout/Header/__tests__/platform-dropdown.spec.tsx b/packages/core/src/App/Components/Layout/Header/__tests__/platform-dropdown.spec.tsx
@@ -1,9 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { render, screen } from '@testing-library/react';
-import { BrowserRouter } from 'react-router-dom';
-import { PlatformDropdown, PlatformBox } from '../platform-dropdown';
+import userEvent from '@testing-library/user-event';
+import { createBrowserHistory } from 'history';
+import { Router } from 'react-router-dom';
 import { StoreProvider, mockStore } from '@deriv/stores';
+import { routes } from '@deriv/shared';
+import { PlatformDropdown, PlatformBox } from '../platform-dropdown';
 
 type TMockPlatformDropdown = {
     platform_config: {
@@ -14,19 +17,21 @@ type TMockPlatformDropdown = {
     }[];
 };
 
-const store = mockStore();
+const history = createBrowserHistory();
+const store = mockStore({});
 
 const MockPlatformDropdown = ({ platform_config }: TMockPlatformDropdown) => {
     return (
-        <BrowserRouter>
+        <Router history={history}>
             <StoreProvider store={store}>
                 <PlatformDropdown
                     platform_config={platform_config}
                     app_routing_history={[{ pathname: '' }]}
                     closeDrawer={jest.fn()}
+                    setTogglePlatformType={jest.fn()}
                 />
             </StoreProvider>
-        </BrowserRouter>
+        </Router>
     );
 };
 
@@ -45,34 +50,51 @@ describe('PlatformBox component', () => {
 });
 
 describe('PlatformDropdown component', () => {
-    beforeAll(() => (ReactDOM.createPortal = jest.fn(element => element)));
-    afterEach(() => ReactDOM.createPortal.mockClear());
+    const tradershub_redirect = "Looking for CFDs? Go to Trader's Hub";
+    const dtrader_description = 'DTrader description';
+    const dtrader_platform_config = {
+        link_to: routes.trade,
+        name: 'DTrader',
+        description: () => 'DTrader description',
+    };
+    const dtrader_url_params = '?chart_type=area&interval=1t&symbol=1HZ100V&trade_type=accumulator';
 
-    it('should render proper component base on the "link_to" property', () => {
-        const { rerender } = render(
-            <MockPlatformDropdown
-                platform_config={[
-                    {
-                        link_to: '/test',
-                        name: 'DTrader',
-                        description: () => 'test description',
-                    },
-                ]}
-            />
-        );
+    beforeAll(() => (ReactDOM.createPortal = jest.fn(element => element) as jest.Mock));
+    afterEach(() => (ReactDOM.createPortal as jest.Mock).mockClear());
+
+    it('should render TradersHubRedirect & proper components based on whether or not "link_to" property is passed', () => {
+        const { rerender } = render(<MockPlatformDropdown platform_config={[dtrader_platform_config]} />);
         expect(screen.getByTestId('dt_platform_dropdown')).toBeInTheDocument();
+        expect(screen.getByText(tradershub_redirect)).toBeInTheDocument();
 
         rerender(
             <MockPlatformDropdown
                 platform_config={[
                     {
-                        href: '/test',
-                        name: 'DTrader',
-                        description: () => 'test description',
+                        ...dtrader_platform_config,
+                        link_to: undefined,
+                        href: routes.trade,
                     },
                 ]}
             />
         );
         expect(screen.getByTestId('dt_platform_dropdown_link')).toBeInTheDocument();
+        expect(screen.getByText(tradershub_redirect)).toBeInTheDocument();
+    });
+    it('should update URL when clicking on another (non-selected) platform', () => {
+        history.push(routes.bot);
+        render(<MockPlatformDropdown platform_config={[dtrader_platform_config]} />);
+
+        userEvent.click(screen.getByText(dtrader_description));
+        expect(history.location.pathname).toBe(routes.trade);
+        expect(history.location.search).toBe('');
+    });
+    it('should not update URL when clicking on an already selected platform', () => {
+        history.push(routes.trade + dtrader_url_params);
+        render(<MockPlatformDropdown platform_config={[dtrader_platform_config]} />);
+
+        userEvent.click(screen.getByText(dtrader_description));
+        expect(history.location.pathname).toBe(routes.trade);
+        expect(history.location.search).toBe(dtrader_url_params);
     });
 });
diff --git a/packages/core/src/App/Components/Layout/Header/platform-dropdown.jsx b/packages/core/src/App/Components/Layout/Header/platform-dropdown.jsx
@@ -28,6 +28,7 @@ const PlatformDropdownContent = ({ platform, app_routing_history }) => {
                 exact={platform.link_to === routes.trade}
                 className='platform-dropdown__list-platform'
                 isActive={() => getActivePlatform(app_routing_history) === platform.name}
+                onClick={e => window.location.pathname.startsWith(platform.link_to) && e.preventDefault()}
             >
                 <PlatformBox platform={platform} />
             </BinaryLink>

diff --git a/packages/shared/src/utils/contract/trade-url-params-config.ts b/packages/shared/src/utils/contract/trade-url-params-config.ts
@@ -10,7 +10,7 @@ type TGetTradeURLParamsArgs = {
 type TTradeUrlParams = {
     contractType?: string;
     chartType?: string;
-    granularity?: number;
+    granularity?: number | null;
     symbol?: string;
 };
 

diff --git a/packages/trader/src/Stores/Modules/Trading/trade-store.ts b/packages/trader/src/Stores/Modules/Trading/trade-store.ts
@@ -1564,6 +1564,13 @@ export default class TradeStore extends BaseStore {
     onMount() {
         this.root_store.notifications.removeTradeNotifications();
         if (this.is_trade_component_mounted && this.should_skip_prepost_lifecycle) {
+            const { chart_type, granularity } = this.root_store.contract_trade;
+            setTradeURLParams({
+                chartType: chart_type,
+                granularity,
+                symbol: this.symbol,
+                contractType: this.contract_type,
+            });
             return;
         }
         this.root_store.notifications.setShouldShowPopups(false);