From 25de53818940c217569da9abdce866cdbad50e01 Mon Sep 17 00:00:00 2001
From: Maryia <103177211+maryia-deriv@users.noreply.github.com>
Date: Fri, 21 Jun 2024 05:25:15 +0300
Subject: [PATCH] fix: dtrader url params missing upon return from c.details/if
DTrader is selected from Header twice (#15676)
---
packages/core/package.json | 1 +
.../__tests__/platform-dropdown.spec.tsx | 66 ++++++++++++-------
.../Layout/Header/platform-dropdown.jsx | 1 +
.../utils/contract/trade-url-params-config.ts | 2 +-
.../src/Stores/Modules/Trading/trade-store.ts | 7 ++
5 files changed, 54 insertions(+), 23 deletions(-)
diff --git a/packages/core/package.json b/packages/core/package.json
index 73aee11ea283..7cf05f6a9b0b 100644
--- 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
index b60d041ad119..aca622a976bd 100644
--- 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 (
-
+
-
+
);
};
@@ -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(
- '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();
expect(screen.getByTestId('dt_platform_dropdown')).toBeInTheDocument();
+ expect(screen.getByText(tradershub_redirect)).toBeInTheDocument();
rerender(
'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();
+
+ 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();
+
+ 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
index 519380fcf34c..f15ae60962ef 100644
--- 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()}
>
diff --git a/packages/shared/src/utils/contract/trade-url-params-config.ts b/packages/shared/src/utils/contract/trade-url-params-config.ts
index a3ae940b1b32..d7cb1a7ced03 100644
--- 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
index 1a0ec8bba43f..48b57f238753 100644
--- 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);