Loading...
,
initSurvicate: () => script...
,
}));
+
+jest.mock('react-toastify/dist/ReactToastify.css', () => jest.fn());
+jest.mock('@deriv/bot-skeleton/src/scratch/dbot', () => jest.fn());
+
+jest.mock('Components/bot-notification-messages', () => ({
+ __esModule: true,
+ default: () =>
diff --git a/packages/bot-web-ui/src/components/draggable/__tests__/draggable.spec.tsx b/packages/bot-web-ui/src/components/draggable/__tests__/draggable.spec.tsx
index 2d50c4e7d0eb..d5cdd938d5df 100644
--- a/packages/bot-web-ui/src/components/draggable/__tests__/draggable.spec.tsx
+++ b/packages/bot-web-ui/src/components/draggable/__tests__/draggable.spec.tsx
@@ -21,13 +21,16 @@ const mock_close = jest.fn();
const setBoundary = () => {
// eslint-disable-next-line testing-library/no-node-access
- spyOn(document.querySelector('.main') as Element, 'getBoundingClientRect').and.returnValue({
+ jest.spyOn(document.querySelector('.main') as Element, 'getBoundingClientRect').mockReturnValue({
width: 1920,
height: 1080,
top: 0,
left: 0,
right: 1920,
bottom: 1080,
+ x: 0,
+ y: 0,
+ toJSON: () => ({ width: 1920, height: 1080, top: 0, left: 0, right: 1920, bottom: 1080, x: 0, y: 0 }),
});
};
diff --git a/packages/bot-web-ui/src/components/journal/journal-components/__tests__/journal-loader.spec.tsx b/packages/bot-web-ui/src/components/journal/journal-components/__tests__/journal-loader.spec.tsx
index f378be169f54..9f7133abde53 100644
--- a/packages/bot-web-ui/src/components/journal/journal-components/__tests__/journal-loader.spec.tsx
+++ b/packages/bot-web-ui/src/components/journal/journal-components/__tests__/journal-loader.spec.tsx
@@ -1,6 +1,5 @@
import React from 'react';
import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
import JournalLoader from '../journal-loader';
jest.mock('react-content-loader', () => {
diff --git a/packages/bot-web-ui/src/components/journal/journal.types.ts b/packages/bot-web-ui/src/components/journal/journal.types.ts
index 383a9f934cdd..83cdd20d40fa 100644
--- a/packages/bot-web-ui/src/components/journal/journal.types.ts
+++ b/packages/bot-web-ui/src/components/journal/journal.types.ts
@@ -86,6 +86,7 @@ export type TJournalDataListArgs = {
is_new_row: boolean;
is_scrolling: boolean;
measure: () => void;
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
passthrough?: any;
row: TFilterMessageValues;
};
diff --git a/packages/bot-web-ui/src/components/load-modal/recent-workspace.tsx b/packages/bot-web-ui/src/components/load-modal/recent-workspace.tsx
index f455b5f94fe7..7b2ba94dbf48 100644
--- a/packages/bot-web-ui/src/components/load-modal/recent-workspace.tsx
+++ b/packages/bot-web-ui/src/components/load-modal/recent-workspace.tsx
@@ -7,6 +7,7 @@ import { observer } from '@deriv/stores';
import { useDBotStore } from 'Stores/useDBotStore';
type TRecentWorkspaceProps = {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
workspace: { [key: string]: any };
};
diff --git a/packages/bot-web-ui/src/constants/contract.ts b/packages/bot-web-ui/src/constants/contract.ts
index d175cc0e7d1b..ef3ff33f5cc4 100644
--- a/packages/bot-web-ui/src/constants/contract.ts
+++ b/packages/bot-web-ui/src/constants/contract.ts
@@ -190,6 +190,7 @@ export type TValidationRuleIndex =
| 'has_contract_update_take_profit'
| 'contract_update_take_profit';
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
type ValidationRuleFunc = (value: number, options: any, contract_store: TContractStore) => boolean;
type ValidationConditionFunc = (contract_store: TContractStore) => boolean;
@@ -200,14 +201,14 @@ type Rule =
{
condition: ValidationConditionFunc;
message: string;
- }
+ },
]
| [
'custom',
{
func: ValidationRuleFunc;
message: string;
- }
+ },
];
type Rules = {
diff --git a/packages/bot-web-ui/src/constants/quick-strategies/index.ts b/packages/bot-web-ui/src/constants/quick-strategies/index.ts
index e3605f1305dd..9000d80fc085 100644
--- a/packages/bot-web-ui/src/constants/quick-strategies/index.ts
+++ b/packages/bot-web-ui/src/constants/quick-strategies/index.ts
@@ -1,7 +1,7 @@
+export { ACCUMULATORS_DALEMBERT } from './accumulators_dalembert';
export { D_ALEMBERT } from './d_alembert';
export { MARTINGALE } from './martingale';
export { OSCARS_GRIND } from './oscars_grind';
export { REVERSE_D_ALEMBERT } from './reverse_dalembert';
export { REVERSE_MARTINGALE } from './reverse_martingale';
export { STRATEGY_1_3_2_6 } from './strategy_1_3_2_6';
-export { ACCUMULATORS_DALEMBERT } from './accumulators_dalembert';
diff --git a/packages/bot-web-ui/src/pages/bot-builder/quick-strategy/__tests__/quick-strategy.spec.tsx b/packages/bot-web-ui/src/pages/bot-builder/quick-strategy/__tests__/quick-strategy.spec.tsx
index e1e45613b1c5..17758522a7b4 100644
--- a/packages/bot-web-ui/src/pages/bot-builder/quick-strategy/__tests__/quick-strategy.spec.tsx
+++ b/packages/bot-web-ui/src/pages/bot-builder/quick-strategy/__tests__/quick-strategy.spec.tsx
@@ -236,8 +236,8 @@ describe('
', () => {
wrapper,
});
- await waitFor(() => {
- userEvent.click(screen.getByTestId('qs-run-button'));
+ await waitFor(async () => {
+ await userEvent.click(screen.getByTestId('qs-run-button'));
});
expect(mock_DBot_store?.quick_strategy?.is_open).toBeFalsy();
@@ -252,8 +252,8 @@ describe('
', () => {
expect(close_button).toBeInTheDocument();
- await waitFor(() => {
- userEvent.click(close_button);
+ await waitFor(async () => {
+ await userEvent.click(close_button);
});
expect(mock_DBot_store.quick_strategy.is_open).toBeFalsy();
diff --git a/packages/bot-web-ui/src/pages/bot-builder/quick-strategy/quick-strategy.tsx b/packages/bot-web-ui/src/pages/bot-builder/quick-strategy/quick-strategy.tsx
index ab9cc7e4391a..19d90c86784a 100644
--- a/packages/bot-web-ui/src/pages/bot-builder/quick-strategy/quick-strategy.tsx
+++ b/packages/bot-web-ui/src/pages/bot-builder/quick-strategy/quick-strategy.tsx
@@ -100,12 +100,14 @@ const FormikWrapper: React.FC
= observer(({ children }) => {
}, []);
const updateSchema = (formikData: TFormData) => {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
const sub_schema: Record = {};
config.forEach(group => {
if (!group?.length) return null;
group.forEach(async field => {
if (field?.validation?.length && field?.name) {
if (field.validation.includes('number')) {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
let schema: Record = Yup.number().typeError(localize('Must be a number'));
let min = 0;
let max = 10;
diff --git a/packages/bot-web-ui/src/pages/chart/v1.ts b/packages/bot-web-ui/src/pages/chart/v1.ts
index 55e0cb30fb37..89ed8ab2d858 100644
--- a/packages/bot-web-ui/src/pages/chart/v1.ts
+++ b/packages/bot-web-ui/src/pages/chart/v1.ts
@@ -1,6 +1,7 @@
import React from 'react';
import { getUrlBase, moduleLoader } from '@deriv/shared';
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
let module: Promise | undefined;
const init = () => {
diff --git a/packages/bot-web-ui/src/pages/dashboard/announcements/__tests__/announcements.spec.tsx b/packages/bot-web-ui/src/pages/dashboard/announcements/__tests__/announcements.spec.tsx
index b6fd20aa9fd2..4167c98f7cb5 100644
--- a/packages/bot-web-ui/src/pages/dashboard/announcements/__tests__/announcements.spec.tsx
+++ b/packages/bot-web-ui/src/pages/dashboard/announcements/__tests__/announcements.spec.tsx
@@ -46,22 +46,22 @@ describe('Announcements', () => {
wrapper,
});
const button = screen.getByTestId('btn-announcements');
- userEvent.click(button);
+ await userEvent.click(button);
- await waitFor(() => {
+ await waitFor(async () => {
// eslint-disable-next-line testing-library/no-node-access, testing-library/no-container
const notification_button = container.querySelectorAll('.notification__button')[2];
expect(notification_button).toBeInTheDocument();
- userEvent.click(notification_button);
+ await userEvent.click(notification_button);
});
- await waitFor(() => {
+ await waitFor(async () => {
const amount = screen.getByTestId('announcements__amount').textContent;
expect(amount).toBe(`${BOT_ANNOUNCEMENTS_LIST.length - 1}`);
const button_cancel = screen.getByRole('button', { name: /Learn more/i });
- userEvent.click(button_cancel);
+ await userEvent.click(button_cancel);
});
await waitFor(() => {
expect(mock_DBot_store?.dashboard.setActiveTab(DBOT_TABS.TUTORIAL));
@@ -73,22 +73,22 @@ describe('Announcements', () => {
wrapper,
});
const button = screen.getByTestId('btn-announcements');
- userEvent.click(button);
+ await userEvent.click(button);
- await waitFor(() => {
+ await waitFor(async () => {
// eslint-disable-next-line testing-library/no-node-access, testing-library/no-container
const notification_button = container.querySelectorAll('.notification__button')[2];
expect(notification_button).toBeInTheDocument();
- userEvent.click(notification_button);
+ await userEvent.click(notification_button);
});
- await waitFor(() => {
+ await waitFor(async () => {
const amount = screen.getByTestId('announcements__amount').textContent;
expect(amount).toBe(`${BOT_ANNOUNCEMENTS_LIST.length - 1}`);
const buttonConfirm = screen.getByRole('button', { name: /Try now/i });
- userEvent.click(buttonConfirm);
+ await userEvent.click(buttonConfirm);
});
await waitFor(() => {
expect(mock_DBot_store?.dashboard.setActiveTab(DBOT_TABS.BOT_BUILDER));
@@ -101,24 +101,24 @@ describe('Announcements', () => {
});
const button_announcements = screen.getByTestId('btn-announcements');
- userEvent.click(button_announcements);
+ await userEvent.click(button_announcements);
- const button_mark_all_as_read = screen.getByRole('button', { name: /Mark all as read/i });
- userEvent.click(button_mark_all_as_read);
+ const button_mark_all_as_read = await screen.findByRole('button', { name: /Mark all as read/i });
+ await userEvent.click(button_mark_all_as_read);
await waitFor(() => {
expect(screen.queryByTestId('announcements__amount')).not.toBeInTheDocument();
});
});
- it('should display all active announcements when bot-announcements has already existed in local storage.', () => {
+ it('should display all active announcements when bot-announcements has already existed in local storage.', async () => {
localStorage?.setItem('bot-announcements', JSON.stringify({ ...BOT_ANNOUNCEMENTS_LIST }));
render(, {
wrapper,
});
const button = screen.getByTestId('btn-announcements');
- userEvent.click(button);
+ await userEvent.click(button);
expect(screen.getByTestId('announcements__amount')).toHaveTextContent(`${BOT_ANNOUNCEMENTS_LIST.length}`);
});
diff --git a/packages/bot-web-ui/src/stores/dashboard-store.ts b/packages/bot-web-ui/src/stores/dashboard-store.ts
index 0333cbd721a2..60852b2b0b96 100644
--- a/packages/bot-web-ui/src/stores/dashboard-store.ts
+++ b/packages/bot-web-ui/src/stores/dashboard-store.ts
@@ -140,6 +140,7 @@ export default class DashboardStore implements IDashboardStore {
.join(' ')}`;
});
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
const getQSDescriptionContent = (strategy: any) => {
if (!strategy) return [];
const content: string[] = [];
diff --git a/packages/bot-web-ui/src/stores/flyout-store.ts b/packages/bot-web-ui/src/stores/flyout-store.ts
index 5d24a2bf14db..c5066fdc0a0b 100644
--- a/packages/bot-web-ui/src/stores/flyout-store.ts
+++ b/packages/bot-web-ui/src/stores/flyout-store.ts
@@ -5,6 +5,7 @@ import GTM from 'Utils/gtm';
import RootStore from './root-store';
export interface IFlyoutStore {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
block_listeners: any[];
block_workspaces: Element[];
flyout_min_width: number;
@@ -33,6 +34,7 @@ export interface IFlyoutStore {
setIsSearchFlyout: (is_search: boolean) => void;
setSelectedCategory: (selected_category: Element | null) => void;
getSelectedCategory: () => Element | null;
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
onClickOutsideFlyout: (event: any) => void;
refreshCategory: () => void;
variables_blocks_count: number;
diff --git a/packages/bot-web-ui/src/stores/load-modal-store.ts b/packages/bot-web-ui/src/stores/load-modal-store.ts
index a6d1fa9c42f5..2a91b0fd4eb0 100644
--- a/packages/bot-web-ui/src/stores/load-modal-store.ts
+++ b/packages/bot-web-ui/src/stores/load-modal-store.ts
@@ -323,6 +323,7 @@ export default class LoadModalStore {
refreshStrategiesTheme = async () => {
if (this.recent_workspace) {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
(this.recent_workspace as any).RTL = isDbotRTL();
}
await load({
@@ -524,6 +525,7 @@ export default class LoadModalStore {
const ref_preview = document?.getElementById('load-strategy__blockly-container');
if (!this.recent_workspace) this.recent_workspace = window.Blockly.inject(ref_preview, inject_options);
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
(this.recent_workspace as any).RTL = isDbotRTL();
const convertedDom = window.Blockly?.utils?.xml?.textToDom(this.selected_strategy?.xml);
@@ -544,6 +546,7 @@ export default class LoadModalStore {
load_options.workspace = this.local_workspace;
if (load_options.workspace) {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
(load_options.workspace as any).RTL = isDbotRTL();
}
diff --git a/packages/bot-web-ui/src/stores/run-panel-store.ts b/packages/bot-web-ui/src/stores/run-panel-store.ts
index 3e176e9c790c..34367e8d66da 100644
--- a/packages/bot-web-ui/src/stores/run-panel-store.ts
+++ b/packages/bot-web-ui/src/stores/run-panel-store.ts
@@ -612,6 +612,7 @@ export default class RunPanelStore {
}
};
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
onError = (data: { error: any }) => {
// data.error for API errors, data for code errors
const error = data.error || data;
diff --git a/packages/bot-web-ui/src/stores/toolbox-store.ts b/packages/bot-web-ui/src/stores/toolbox-store.ts
index 27cbb60b0d27..ece8abf881cd 100644
--- a/packages/bot-web-ui/src/stores/toolbox-store.ts
+++ b/packages/bot-web-ui/src/stores/toolbox-store.ts
@@ -284,6 +284,7 @@ export default class ToolboxStore {
})
.flat();
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
const pushIfNotExists = (array: any[] = [], element_to_push = {}) => {
if (!array.some(element => element === element_to_push)) {
array.push(element_to_push);
diff --git a/packages/bot-web-ui/src/types/dbot.types.ts b/packages/bot-web-ui/src/types/dbot.types.ts
index ccec44a600dd..03cd2839ebb4 100644
--- a/packages/bot-web-ui/src/types/dbot.types.ts
+++ b/packages/bot-web-ui/src/types/dbot.types.ts
@@ -24,8 +24,11 @@ export type TDbot = {
centerAndHighlightBlock: (block_id: string, should_animate?: boolean) => void;
unHighlightAllBlocks: () => void;
checkForRequiredBlocks: () => boolean;
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
valueInputLimitationsListener: (event: any, force_check?: boolean) => void | boolean;
getStrategySounds: () => unknown[];
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
handleDragOver?: (event: any) => void;
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
handleDropOver?: (event: any, handleFileChange: () => void) => void;
};
diff --git a/packages/bot-web-ui/src/utils/session-storage.ts b/packages/bot-web-ui/src/utils/session-storage.ts
index 17aa2b16a139..b43c406b27ee 100644
--- a/packages/bot-web-ui/src/utils/session-storage.ts
+++ b/packages/bot-web-ui/src/utils/session-storage.ts
@@ -1,5 +1,6 @@
import LZString from 'lz-string';
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
export const getStoredItemsByUser = (storage_key: string, loginid?: string, default_value?: any) => {
if (!loginid) {
return default_value;
@@ -9,6 +10,7 @@ export const getStoredItemsByUser = (storage_key: string, loginid?: string, defa
return storage[loginid] || default_value;
};
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
export const getStoredItemsByKey = (storage_key: string, default_value: any) => {
try {
const session_storage_item = sessionStorage.getItem(storage_key);
@@ -25,6 +27,7 @@ export const getStoredItemsByKey = (storage_key: string, default_value: any) =>
return default_value;
};
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
export const setStoredItemsByKey = (storage_key: string, value: any) => {
try {
const compressed_value = LZString.compress(JSON.stringify(value));
diff --git a/packages/bot-web-ui/src/utils/settings.ts b/packages/bot-web-ui/src/utils/settings.ts
index 7b04b0c14f91..ae2bf14641e4 100644
--- a/packages/bot-web-ui/src/utils/settings.ts
+++ b/packages/bot-web-ui/src/utils/settings.ts
@@ -8,6 +8,7 @@ export const getSetting = (key: string) => {
return settings[key];
};
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
export const storeSetting = (key: string, value: any) => {
const settings = getSettingsFromLocal() || {};
settings[key] = value;
diff --git a/packages/bot-web-ui/webpack.config.js b/packages/bot-web-ui/webpack.config.js
index fa0707ddd6cb..8e3f4332e314 100644
--- a/packages/bot-web-ui/webpack.config.js
+++ b/packages/bot-web-ui/webpack.config.js
@@ -29,8 +29,10 @@ module.exports = function (env) {
publicPath: base,
},
devServer: {
- publicPath: '/dist/',
- disableHostCheck: true,
+ static: {
+ publicPath: '/dist/',
+ },
+ allowedHosts: 'all',
},
mode: IS_RELEASE ? 'production' : 'development',
devtool: IS_RELEASE ? 'source-map' : 'eval-cheap-module-source-map',
@@ -131,7 +133,12 @@ module.exports = function (env) {
}),
new StyleLintPlugin({ fix: true }),
new CopyWebpackPlugin({
- patterns: [{ from: 'node_modules/@deriv/bot-skeleton/dist/media', to: 'bot/media' }],
+ patterns: [
+ {
+ from: path.resolve(__dirname, '../../', 'node_modules/@deriv/bot-skeleton/dist/media'),
+ to: 'bot/media',
+ },
+ ],
}),
new SpriteLoaderPlugin(),
],
@@ -148,7 +155,7 @@ module.exports = function (env) {
'mobx-react': 'mobx-react',
'react-dom': 'react-dom',
'@deriv/deriv-charts': '@deriv/deriv-charts',
- '@deriv-com/analytics': `@deriv-com/analytics`,
+ '@deriv-com/analytics': '@deriv-com/analytics',
},
/^@deriv\/shared\/.+$/,
/^@deriv\/components\/.+$/,
diff --git a/packages/cashier/.eslintrc.js b/packages/cashier/.eslintrc.js
index 6ec306ab82a5..d3afa1a5c263 100644
--- a/packages/cashier/.eslintrc.js
+++ b/packages/cashier/.eslintrc.js
@@ -5,6 +5,10 @@ module.exports = {
settings: {
'import/resolver': {
webpack: { config: webpackConfig({}) },
- }
+ },
+ },
+ rules: {
+ 'simple-import-sort/imports': 'warn',
+ 'prettier/prettier': 'warn',
},
};
diff --git a/packages/cashier/babel.config.json b/packages/cashier/babel.config.json
index 4b9a311848ac..1cf094051be8 100644
--- a/packages/cashier/babel.config.json
+++ b/packages/cashier/babel.config.json
@@ -3,7 +3,7 @@
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-transform-class-properties", { "loose": true }],
- ["@babel/plugin-proposal-private-methods", { "loose": true }],
+ ["@babel/plugin-transform-private-methods", { "loose": true }],
["@babel/plugin-transform-private-property-in-object", { "loose": true }],
"@babel/plugin-proposal-export-default-from",
"@babel/plugin-transform-object-rest-spread",
diff --git a/packages/cashier/jest.config.js b/packages/cashier/jest.config.js
index bf61b987be3a..b846f6d6d055 100644
--- a/packages/cashier/jest.config.js
+++ b/packages/cashier/jest.config.js
@@ -15,6 +15,7 @@ module.exports = {
'^Utils/(.*)$': '/src/utils/$1',
'^Containers/(.*)$': '/src/containers/$1',
'^Pages/(.*)$': '/src/pages/$1',
+ '@deriv-com/ui': '/../../__mocks__/deriv-com.ui.mock.js',
},
testPathIgnorePatterns: ['/Routes/', '/validator/'],
coveragePathIgnorePatterns: [
diff --git a/packages/cashier/package.json b/packages/cashier/package.json
index 26eef490e494..f7d72bd6f908 100644
--- a/packages/cashier/package.json
+++ b/packages/cashier/package.json
@@ -77,7 +77,7 @@
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/preset-env": "^7.25.4",
"@babel/preset-react": "^7.24.7",
- "@testing-library/react": "^12.0.0",
+ "@testing-library/react": "^12.1.5",
"@testing-library/user-event": "^13.5.0",
"@types/loadjs": "^4.0.1",
"@types/qrcode.react": "^1.0.2",
@@ -85,7 +85,7 @@
"@types/react-dom": "^18.0.0",
"babel-loader": "^9.2.1",
"clean-webpack-plugin": "^3.0.0",
- "copy-webpack-plugin": "^9.0.1",
+ "copy-webpack-plugin": "^12.0.2",
"css-loader": "^5.0.1",
"css-minimizer-webpack-plugin": "^3.0.1",
"file-loader": "^6.2.0",
@@ -101,8 +101,8 @@
"sass-resources-loader": "^2.1.1",
"typescript": "^4.6.3",
"webpack": "^5.81.0",
- "webpack-cli": "^4.7.2",
+ "webpack-cli": "^5.1.4",
"webpack-manifest-plugin": "^4.0.2",
"webpack-node-externals": "^2.5.2"
}
-}
\ No newline at end of file
+}
diff --git a/packages/cashier/src/pages/account-transfer/account-transfer-form/__tests__/account-transfer-form.spec.tsx b/packages/cashier/src/pages/account-transfer/account-transfer-form/__tests__/account-transfer-form.spec.tsx
index 869546b37378..f99366f732d2 100644
--- a/packages/cashier/src/pages/account-transfer/account-transfer-form/__tests__/account-transfer-form.spec.tsx
+++ b/packages/cashier/src/pages/account-transfer/account-transfer-form/__tests__/account-transfer-form.spec.tsx
@@ -109,14 +109,13 @@ describe('', () => {
},
});
});
+ let modal_root_el: HTMLDivElement;
beforeAll(() => {
- const modal_root_el = document.createElement('div');
+ modal_root_el = document.createElement('div');
modal_root_el.setAttribute('id', 'modal_root');
document.body.appendChild(modal_root_el);
});
afterAll(() => {
- const modal_root_el = document.createElement('div');
- modal_root_el.setAttribute('id', 'modal_root');
document.body.removeChild(modal_root_el);
});
@@ -204,7 +203,7 @@ describe('', () => {
renderAccountTransferForm();
- userEvent.type(screen.getByTestId('dt_account_transfer_form_input'), '1');
+ await userEvent.type(screen.getByTestId('dt_account_transfer_form_input'), '1');
expect(await screen.findByText('Unavailable as your documents are still under review')).toBeInTheDocument();
expect(screen.getByRole('button', { name: 'Transfer' })).toBeDisabled();
diff --git a/packages/cashier/src/pages/withdrawal/withdrawal-crypto-form/__tests__/withdrawal-crypto-form.spec.tsx b/packages/cashier/src/pages/withdrawal/withdrawal-crypto-form/__tests__/withdrawal-crypto-form.spec.tsx
index a9260322af9c..7f40c25501ab 100644
--- a/packages/cashier/src/pages/withdrawal/withdrawal-crypto-form/__tests__/withdrawal-crypto-form.spec.tsx
+++ b/packages/cashier/src/pages/withdrawal/withdrawal-crypto-form/__tests__/withdrawal-crypto-form.spec.tsx
@@ -51,6 +51,8 @@ describe('', () => {
onChangeConverterFromAmount: jest.fn(),
onChangeConverterToAmount: jest.fn(),
resetConverter: jest.fn(),
+ converter_from_amount: '0.0000',
+ converter_to_amount: '0',
},
withdraw: {
blockchain_address: 'tb1ql7w62elx9ucw4pj5lgw4l028hmuw80sndtntxt',
diff --git a/packages/cashier/src/stores/__tests__/account-transfer-store.spec.ts b/packages/cashier/src/stores/__tests__/account-transfer-store.spec.ts
index a126cd4c96b8..05af9721d1e5 100644
--- a/packages/cashier/src/stores/__tests__/account-transfer-store.spec.ts
+++ b/packages/cashier/src/stores/__tests__/account-transfer-store.spec.ts
@@ -421,7 +421,7 @@ describe('AccountTransferStore', () => {
});
it('should not sort and set accounts if there is an error in transfer_between_accounts response when calling sortAccountsTransfer method', async () => {
- const spySetAccounts = spyOn(account_transfer_store, 'setAccounts');
+ const spySetAccounts = jest.spyOn(account_transfer_store, 'setAccounts');
(account_transfer_store.WS.authorized.transferBetweenAccounts as jest.Mock).mockResolvedValueOnce({
error: 'Transfer error',
});
@@ -720,8 +720,8 @@ describe('AccountTransferStore', () => {
});
it('should reset account transfer', () => {
- const spySetIsTransferConfirm = spyOn(account_transfer_store, 'setIsTransferConfirm');
- const spySetTransferLimit = spyOn(account_transfer_store, 'setTransferLimit');
+ const spySetIsTransferConfirm = jest.spyOn(account_transfer_store, 'setIsTransferConfirm');
+ const spySetTransferLimit = jest.spyOn(account_transfer_store, 'setTransferLimit');
account_transfer_store.resetAccountTransfer();
expect(spySetIsTransferConfirm).toHaveBeenCalledWith(false);
diff --git a/packages/cashier/src/stores/__tests__/iframe-store.spec.ts b/packages/cashier/src/stores/__tests__/iframe-store.spec.ts
index 8471cbe2151e..a491d0caa493 100644
--- a/packages/cashier/src/stores/__tests__/iframe-store.spec.ts
+++ b/packages/cashier/src/stores/__tests__/iframe-store.spec.ts
@@ -8,6 +8,11 @@ configure({ safeDescriptors: false });
let iframe_store: IframeStore, root_store: TRootStore;
beforeEach(() => {
+ jest.useFakeTimers({ legacyFakeTimers: true });
+ jest.spyOn(global, 'setInterval');
+ jest.spyOn(global, 'clearInterval');
+ jest.spyOn(global, 'setTimeout');
+ jest.spyOn(global, 'clearTimeout');
root_store = mockStore({
client: {
setVerificationCode: jest.fn(),
@@ -46,7 +51,7 @@ describe('IframeStore', () => {
});
it('should clear timeout cashier url', () => {
- jest.useFakeTimers();
+ jest.useFakeTimers({ legacyFakeTimers: true });
iframe_store.timeout_session = 999;
iframe_store.clearTimeoutCashierUrl();
@@ -56,7 +61,7 @@ describe('IframeStore', () => {
});
it('should set timeout cashier url', () => {
- jest.useFakeTimers();
+ jest.useFakeTimers({ legacyFakeTimers: true });
const spyClearTimeoutCashierUrl = jest.spyOn(iframe_store, 'clearTimeoutCashierUrl');
const spySetSessionTimeout = jest.spyOn(iframe_store, 'setSessionTimeout');
diff --git a/packages/cashier/src/stores/__tests__/on-ramp-store.spec.ts b/packages/cashier/src/stores/__tests__/on-ramp-store.spec.ts
index 3c7dd65c37f4..314fc9d03e30 100644
--- a/packages/cashier/src/stores/__tests__/on-ramp-store.spec.ts
+++ b/packages/cashier/src/stores/__tests__/on-ramp-store.spec.ts
@@ -14,6 +14,12 @@ let banxa_provider: TOnRampProvider,
WS: DeepPartial;
beforeEach(() => {
+ jest.useFakeTimers({ legacyFakeTimers: true });
+ jest.spyOn(global, 'setInterval');
+ jest.spyOn(global, 'clearInterval');
+ jest.spyOn(global, 'setTimeout');
+ jest.spyOn(global, 'clearTimeout');
+
root_store = mockStore({
client: {
is_virtual: false,
@@ -63,13 +69,13 @@ describe('OnRampStore', () => {
onramp_store.setOnrampProviders(onramp_providers);
onramp_store.root_store.client.currency = 'USD';
- expect(onramp_store.filtered_onramp_providers.length).toBe(1);
+ expect(onramp_store.filtered_onramp_providers).toHaveLength(1);
});
it('should return three providers for BTC cryptocurrency', () => {
onramp_store.setOnrampProviders(onramp_providers);
- expect(onramp_store.filtered_onramp_providers.length).toBe(1);
+ expect(onramp_store.filtered_onramp_providers).toHaveLength(1);
});
it('should return proper onramp popup modal title if should_show_widget = true', () => {
@@ -185,7 +191,7 @@ describe('OnRampStore', () => {
});
it('should set api error and clear deposit address interval if there is an error in response when pollApiForDepositAddress method was called', async () => {
- jest.useFakeTimers();
+ jest.useFakeTimers({ legacyFakeTimers: true });
const spySetApiError = jest.spyOn(onramp_store, 'setApiError');
onramp_store.WS.authorized.cashier = jest
.fn()
@@ -199,7 +205,7 @@ describe('OnRampStore', () => {
});
it('should set empty deposit address when pollApiForDepositAddress method was called with should_allow_empty_address = true', async () => {
- jest.useFakeTimers();
+ jest.useFakeTimers({ legacyFakeTimers: true });
const spySetDepositAddress = jest.spyOn(onramp_store, 'setDepositAddress');
onramp_store.WS.authorized.cashier = jest.fn().mockResolvedValueOnce({ cashier: { deposit: { address: '' } } });
await onramp_store.pollApiForDepositAddress(true);
@@ -211,7 +217,7 @@ describe('OnRampStore', () => {
});
it('should set deposit address when pollApiForDepositAddress method was called with should_allow_empty_address = false', async () => {
- jest.useFakeTimers();
+ jest.useFakeTimers({ legacyFakeTimers: true });
const spySetDepositAddress = jest.spyOn(onramp_store, 'setDepositAddress');
await onramp_store.pollApiForDepositAddress(false);
@@ -222,7 +228,7 @@ describe('OnRampStore', () => {
});
it('should set deposit address interval to 3 seconds when pollApiForDepositAddress method was called', async () => {
- jest.useFakeTimers();
+ jest.useFakeTimers({ legacyFakeTimers: true });
await onramp_store.pollApiForDepositAddress(false);
jest.runOnlyPendingTimers();
@@ -233,7 +239,7 @@ describe('OnRampStore', () => {
});
it('should clear interval after 30 seconds if there is an empty deposit address in response when pollApiForDepositAddress method was called with should_allow_empty_address = false', async () => {
- jest.useFakeTimers();
+ jest.useFakeTimers({ legacyFakeTimers: true });
await onramp_store.pollApiForDepositAddress(false);
jest.runOnlyPendingTimers();
diff --git a/packages/cashier/src/stores/account-transfer-store.ts b/packages/cashier/src/stores/account-transfer-store.ts
index 7360359ced3b..4080db052325 100644
--- a/packages/cashier/src/stores/account-transfer-store.ts
+++ b/packages/cashier/src/stores/account-transfer-store.ts
@@ -24,7 +24,10 @@ import ErrorStore from './error-store';
const hasTransferNotAllowedLoginid = (loginid?: string) => loginid?.startsWith('MX');
export default class AccountTransferStore {
- constructor(public WS: TWebSocket, public root_store: TRootStore) {
+ constructor(
+ public WS: TWebSocket,
+ public root_store: TRootStore
+ ) {
makeObservable(this, {
accounts_list: observable,
error: observable,
diff --git a/packages/cashier/src/stores/cashier-store.ts b/packages/cashier/src/stores/cashier-store.ts
index f6658f4e87db..20fb5bd6c29b 100644
--- a/packages/cashier/src/stores/cashier-store.ts
+++ b/packages/cashier/src/stores/cashier-store.ts
@@ -22,7 +22,10 @@ export default class CashierStore {
transaction_history: TransactionHistoryStore;
withdraw: WithdrawStore;
- constructor(public root_store: TRootStore, public WS: TWebSocket) {
+ constructor(
+ public root_store: TRootStore,
+ public WS: TWebSocket
+ ) {
this.account_transfer = new AccountTransferStore(WS, root_store);
this.crypto_fiat_converter = new CryptoFiatConverterStore(root_store);
this.error = new ErrorStore();
diff --git a/packages/cashier/src/stores/general-store.ts b/packages/cashier/src/stores/general-store.ts
index 22ee4e3444c8..8518d975960e 100644
--- a/packages/cashier/src/stores/general-store.ts
+++ b/packages/cashier/src/stores/general-store.ts
@@ -6,7 +6,10 @@ import PaymentAgentStore from './payment-agent-store';
import type { TRootStore, TWebSocket } from '../types';
export default class GeneralStore extends BaseStore {
- constructor(public WS: TWebSocket, public root_store: TRootStore) {
+ constructor(
+ public WS: TWebSocket,
+ public root_store: TRootStore
+ ) {
super({ root_store });
makeObservable(this, {
diff --git a/packages/cashier/src/stores/on-ramp-store.ts b/packages/cashier/src/stores/on-ramp-store.ts
index abb398c40510..ac5e657fcbb5 100644
--- a/packages/cashier/src/stores/on-ramp-store.ts
+++ b/packages/cashier/src/stores/on-ramp-store.ts
@@ -6,7 +6,10 @@ import BaseStore from './base-store';
import type { TWebSocket, TRootStore, TOnRampProvider, TServerError } from '../types';
export default class OnRampStore extends BaseStore {
- constructor(public WS: TWebSocket, public root_store: TRootStore) {
+ constructor(
+ public WS: TWebSocket,
+ public root_store: TRootStore
+ ) {
super({ root_store });
makeObservable(this, {
diff --git a/packages/cashier/src/stores/payment-agent-store.ts b/packages/cashier/src/stores/payment-agent-store.ts
index 7ddef83af65d..84e630ee167e 100644
--- a/packages/cashier/src/stores/payment-agent-store.ts
+++ b/packages/cashier/src/stores/payment-agent-store.ts
@@ -19,7 +19,10 @@ import {
} from '../types';
export default class PaymentAgentStore {
- constructor(public WS: TWebSocket, public root_store: TRootStore) {
+ constructor(
+ public WS: TWebSocket,
+ public root_store: TRootStore
+ ) {
makeObservable(this, {
list: observable,
agents: observable,
diff --git a/packages/cashier/src/stores/payment-agent-transfer-store.ts b/packages/cashier/src/stores/payment-agent-transfer-store.ts
index 32881d06f8b2..80a41f0f55e8 100644
--- a/packages/cashier/src/stores/payment-agent-transfer-store.ts
+++ b/packages/cashier/src/stores/payment-agent-transfer-store.ts
@@ -11,7 +11,10 @@ import {
} from '../types';
export default class PaymentAgentTransferStore {
- constructor(public WS: TWebSocket, public root_store: TRootStore) {
+ constructor(
+ public WS: TWebSocket,
+ public root_store: TRootStore
+ ) {
makeObservable(this, {
error: observable,
is_try_transfer_successful: observable,
diff --git a/packages/cashier/src/stores/transaction-history-store.ts b/packages/cashier/src/stores/transaction-history-store.ts
index 5332373eb619..11876a7e0f04 100644
--- a/packages/cashier/src/stores/transaction-history-store.ts
+++ b/packages/cashier/src/stores/transaction-history-store.ts
@@ -2,7 +2,10 @@ import { action, observable, makeObservable } from 'mobx';
import type { TWebSocket, TRootStore } from '../types';
export default class TransactionHistoryStore {
- constructor(public WS: TWebSocket, public root_store: TRootStore) {
+ constructor(
+ public WS: TWebSocket,
+ public root_store: TRootStore
+ ) {
makeObservable(this, {
is_transactions_crypto_cancel_modal_visible: observable,
is_transactions_crypto_status_modal_visible: observable,
diff --git a/packages/cashier/src/stores/withdraw-store.ts b/packages/cashier/src/stores/withdraw-store.ts
index 09264496e36a..bf0b66ff8d30 100644
--- a/packages/cashier/src/stores/withdraw-store.ts
+++ b/packages/cashier/src/stores/withdraw-store.ts
@@ -7,7 +7,10 @@ import ErrorStore from './error-store';
import { TWebSocket, TRootStore } from '../types';
export default class WithdrawStore {
- constructor(public WS: TWebSocket, public root_store: TRootStore) {
+ constructor(
+ public WS: TWebSocket,
+ public root_store: TRootStore
+ ) {
makeObservable(this, {
blockchain_address: observable,
crypto_estimations_fee_unique_id: observable,
diff --git a/packages/cashier/src/types/routes.types.ts b/packages/cashier/src/types/routes.types.ts
index 9c961f04351d..7abde5e04187 100644
--- a/packages/cashier/src/types/routes.types.ts
+++ b/packages/cashier/src/types/routes.types.ts
@@ -8,6 +8,7 @@ export type TRoute = {
is_invisible?: boolean;
path?: string;
to?: string;
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
component?: React.FC; // Using `any` as the prop type of the component since at this point we don't know what the component is.
getTitle: () => string;
routes?: TRoute[];
diff --git a/packages/cfd/.eslintrc.js b/packages/cfd/.eslintrc.js
index 2513c12b8853..4897b6fc1f93 100644
--- a/packages/cfd/.eslintrc.js
+++ b/packages/cfd/.eslintrc.js
@@ -7,4 +7,8 @@ module.exports = {
webpack: { config: webpackConfig({}) },
},
},
+ rules: {
+ 'simple-import-sort/imports': 'warn',
+ 'prettier/prettier': 'warn',
+ },
};
diff --git a/packages/cfd/babel.config.json b/packages/cfd/babel.config.json
new file mode 100644
index 000000000000..7c544edd07bc
--- /dev/null
+++ b/packages/cfd/babel.config.json
@@ -0,0 +1,15 @@
+{
+ "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
+ "plugins": [
+ ["@babel/plugin-proposal-decorators", { "legacy": true }],
+ ["@babel/plugin-proposal-class-properties", { "loose": true }],
+ ["@babel/plugin-transform-private-methods", { "loose": true }],
+ ["@babel/plugin-transform-private-property-in-object", { "loose": true }],
+ "@babel/plugin-proposal-export-default-from",
+ "@babel/plugin-proposal-object-rest-spread",
+ "@babel/plugin-proposal-export-namespace-from",
+ "@babel/plugin-syntax-dynamic-import",
+ "@babel/plugin-proposal-optional-chaining",
+ "@babel/plugin-proposal-nullish-coalescing-operator"
+ ]
+}
diff --git a/packages/cfd/jest.config.js b/packages/cfd/jest.config.js
index f87c6b33bda4..5d82f30d188d 100644
--- a/packages/cfd/jest.config.js
+++ b/packages/cfd/jest.config.js
@@ -7,6 +7,7 @@ module.exports = {
'\\.s(c|a)ss$': '/../../__mocks__/styleMock.js',
'^.+\\.svg$': '/../../__mocks__/styleMock.js',
'@deriv-com/translations': '/../../__mocks__/translation.mock.js',
+ '@deriv-com/ui': '/../../__mocks__/deriv-com.ui.mock.js',
'^_common/(.*)$': '/src/_common/$1',
'^App/(.*)$': '/src/App/$1',
'^Assets/(.*)$': '/src/Assets/$1',
diff --git a/packages/cfd/package.json b/packages/cfd/package.json
index b7051c8b440f..1f1e86da39ac 100644
--- a/packages/cfd/package.json
+++ b/packages/cfd/package.json
@@ -36,7 +36,7 @@
"homepage": "https://github.com/deriv-com/deriv-app",
"devDependencies": {
"@testing-library/jest-dom": "^5.12.0",
- "@testing-library/react": "^12.0.0",
+ "@testing-library/react": "^12.1.5",
"@testing-library/react-hooks": "^7.0.2",
"@testing-library/user-event": "^13.5.0",
"@types/react": "^18.0.7",
@@ -46,14 +46,14 @@
"babel-loader": "^9.2.1",
"circular-dependency-plugin": "^5.2.2",
"clean-webpack-plugin": "^3.0.0",
- "copy-webpack-plugin": "^9.0.1",
+ "copy-webpack-plugin": "^12.0.2",
"css-loader": "^5.0.1",
"css-minimizer-webpack-plugin": "^3.0.1",
- "eslint-config-airbnb-base": "^14.2.1",
+ "eslint-config-airbnb-base": "^15.0.0",
"eslint-config-binary": "^1.0.2",
"eslint-config-prettier": "^7.2.0",
"eslint-plugin-import": "^2.23.4",
- "eslint-plugin-prettier": "^3.3.1",
+ "eslint-plugin-prettier": "^5.2.1",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^4.2.0",
"file-loader": "^6.2.0",
@@ -80,7 +80,7 @@
"typescript": "^4.6.3",
"webpack": "^5.81.0",
"webpack-bundle-analyzer": "^4.3.0",
- "webpack-cli": "^4.7.2",
+ "webpack-cli": "^5.1.4",
"webpack-manifest-plugin": "^4.0.2",
"webpack-node-externals": "^2.5.2"
},
diff --git a/packages/cfd/src/Containers/__tests__/cfd-server-error-dialog.spec.js b/packages/cfd/src/Containers/__tests__/cfd-server-error-dialog.spec.js
index dbe28275cdd0..cff66b3f54d7 100644
--- a/packages/cfd/src/Containers/__tests__/cfd-server-error-dialog.spec.js
+++ b/packages/cfd/src/Containers/__tests__/cfd-server-error-dialog.spec.js
@@ -5,8 +5,9 @@ import CFDServerErrorDialog from '../cfd-server-error-dialog';
import CFDProviders from '../../cfd-providers';
describe(' ', () => {
+ let modal_root_el;
beforeAll(() => {
- const modal_root_el = document.createElement('div');
+ modal_root_el = document.createElement('div');
modal_root_el.setAttribute('id', 'modal_root');
document.body.appendChild(modal_root_el);
});
diff --git a/packages/cfd/src/Stores/Modules/CFD/cfd-store.js b/packages/cfd/src/Stores/Modules/CFD/cfd-store.js
index 210cbef51d42..6247d134bb4a 100644
--- a/packages/cfd/src/Stores/Modules/CFD/cfd-store.js
+++ b/packages/cfd/src/Stores/Modules/CFD/cfd-store.js
@@ -163,6 +163,7 @@ export default class CFDStore extends BaseStore {
const list = {};
const show_eu_related_content = this.root_store.traders_hub.show_eu_related_content;
this.root_store.client.mt5_login_list
+ // eslint-disable-next-line no-confusing-arrow
.filter(acc =>
show_eu_related_content
? acc.landing_company_short === 'maltainvest'
diff --git a/packages/components/.eslintrc.js b/packages/components/.eslintrc.js
index 8c11f1834b9d..ed8bb7a26aca 100644
--- a/packages/components/.eslintrc.js
+++ b/packages/components/.eslintrc.js
@@ -9,6 +9,12 @@ module.exports = {
'react/prop-types': 'off',
},
},
+ {
+ files: ['./src/components/icon/icons-manifest.js'],
+ rules: {
+ quotes: 'off',
+ },
+ },
],
settings: {
react: {
@@ -18,4 +24,7 @@ module.exports = {
webpack: { config: webpackConfig({}) },
},
},
+ rules: {
+ 'simple-import-sort/imports': 'warn',
+ },
};
diff --git a/packages/components/.storybook/main.js b/packages/components/.storybook/main.js
index edfac69e7716..d90f094903f8 100644
--- a/packages/components/.storybook/main.js
+++ b/packages/components/.storybook/main.js
@@ -1,78 +1,91 @@
const path = require('path');
-const CopyPlugin = require('copy-webpack-plugin-v6');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
- stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
- addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
- framework: '@storybook/react',
- core: {
- builder: '@storybook/builder-webpack5',
- },
- webpackFinal: async config => {
- config?.module?.rules?.push({
- test: /\.scss$/,
- use: [
- 'style-loader',
- 'css-loader',
- 'sass-loader',
- {
- loader: 'sass-resources-loader',
- options: {
- // Provide path to the file with resources
- resources: require('@deriv/shared/src/styles/index.js'),
- },
- },
- ],
- });
+ stories: [
+ '../stories/**/*.stories.mdx',
+ '../stories/**/*.stories.@(js|jsx|ts|tsx)',
+ ],
- config.resolve.alias = {
- ...config.resolve?.alias,
- Components: path.resolve(__dirname, '../src/components'),
- Stories: path.resolve(__dirname, '../stories'),
- Shared: path.resolve(__dirname, './shared'),
- };
+ addons: [
+ '@storybook/addon-links',
+ '@storybook/addon-essentials',
+ '@storybook/addon-interactions',
+ ],
- config?.module?.rules?.push({
- resolve: {
- alias: {
- Components: path.resolve(__dirname, '../src/components'),
- Stories: path.resolve(__dirname, '../stories'),
- },
- extensions: ['.js', '.jsx', '.ts', '.tsx'],
- },
- });
- config?.module?.rules?.push({
- test: /\.js[x]?$/,
- exclude: /(node_modules)/,
- use: {
- loader: 'babel-loader',
- options: {
- cacheDirectory: true,
- presets: ['@babel/preset-env', '@babel/preset-react'],
- plugins: [
- ['@babel/plugin-proposal-decorators', { legacy: true }],
- ['@babel/plugin-transform-class-properties', { loose: true }],
- '@babel/plugin-proposal-export-default-from',
- '@babel/plugin-transform-object-rest-spread',
- '@babel/plugin-transform-export-namespace-from',
- '@babel/plugin-syntax-dynamic-import',
- '@babel/plugin-transform-optional-chaining',
- '@babel/plugin-transform-nullish-coalescing-operator',
- ['@babel/plugin-proposal-private-methods', { loose: true }],
- ['@babel/plugin-transform-private-property-in-object', { loose: true }],
- ],
- },
- },
- });
+ framework: '@storybook/react',
- config?.plugins?.push(
- new CopyPlugin({
- patterns: [
- { from: path.resolve(__dirname, '../lib/icon/sprites'), to: 'public/sprites', toType: 'dir' },
- ],
- })
- );
- // Return the altered config
- return config;
+ core: {
+ builder: {
+ name: '@storybook/builder-webpack5',
+ options: {},
},
+ },
+
+ webpackFinal: async (config) => {
+ config.module.rules.push({
+ test: /\.scss$/,
+ use: [
+ 'style-loader',
+ 'css-loader',
+ 'sass-loader',
+ {
+ loader: 'sass-resources-loader',
+ options: {
+ resources: require('@deriv/shared/src/styles/index.js'),
+ },
+ },
+ ],
+ include: path.resolve(__dirname, '../'),
+ });
+
+ config.resolve.alias = {
+ ...config.resolve.alias,
+ Components: path.resolve(__dirname, '../src/components'),
+ Stories: path.resolve(__dirname, '../stories'),
+ Shared: path.resolve(__dirname, './shared'),
+ };
+
+ config.module.rules.push({
+ test: /\.jsx?$/,
+ exclude: /node_modules/,
+ use: {
+ loader: 'babel-loader',
+ options: {
+ cacheDirectory: true,
+ presets: [
+ '@babel/preset-env',
+ '@babel/preset-react',
+ ],
+ plugins: [
+ ['@babel/plugin-proposal-decorators', { legacy: true }],
+ ['@babel/plugin-transform-class-properties', { loose: true }],
+ '@babel/plugin-proposal-export-default-from',
+ '@babel/plugin-transform-object-rest-spread',
+ '@babel/plugin-transform-export-namespace-from',
+ '@babel/plugin-syntax-dynamic-import',
+ '@babel/plugin-transform-optional-chaining',
+ '@babel/plugin-transform-nullish-coalescing-operator',
+ ['@babel/plugin-transform-private-methods', { loose: true }],
+ ['@babel/plugin-transform-private-property-in-object', { loose: true }],
+ ],
+ },
+ },
+ });
+
+ config.plugins.push(
+ new CopyWebpackPlugin({
+ patterns: [
+ {
+ from: path.resolve(__dirname, '../lib/icon/sprites'),
+ to: 'public/sprites',
+ noErrorOnMissing: true,
+ },
+ ],
+ })
+ );
+
+ config.resolve.extensions.push('.js', '.jsx', '.ts', '.tsx');
+ return config;
+ },
};
diff --git a/packages/components/babel.config.json b/packages/components/babel.config.json
new file mode 100644
index 000000000000..7c544edd07bc
--- /dev/null
+++ b/packages/components/babel.config.json
@@ -0,0 +1,15 @@
+{
+ "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
+ "plugins": [
+ ["@babel/plugin-proposal-decorators", { "legacy": true }],
+ ["@babel/plugin-proposal-class-properties", { "loose": true }],
+ ["@babel/plugin-transform-private-methods", { "loose": true }],
+ ["@babel/plugin-transform-private-property-in-object", { "loose": true }],
+ "@babel/plugin-proposal-export-default-from",
+ "@babel/plugin-proposal-object-rest-spread",
+ "@babel/plugin-proposal-export-namespace-from",
+ "@babel/plugin-syntax-dynamic-import",
+ "@babel/plugin-proposal-optional-chaining",
+ "@babel/plugin-proposal-nullish-coalescing-operator"
+ ]
+}
diff --git a/packages/components/jest.config.js b/packages/components/jest.config.js
index 3f0026d9c646..b81765fbdd37 100644
--- a/packages/components/jest.config.js
+++ b/packages/components/jest.config.js
@@ -6,6 +6,7 @@ module.exports = {
'\\.css$': '/../../__mocks__/styleMock.js',
'\\.s(c|a)ss$': '/../../__mocks__/styleMock.js',
'^.+\\.svg$': '/../../__mocks__/styleMock.js',
+ '@deriv-com/ui': '/../../__mocks__/deriv-com.ui.mock.js',
},
modulePathIgnorePatterns: ['/icon/', '/.out/'],
};
diff --git a/packages/components/package.json b/packages/components/package.json
index 12eb73e0b74e..d2a21baa1679 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -21,8 +21,8 @@
"deploy:folder": "echo \"No deploy:folder specified\"",
"deploy:staging": "echo \"No deploy:staging specified\"",
"deploy:production": "echo \"No deploy:production specified\"",
- "storybook": "start-storybook -p 6006",
- "build-storybook": "build-storybook"
+ "storybook": "sb dev -p 6006",
+ "build-storybook": "sb build"
},
"author": "Deriv",
"license": "Apache-2.0",
@@ -30,18 +30,15 @@
"@babel/core": "^7.25.2",
"@babel/eslint-parser": "^7.25.1",
"@babel/preset-react": "^7.24.7",
- "@storybook/addon-actions": "^6.5.10",
- "@storybook/addon-essentials": "^6.5.10",
- "@storybook/addon-info": "^5.3.21",
- "@storybook/addon-interactions": "^6.5.10",
- "@storybook/addon-knobs": "^6.4.0",
- "@storybook/addon-links": "^6.5.10",
- "@storybook/builder-webpack5": "^6.5.10",
- "@storybook/manager-webpack5": "^6.5.10",
- "@storybook/react": "^6.5.10",
- "@storybook/testing-library": "^0.0.13",
+ "@storybook/addon-actions": "^8.0.0",
+ "@storybook/addon-essentials": "^8.3.5",
+ "@storybook/addon-links": "^8.3.5",
+ "@storybook/builder-webpack5": "^8.3.5",
+ "@storybook/manager-webpack5": "6.5.10",
+ "@storybook/react": "^8.0.0",
+ "@storybook/test": "^8.3.5",
"@testing-library/jest-dom": "^5.12.0",
- "@testing-library/react": "^12.0.0",
+ "@testing-library/react": "^12.1.5",
"@testing-library/react-hooks": "^7.0.2",
"@testing-library/user-event": "^13.5.0",
"@types/classnames": "^2.2.11",
@@ -49,17 +46,17 @@
"@types/react": "^18.0.7",
"@types/react-dom": "^18.0.0",
"babel-loader": "^9.2.1",
- "copy-webpack-plugin": "^9.0.1",
+ "copy-webpack-plugin": "^12.0.2",
"copy-webpack-plugin-v6": "npm:copy-webpack-plugin@6",
"cross-env": "^5.2.0",
- "eslint-config-airbnb-base": "^14.2.1",
+ "eslint-config-airbnb-base": "^15.0.0",
"eslint-config-binary": "^1.0.2",
"eslint-config-prettier": "^7.2.0",
"eslint-plugin-import": "^2.23.4",
- "eslint-plugin-prettier": "^3.3.1",
+ "eslint-plugin-prettier": "^5.2.1",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^4.2.0",
- "lint-staged": "^10.4.0",
+ "lint-staged": "^11.2.6",
"sass": "^1.62.1",
"sass-loader": "^12.6.0",
"sass-resources-loader": "^2.1.1",
@@ -69,7 +66,7 @@
"typescript": "^4.6.3",
"webpack": "^5.81.0",
"webpack-bundle-analyzer": "^4.3.0",
- "webpack-cli": "^4.7.2"
+ "webpack-cli": "^5.1.4"
},
"dependencies": {
"@cloudflare/stream-react": "^1.9.1",
@@ -102,4 +99,4 @@
"react-virtualized": "^9.22.5",
"usehooks-ts": "^2.7.0"
}
-}
\ No newline at end of file
+}
diff --git a/packages/components/src/components/popover/__tests__/popover.spec.tsx b/packages/components/src/components/popover/__tests__/popover.spec.tsx
index 93fb29ad3f95..8f87d7e6f2a5 100644
--- a/packages/components/src/components/popover/__tests__/popover.spec.tsx
+++ b/packages/components/src/components/popover/__tests__/popover.spec.tsx
@@ -37,40 +37,40 @@ describe('', () => {
const mockPopover = (mocked_props = default_mocked_props) => {
return {children};
};
- it('should render an info icon, display tooltip on hover/click, hide only after unfocusing in desktop', () => {
+ it('should render an info icon, display tooltip on hover/click, hide only after unfocusing in desktop', async () => {
render(mockPopover());
const info_icon = screen.getByText(target_info_icon);
expect(info_icon).toBeInTheDocument();
expect(screen.queryByText(tooltip_message)).not.toBeInTheDocument();
- userEvent.hover(info_icon);
+ await userEvent.hover(info_icon);
expect(screen.getByText(blue_info_icon)).toBeInTheDocument();
expect(screen.getByText(tooltip_message)).toBeInTheDocument();
- userEvent.click(info_icon);
+ await userEvent.click(info_icon);
expect(screen.getByText(blue_info_icon)).toBeInTheDocument();
expect(screen.getByText(tooltip_message)).toBeInTheDocument();
- userEvent.unhover(info_icon);
+ await userEvent.unhover(info_icon);
expect(screen.queryByText(blue_info_icon)).not.toBeInTheDocument();
expect(screen.queryByText(tooltip_message)).not.toBeInTheDocument();
});
- it('should render a question icon, display tooltip upon tap & hide it upon the second tap on mobile', () => {
+ it('should render a question icon, display tooltip upon tap & hide it upon the second tap on mobile', async () => {
(useDevice as jest.Mock).mockReturnValue({ isDesktop: false });
render(mockPopover({ ...default_mocked_props, icon: 'question' }));
const unknown_icon = screen.getByText('IcUnknown');
expect(unknown_icon).toBeInTheDocument();
expect(screen.queryByText(tooltip_message)).not.toBeInTheDocument();
- userEvent.click(unknown_icon);
+ await userEvent.click(unknown_icon);
expect(screen.queryByText(blue_info_icon)).not.toBeInTheDocument();
expect(screen.getByText(tooltip_message)).toBeInTheDocument();
- userEvent.click(unknown_icon);
+ await userEvent.click(unknown_icon);
expect(screen.queryByText(tooltip_message)).not.toBeInTheDocument();
});
- it('should render controlled popover with open tooltip when is_open === true & should call onClick when target is clicked', () => {
+ it('should render controlled popover with open tooltip when is_open === true & should call onClick when target is clicked', async () => {
const onClick = jest.fn();
render(mockPopover({ ...default_mocked_props, icon: 'dot', is_open: true, onClick }));
const circle_icon = screen.getByText('IcCircle');
expect(circle_icon).toBeInTheDocument();
expect(screen.getByText(tooltip_message)).toBeInTheDocument();
- userEvent.click(circle_icon);
+ await userEvent.click(circle_icon);
expect(onClick).toBeCalled();
});
it('should render a counter instead of an icon when counter is provided & icon === counter', () => {
@@ -94,18 +94,18 @@ describe('', () => {
expect(screen.getByText(target_info_icon)).toBeInTheDocument();
expect(screen.queryByText(blue_info_icon)).not.toBeInTheDocument();
});
- it('should not open tooltip when message is undefined', () => {
+ it('should not open tooltip when message is undefined', async () => {
render(mockPopover({ ...default_mocked_props, message: undefined }));
const info_icon = screen.getByText(target_info_icon);
expect(info_icon).toBeInTheDocument();
const message = screen.queryByText(tooltip_message);
expect(message).not.toBeInTheDocument();
- userEvent.hover(info_icon);
+ await userEvent.hover(info_icon);
expect(screen.queryByText(blue_info_icon)).not.toBeInTheDocument();
expect(message).not.toBeInTheDocument();
});
- it('should call onBubbleOpen when bubble is hovered & onBubbleClose when bubble is unhovered in controlled popover', () => {
+ it('should call onBubbleOpen when bubble is hovered & onBubbleClose when bubble is unhovered in controlled popover', async () => {
const onBubbleClose = jest.fn();
const onBubbleOpen = jest.fn();
render(
@@ -118,23 +118,23 @@ describe('', () => {
})
);
const message = screen.getByText(tooltip_message);
- userEvent.hover(message);
+ await userEvent.hover(message);
expect(onBubbleOpen).toBeCalled();
- userEvent.unhover(message);
+ await userEvent.unhover(message);
expect(onBubbleClose).toBeCalled();
});
- it('should call onBubbleOpen when bubble is focused & onBubbleClose when bubble is unfocused in uncontrolled popover in mobile', () => {
+ it('should call onBubbleOpen when bubble is focused & onBubbleClose when bubble is unfocused in uncontrolled popover in mobile', async () => {
window.innerWidth = MAX_MOBILE_WIDTH;
const onBubbleClose = jest.fn();
const onBubbleOpen = jest.fn();
render(mockPopover({ ...default_mocked_props, onBubbleClose, onBubbleOpen }));
const info_icon = screen.getByText(target_info_icon);
- userEvent.click(info_icon);
+ await userEvent.click(info_icon);
const message = screen.getByText(tooltip_message);
expect(message).toBeInTheDocument();
- userEvent.click(message);
+ await userEvent.hover(message);
expect(onBubbleOpen).toBeCalled();
- userEvent.unhover(message);
+ await userEvent.unhover(message);
expect(onBubbleClose).toBeCalled();
});
it('should render relative container when relative_render === true', () => {
diff --git a/packages/components/src/components/video-player/__tests__/video-player.spec.tsx b/packages/components/src/components/video-player/__tests__/video-player.spec.tsx
index d5fc8abd948d..e686971ba18c 100644
--- a/packages/components/src/components/video-player/__tests__/video-player.spec.tsx
+++ b/packages/components/src/components/video-player/__tests__/video-player.spec.tsx
@@ -51,7 +51,7 @@ jest.mock('@cloudflare/stream-react', () => ({
}));
describe('', () => {
- const original_user_agent = Object.getOwnPropertyDescriptor(window.navigator, 'userAgent');
+ const original_user_agent = window.navigator.userAgent;
beforeAll(() => {
Object.defineProperty(window.navigator, 'userAgent', {
@@ -61,46 +61,49 @@ describe('', () => {
});
afterAll(() => {
- Object.defineProperty(window.navigator, 'userAgent', original_user_agent as PropertyDescriptor);
+ Object.defineProperty(window.navigator, 'userAgent', {
+ value: original_user_agent,
+ configurable: true,
+ });
});
- it('should render the component on desktop', () => {
+ it('should render the component on desktop', async () => {
render();
const video = screen.getByTestId(video_data_testid);
fireEvent.loadedData(video);
expect(screen.getByTestId(player_data_testid)).toBeInTheDocument();
const playback_rate = screen.getByText(default_playback_rate);
- userEvent.click(playback_rate);
+ await userEvent.click(playback_rate);
const new_playback_rate = screen.getByText(faster_playback_rate);
- userEvent.click(new_playback_rate);
+ await userEvent.click(new_playback_rate);
expect(screen.getAllByText(faster_playback_rate)).toHaveLength(2);
const pause_button = screen.getByText(icon_pause);
- userEvent.click(pause_button);
+ await userEvent.click(pause_button);
expect(screen.queryByText(icon_pause)).not.toBeInTheDocument();
expect(screen.getByText(icon_play)).toBeInTheDocument();
const player_progress_bar = screen.getByTestId('dt_progress_bar');
expect(player_progress_bar).toBeInTheDocument();
- userEvent.click(player_progress_bar);
+ await userEvent.click(player_progress_bar);
expect(screen.getByText(icon_play)).toBeInTheDocument();
});
- it('should render the component for mobile browsers except for Safari', () => {
+ it('should render the component for mobile browsers except for Safari', async () => {
render();
const video = screen.getByTestId(video_data_testid);
fireEvent.loadedData(video);
expect(screen.getByTestId(player_data_testid)).toBeInTheDocument();
const pause_button = screen.getByText(icon_pause);
- userEvent.click(pause_button);
+ await userEvent.click(pause_button);
expect(screen.queryByText(icon_pause)).not.toBeInTheDocument();
expect(screen.getByText(icon_play)).toBeInTheDocument();
// a tap upon replay overlay on mobile should not resume playing while the video is not ended:
const replay_button = screen.getByText(icon_replay);
expect(replay_button).toBeInTheDocument();
- userEvent.click(replay_button);
+ await userEvent.click(replay_button);
expect(screen.getByText(icon_play)).toBeInTheDocument();
});
it('should render the component on mobile for Safari', () => {
@@ -116,16 +119,16 @@ describe('', () => {
const play_button = screen.getByText(icon_play);
expect(play_button).toBeInTheDocument();
});
- it('should not resume playing if user taps upon replay overlay while the video is not ended', () => {
+ it('should not resume playing if user taps upon replay overlay while the video is not ended', async () => {
render();
const video = screen.getByTestId(video_data_testid);
fireEvent.loadedData(video);
- userEvent.click(video);
+ await userEvent.click(video);
expect(screen.getByText(icon_play)).toBeInTheDocument();
const replay_button = screen.getByText(icon_replay);
expect(replay_button).toBeInTheDocument();
- userEvent.click(replay_button);
+ await userEvent.click(replay_button);
expect(screen.getByText(icon_play)).toBeInTheDocument();
});
});
diff --git a/packages/components/webpack.config.js b/packages/components/webpack.config.js
index d6164b3db7dd..54ce51954e2d 100644
--- a/packages/components/webpack.config.js
+++ b/packages/components/webpack.config.js
@@ -24,8 +24,11 @@ module.exports = function () {
minimize: true,
},
devServer: {
- publicPath: '/dist/',
+ static: {
+ publicPath: '/dist/',
+ },
},
+
module: {
rules: [
{
diff --git a/packages/core/.eslintrc.js b/packages/core/.eslintrc.js
index d226fe97f95a..f624a58af714 100644
--- a/packages/core/.eslintrc.js
+++ b/packages/core/.eslintrc.js
@@ -7,4 +7,8 @@ module.exports = {
webpack: { config: webpackConfig({}) },
},
},
+ rules: {
+ 'simple-import-sort/imports': 'warn',
+ 'prettier/prettier': 'warn',
+ },
};
diff --git a/packages/core/babel.config.json b/packages/core/babel.config.json
index 3882775b2327..a06adae0be69 100644
--- a/packages/core/babel.config.json
+++ b/packages/core/babel.config.json
@@ -12,7 +12,7 @@
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-transform-class-properties", { "loose": true }],
- ["@babel/plugin-proposal-private-methods", { "loose": true }],
+ ["@babel/plugin-transform-private-methods", { "loose": true }],
["@babel/plugin-transform-private-property-in-object", { "loose": true }],
["@babel/plugin-transform-unicode-property-regex", { "useUnicodeFlag": false }],
"@babel/plugin-proposal-export-default-from",
diff --git a/packages/core/build/config.js b/packages/core/build/config.js
index f4081f67273c..a45d93da626d 100644
--- a/packages/core/build/config.js
+++ b/packages/core/build/config.js
@@ -8,15 +8,15 @@ const gitRevisionPlugin = new GitRevisionPlugin();
const copyConfig = base => {
const patterns = [
{
- from: path.resolve(__dirname, '../node_modules/@deriv/bot-web-ui/dist/bot/css/'),
+ from: path.resolve(__dirname, '../../../node_modules/@deriv/bot-web-ui/dist/bot/css/'),
to: 'bot/css/',
},
{
- from: path.resolve(__dirname, '../node_modules/@deriv/bot-web-ui/dist/bot/media/'),
+ from: path.resolve(__dirname, '../../../node_modules/@deriv/bot-web-ui/dist/bot/media/'),
to: 'media',
},
{
- from: path.resolve(__dirname, '../node_modules/@deriv/bot-web-ui/dist/bot/js/'),
+ from: path.resolve(__dirname, '../../../node_modules/@deriv/bot-web-ui/dist/bot/js/'),
to: 'bot/js/',
},
{
@@ -36,59 +36,59 @@ const copyConfig = base => {
to: 'bot/assets',
},
{
- from: path.resolve(__dirname, '../node_modules/@deriv/account/dist/account/js/'),
+ from: path.resolve(__dirname, '../../../node_modules/@deriv/account/dist/account/js/'),
to: 'account/js',
},
{
- from: path.resolve(__dirname, '../node_modules/@deriv/account/dist/account/css/'),
+ from: path.resolve(__dirname, '../../../node_modules/@deriv/account/dist/account/css/'),
to: 'account/css',
},
{
- from: path.resolve(__dirname, '../node_modules/@deriv/cashier/dist/cashier/js/'),
+ from: path.resolve(__dirname, '../../../node_modules/@deriv/cashier/dist/cashier/js/'),
to: 'cashier/js',
},
{
- from: path.resolve(__dirname, '../node_modules/@deriv/cashier/dist/cashier/css/'),
+ from: path.resolve(__dirname, '../../../node_modules/@deriv/cashier/dist/cashier/css/'),
to: 'cashier/css',
},
{
- from: path.resolve(__dirname, '../node_modules/@deriv/p2p/dist/p2p/js/'),
+ from: path.resolve(__dirname, '../../../node_modules/@deriv/p2p/dist/p2p/js/'),
to: 'p2p/js',
},
{
- from: path.resolve(__dirname, '../node_modules/@deriv/p2p/dist/p2p/css/'),
+ from: path.resolve(__dirname, '../../../node_modules/@deriv/p2p/dist/p2p/css/'),
to: 'p2p/css',
noErrorOnMissing: true,
},
{
- from: path.resolve(__dirname, '../node_modules/@deriv/cashier/dist/cashier/public'),
+ from: path.resolve(__dirname, '../../../node_modules/@deriv/cashier/dist/cashier/public'),
to: 'cashier/public',
- transformPath(context) {
- return context.split('node_modules/@deriv/cashier/dist/')[1];
+ transform(_content, transform_path) {
+ return transform_path.split('node_modules/@deriv/cashier/dist/')[1];
},
},
{
- from: path.resolve(__dirname, '../node_modules/@deriv/trader/dist/trader'),
+ from: path.resolve(__dirname, '../../../node_modules/@deriv/trader/dist/trader'),
to: 'trader',
},
{
- from: path.resolve(__dirname, '../node_modules/@deriv/reports/dist/reports/js/'),
+ from: path.resolve(__dirname, '../../../node_modules/@deriv/reports/dist/reports/js/'),
to: 'reports/js',
},
{
- from: path.resolve(__dirname, '../node_modules/@deriv/reports/dist/reports/css/'),
+ from: path.resolve(__dirname, '../../../node_modules/@deriv/reports/dist/reports/css/'),
to: 'reports/css',
},
{
- from: path.resolve(__dirname, '../node_modules/@deriv/cfd/dist/cfd'),
+ from: path.resolve(__dirname, '../../../node_modules/@deriv/cfd/dist/cfd'),
to: 'cfd',
},
{
- from: path.resolve(__dirname, '../node_modules/@deriv/appstore/dist/appstore'),
+ from: path.resolve(__dirname, '../../../node_modules/@deriv/appstore/dist/appstore'),
to: 'appstore',
},
{
- from: path.resolve(__dirname, '../node_modules/@deriv/wallets/dist/wallets'),
+ from: path.resolve(__dirname, '../../../node_modules/@deriv/wallets/dist/wallets'),
to: 'wallets',
},
{ from: path.resolve(__dirname, '../scripts/CNAME'), to: 'CNAME', toType: 'file', noErrorOnMissing: true },
@@ -141,7 +141,7 @@ const copyConfig = base => {
},
{ from: path.resolve(__dirname, '../src/public/images/app/header/'), to: 'public/images/app/header/' },
{
- from: path.resolve(__dirname, '../node_modules/@deriv/components/lib/icon/sprites'),
+ from: path.resolve(__dirname, '../../../node_modules/@deriv/components/lib/icon/sprites'),
to: 'public/sprites',
toType: 'dir',
},
diff --git a/packages/core/build/constants.js b/packages/core/build/constants.js
index cf4f9f39b99c..11ed5c46879a 100644
--- a/packages/core/build/constants.js
+++ b/packages/core/build/constants.js
@@ -41,10 +41,16 @@ const HOISTED_PACKAGES = {
'react-router-dom': path.resolve(__dirname, '../../../node_modules/react-router-dom'),
mobx: path.resolve(__dirname, '../../../node_modules/mobx'),
'mobx-react': path.resolve(__dirname, '../../../node_modules/mobx-react'),
- '@deriv/shared': path.resolve(__dirname, '../node_modules/@deriv/shared'),
- '@deriv/components': path.resolve(__dirname, '../node_modules/@deriv/components'),
- '@deriv/translations': path.resolve(__dirname, '../node_modules/@deriv/translations'),
+ '@deriv/shared': path.resolve(__dirname, '../../../node_modules/@deriv/shared'),
+ '@deriv/components': path.resolve(__dirname, '../../../node_modules/@deriv/components'),
+ '@deriv/translations': path.resolve(__dirname, '../../../node_modules/@deriv/translations'),
'@deriv/deriv-charts': path.resolve(__dirname, '../../../node_modules/@deriv/deriv-charts'),
+ '@deriv/trader': path.resolve(__dirname, '../../../node_modules/@deriv/trader'),
+ '@deriv/p2p': path.resolve(__dirname, '../../../node_modules/@deriv/p2p'),
+ '@deriv/cashier': path.resolve(__dirname, '../../../node_modules/@deriv/cashier'),
+ '@deriv/bot-web-ui': path.resolve(__dirname, '../../../node_modules/@deriv/bot-web-ui'),
+ '@deriv/reports': path.resolve(__dirname, '../../../node_modules/@deriv/reports'),
+ '@deriv/cfd': path.resolve(__dirname, '../../../node_modules/@deriv/cfd'),
};
const ALIASES = {
diff --git a/packages/core/build/webpack.config.js b/packages/core/build/webpack.config.js
index 892d59f8661e..540bab34351c 100644
--- a/packages/core/build/webpack.config.js
+++ b/packages/core/build/webpack.config.js
@@ -9,18 +9,28 @@ module.exports = function (env) {
return {
context: path.resolve(__dirname, '../src'),
devServer: {
- publicPath: base,
- open: openChromeBasedOnPlatform(process.platform),
- openPage: sub_path,
+ static: {
+ publicPath: base,
+ watch: true,
+ },
+ open: {
+ app: {
+ name: openChromeBasedOnPlatform(process.platform),
+ },
+ target: sub_path,
+ },
host: 'localhost',
- https: true,
+ server: 'https',
+
port: 8443,
historyApiFallback: true,
- stats: {
- colors: true,
+ hot: false,
+ client: {
+ overlay: false,
},
},
devtool: IS_RELEASE ? 'source-map' : 'eval-cheap-module-source-map',
+
entry: './index.tsx',
mode: IS_RELEASE ? 'production' : 'development',
module: {
@@ -72,5 +82,8 @@ module.exports = function (env) {
snapshot: {
managedPaths: [],
},
+ stats: {
+ colors: true,
+ },
};
};
diff --git a/packages/core/jest.config.js b/packages/core/jest.config.js
index 131770fdd599..c487bf44cac0 100644
--- a/packages/core/jest.config.js
+++ b/packages/core/jest.config.js
@@ -7,6 +7,7 @@ module.exports = {
'\\.s(c|a)ss$': '/../../__mocks__/styleMock.js',
'^.+\\.svg$': '/../../__mocks__/styleMock.js',
'@deriv-com/translations': '/../../__mocks__/translation.mock.js',
+ '@deriv-com/ui': '/../../__mocks__/deriv-com.ui.mock.js',
'^_common/(.*)$': '/src/_common/$1',
'^App/(.*)$': '/src/App/$1',
'^Assets/(.*)$': '/src/Assets/$1',
diff --git a/packages/core/package.json b/packages/core/package.json
index 5ecfee803478..bd03386a99ea 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -8,7 +8,7 @@
"analyze:stats": "f () { webpack --progress --config \"./build/webpack.config.js\" --env base=$1 --env IS_CRYPTO_APP=${IS_CRYPTO_APP:-false} --profile --json=stats.json;}; f",
"analyze:build": "webpack-bundle-analyzer --no-open -m static -r treemap.html stats.json ./dist && webpack-bundle-analyzer -m json stats.json ./dist",
"start": "npm run test && npm run serve",
- "serve": "f() { echo \"Serving...\" && ./node_modules/.bin/webpack serve --config \"./build/webpack.config.js\" --env open $1;}; f",
+ "serve": "f() { echo \"Serving...\" && ../../node_modules/.bin/webpack serve --config \"./build/webpack.config.js\" --env open $1;}; f",
"build": "f () { webpack --config \"./build/webpack.config.js\" --env base=$1 --env IS_CRYPTO_APP=${IS_CRYPTO_APP:-false};}; f",
"build:travis": "echo \"No build:travis specified\"",
"test:eslint": "eslint \"./src/**/*.?(js|jsx|ts|tsx)\"",
@@ -34,11 +34,11 @@
"homepage": "https://github.com/deriv-com/deriv-app",
"devDependencies": {
"@babel/eslint-parser": "^7.25.1",
- "@babel/plugin-proposal-private-property-in-object": "^7.12.1",
+ "@babel/plugin-transform-private-property-in-object": "^7.12.1",
"@babel/plugin-transform-unicode-property-regex": "^7.24.7",
"@babel/preset-react": "^7.24.7",
"@testing-library/jest-dom": "^5.12.0",
- "@testing-library/react": "^12.0.0",
+ "@testing-library/react": "^12.1.5",
"@testing-library/react-hooks": "^7.0.2",
"@testing-library/user-event": "^13.5.0",
"@types/react": "^18.0.7",
@@ -46,15 +46,15 @@
"babel-loader": "^9.2.1",
"circular-dependency-plugin": "^5.2.2",
"clean-webpack-plugin": "^3.0.0",
- "copy-webpack-plugin": "^9.0.1",
+ "copy-webpack-plugin": "^12.0.2",
"css-loader": "^5.0.1",
"css-minimizer-webpack-plugin": "^3.0.1",
- "eslint-config-airbnb-base": "^14.2.1",
+ "eslint-config-airbnb-base": "^15.0.0",
"eslint-config-binary": "^1.0.2",
"eslint-config-prettier": "^7.2.0",
"eslint-formatter-pretty": "^4.0.0",
"eslint-plugin-import": "^2.23.4",
- "eslint-plugin-prettier": "^3.3.1",
+ "eslint-plugin-prettier": "^5.2.1",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^4.2.0",
"file-loader": "^6.2.0",
@@ -67,7 +67,7 @@
"ignore-styles": "^5.0.1",
"jsdom": "^21.1.1",
"jsdom-global": "^2.1.1",
- "lint-staged": "^10.4.0",
+ "lint-staged": "^11.2.6",
"mini-css-extract-plugin": "^1.3.4",
"mock-local-storage": "^1.1.8",
"postcss-loader": "^6.2.1",
@@ -86,9 +86,9 @@
"typescript": "^4.6.3",
"webpack": "^5.81.0",
"webpack-bundle-analyzer": "^4.3.0",
- "webpack-cli": "^4.7.2",
- "webpack-dev-middleware": "^5.0.0",
- "webpack-dev-server": "^3.11.2",
+ "webpack-cli": "^5.1.4",
+ "webpack-dev-middleware": "^7.4.2",
+ "webpack-dev-server": "^5.1.0",
"webpack-manifest-plugin": "^4.0.2",
"webpack-node-externals": "^2.5.2",
"workbox-webpack-plugin": "^6.0.2"
diff --git a/packages/core/src/App/Containers/QuestionnaireModal/questionnaire-modal.tsx b/packages/core/src/App/Containers/QuestionnaireModal/questionnaire-modal.tsx
index 0f7409fc1206..7aca67a2ec7e 100644
--- a/packages/core/src/App/Containers/QuestionnaireModal/questionnaire-modal.tsx
+++ b/packages/core/src/App/Containers/QuestionnaireModal/questionnaire-modal.tsx
@@ -17,6 +17,7 @@ type TABQuestionnaire = {
};
export type TQuestionnaireModal = {
ab_questionnaire: TABQuestionnaire[];
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
handleSignup: (...args: any) => void;
};
diff --git a/packages/core/src/App/Containers/UpdateEmailModal/update-email-modal.jsx b/packages/core/src/App/Containers/UpdateEmailModal/update-email-modal.jsx
index 8fcc9e2c2e93..ee3550ffd904 100644
--- a/packages/core/src/App/Containers/UpdateEmailModal/update-email-modal.jsx
+++ b/packages/core/src/App/Containers/UpdateEmailModal/update-email-modal.jsx
@@ -65,7 +65,7 @@ const UpdateEmailModal = observer(() => {
{is_email_updated ? (
{!update_email_error && (
-
+
)}
{update_email_error ? (
diff --git a/packages/core/src/Utils/Analytics/analytics.ts b/packages/core/src/Utils/Analytics/analytics.ts
index 361ccbefa180..fedf04765a0a 100644
--- a/packages/core/src/Utils/Analytics/analytics.ts
+++ b/packages/core/src/Utils/Analytics/analytics.ts
@@ -48,6 +48,7 @@ const cacheTrackEvents = {
const instances = Analytics?.getInstances();
return !!instances?.tracking;
},
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
parseCookies: (cookieName: string): any => {
const cookies: { [key: string]: string } = document.cookie
.split('; ')
@@ -89,6 +90,7 @@ const cacheTrackEvents = {
return event;
},
track: (originalEvent: Event, cache?: boolean) => {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
const event: any = cacheTrackEvents.processEvent(originalEvent);
if (cacheTrackEvents.isReady() && !cache) {
Analytics?.trackEvent(event.name, event.properties);
diff --git a/packages/core/src/Utils/Hotjar/index.ts b/packages/core/src/Utils/Hotjar/index.ts
index 96070dade767..a4886e4fd5a1 100644
--- a/packages/core/src/Utils/Hotjar/index.ts
+++ b/packages/core/src/Utils/Hotjar/index.ts
@@ -10,6 +10,7 @@ const initHotjar = (client: TCoreStores['client']) => {
/**
* Inject: External Script - Hotjar
*/
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
(function (h: any, o, t, j) {
/* eslint-disable */
h.hj =
@@ -32,6 +33,7 @@ const initHotjar = (client: TCoreStores['client']) => {
const account_type = client.is_virtual ? 'Demo' : 'Real';
const account_open_date = client.account_open_date ? epochToMoment(client.account_open_date) : undefined;
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
(window as any).hj('identify', user_id, {
'Account created': account_open_date ? toMoment(account_open_date).format('YYYY-MM-DD') : '',
'Account type': account_type,
diff --git a/packages/core/src/_common/base/server_time.js b/packages/core/src/_common/base/server_time.js
index b4a8626d2775..91ad41b1ed47 100644
--- a/packages/core/src/_common/base/server_time.js
+++ b/packages/core/src/_common/base/server_time.js
@@ -50,6 +50,7 @@ const ServerTime = (() => {
update_time_interval = setInterval(updateTime, 1000);
};
+ // eslint-disable-next-line no-confusing-arrow
const get = () => (server_time ? server_time.clone() : undefined);
return {
diff --git a/packages/hooks/babel.config.json b/packages/hooks/babel.config.json
new file mode 100644
index 000000000000..7c544edd07bc
--- /dev/null
+++ b/packages/hooks/babel.config.json
@@ -0,0 +1,15 @@
+{
+ "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
+ "plugins": [
+ ["@babel/plugin-proposal-decorators", { "legacy": true }],
+ ["@babel/plugin-proposal-class-properties", { "loose": true }],
+ ["@babel/plugin-transform-private-methods", { "loose": true }],
+ ["@babel/plugin-transform-private-property-in-object", { "loose": true }],
+ "@babel/plugin-proposal-export-default-from",
+ "@babel/plugin-proposal-object-rest-spread",
+ "@babel/plugin-proposal-export-namespace-from",
+ "@babel/plugin-syntax-dynamic-import",
+ "@babel/plugin-proposal-optional-chaining",
+ "@babel/plugin-proposal-nullish-coalescing-operator"
+ ]
+}
diff --git a/packages/hooks/jest.config.js b/packages/hooks/jest.config.js
index 207910d7e732..8a152bacd488 100644
--- a/packages/hooks/jest.config.js
+++ b/packages/hooks/jest.config.js
@@ -2,4 +2,8 @@ const baseConfigForPackages = require('../../jest.config.base');
module.exports = {
...baseConfigForPackages,
+ moduleNameMapper: {
+ ...baseConfigForPackages.moduleNameMapper,
+ '@deriv-com/ui': '/../../__mocks__/deriv-com.ui.mock.js',
+ },
};
diff --git a/packages/hooks/package.json b/packages/hooks/package.json
index 20a5edd45dec..082b3794db18 100644
--- a/packages/hooks/package.json
+++ b/packages/hooks/package.json
@@ -27,7 +27,7 @@
"devDependencies": {
"typescript": "^4.6.3",
"@testing-library/user-event": "^13.5.0",
- "@testing-library/react": "^12.0.0",
+ "@testing-library/react": "^12.1.5",
"@testing-library/react-hooks": "^7.0.2"
}
}
diff --git a/packages/hooks/src/__tests__/useIsGrowthbookLoaded.spec.tsx b/packages/hooks/src/__tests__/useIsGrowthbookLoaded.spec.tsx
index 0b9db1ddcbd9..a86286520505 100644
--- a/packages/hooks/src/__tests__/useIsGrowthbookLoaded.spec.tsx
+++ b/packages/hooks/src/__tests__/useIsGrowthbookLoaded.spec.tsx
@@ -1,6 +1,7 @@
-import { renderHook, act } from '@testing-library/react-hooks';
import { useRemoteConfig } from '@deriv/api';
import { Analytics } from '@deriv-com/analytics';
+import { act, renderHook } from '@testing-library/react-hooks';
+
import useIsGrowthbookIsLoaded from '../useIsGrowthbookLoaded';
jest.mock('@deriv/api');
@@ -8,6 +9,11 @@ jest.mock('@deriv-com/analytics');
describe('useIsGrowthbookIsLoaded', () => {
beforeEach(() => {
+ jest.useFakeTimers({ legacyFakeTimers: true });
+ jest.spyOn(global, 'setInterval');
+ jest.spyOn(global, 'clearInterval');
+ jest.spyOn(global, 'setTimeout');
+ jest.spyOn(global, 'clearTimeout');
jest.clearAllMocks();
});
@@ -20,7 +26,7 @@ describe('useIsGrowthbookIsLoaded', () => {
});
it('should update state when data.marketing_growthbook is true and Analytics instance is available', () => {
- jest.useFakeTimers();
+ jest.useFakeTimers({ legacyFakeTimers: true });
(useRemoteConfig as jest.Mock).mockReturnValue({ data: { marketing_growthbook: true } });
Analytics.getInstances = jest.fn(
() =>
@@ -31,7 +37,7 @@ describe('useIsGrowthbookIsLoaded', () => {
},
},
tracking: {},
- } as any)
+ }) as any
);
const { result, rerender } = renderHook(() => useIsGrowthbookIsLoaded());
@@ -49,7 +55,7 @@ describe('useIsGrowthbookIsLoaded', () => {
});
it('should clear interval after 10 seconds if Analytics instance is not available', () => {
- jest.useFakeTimers();
+ jest.useFakeTimers({ legacyFakeTimers: true });
(useRemoteConfig as jest.Mock).mockReturnValue({ data: { marketing_growthbook: false } });
Analytics.getInstances = jest.fn(
() =>
@@ -60,7 +66,7 @@ describe('useIsGrowthbookIsLoaded', () => {
},
},
tracking: {},
- } as any)
+ }) as any
);
const { result } = renderHook(() => useIsGrowthbookIsLoaded());
@@ -75,7 +81,7 @@ describe('useIsGrowthbookIsLoaded', () => {
});
it('should clear interval on unmount', () => {
- jest.useFakeTimers();
+ jest.useFakeTimers({ legacyFakeTimers: true });
const { unmount } = renderHook(useIsGrowthbookIsLoaded);
unmount();
diff --git a/packages/hooks/src/__tests__/usePhoneNumberVerificationSessionTimer.spec.tsx b/packages/hooks/src/__tests__/usePhoneNumberVerificationSessionTimer.spec.tsx
index 0c800265c793..73feadedc881 100644
--- a/packages/hooks/src/__tests__/usePhoneNumberVerificationSessionTimer.spec.tsx
+++ b/packages/hooks/src/__tests__/usePhoneNumberVerificationSessionTimer.spec.tsx
@@ -1,7 +1,9 @@
import React from 'react';
+
+import { mockStore, StoreProvider } from '@deriv/stores';
import { renderHook } from '@testing-library/react-hooks';
+
import usePhoneNumberVerificationSessionTimer from '../usePhoneNumberVerificationSessionTimer';
-import { StoreProvider, mockStore } from '@deriv/stores';
jest.mock('@deriv/shared', () => ({
...jest.requireActual('@deriv/shared'),
@@ -26,7 +28,7 @@ describe('usePhoneNumberVerificationSetTimer', () => {
);
beforeEach(() => {
jest.clearAllMocks();
- jest.useFakeTimers();
+ jest.useFakeTimers({ legacyFakeTimers: true });
});
afterEach(() => {
diff --git a/packages/hooks/src/__tests__/usePhoneNumberVerificationSetTimer.spec.tsx b/packages/hooks/src/__tests__/usePhoneNumberVerificationSetTimer.spec.tsx
index c272adc55c00..755fadec4248 100644
--- a/packages/hooks/src/__tests__/usePhoneNumberVerificationSetTimer.spec.tsx
+++ b/packages/hooks/src/__tests__/usePhoneNumberVerificationSetTimer.spec.tsx
@@ -1,7 +1,9 @@
import React from 'react';
+
+import { mockStore, StoreProvider } from '@deriv/stores';
import { renderHook } from '@testing-library/react-hooks';
+
import usePhoneNumberVerificationSetTimer from '../usePhoneNumberVerificationSetTimer';
-import { StoreProvider, mockStore } from '@deriv/stores';
jest.mock('@deriv/shared', () => ({
...jest.requireActual('@deriv/shared'),
@@ -30,7 +32,7 @@ describe('usePhoneNumberVerificationSetTimer', () => {
);
beforeEach(() => {
jest.clearAllMocks();
- jest.useFakeTimers();
+ jest.useFakeTimers({ legacyFakeTimers: true });
});
afterEach(() => {
diff --git a/packages/indicators/.eslintrc.js b/packages/indicators/.eslintrc.js
new file mode 100644
index 000000000000..3e688040d452
--- /dev/null
+++ b/packages/indicators/.eslintrc.js
@@ -0,0 +1,6 @@
+module.exports = {
+ extends: '../../.eslintrc.js',
+ rules: {
+ 'simple-import-sort/imports': 'warn',
+ },
+};
diff --git a/packages/indicators/babel.config.json b/packages/indicators/babel.config.json
index 1320b9a3272a..852a28a8ed6b 100644
--- a/packages/indicators/babel.config.json
+++ b/packages/indicators/babel.config.json
@@ -1,3 +1,15 @@
{
- "presets": ["@babel/preset-env"]
+ "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
+ "plugins": [
+ ["@babel/plugin-proposal-decorators", { "legacy": true }],
+ ["@babel/plugin-proposal-class-properties", { "loose": true }],
+ ["@babel/plugin-transform-private-methods", { "loose": true }],
+ ["@babel/plugin-transform-private-property-in-object", { "loose": true }],
+ "@babel/plugin-proposal-export-default-from",
+ "@babel/plugin-proposal-object-rest-spread",
+ "@babel/plugin-proposal-export-namespace-from",
+ "@babel/plugin-syntax-dynamic-import",
+ "@babel/plugin-proposal-optional-chaining",
+ "@babel/plugin-proposal-nullish-coalescing-operator"
+ ]
}
diff --git a/packages/indicators/package.json b/packages/indicators/package.json
index 578bda2ef0ae..de5902851df3 100644
--- a/packages/indicators/package.json
+++ b/packages/indicators/package.json
@@ -35,16 +35,16 @@
"@babel/eslint-parser": "^7.25.1",
"@babel/preset-env": "^7.25.4",
"@babel/preset-react": "^7.24.7",
- "ts-jest": "^26.4.2",
- "eslint-config-airbnb-base": "^14.2.1",
+ "ts-jest": "^29.2.5",
+ "eslint-config-airbnb-base": "^15.0.0",
"eslint-config-binary": "^1.0.2",
"eslint-config-prettier": "^7.2.0",
"eslint-plugin-import": "^2.23.4",
- "eslint-plugin-prettier": "^3.3.1"
+ "eslint-plugin-prettier": "^5.2.1"
},
"dependencies": {
"@deriv/shared": "^1.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2"
}
-}
+}
\ No newline at end of file
diff --git a/packages/indicators/src/indicators/exponential-moving-average.js b/packages/indicators/src/indicators/exponential-moving-average.js
index 0ea1f903164b..0da4e166658c 100644
--- a/packages/indicators/src/indicators/exponential-moving-average.js
+++ b/packages/indicators/src/indicators/exponential-moving-average.js
@@ -47,7 +47,10 @@ export const exponentialMovingAverageArray = (data, config) => {
let init_val = exponentialMovingAverage(data.slice(0, periods), config);
- return data
- .slice(periods - 1)
- .map((x, i) => (!i ? init_val : (init_val = exponentialMovingAverage([x], config, init_val))));
+ return (
+ data
+ .slice(periods - 1)
+ // eslint-disable-next-line no-confusing-arrow
+ .map((x, i) => (!i ? init_val : (init_val = exponentialMovingAverage([x], config, init_val))))
+ );
};
diff --git a/packages/indicators/src/indicators/relative-strength-index.js b/packages/indicators/src/indicators/relative-strength-index.js
index b6f184ef5dfa..bb87b65c3707 100644
--- a/packages/indicators/src/indicators/relative-strength-index.js
+++ b/packages/indicators/src/indicators/relative-strength-index.js
@@ -1,7 +1,9 @@
import { sequence } from '@deriv/shared';
import { takeField } from '../utils/math';
+// eslint-disable-next-line no-confusing-arrow
const calcGain = (q1, q2) => (q2 > q1 ? q2 - q1 : 0);
+// eslint-disable-next-line no-confusing-arrow
const calcLoss = (q1, q2) => (q2 < q1 ? q1 - q2 : 0);
const calcFirstAvgDiff = (vals, comp, periods) => {
diff --git a/packages/indicators/src/utils/math.js b/packages/indicators/src/utils/math.js
index 16e98aaccdaf..cea0e6327e27 100644
--- a/packages/indicators/src/utils/math.js
+++ b/packages/indicators/src/utils/math.js
@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-confusing-arrow
export const takeField = (arr, field) => arr.map(x => (field ? x[field] : x));
export const takeLast = (arr, n, field) => takeField(arr.slice(n > arr.length ? 0 : arr.length - n, arr.length), field);
@@ -8,6 +9,7 @@ export const mean = data => data.reduce((a, b) => a + b, 0) / data.length;
export const stddev = data => {
const data_mean = mean(data);
+ // eslint-disable-next-line prefer-exponentiation-operator
const sq_diff = data.map(n => Math.pow(n - data_mean, 2));
const avg_sq_diff = mean(sq_diff);
return Math.sqrt(avg_sq_diff);
diff --git a/packages/p2p/.eslintrc.js b/packages/p2p/.eslintrc.js
index 41f84f27e96b..7e40adef1e24 100644
--- a/packages/p2p/.eslintrc.js
+++ b/packages/p2p/.eslintrc.js
@@ -7,4 +7,7 @@ module.exports = {
webpack: { config: webpackConfig() },
},
},
+ rules: {
+ 'simple-import-sort/imports': 'warn',
+ },
};
diff --git a/packages/p2p/babel.config.json b/packages/p2p/babel.config.json
index 6cffcdffec7a..ed0429552f85 100644
--- a/packages/p2p/babel.config.json
+++ b/packages/p2p/babel.config.json
@@ -3,7 +3,7 @@
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-transform-class-properties", { "loose": true }],
- ["@babel/plugin-proposal-private-methods", { "loose": true }],
+ ["@babel/plugin-transform-private-methods", { "loose": true }],
["@babel/plugin-transform-private-property-in-object", { "loose": true }],
["@babel/plugin-transform-unicode-property-regex", { "useUnicodeFlag": false }],
"@babel/plugin-proposal-export-default-from",
diff --git a/packages/p2p/jest.config.js b/packages/p2p/jest.config.js
index 57c4ce130600..9ca9860c0f72 100644
--- a/packages/p2p/jest.config.js
+++ b/packages/p2p/jest.config.js
@@ -17,6 +17,7 @@ module.exports = {
'^Translations/(.*)$': '/src/translations/$1',
'^Types/(.*)$': '/src/types/$1',
'^Utils/(.*)$': '/src/utils/$1',
+ '@deriv-com/ui': '/../../__mocks__/deriv-com.ui.mock.js',
},
testPathIgnorePatterns: [
'/scripts/',
diff --git a/packages/p2p/package.json b/packages/p2p/package.json
index 5b5ec94f86aa..3270f36b5255 100644
--- a/packages/p2p/package.json
+++ b/packages/p2p/package.json
@@ -18,7 +18,7 @@
"analyze:build": "webpack-bundle-analyzer --no-open -m static -r treemap.html stats.json ./dist && webpack-bundle-analyzer -m json stats.json ./dist",
"test:eslint": "eslint \"./src/**/*.?(js|ts|jsx|tsx)\"",
"build": "rimraf lib && NODE_OPTIONS='-r ts-node/register' webpack --progress",
- "build:publish": "deriv-publisher prepublish && lerna exec --scope=@deriv/shared --scope=@deriv/components -- npm run build:travis -- && rimraf lib && cross-env NODE_ENV=production NPM_PUBLISHING_MODE=1 webpack --progress; deriv-publisher postpublish",
+ "build:publish": "deriv-publisher prepublish && npm exec --workspace=@deriv/shared --workspace=@deriv/components -- npm run build:travis -- && rimraf lib && cross-env NODE_ENV=production NPM_PUBLISHING_MODE=1 webpack --progress; deriv-publisher postpublish",
"build:travis": "rimraf lib && webpack",
"serve": "rimraf lib && cross-env BUILD_MODE='serve' NODE_OPTIONS='-r ts-node/register' webpack --progress --watch",
"start": "rimraf lib && npm run test && npm run serve",
@@ -27,7 +27,7 @@
"deploy:folder": "echo \"No deploy:folder specified\"",
"deploy:staging": "echo \"No deploy:staging specified\"",
"deploy:production": "echo \"No deploy:production specified\"",
- "publish_package": "deriv-publisher prepublish && lerna exec --scope=@deriv/shared --scope=@deriv/components -- npm run build:travis -- && rimraf lib && cross-env NODE_ENV=production NPM_PUBLISHING_MODE=1 webpack --progress && npm publish; deriv-publisher postpublish"
+ "publish_package": "deriv-publisher prepublish && npm exec --workspace=@deriv/shared --workspace=@deriv/components -- npm run build:travis -- && rimraf lib && cross-env NODE_ENV=production NPM_PUBLISHING_MODE=1 webpack --progress && npm publish; deriv-publisher postpublish"
},
"author": "",
"license": "ISC",
@@ -43,7 +43,7 @@
"@deriv/stores": "^1.0.0",
"@deriv/translations": "^1.0.0",
"@sendbird/chat": "^4.9.7",
- "@testing-library/react": "^12.0.0",
+ "@testing-library/react": "^12.1.5",
"@testing-library/user-event": "^13.5.0",
"classnames": "^2.2.6",
"commander": "^3.0.2",
@@ -94,14 +94,14 @@
"cross-env": "^5.2.0",
"css-loader": "^5.0.1",
"css-minimizer-webpack-plugin": "^3.0.1",
- "eslint-config-airbnb-base": "^14.2.1",
+ "eslint-config-airbnb-base": "^15.0.0",
"eslint-config-binary": "^1.0.2",
"eslint-config-prettier": "^7.2.0",
"eslint-plugin-import": "^2.23.4",
- "eslint-plugin-prettier": "^3.3.1",
+ "eslint-plugin-prettier": "^5.2.1",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^4.2.0",
- "lint-staged": "^10.4.0",
+ "lint-staged": "^11.2.6",
"mini-css-extract-plugin": "^1.3.4",
"postcss-loader": "^6.2.1",
"postcss-preset-env": "^7.4.3",
@@ -114,6 +114,6 @@
"typescript": "^4.6.3",
"webpack": "^5.81.0",
"webpack-bundle-analyzer": "^4.3.0",
- "webpack-cli": "^4.7.2"
+ "webpack-cli": "^5.1.4"
}
-}
\ No newline at end of file
+}
diff --git a/packages/p2p/src/components/add-payment-method-form/add-payment-method-form.tsx b/packages/p2p/src/components/add-payment-method-form/add-payment-method-form.tsx
index 7100602b4fa5..33f9dc774fbd 100755
--- a/packages/p2p/src/components/add-payment-method-form/add-payment-method-form.tsx
+++ b/packages/p2p/src/components/add-payment-method-form/add-payment-method-form.tsx
@@ -61,6 +61,7 @@ const AddPaymentMethodForm = ({ should_show_separated_footer = false }: TAddPaym
const createPaymentMethod = async (
values: TPaymentMethodValues,
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
{ setSubmitting }: FormikBag
) => {
await create({ ...values, method: payment_method_value || selected_payment_method });
diff --git a/packages/p2p/src/constants/modals.ts b/packages/p2p/src/constants/modals.ts
index d4cfe58be966..21331d4807e1 100644
--- a/packages/p2p/src/constants/modals.ts
+++ b/packages/p2p/src/constants/modals.ts
@@ -209,6 +209,7 @@ export const Modals = {
export type TModals = typeof Modals;
export type TModalKeys = keyof TModals;
export type TModalProps = {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
[T in TModalKeys]: Parameters[0] extends { [key: string]: any }
? Parameters[0]
: Record;
diff --git a/packages/p2p/src/pages/orders/chat/chat-messages.jsx b/packages/p2p/src/pages/orders/chat/chat-messages.jsx
index ef6a8619c808..16cb55f1b9f5 100644
--- a/packages/p2p/src/pages/orders/chat/chat-messages.jsx
+++ b/packages/p2p/src/pages/orders/chat/chat-messages.jsx
@@ -121,7 +121,7 @@ const ChatMessages = observer(() => {
)}
{chat_message.message_type === ChatMessage.TYPE_FILE &&
getMessageFormat(chat_message, message_color)}
-
+
{formatMilliseconds(chat_message.created_at, 'HH:mm', true)}
diff --git a/packages/p2p/src/types/modal-manager.types.ts b/packages/p2p/src/types/modal-manager.types.ts
index 761f69ae61ca..f607fa1f0282 100644
--- a/packages/p2p/src/types/modal-manager.types.ts
+++ b/packages/p2p/src/types/modal-manager.types.ts
@@ -5,6 +5,7 @@ export type TModals = typeof Modals;
export type TModalKeys = keyof TModals;
export type TModalProps = {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
[T in TModalKeys]: Parameters
[0] extends { [key: string]: any }
? Parameters[0]
: Record;
diff --git a/packages/p2p/src/types/routes.types.ts b/packages/p2p/src/types/routes.types.ts
index 2c2261dfb72c..bc2ab53b3cc7 100644
--- a/packages/p2p/src/types/routes.types.ts
+++ b/packages/p2p/src/types/routes.types.ts
@@ -2,6 +2,7 @@ import { ElementType } from 'react';
import { Redirect } from 'react-router-dom';
export type TRoute = {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
component?: ((routes?: TRoute[]) => JSX.Element) | typeof Redirect | ElementType | null | undefined;
default?: boolean;
exact?: boolean;
diff --git a/packages/p2p/src/utils/__tests__/server_time.spec.ts b/packages/p2p/src/utils/__tests__/server_time.spec.ts
index 322ebf8fa38f..974cc36038d8 100644
--- a/packages/p2p/src/utils/__tests__/server_time.spec.ts
+++ b/packages/p2p/src/utils/__tests__/server_time.spec.ts
@@ -15,7 +15,7 @@ jest.mock('@deriv/shared', () => {
describe('server_time', () => {
beforeEach(() => {
- jest.useFakeTimers();
+ jest.useFakeTimers({ legacyFakeTimers: true });
jest.clearAllMocks();
});
diff --git a/packages/p2p/src/utils/orders.ts b/packages/p2p/src/utils/orders.ts
index 4bcc0678c6d6..4e2aa124f4f3 100644
--- a/packages/p2p/src/utils/orders.ts
+++ b/packages/p2p/src/utils/orders.ts
@@ -12,7 +12,11 @@ type TServerTime = typeof ServerTime;
interface ExtendedOrderDetails extends P2POrderInfo {}
class ExtendedOrderDetails {
- constructor(public order_details: P2POrderInfo, public loginid: string, public server_time: TServerTime) {
+ constructor(
+ public order_details: P2POrderInfo,
+ public loginid: string,
+ public server_time: TServerTime
+ ) {
Object.assign(this, order_details);
}
diff --git a/packages/p2p/webpack.config.js b/packages/p2p/webpack.config.js
index 37c45c4e0fb2..8dee6e6a4b7e 100644
--- a/packages/p2p/webpack.config.js
+++ b/packages/p2p/webpack.config.js
@@ -175,6 +175,13 @@ module.exports = function (env) {
'react-router-dom': 'react-router-dom',
'prop-types': 'prop-types',
'@deriv-com/analytics': '@deriv-com/analytics',
+ '@deriv/shared': '@deriv/shared',
+ '@deriv/utils': '@deriv/utils',
+ '@deriv/stores': '@deriv/stores',
+ '@deriv/translations': '@deriv/translations',
+ '@deriv/hooks': '@deriv/hooks',
+ '@deriv/components': '@deriv/components',
+ '@deriv/api': '@deriv/api',
...(is_publishing ? {} : { 'lodash.debounce': 'lodash.debounce', formik: 'formik' }),
...publisher_utils.getLocalDerivPackageExternals(__dirname, is_publishing),
},
diff --git a/packages/reports/.eslintrc.js b/packages/reports/.eslintrc.js
index f363d6b74779..9327dd54bb25 100644
--- a/packages/reports/.eslintrc.js
+++ b/packages/reports/.eslintrc.js
@@ -10,5 +10,7 @@ module.exports = {
},
rules: {
'import/no-extraneous-dependencies': ['off', { devDependencies: ['**/*.spec.*', '**/*.test.*', '**/*.d.ts*'] }],
+ 'simple-import-sort/imports': 'warn',
+ 'prettier/prettier': 'warn',
},
};
diff --git a/packages/reports/babel.config.json b/packages/reports/babel.config.json
new file mode 100644
index 000000000000..d00ef2512df2
--- /dev/null
+++ b/packages/reports/babel.config.json
@@ -0,0 +1,16 @@
+{
+ "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
+ "plugins": [
+ ["@babel/plugin-proposal-decorators", { "legacy": true }],
+ ["@babel/plugin-proposal-class-properties", { "loose": true }],
+ ["@babel/plugin-transform-private-methods", { "loose": true }],
+ ["@babel/plugin-transform-private-property-in-object", { "loose": true }],
+ ["@babel/plugin-transform-unicode-property-regex", { "useUnicodeFlag": false }],
+ "@babel/plugin-proposal-export-default-from",
+ "@babel/plugin-proposal-object-rest-spread",
+ "@babel/plugin-proposal-export-namespace-from",
+ "@babel/plugin-syntax-dynamic-import",
+ "@babel/plugin-proposal-optional-chaining",
+ "@babel/plugin-proposal-nullish-coalescing-operator"
+ ]
+}
diff --git a/packages/reports/jest.config.js b/packages/reports/jest.config.js
index 9240f1d6df1d..ece739e7b7ed 100644
--- a/packages/reports/jest.config.js
+++ b/packages/reports/jest.config.js
@@ -20,5 +20,6 @@ module.exports = {
'^Stores/(.*)$': '/src/Stores/$1',
'^Types/(.*)$': '/src/Types/$1',
'^Types$': '/src/Types/index.ts',
+ '@deriv-com/ui': '/../../__mocks__/deriv-com.ui.mock.js',
},
};
diff --git a/packages/reports/package.json b/packages/reports/package.json
index c357a62b8f8c..1ed2f646b56f 100644
--- a/packages/reports/package.json
+++ b/packages/reports/package.json
@@ -39,14 +39,14 @@
"babel-loader": "^9.2.1",
"circular-dependency-plugin": "^5.2.2",
"clean-webpack-plugin": "^3.0.0",
- "copy-webpack-plugin": "^9.0.1",
+ "copy-webpack-plugin": "^12.0.2",
"css-loader": "^5.0.1",
"css-minimizer-webpack-plugin": "^3.0.1",
- "eslint-config-airbnb-base": "^14.2.1",
+ "eslint-config-airbnb-base": "^15.0.0",
"eslint-config-binary": "^1.0.2",
"eslint-config-prettier": "^7.2.0",
"eslint-plugin-import": "^2.23.4",
- "eslint-plugin-prettier": "^3.3.1",
+ "eslint-plugin-prettier": "^5.2.1",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^4.2.0",
"file-loader": "^6.2.0",
@@ -72,7 +72,7 @@
"terser-webpack-plugin": "^5.1.1",
"webpack": "^5.81.0",
"webpack-bundle-analyzer": "^4.3.0",
- "webpack-cli": "^4.7.2",
+ "webpack-cli": "^5.1.4",
"webpack-manifest-plugin": "^4.0.2",
"webpack-node-externals": "^2.5.2"
},
diff --git a/packages/reports/src/Containers/__tests__/reports.spec.tsx b/packages/reports/src/Containers/__tests__/reports.spec.tsx
index ae8370cfe38e..2b1a6c60e4bb 100644
--- a/packages/reports/src/Containers/__tests__/reports.spec.tsx
+++ b/packages/reports/src/Containers/__tests__/reports.spec.tsx
@@ -7,7 +7,7 @@ import { Analytics } from '@deriv-com/analytics';
import { StoreProvider, mockStore } from '@deriv/stores';
import { TStores } from '@deriv/stores/types';
import userEvent from '@testing-library/user-event';
-import ui from '@deriv-com/ui';
+import { useDevice } from '@deriv-com/ui';
jest.mock('@deriv-com/analytics', () => ({
Analytics: {
@@ -159,23 +159,21 @@ describe('Reports', () => {
);
});
- test('navigates to a different route on select change', () => {
- const spy = jest.spyOn(ui, 'useDevice').mockImplementation(() => ({
+ test('navigates to a different route on select change', async () => {
+ (useDevice as jest.Mock).mockReturnValue({
isDesktop: false,
isMobile: true,
isTablet: false,
isTabletPortrait: false,
isMobileOrTabletLandscape: false,
- }));
+ });
const history = createMemoryHistory();
renderReports(store, history);
- userEvent.selectOptions(screen.getByRole('combobox'), route2);
+ await userEvent.selectOptions(screen.getByRole('combobox'), route2);
expect(history.location.pathname).toBe(route2);
-
- spy.mockRestore();
});
- test('calls routeBackInApp on close button click', () => {
+ test('calls routeBackInApp on close button click', async () => {
const mockRouteBackInApp = jest.fn();
store = mockStore({
...mock,
@@ -186,11 +184,18 @@ describe('Reports', () => {
});
const history = createMemoryHistory();
renderReports(store, history);
- userEvent.click(screen.getByTestId(onCloseClick));
+ await userEvent.click(screen.getByTestId(onCloseClick));
expect(mockRouteBackInApp).toHaveBeenCalled();
});
test('sets vertical_tab_index to 0 if the selected route is default', () => {
+ (useDevice as jest.Mock).mockReturnValue({
+ isDesktop: true,
+ isMobile: false,
+ isTablet: false,
+ isTabletPortrait: false,
+ isMobileOrTabletLandscape: false,
+ });
const history = createMemoryHistory();
history.push(route1);
renderReports(store, history);
@@ -203,6 +208,13 @@ describe('Reports', () => {
});
test('sets vertical_tab_index to reports_route_tab_index if the selected route is not default', () => {
+ (useDevice as jest.Mock).mockReturnValue({
+ isDesktop: true,
+ isMobile: false,
+ isTablet: false,
+ isTabletPortrait: false,
+ isMobileOrTabletLandscape: false,
+ });
const history = createMemoryHistory();
history.push(route2);
renderReports(store, history);
diff --git a/packages/reports/src/Types/common-prop.type.ts b/packages/reports/src/Types/common-prop.type.ts
index 87b0061edf17..a6b3ab2562d5 100644
--- a/packages/reports/src/Types/common-prop.type.ts
+++ b/packages/reports/src/Types/common-prop.type.ts
@@ -12,6 +12,7 @@ import { getSupportedContracts, getUnsupportedContracts } from '@deriv/shared';
export type TPassthrough = {
root_store: TCoreStores;
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
WS: Record;
};
@@ -73,7 +74,9 @@ export type TColIndex =
export type TCellContentProps = {
cell_value: TKeys;
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
passthrough: any;
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
row_obj: any;
is_footer: boolean;
is_turbos?: boolean;
@@ -96,7 +99,9 @@ export type TColumnTemplateType = {
refid?: string;
date?: string;
balance?: string;
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
item?: any;
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
map?: any;
};
diff --git a/packages/shared/.eslintrc.js b/packages/shared/.eslintrc.js
new file mode 100644
index 000000000000..294e14b75fdf
--- /dev/null
+++ b/packages/shared/.eslintrc.js
@@ -0,0 +1,8 @@
+module.exports = {
+ extends: '../../.eslintrc.js',
+ rules: {
+ 'simple-import-sort/imports': 'warn',
+ 'import/no-import-module-exports': 'warn',
+ 'prettier/prettier': 'warn',
+ },
+};
diff --git a/packages/shared/babel.config.json b/packages/shared/babel.config.json
new file mode 100644
index 000000000000..7c544edd07bc
--- /dev/null
+++ b/packages/shared/babel.config.json
@@ -0,0 +1,15 @@
+{
+ "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
+ "plugins": [
+ ["@babel/plugin-proposal-decorators", { "legacy": true }],
+ ["@babel/plugin-proposal-class-properties", { "loose": true }],
+ ["@babel/plugin-transform-private-methods", { "loose": true }],
+ ["@babel/plugin-transform-private-property-in-object", { "loose": true }],
+ "@babel/plugin-proposal-export-default-from",
+ "@babel/plugin-proposal-object-rest-spread",
+ "@babel/plugin-proposal-export-namespace-from",
+ "@babel/plugin-syntax-dynamic-import",
+ "@babel/plugin-proposal-optional-chaining",
+ "@babel/plugin-proposal-nullish-coalescing-operator"
+ ]
+}
diff --git a/packages/shared/package.json b/packages/shared/package.json
index 71cf2a195aa3..37674a592d0b 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -33,7 +33,7 @@
"@babel/eslint-parser": "^7.25.1",
"@babel/preset-react": "^7.24.7",
"@testing-library/jest-dom": "^5.12.0",
- "@testing-library/react": "^12.0.0",
+ "@testing-library/react": "^12.1.5",
"@testing-library/react-hooks": "^7.0.2",
"@testing-library/user-event": "^13.5.0",
"@types/jsdom": "^20.0.0",
diff --git a/packages/shared/src/services/ws-methods.ts b/packages/shared/src/services/ws-methods.ts
index aa845dfbb76e..c43f3ab6753e 100644
--- a/packages/shared/src/services/ws-methods.ts
+++ b/packages/shared/src/services/ws-methods.ts
@@ -1,4 +1,4 @@
-// eslint-disable-next-line import/no-mutable-exports
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
export let WS: Record;
export const setWebsocket = (websocket: object) => {
diff --git a/packages/shared/src/utils/array/array.ts b/packages/shared/src/utils/array/array.ts
index d1beef799052..a45773aa8ea3 100644
--- a/packages/shared/src/utils/array/array.ts
+++ b/packages/shared/src/utils/array/array.ts
@@ -2,6 +2,7 @@ export const shuffleArray = (array: T[]): T[] => {
const firstDigit = (num: number) => Number(String(num)[0]);
for (let i = array.length - 1; i > 0; i--) {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
const crypto = window.crypto || (window as any).msCrypto; // to make it working in MS Explorer
const random_array = new Uint32Array(1);
const random_number = crypto.getRandomValues(random_array);
diff --git a/packages/shared/src/utils/currency/currency.ts b/packages/shared/src/utils/currency/currency.ts
index e71736586622..d2c787149955 100644
--- a/packages/shared/src/utils/currency/currency.ts
+++ b/packages/shared/src/utils/currency/currency.ts
@@ -142,6 +142,7 @@ export const isCryptocurrency = (currency: string) => {
};
export const CryptoConfig = (() => {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
let crypto_config: any;
// TODO: [use-shared-i18n] - Use translate function shared among apps or pass in translated names externally.
diff --git a/packages/shared/src/utils/helpers/duration.ts b/packages/shared/src/utils/helpers/duration.ts
index daa2faec944d..96ded229c405 100644
--- a/packages/shared/src/utils/helpers/duration.ts
+++ b/packages/shared/src/utils/helpers/duration.ts
@@ -116,6 +116,7 @@ const getDurationFromString = (duration_string: string) => {
};
// TODO will change this after the global stores types get ready
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
export const getExpiryType = (store: any) => {
const { duration_unit, expiry_date, expiry_type, duration_units_list } = store;
const server_time = store.root_store.common.server_time;
diff --git a/packages/shared/src/utils/loader/lazy-load.tsx b/packages/shared/src/utils/loader/lazy-load.tsx
index 1f302478cbcc..2b6d2d5c4342 100644
--- a/packages/shared/src/utils/loader/lazy-load.tsx
+++ b/packages/shared/src/utils/loader/lazy-load.tsx
@@ -7,6 +7,7 @@ export const makeLazyLoader =
loader: {
ComponentModule: importFn,
},
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
render(loaded: { [key: string]: any }, props: object) {
const ComponentLazy = component_name
? loaded.ComponentModule.default[component_name]
diff --git a/packages/shared/src/utils/login/login.ts b/packages/shared/src/utils/login/login.ts
index ac4c4653c19c..a66f1341ed88 100644
--- a/packages/shared/src/utils/login/login.ts
+++ b/packages/shared/src/utils/login/login.ts
@@ -26,8 +26,10 @@ type TLoginUrl = {
export const loginUrl = ({ language }: TLoginUrl) => {
const server_url = LocalStore.get('config.server_url');
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
const signup_device_cookie = new (CookieStorage as any)('signup_device');
const signup_device = signup_device_cookie.get('signup_device');
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
const date_first_contact_cookie = new (CookieStorage as any)('date_first_contact');
const date_first_contact = date_first_contact_cookie.get('date_first_contact');
const marketing_queries = `${signup_device ? `&signup_device=${signup_device}` : ''}${
diff --git a/packages/shared/src/utils/screen/responsive.ts b/packages/shared/src/utils/screen/responsive.ts
index 9e8317c68908..f0712a38747b 100644
--- a/packages/shared/src/utils/screen/responsive.ts
+++ b/packages/shared/src/utils/screen/responsive.ts
@@ -4,6 +4,7 @@ declare global {
}
interface Window {
// TODO DocumentTouch been removed from the standards, we need to change this with Touch and TouchList later
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
DocumentTouch: any;
}
}
diff --git a/packages/shared/src/utils/storage/storage.ts b/packages/shared/src/utils/storage/storage.ts
index 0c66975d32f4..a920ab82a096 100644
--- a/packages/shared/src/utils/storage/storage.ts
+++ b/packages/shared/src/utils/storage/storage.ts
@@ -90,6 +90,7 @@ InScriptStore.prototype = {
return getPropertyValue(this.store, key);
},
set(
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
this: { store: any; set: (key: string | string[], value: string, obj: string[]) => void },
k: string | string[],
value: string,
@@ -129,6 +130,7 @@ InScriptStore.prototype = {
},
};
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
export const State = new (InScriptStore as any)();
State.prototype = InScriptStore.prototype;
/**
@@ -226,8 +228,12 @@ export const removeCookies = (...cookie_names: string[]) => {
};
export const LocalStore = isStorageSupported(window.localStorage)
- ? new (Store as any)(window.localStorage)
- : new (InScriptStore as any)();
+ ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ new (Store as any)(window.localStorage)
+ : // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ new (InScriptStore as any)();
export const SessionStore = isStorageSupported(window.sessionStorage)
- ? new (Store as any)(window.sessionStorage)
- : new (InScriptStore as any)();
+ ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ new (Store as any)(window.sessionStorage)
+ : // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ new (InScriptStore as any)();
diff --git a/packages/shared/src/utils/validation/form-validations.ts b/packages/shared/src/utils/validation/form-validations.ts
index 85085feb21e0..d2f36f482227 100644
--- a/packages/shared/src/utils/validation/form-validations.ts
+++ b/packages/shared/src/utils/validation/form-validations.ts
@@ -6,6 +6,7 @@ import fromEntries from 'object.fromentries';
type TConfig = {
default_value: string | boolean | number;
supported_in: string[];
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
rules?: Array<(TOptions | any)[]>;
values?: Record;
};
diff --git a/packages/stores/babel.config.json b/packages/stores/babel.config.json
new file mode 100644
index 000000000000..7c544edd07bc
--- /dev/null
+++ b/packages/stores/babel.config.json
@@ -0,0 +1,15 @@
+{
+ "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
+ "plugins": [
+ ["@babel/plugin-proposal-decorators", { "legacy": true }],
+ ["@babel/plugin-proposal-class-properties", { "loose": true }],
+ ["@babel/plugin-transform-private-methods", { "loose": true }],
+ ["@babel/plugin-transform-private-property-in-object", { "loose": true }],
+ "@babel/plugin-proposal-export-default-from",
+ "@babel/plugin-proposal-object-rest-spread",
+ "@babel/plugin-proposal-export-namespace-from",
+ "@babel/plugin-syntax-dynamic-import",
+ "@babel/plugin-proposal-optional-chaining",
+ "@babel/plugin-proposal-nullish-coalescing-operator"
+ ]
+}
diff --git a/packages/stores/package.json b/packages/stores/package.json
index fb7962d90c32..3bec104fa4ec 100644
--- a/packages/stores/package.json
+++ b/packages/stores/package.json
@@ -14,7 +14,7 @@
},
"devDependencies": {
"@deriv/api-types": "1.0.172",
- "@testing-library/react": "^12.0.0",
+ "@testing-library/react": "^12.1.5",
"typescript": "^4.6.3",
"react-router": "^5.2.0",
"moment": "^2.29.2",
diff --git a/packages/trader/.eslintrc.js b/packages/trader/.eslintrc.js
index 6718b8cddc2d..f74bc633f7ac 100644
--- a/packages/trader/.eslintrc.js
+++ b/packages/trader/.eslintrc.js
@@ -7,4 +7,8 @@ module.exports = {
webpack: { config: webpackConfig({}) },
},
},
+ rules: {
+ 'simple-import-sort/imports': 'warn',
+ 'prettier/prettier': 'warn',
+ },
};
diff --git a/packages/trader/babel.config.json b/packages/trader/babel.config.json
new file mode 100644
index 000000000000..7c544edd07bc
--- /dev/null
+++ b/packages/trader/babel.config.json
@@ -0,0 +1,15 @@
+{
+ "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
+ "plugins": [
+ ["@babel/plugin-proposal-decorators", { "legacy": true }],
+ ["@babel/plugin-proposal-class-properties", { "loose": true }],
+ ["@babel/plugin-transform-private-methods", { "loose": true }],
+ ["@babel/plugin-transform-private-property-in-object", { "loose": true }],
+ "@babel/plugin-proposal-export-default-from",
+ "@babel/plugin-proposal-object-rest-spread",
+ "@babel/plugin-proposal-export-namespace-from",
+ "@babel/plugin-syntax-dynamic-import",
+ "@babel/plugin-proposal-optional-chaining",
+ "@babel/plugin-proposal-nullish-coalescing-operator"
+ ]
+}
diff --git a/packages/trader/jest.config.js b/packages/trader/jest.config.js
index 10872325dee1..e939788aefab 100644
--- a/packages/trader/jest.config.js
+++ b/packages/trader/jest.config.js
@@ -17,5 +17,6 @@ module.exports = {
'^Utils/(.*)$': '/src/Utils/$1',
'^Services/(.*)$': '/src/Services/$1',
'^Stores/(.*)$': '/src/Stores/$1',
+ '@deriv-com/ui': '/../../__mocks__/deriv-com.ui.mock.js',
},
};
diff --git a/packages/trader/package.json b/packages/trader/package.json
index 83d74ac87695..f3e05dd39c95 100644
--- a/packages/trader/package.json
+++ b/packages/trader/package.json
@@ -38,7 +38,7 @@
"@babel/eslint-parser": "^7.25.1",
"@babel/preset-react": "^7.24.7",
"@testing-library/jest-dom": "^5.12.0",
- "@testing-library/react": "^12.0.0",
+ "@testing-library/react": "^12.1.5",
"@testing-library/react-hooks": "^7.0.2",
"@testing-library/user-event": "^13.5.0",
"@types/lodash.debounce": "^4.0.7",
@@ -48,14 +48,14 @@
"babel-loader": "^9.2.1",
"circular-dependency-plugin": "^5.2.2",
"clean-webpack-plugin": "^3.0.0",
- "copy-webpack-plugin": "^9.0.1",
+ "copy-webpack-plugin": "^12.0.2",
"css-loader": "^5.0.1",
"css-minimizer-webpack-plugin": "^3.0.1",
- "eslint-config-airbnb-base": "^14.2.1",
+ "eslint-config-airbnb-base": "^15.0.0",
"eslint-config-binary": "^1.0.2",
"eslint-config-prettier": "^7.2.0",
"eslint-plugin-import": "^2.23.4",
- "eslint-plugin-prettier": "^3.3.1",
+ "eslint-plugin-prettier": "^5.2.1",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^4.2.0",
"file-loader": "^6.2.0",
@@ -83,7 +83,7 @@
"typescript": "^4.6.3",
"webpack": "^5.81.0",
"webpack-bundle-analyzer": "^4.3.0",
- "webpack-cli": "^4.7.2",
+ "webpack-cli": "^5.1.4",
"webpack-manifest-plugin": "^4.0.2",
"webpack-node-externals": "^2.5.2"
},
@@ -122,7 +122,7 @@
"react-beautiful-dnd": "^13.1.1",
"react-content-loader": "^6.2.0",
"react-dom": "^17.0.2",
- "react-joyride": "^2.5.3",
+ "react-joyride": "^2.9.2",
"react-loadable": "^5.5.0",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
diff --git a/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-drawer.tsx b/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-drawer.tsx
index 7f9be1bccaa5..def22148814e 100644
--- a/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-drawer.tsx
+++ b/packages/trader/src/App/Components/Elements/PositionsDrawer/positions-drawer.tsx
@@ -38,6 +38,7 @@ type TPositionDrawerCardItem = TPortfolioStore &
is_new_row?: boolean;
measure?: () => void;
onClickRemove: ReturnType['portfolio']['removePositionById'];
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
row?: TPortfolioPosition | { [key: string]: any };
server_time: ReturnType['common']['server_time'];
symbol: ReturnType['symbol'];
diff --git a/packages/trader/src/App/Containers/__tests__/trade-header-extensions.spec.tsx b/packages/trader/src/App/Containers/__tests__/trade-header-extensions.spec.tsx
index 2efce666cf69..43f21127b5e1 100644
--- a/packages/trader/src/App/Containers/__tests__/trade-header-extensions.spec.tsx
+++ b/packages/trader/src/App/Containers/__tests__/trade-header-extensions.spec.tsx
@@ -3,7 +3,7 @@ import { render } from '@testing-library/react';
import TraderProviders from '../../../trader-providers';
import TradeHeaderExtensions from '../trade-header-extensions';
import { mockStore } from '@deriv/stores';
-import ui from '@deriv-com/ui';
+import { useDevice } from '@deriv-com/ui';
jest.mock('@deriv/shared', () => ({
...jest.requireActual('@deriv/shared'),
@@ -47,18 +47,16 @@ describe('', () => {
);
};
it('populateHeaderExtensions should not be called with null if show_component is true', async () => {
- const spy = jest.spyOn(ui, 'useDevice').mockImplementation(() => ({
+ (useDevice as jest.Mock).mockReturnValue({
isDesktop: false,
isMobile: true,
isTablet: false,
isTabletPortrait: false,
isMobileOrTabletLandscape: false,
- }));
+ });
renderTraderFooterExtensions(mock_store);
expect(mock_store.ui.populateHeaderExtensions).not.toHaveBeenCalledWith(null);
-
- spy.mockRestore();
});
it('populateHeaderExtensions should be called with null if is_logged_in is false', async () => {
mock_store.client.is_logged_in = false;
diff --git a/packages/trader/src/AppV2/Components/Guide/__tests__/guide.spec.tsx b/packages/trader/src/AppV2/Components/Guide/__tests__/guide.spec.tsx
index dbbb503d91fc..ea916c68ea7b 100644
--- a/packages/trader/src/AppV2/Components/Guide/__tests__/guide.spec.tsx
+++ b/packages/trader/src/AppV2/Components/Guide/__tests__/guide.spec.tsx
@@ -110,33 +110,33 @@ describe('Guide', () => {
jest.clearAllMocks();
});
- it('should render component with label and if user clicks on it, should show available contract information', () => {
+ it('should render component with label and if user clicks on it, should show available contract information', async () => {
renderGuide();
expect(screen.getByText('Guide')).toBeInTheDocument();
- userEvent.click(screen.getByRole('button'));
+ await userEvent.click(screen.getByRole('button'));
expect(screen.getByText(trade_types)).toBeInTheDocument();
AVAILABLE_CONTRACTS.forEach(({ id }) => expect(screen.getByText(id)).toBeInTheDocument());
});
- it('should render component without label if has_label === false and if user clicks on it, should show available contract information', () => {
+ it('should render component without label if has_label === false and if user clicks on it, should show available contract information', async () => {
renderGuide({ has_label: false });
expect(screen.queryByText('Guide')).not.toBeInTheDocument();
- userEvent.click(screen.getByRole('button'));
+ await userEvent.click(screen.getByRole('button'));
expect(screen.getByText(trade_types)).toBeInTheDocument();
expect(sendOpenGuideToAnalytics).toHaveBeenCalledWith(TRADE_TYPES.RISE_FALL, 'trade_type_page');
AVAILABLE_CONTRACTS.forEach(({ id }) => expect(screen.getByText(id)).toBeInTheDocument());
});
- it('should render component with description for only for selected trade type if show_guide_for_selected_contract === true', () => {
+ it('should render component with description for only for selected trade type if show_guide_for_selected_contract === true', async () => {
renderGuide({ show_guide_for_selected_contract: true });
- userEvent.click(screen.getByRole('button'));
+ await userEvent.click(screen.getByRole('button'));
expect(screen.queryByText(trade_types)).not.toBeInTheDocument();
expect(screen.getByText(CONTRACT_LIST.RISE_FALL)).toBeInTheDocument();
@@ -149,16 +149,16 @@ describe('Guide', () => {
);
});
- it('should render term definition if user clicked on it', () => {
+ it('should render term definition if user clicked on it', async () => {
renderGuide();
const term_definition = 'You can choose a growth rate with values of 1%, 2%, 3%, 4%, and 5%.';
expect(screen.queryByText(term_definition)).not.toBeInTheDocument();
- userEvent.click(screen.getByText('Guide'));
- userEvent.click(screen.getByText(CONTRACT_LIST.ACCUMULATORS));
- userEvent.click(screen.getByRole('button', { name: getTerm().GROWTH_RATE.toLowerCase() }));
+ await userEvent.click(screen.getByText('Guide'));
+ await userEvent.click(screen.getByText(CONTRACT_LIST.ACCUMULATORS));
+ await userEvent.click(screen.getByRole('button', { name: getTerm().GROWTH_RATE.toLowerCase() }));
- expect(screen.getByText(term_definition)).toBeInTheDocument();
+ expect(await screen.findByText(term_definition)).toBeInTheDocument();
});
});
diff --git a/packages/trader/src/AppV2/Components/MarketCountdownTimer/__tests__/market-countdown-timer.spec.tsx b/packages/trader/src/AppV2/Components/MarketCountdownTimer/__tests__/market-countdown-timer.spec.tsx
index 9a7ce4c84f4e..e70171f127ee 100644
--- a/packages/trader/src/AppV2/Components/MarketCountdownTimer/__tests__/market-countdown-timer.spec.tsx
+++ b/packages/trader/src/AppV2/Components/MarketCountdownTimer/__tests__/market-countdown-timer.spec.tsx
@@ -1,6 +1,5 @@
import React from 'react';
import { screen, render } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect'; // for the `toBeInTheDocument` matcher
import MarketCountdownTimer from '..';
describe('MarketCountDownTimer', () => {
diff --git a/packages/trader/src/AppV2/Components/OnboardingGuide/GuideForPages/__tests__/onboarding-guide.spec.tsx b/packages/trader/src/AppV2/Components/OnboardingGuide/GuideForPages/__tests__/onboarding-guide.spec.tsx
index 0ce8eedd7841..62d852d5405e 100644
--- a/packages/trader/src/AppV2/Components/OnboardingGuide/GuideForPages/__tests__/onboarding-guide.spec.tsx
+++ b/packages/trader/src/AppV2/Components/OnboardingGuide/GuideForPages/__tests__/onboarding-guide.spec.tsx
@@ -19,7 +19,7 @@ describe('OnboardingGuide', () => {
});
it('should render Modal with correct content for trading page after 800ms after mounting', async () => {
- jest.useFakeTimers();
+ jest.useFakeTimers({ legacyFakeTimers: true });
render();
await waitFor(() => jest.advanceTimersByTime(800));
@@ -32,7 +32,7 @@ describe('OnboardingGuide', () => {
});
it('should render Modal with correct content for positions page after 800ms after mounting', async () => {
- jest.useFakeTimers();
+ jest.useFakeTimers({ legacyFakeTimers: true });
render();
await waitFor(() => jest.advanceTimersByTime(800));
@@ -45,7 +45,7 @@ describe('OnboardingGuide', () => {
});
it('should close the Modal for trading page and start the guide after user clicks on "Let\'s begin" button', async () => {
- jest.useFakeTimers();
+ jest.useFakeTimers({ legacyFakeTimers: true });
render();
await waitFor(() => jest.advanceTimersByTime(800));
@@ -53,7 +53,7 @@ describe('OnboardingGuide', () => {
expect(screen.getByText(trading_modal_text)).toBeInTheDocument();
expect(screen.queryByText(guide_container)).not.toBeInTheDocument();
- userEvent.click(screen.getByRole('button'));
+ await userEvent.click(screen.getByRole('button'));
await waitFor(() => jest.advanceTimersByTime(300));
expect(screen.queryByText(trading_modal_text)).not.toBeInTheDocument();
@@ -64,7 +64,7 @@ describe('OnboardingGuide', () => {
it('should close the Modal for positions page, set flag to localStorage equal to true and do NOT start the guide after user clicks on "Got it" button', async () => {
const field = 'positions_page';
- jest.useFakeTimers();
+ jest.useFakeTimers({ legacyFakeTimers: true });
render();
await waitFor(() => jest.advanceTimersByTime(800));
@@ -73,7 +73,7 @@ describe('OnboardingGuide', () => {
expect(screen.queryByText(guide_container)).not.toBeInTheDocument();
expect(JSON.parse(localStorage.getItem(localStorage_key) as string)[field]).toBe(false);
- userEvent.click(screen.getByRole('button'));
+ await userEvent.click(screen.getByRole('button'));
await waitFor(() => jest.advanceTimersByTime(300));
expect(screen.queryByText(positions_modal_text)).not.toBeInTheDocument();
@@ -85,7 +85,7 @@ describe('OnboardingGuide', () => {
it('should close the Modal for trading page and set flag to localStorage equal to true if user clicks on overlay and do NOT start the guide', async () => {
const field = 'trade_page';
- jest.useFakeTimers();
+ jest.useFakeTimers({ legacyFakeTimers: true });
render();
await waitFor(() => jest.advanceTimersByTime(800));
@@ -94,7 +94,7 @@ describe('OnboardingGuide', () => {
expect(screen.queryByText(guide_container)).not.toBeInTheDocument();
expect(JSON.parse(localStorage.getItem(localStorage_key) as string)[field]).toBe(false);
- userEvent.click(screen.getByTestId('dt-actionsheet-overlay'));
+ await userEvent.click(screen.getByTestId('dt-actionsheet-overlay'));
await waitFor(() => jest.advanceTimersByTime(300));
expect(screen.queryByText(trading_modal_text)).not.toBeInTheDocument();
@@ -106,7 +106,7 @@ describe('OnboardingGuide', () => {
it('should execute callback function after Modal is closed', async () => {
const callback = jest.fn();
- jest.useFakeTimers();
+ jest.useFakeTimers({ legacyFakeTimers: true });
render();
await waitFor(() => jest.advanceTimersByTime(800));
@@ -114,7 +114,7 @@ describe('OnboardingGuide', () => {
expect(screen.getByText(positions_modal_text)).toBeInTheDocument();
expect(screen.queryByText(guide_container)).not.toBeInTheDocument();
- userEvent.click(screen.getByRole('button'));
+ await userEvent.click(screen.getByRole('button'));
await waitFor(() => jest.advanceTimersByTime(300));
expect(callback).toBeCalled();
diff --git a/packages/trader/src/AppV2/Components/TradeParameters/Barrier/__tests__/barrier-input.spec.tsx b/packages/trader/src/AppV2/Components/TradeParameters/Barrier/__tests__/barrier-input.spec.tsx
index b6f1eb530f9e..6d9a2466dcbd 100644
--- a/packages/trader/src/AppV2/Components/TradeParameters/Barrier/__tests__/barrier-input.spec.tsx
+++ b/packages/trader/src/AppV2/Components/TradeParameters/Barrier/__tests__/barrier-input.spec.tsx
@@ -1,6 +1,5 @@
import React from 'react';
import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
import BarrierInput from '../barrier-input';
import userEvent from '@testing-library/user-event';
import TraderProviders from '../../../../../trader-providers';
@@ -45,8 +44,8 @@ describe('BarrierInput', () => {
it('closes ActionSheet on pressing primary action when on first page', async () => {
mockBarrierInput(mockStore(default_trade_store));
- userEvent.click(screen.getByRole('textbox'));
- userEvent.click(screen.getByText(/Save/));
+ await userEvent.click(screen.getByRole('textbox'));
+ await userEvent.click(screen.getByText(/Save/));
await waitFor(() => {
expect(onClose).toBeCalledWith(true);
});
@@ -57,23 +56,23 @@ describe('BarrierInput', () => {
expect(setInitialBarrierValue).toHaveBeenCalledWith('+10');
});
- it('handles chip selection correctly', () => {
+ it('handles chip selection correctly', async () => {
mockBarrierInput(mockStore(default_trade_store));
const aboveSpotChip = screen.getByText('Above spot');
const belowSpotChip = screen.getByText('Below spot');
const fixedPriceChip = screen.getByText('Fixed barrier');
- userEvent.click(belowSpotChip);
+ await userEvent.click(belowSpotChip);
expect(onChange).toHaveBeenCalledWith({ target: { name: 'barrier_1', value: '-10' } });
- userEvent.click(fixedPriceChip);
+ await userEvent.click(fixedPriceChip);
expect(onChange).toHaveBeenCalledWith({ target: { name: 'barrier_1', value: '10' } });
- userEvent.click(aboveSpotChip);
+ await userEvent.click(aboveSpotChip);
expect(onChange).toHaveBeenCalledWith({ target: { name: 'barrier_1', value: '+10' } });
});
- it('handles input change correctly', () => {
+ it('handles input change correctly', async () => {
mockBarrierInput(mockStore(default_trade_store));
const input = screen.getByPlaceholderText('Distance to spot');
@@ -81,7 +80,7 @@ describe('BarrierInput', () => {
expect(onChange).toHaveBeenCalledWith({ target: { name: 'barrier_1', value: '+20' } });
const belowSpotChip = screen.getByText('Below spot');
- userEvent.click(belowSpotChip);
+ await userEvent.click(belowSpotChip);
fireEvent.change(input, { target: { value: '15' } });
expect(onChange).toHaveBeenCalledWith({ target: { name: 'barrier_1', value: '-15' } });
});
@@ -119,42 +118,42 @@ describe('BarrierInput', () => {
expect(screen.getByText('Something went wrong')).toBeInTheDocument();
});
- it('handles chip selection correctly for Above spot when initial barrier is negative', () => {
+ it('handles chip selection correctly for Above spot when initial barrier is negative', async () => {
default_trade_store.modules.trade.barrier_1 = '-10';
mockBarrierInput(mockStore(default_trade_store));
const aboveSpotChip = screen.getByText('Above spot');
- userEvent.click(aboveSpotChip);
+ await userEvent.click(aboveSpotChip);
expect(onChange).toHaveBeenCalledWith({ target: { name: 'barrier_1', value: '+10' } });
});
- it('handles chip selection correctly for Below spot when initial barrier is positive', () => {
+ it('handles chip selection correctly for Below spot when initial barrier is positive', async () => {
default_trade_store.modules.trade.barrier_1 = '+.6';
mockBarrierInput(mockStore(default_trade_store));
const belowSpotChip = screen.getByText('Below spot');
- userEvent.click(belowSpotChip);
+ await userEvent.click(belowSpotChip);
expect(onChange).toHaveBeenCalledWith({ target: { name: 'barrier_1', value: '-0.6' } });
});
- it('handles chip selection correctly for Fixed barrier', () => {
+ it('handles chip selection correctly for Fixed barrier', async () => {
default_trade_store.modules.trade.barrier_1 = '+.6';
mockBarrierInput(mockStore(default_trade_store));
const fixedPriceChip = screen.getByText('Fixed barrier');
- userEvent.click(fixedPriceChip);
+ await userEvent.click(fixedPriceChip);
expect(onChange).toHaveBeenCalledWith({ target: { name: 'barrier_1', value: '0.6' } });
});
- it('handles chip selection correctly for Above spot when initial barrier is fixed price', () => {
+ it('handles chip selection correctly for Above spot when initial barrier is fixed price', async () => {
default_trade_store.modules.trade.barrier_1 = '.6';
mockBarrierInput(mockStore(default_trade_store));
const aboveSpotChip = screen.getByText('Above spot');
- userEvent.click(aboveSpotChip);
+ await userEvent.click(aboveSpotChip);
expect(onChange).toHaveBeenCalledWith({ target: { name: 'barrier_1', value: '+0.6' } });
});
diff --git a/packages/trader/src/AppV2/Containers/Trade/__tests__/trade-types.spec.tsx b/packages/trader/src/AppV2/Containers/Trade/__tests__/trade-types.spec.tsx
index 7fd7af8084d3..bf59f25295f8 100644
--- a/packages/trader/src/AppV2/Containers/Trade/__tests__/trade-types.spec.tsx
+++ b/packages/trader/src/AppV2/Containers/Trade/__tests__/trade-types.spec.tsx
@@ -53,7 +53,6 @@ const mockTradeTypes = (mocked_store = mockStore(default_mock_store)) => {
};
describe('TradeTypes', () => {
- const originalScrollBy = HTMLElement.prototype.scrollBy;
const scrollByMock = jest.fn();
beforeEach(() => {
mockGetTradeTypesList.mockReturnValue([
@@ -71,9 +70,7 @@ describe('TradeTypes', () => {
});
});
afterAll(() => {
- Object.defineProperty(HTMLElement.prototype, 'scrollBy', {
- value: originalScrollBy,
- });
+ jest.restoreAllMocks();
});
it('should render the TradeTypes component with pinned and other trade types', () => {
@@ -93,7 +90,7 @@ describe('TradeTypes', () => {
const removeButton = screen.getAllByTestId('dt_draggable_list_item_icon')[0];
await userEvent.click(removeButton);
- const addButton = screen.getAllByTestId('dt_trade_type_list_item_right_icon')[0];
+ const addButton = (await screen.findAllByTestId('dt_trade_type_list_item_right_icon'))[0];
await userEvent.click(addButton);
expect(screen.getByText('Trade types')).toBeInTheDocument();
diff --git a/packages/trader/src/AppV2/Hooks/useActiveSymbols.ts b/packages/trader/src/AppV2/Hooks/useActiveSymbols.ts
index 5558a2b69711..dd1a001337af 100644
--- a/packages/trader/src/AppV2/Hooks/useActiveSymbols.ts
+++ b/packages/trader/src/AppV2/Hooks/useActiveSymbols.ts
@@ -40,6 +40,7 @@ const useActiveSymbols = () => {
return getContractTypesConfig()[contract_type]?.trade_types ?? [];
};
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
const { barrier_category } = (available_contract_types?.[contract_type]?.config || {}) as any;
const isQueryEnabled = useCallback(() => {
diff --git a/packages/trader/src/AppV2/Hooks/useDtraderQuery.ts b/packages/trader/src/AppV2/Hooks/useDtraderQuery.ts
index 372547a48d6a..cc66028fac48 100644
--- a/packages/trader/src/AppV2/Hooks/useDtraderQuery.ts
+++ b/packages/trader/src/AppV2/Hooks/useDtraderQuery.ts
@@ -15,13 +15,16 @@ type QueryOptions = {
};
// Cache object to store the results
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
const cache: Record = {};
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
const ongoing_requests: Record | undefined> = {};
const getKey = (keys: string | string[]) => (Array.isArray(keys) ? keys.join('-') : keys);
export const useDtraderQuery = (
keys: string | string[],
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
request: Record,
options: QueryOptions = {}
): QueryResult => {
@@ -46,6 +49,7 @@ export const useDtraderQuery = (
const fetchData = useCallback(() => {
setIsFetching(true);
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
let send_promise: Promise | undefined;
if (ongoing_requests[key]) {
diff --git a/packages/trader/src/AppV2/Hooks/useOrderDetails.ts b/packages/trader/src/AppV2/Hooks/useOrderDetails.ts
index 004691f546be..637af7383042 100644
--- a/packages/trader/src/AppV2/Hooks/useOrderDetails.ts
+++ b/packages/trader/src/AppV2/Hooks/useOrderDetails.ts
@@ -311,6 +311,7 @@ const transformHighLow = (data: TContractInfo, CARD_LABELS: TCardLabels) => {
};
// Map of contract types to their respective transform functions
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
const transformFunctionMap: Record Record> = {
[CONTRACT_TYPES.TURBOS.LONG]: transformTurbosData,
[CONTRACT_TYPES.TURBOS.SHORT]: transformTurbosData,
diff --git a/packages/trader/src/AppV2/Utils/trade-params-utils.tsx b/packages/trader/src/AppV2/Utils/trade-params-utils.tsx
index 9d68fb4da15d..3fc6747b1032 100644
--- a/packages/trader/src/AppV2/Utils/trade-params-utils.tsx
+++ b/packages/trader/src/AppV2/Utils/trade-params-utils.tsx
@@ -314,6 +314,7 @@ export const getOptionPerUnit = (
export const getSmallestDuration = (
obj: { [x: string]: { min: number; max: number } | { min: number } },
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
durationUnits: any[]
) => {
const keysPriority = ['tick', 'intraday', 'daily'];
diff --git a/packages/trader/src/Modules/Contract/Containers/__tests__/contract.spec.tsx b/packages/trader/src/Modules/Contract/Containers/__tests__/contract.spec.tsx
index 393e7521f132..f3136bff613b 100644
--- a/packages/trader/src/Modules/Contract/Containers/__tests__/contract.spec.tsx
+++ b/packages/trader/src/Modules/Contract/Containers/__tests__/contract.spec.tsx
@@ -22,6 +22,7 @@ const defaultProps = {
match: { params: { contract_id: '123' } },
};
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
const MockContract = ({ store, props }: { store: any; props: any }) => {
const history = createMemoryHistory();
history.push('/contract/123');
diff --git a/packages/trader/src/Modules/Trading/Components/Elements/PayoutPerPoint/__tests__/payout-per-point-input.spec.tsx b/packages/trader/src/Modules/Trading/Components/Elements/PayoutPerPoint/__tests__/payout-per-point-input.spec.tsx
index 03f7dcba1306..6a22a6513aec 100644
--- a/packages/trader/src/Modules/Trading/Components/Elements/PayoutPerPoint/__tests__/payout-per-point-input.spec.tsx
+++ b/packages/trader/src/Modules/Trading/Components/Elements/PayoutPerPoint/__tests__/payout-per-point-input.spec.tsx
@@ -1,6 +1,5 @@
import React from 'react';
import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
import PayoutPerPointInput from '../payout-per-point-input';
import { useDevice } from '@deriv/components';
import userEvent from '@testing-library/user-event';
@@ -66,10 +65,10 @@ describe('PayoutPerPointInput Component', () => {
expect(screen.queryByText('Distance to current spot')).not.toBeInTheDocument();
});
- test('should call onPayoutClick when an option is selected in WheelPicker', () => {
+ test('should call onPayoutClick when an option is selected in WheelPicker', async () => {
renderComponent(true);
const option = screen.getByText('30');
- userEvent.click(option);
+ await userEvent.click(option);
expect(mockOnPayoutClick).toHaveBeenCalledWith('30');
});
});
diff --git a/packages/trader/src/Modules/Trading/Components/Elements/PayoutPerPoint/__tests__/payout-per-point-mobile-input.spec.tsx b/packages/trader/src/Modules/Trading/Components/Elements/PayoutPerPoint/__tests__/payout-per-point-mobile-input.spec.tsx
index 5e5c788a08b4..fd6e68050f86 100644
--- a/packages/trader/src/Modules/Trading/Components/Elements/PayoutPerPoint/__tests__/payout-per-point-mobile-input.spec.tsx
+++ b/packages/trader/src/Modules/Trading/Components/Elements/PayoutPerPoint/__tests__/payout-per-point-mobile-input.spec.tsx
@@ -1,6 +1,5 @@
import React from 'react';
import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
import PayoutPerPointMobileInput from '../payout-per-point-mobile-input';
import userEvent from '@testing-library/user-event';
@@ -60,20 +59,20 @@ describe('PayoutPerPointMobileInput', () => {
).toBeGreaterThan(0);
});
- test('Save button works correctly', () => {
+ test('Save button works correctly', async () => {
render();
- userEvent.click(screen.getByText('Set Value'));
- userEvent.click(screen.getByText('Save'));
+ await userEvent.click(screen.getByText('Set Value'));
+ await userEvent.click(screen.getByText('Save'));
expect(defaultProps.togglePayoutWheelPicker).toHaveBeenCalled();
expect(defaultProps.onPayoutClick).toHaveBeenCalledWith(defaultProps.payoutChoices[0]);
});
- test('Close button works correctly', () => {
+ test('Close button works correctly', async () => {
render();
- userEvent.click(screen.getByText('IcCross'));
+ await userEvent.click(screen.getByText('IcCross'));
expect(defaultProps.togglePayoutWheelPicker).toHaveBeenCalled();
expect(defaultProps.onPayoutClick).toHaveBeenCalledWith(defaultProps.payout_per_point);
diff --git a/packages/trader/src/Modules/Trading/Components/Form/ContractType/contract-type-widget.tsx b/packages/trader/src/Modules/Trading/Components/Form/ContractType/contract-type-widget.tsx
index 2f40f45c8153..c5bba1ec97ea 100644
--- a/packages/trader/src/Modules/Trading/Components/Form/ContractType/contract-type-widget.tsx
+++ b/packages/trader/src/Modules/Trading/Components/Form/ContractType/contract-type-widget.tsx
@@ -101,6 +101,7 @@ const ContractTypeWidget = observer(
onChange({ target: { name, value: clicked_item.value } });
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
if ((window as any).hj) (window as any).hj('event', `selected_${clicked_item.value}_contract_type`);
if (subform_name === 'trade_type') {
Analytics.trackEvent('ce_trade_types_form', {
diff --git a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Turbos/__tests__/payout-selector.spec.tsx b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Turbos/__tests__/payout-selector.spec.tsx
index a40d5ffc0604..338c5b6c2836 100644
--- a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Turbos/__tests__/payout-selector.spec.tsx
+++ b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Turbos/__tests__/payout-selector.spec.tsx
@@ -1,6 +1,5 @@
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
import PayoutSelector from '../payout-selector';
import { useTraderStore } from 'Stores/useTraderStores';
import { useDevice } from '@deriv-com/ui';
diff --git a/packages/trader/src/Modules/Trading/Components/Form/WheelPicker/__tests__/wheel-picker-mobile.spec.tsx b/packages/trader/src/Modules/Trading/Components/Form/WheelPicker/__tests__/wheel-picker-mobile.spec.tsx
index 002152bdcd4c..580ad72a8899 100644
--- a/packages/trader/src/Modules/Trading/Components/Form/WheelPicker/__tests__/wheel-picker-mobile.spec.tsx
+++ b/packages/trader/src/Modules/Trading/Components/Form/WheelPicker/__tests__/wheel-picker-mobile.spec.tsx
@@ -1,6 +1,5 @@
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
import WheelPickerMobile, { getTargetIndex } from '../wheel-picker-mobile';
jest.mock('react-swipeable', () => ({
diff --git a/packages/trader/src/Modules/Trading/Components/Form/WheelPicker/__tests__/wheel-picker.spec.tsx b/packages/trader/src/Modules/Trading/Components/Form/WheelPicker/__tests__/wheel-picker.spec.tsx
index 7dde33ec7fae..f5a448aecd9d 100644
--- a/packages/trader/src/Modules/Trading/Components/Form/WheelPicker/__tests__/wheel-picker.spec.tsx
+++ b/packages/trader/src/Modules/Trading/Components/Form/WheelPicker/__tests__/wheel-picker.spec.tsx
@@ -1,6 +1,5 @@
import React from 'react';
import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
import WheelPicker from '../wheel-picker';
import userEvent from '@testing-library/user-event';
@@ -23,17 +22,17 @@ describe('WheelPicker Component', () => {
expect(screen.getByText('30 USD')).toBeInTheDocument();
});
- test('should call onClick with the correct value when up button is clicked', () => {
+ test('should call onClick with the correct value when up button is clicked', async () => {
renderComponent('20');
const upButton = screen.getByTestId('dt_up_btn');
- userEvent.click(upButton);
+ await userEvent.click(upButton);
expect(mockOnClick).toHaveBeenCalledWith('10');
});
- test('should call onClick with the correct value when down button is clicked', () => {
+ test('should call onClick with the correct value when down button is clicked', async () => {
renderComponent('20');
const downButton = screen.getByTestId('dt_down_btn');
- userEvent.click(downButton);
+ await userEvent.click(downButton);
expect(mockOnClick).toHaveBeenCalledWith('30');
});
diff --git a/packages/trader/src/Stores/Modules/Trading/trade-store.ts b/packages/trader/src/Stores/Modules/Trading/trade-store.ts
index 0da65aaf191f..53fad1e5028f 100644
--- a/packages/trader/src/Stores/Modules/Trading/trade-store.ts
+++ b/packages/trader/src/Stores/Modules/Trading/trade-store.ts
@@ -142,7 +142,7 @@ export type TChartLayout = {
symbol: string;
symbolObject: ActiveSymbols[number];
timeUnit: string;
- }
+ },
];
timeUnit: string;
volumeUnderlay: boolean;
@@ -1146,8 +1146,10 @@ export default class TradeStore extends BaseStore {
}
const call_put_contract = is_high_low ? higher_lower_contact : rise_fall_contract;
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
if ((window as any).hj) {
const event_string = `placed_${is_call || is_put ? call_put_contract : category}_trade`;
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
(window as any).hj('event', event_string);
}
diff --git a/packages/trader/src/Stores/Modules/index.ts b/packages/trader/src/Stores/Modules/index.ts
index 89375e8187d7..11af7205dd99 100644
--- a/packages/trader/src/Stores/Modules/index.ts
+++ b/packages/trader/src/Stores/Modules/index.ts
@@ -8,6 +8,7 @@ export default class ModulesStore {
positions: PositionsStore;
markets: MarketsStore;
trade: TradeStore;
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
cashier: any;
constructor(root_store: TRootStore, core_store: TCoreStores) {
diff --git a/packages/translations/.eslintrc.js b/packages/translations/.eslintrc.js
index f7a86c175779..ade09a8891e5 100644
--- a/packages/translations/.eslintrc.js
+++ b/packages/translations/.eslintrc.js
@@ -3,5 +3,6 @@ module.exports = {
rules: {
'import/no-unresolved': 'off',
'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
+ 'simple-import-sort/imports': 'warn',
},
};
diff --git a/packages/utils/babel.config.json b/packages/utils/babel.config.json
new file mode 100644
index 000000000000..7c544edd07bc
--- /dev/null
+++ b/packages/utils/babel.config.json
@@ -0,0 +1,15 @@
+{
+ "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
+ "plugins": [
+ ["@babel/plugin-proposal-decorators", { "legacy": true }],
+ ["@babel/plugin-proposal-class-properties", { "loose": true }],
+ ["@babel/plugin-transform-private-methods", { "loose": true }],
+ ["@babel/plugin-transform-private-property-in-object", { "loose": true }],
+ "@babel/plugin-proposal-export-default-from",
+ "@babel/plugin-proposal-object-rest-spread",
+ "@babel/plugin-proposal-export-namespace-from",
+ "@babel/plugin-syntax-dynamic-import",
+ "@babel/plugin-proposal-optional-chaining",
+ "@babel/plugin-proposal-nullish-coalescing-operator"
+ ]
+}
diff --git a/packages/wallets/.eslintrc.js b/packages/wallets/.eslintrc.js
index d938f8959a2c..d0f660f4eb6b 100644
--- a/packages/wallets/.eslintrc.js
+++ b/packages/wallets/.eslintrc.js
@@ -27,6 +27,7 @@ module.exports = {
'lines-around-comment': ['error', { allowObjectStart: true }],
'local-rules/no-react-namespace': 'error',
'no-unneeded-ternary': 'error',
+ 'no-unsafe-optional-chaining': 'warn',
'no-useless-return': 'error',
'object-shorthand': 'error',
'prefer-const': 'error',
diff --git a/packages/wallets/babel.config.json b/packages/wallets/babel.config.json
index 827e08459811..cb8843fe2c84 100644
--- a/packages/wallets/babel.config.json
+++ b/packages/wallets/babel.config.json
@@ -3,13 +3,13 @@
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-transform-class-properties", { "loose": true }],
- ["@babel/plugin-proposal-private-methods", { "loose": true }],
+ ["@babel/plugin-transform-private-methods", { "loose": true }],
["@babel/plugin-transform-private-property-in-object", { "loose": true }],
+ ["@babel/plugin-transform-unicode-property-regex", { "useUnicodeFlag": false }],
"@babel/plugin-proposal-export-default-from",
"@babel/plugin-transform-object-rest-spread",
"@babel/plugin-transform-export-namespace-from",
"@babel/plugin-syntax-dynamic-import",
- ["@babel/plugin-transform-unicode-property-regex", { "useUnicodeFlag": false }],
"@babel/plugin-transform-optional-chaining",
"@babel/plugin-transform-nullish-coalescing-operator",
"babel-plugin-transform-barrels"
diff --git a/packages/wallets/jest.config.js b/packages/wallets/jest.config.js
index 8812c55d50b2..7c60e75100db 100644
--- a/packages/wallets/jest.config.js
+++ b/packages/wallets/jest.config.js
@@ -4,6 +4,7 @@ module.exports = {
...baseConfigForPackages,
moduleNameMapper: {
'@deriv-com/translations': '/../../__mocks__/translation.mock.js',
+ '@deriv-com/ui': '/../../__mocks__/deriv-com.ui.mock.js',
'\\.(css|s(c|a)ss)$': '/../../__mocks__/styleMock.js',
'^.+\\.svg$': '/../../__mocks__/fileMock.js',
},
diff --git a/packages/wallets/jestTransformer.js b/packages/wallets/jestTransformer.js
index 042e9caff0ad..2eda67124ce2 100644
--- a/packages/wallets/jestTransformer.js
+++ b/packages/wallets/jestTransformer.js
@@ -8,7 +8,7 @@ module.exports = {
plugins: [
['@babel/plugin-proposal-decorators', { legacy: true }],
['@babel/plugin-transform-class-properties', { loose: true }],
- ['@babel/plugin-proposal-private-methods', { loose: true }],
+ ['@babel/plugin-transform-private-methods', { loose: true }],
['@babel/plugin-transform-private-property-in-object', { loose: true }],
'@babel/plugin-proposal-export-default-from',
'@babel/plugin-transform-object-rest-spread',
diff --git a/packages/wallets/package.json b/packages/wallets/package.json
index 8e1e4940b545..3cd2a6371c4d 100644
--- a/packages/wallets/package.json
+++ b/packages/wallets/package.json
@@ -34,30 +34,30 @@
"react-calendar": "^4.7.0",
"react-dom": "^17.0.2",
"react-dropzone": "11.0.1",
- "react-joyride": "^2.5.3",
+ "react-joyride": "^2.9.2",
"react-router-dom": "^5.2.0",
"react-transition-group": "4.4.2",
"usehooks-ts": "^2.7.0",
"yup": "^0.32.11"
},
"devDependencies": {
- "@testing-library/react": "^12.0.0",
+ "@testing-library/react": "^12.1.5",
"@testing-library/user-event": "^13.5.0",
"@types/css-modules": "^1.0.2",
"@types/react-dom": "^18.0.0",
"@types/sha.js": "^2.4.4",
- "@typescript-eslint/eslint-plugin": "5.45.0",
- "@typescript-eslint/parser": "5.45.0",
+ "@typescript-eslint/eslint-plugin": "7.18.0",
+ "@typescript-eslint/parser": "7.18.0",
"babel-plugin-transform-barrels": "1.0.12",
"eslint-plugin-local-rules": "2.0.0",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^4.2.0",
"eslint-plugin-simple-import-sort": "^10.0.0",
"eslint-plugin-sort-destructure-keys": "1.5.0",
- "eslint-plugin-typescript-sort-keys": "^2.3.0",
+ "eslint-plugin-typescript-sort-keys": "^3.2.0",
"typescript": "^4.6.3",
- "webpack": "^5.81.0",
+ "webpack": "^5.95.0",
"webpack-bundle-analyzer": "^4.3.0",
- "webpack-cli": "^4.7.2"
+ "webpack-cli": "^5.1.4"
}
}
diff --git a/packages/wallets/src/components/AccountsList/__tests__/AccountsList.spec.tsx b/packages/wallets/src/components/AccountsList/__tests__/AccountsList.spec.tsx
index 5cfb571568ab..20bd8532b12f 100644
--- a/packages/wallets/src/components/AccountsList/__tests__/AccountsList.spec.tsx
+++ b/packages/wallets/src/components/AccountsList/__tests__/AccountsList.spec.tsx
@@ -57,13 +57,14 @@ describe('AccountsList', () => {
it('should show Options tab in mobile view when the tab active', () => {
(useDevice as jest.Mock).mockReturnValue({ isMobile: true });
- render(, {
+ const { rerender } = render(, {
wrapper,
});
expect(screen.getByText('CFDs')).toBeInTheDocument();
expect(screen.getAllByText('Options')[0]).toBeInTheDocument();
screen.getAllByText('Options')[0].click();
+ rerender();
expect(screen.getAllByText('Options')[0]).toBeInTheDocument();
expect(screen.getByText('Deriv Trader')).toBeInTheDocument();
expect(screen.getByText('Deriv Bot')).toBeInTheDocument();
diff --git a/packages/wallets/src/components/Base/ModalStepWrapper/__tests__/ModalStepWrapper.spec.tsx b/packages/wallets/src/components/Base/ModalStepWrapper/__tests__/ModalStepWrapper.spec.tsx
index c0cce0b511f2..1323899bc1df 100644
--- a/packages/wallets/src/components/Base/ModalStepWrapper/__tests__/ModalStepWrapper.spec.tsx
+++ b/packages/wallets/src/components/Base/ModalStepWrapper/__tests__/ModalStepWrapper.spec.tsx
@@ -75,24 +75,24 @@ describe('ModalStepWrapper', () => {
expect(footerElement).toBeInTheDocument();
});
- it('should close modal on close icon click', () => {
+ it('should close modal on close icon click', async () => {
render( Footer
} />);
const closeIcon = screen.getByTestId('dt_modal_step_wrapper_header_icon');
- userEvent.click(closeIcon);
+ await userEvent.click(closeIcon);
expect(mockhideFn).toHaveBeenCalled();
});
- it('should close modal on escape if shouldPreventCloseOnEscape false', () => {
+ it('should close modal on escape if shouldPreventCloseOnEscape false', async () => {
const { container } = render( Footer
} />);
- userEvent.type(container, '{esc}');
+ await userEvent.type(container, '{esc}');
expect(mockhideFn).toHaveBeenCalled();
});
- it('should not close modal on escape if shouldPreventCloseOnEscape true', () => {
+ it('should not close modal on escape if shouldPreventCloseOnEscape true', async () => {
const { container } = render(
Footer
} shouldPreventCloseOnEscape />
);
- userEvent.type(container, '{esc}');
+ await userEvent.type(container, '{esc}');
expect(mockhideFn).not.toHaveBeenCalled();
});
});
diff --git a/packages/wallets/src/components/Base/ProgressBar/__tests__/ProgressBar.spec.tsx b/packages/wallets/src/components/Base/ProgressBar/__tests__/ProgressBar.spec.tsx
index 6923fe4fab8c..444724ff3d48 100644
--- a/packages/wallets/src/components/Base/ProgressBar/__tests__/ProgressBar.spec.tsx
+++ b/packages/wallets/src/components/Base/ProgressBar/__tests__/ProgressBar.spec.tsx
@@ -27,10 +27,10 @@ describe('ProgressBar', () => {
});
});
- it('should set the active index on Click', () => {
+ it('should set the active index on Click', async () => {
render();
const items = screen.getByRole('progressbar').childNodes;
- userEvent.click(items[2] as HTMLElement);
+ await userEvent.click(items[2] as HTMLElement);
expect(mockProps.onClick).toHaveBeenCalledWith(2);
});
});
diff --git a/packages/wallets/src/components/Base/WalletClipboard/__tests__/WalletClipboard.spec.tsx b/packages/wallets/src/components/Base/WalletClipboard/__tests__/WalletClipboard.spec.tsx
index ef3c88b3b897..231020cb664a 100644
--- a/packages/wallets/src/components/Base/WalletClipboard/__tests__/WalletClipboard.spec.tsx
+++ b/packages/wallets/src/components/Base/WalletClipboard/__tests__/WalletClipboard.spec.tsx
@@ -23,6 +23,11 @@ describe('WalletClipboard', () => {
(useDevice as jest.Mock).mockReturnValue({ isDesktop: true });
mockCopy = jest.fn();
mockUseCopyToClipboard.mockReturnValue([null, mockCopy]);
+ jest.useFakeTimers({ legacyFakeTimers: true });
+ jest.spyOn(global, 'setInterval');
+ jest.spyOn(global, 'clearInterval');
+ jest.spyOn(global, 'setTimeout');
+ jest.spyOn(global, 'clearTimeout');
});
afterEach(() => {
@@ -38,7 +43,7 @@ describe('WalletClipboard', () => {
});
});
it('clears timeout on unmount', async () => {
- jest.useFakeTimers();
+ jest.useFakeTimers({ legacyFakeTimers: true });
const { unmount } = await renderComponent();
unmount();
@@ -50,7 +55,7 @@ describe('WalletClipboard', () => {
describe('when hovered', () => {
it('shows tooltip with "Copy" message', async () => {
renderComponent();
- userEvent.hover(screen.getByRole('button'));
+ await userEvent.hover(screen.getByRole('button'));
await waitFor(() => {
expect(screen.queryByText('Copy')).toBeInTheDocument();
@@ -62,7 +67,7 @@ describe('WalletClipboard', () => {
const renderScenario = async () => {
const { unmount } = renderComponent();
const button = await screen.findByRole('button');
- userEvent.hover(button);
+ await userEvent.hover(button);
await userEvent.click(button);
return { unmount };
@@ -88,7 +93,7 @@ describe('WalletClipboard', () => {
});
});
it('resets the icon and message after 2 seconds', async () => {
- jest.useFakeTimers();
+ jest.useFakeTimers({ legacyFakeTimers: true });
await renderScenario();
await waitFor(() => {
diff --git a/packages/wallets/src/components/DerivAppsSection/__tests__/DerivAppsGetAccount.spec.tsx b/packages/wallets/src/components/DerivAppsSection/__tests__/DerivAppsGetAccount.spec.tsx
index 48ae89e35eb0..f0257459fa72 100644
--- a/packages/wallets/src/components/DerivAppsSection/__tests__/DerivAppsGetAccount.spec.tsx
+++ b/packages/wallets/src/components/DerivAppsSection/__tests__/DerivAppsGetAccount.spec.tsx
@@ -89,7 +89,7 @@ describe('DerivAppsGetAccount', () => {
mockUseInvalidateQuery.mockReturnValue(mockInvalidate);
render(, { wrapper });
const button = screen.getByRole('button', { name: 'Enable' });
- userEvent.click(button);
+ await userEvent.click(button);
await waitFor(() => expect(mockMutateAsync).toBeCalled());
await waitFor(() => expect(mockInvalidate).toBeCalledWith('account_list'));
});
@@ -132,7 +132,7 @@ describe('DerivAppsGetAccount', () => {
});
render(, { wrapper });
const button = screen.getByRole('button', { name: 'Enable' });
- userEvent.click(button);
+ await userEvent.click(button);
await waitFor(() => expect(mockMutateAsync).not.toBeCalled());
});
});
diff --git a/packages/wallets/src/components/DerivAppsSection/__tests__/DerivAppsSuccessFooter.spec.tsx b/packages/wallets/src/components/DerivAppsSection/__tests__/DerivAppsSuccessFooter.spec.tsx
index e35910a427e8..0c8a29bd825d 100644
--- a/packages/wallets/src/components/DerivAppsSection/__tests__/DerivAppsSuccessFooter.spec.tsx
+++ b/packages/wallets/src/components/DerivAppsSection/__tests__/DerivAppsSuccessFooter.spec.tsx
@@ -24,14 +24,14 @@ describe('DerivAppsSuccessFooter', () => {
expect(screen.getByRole('button', { name: 'Maybe later' })).toBeInTheDocument();
expect(screen.getByRole('button', { name: 'Transfer funds' })).toBeInTheDocument();
});
- it('hides the modal when Maybe later button is clicked', () => {
+ it('hides the modal when Maybe later button is clicked', async () => {
render();
- userEvent.click(screen.getByRole('button', { name: 'Maybe later' }));
+ await userEvent.click(screen.getByRole('button', { name: 'Maybe later' }));
expect(mockHide).toHaveBeenCalled();
});
- it('navigates to /wallet/account-transfer when Transfer funds button is clicked', () => {
+ it('navigates to /wallet/account-transfer when Transfer funds button is clicked', async () => {
render();
- userEvent.click(screen.getByRole('button', { name: 'Transfer funds' }));
+ await userEvent.click(screen.getByRole('button', { name: 'Transfer funds' }));
expect(mockHistoryPush).toHaveBeenCalledWith('/wallet/account-transfer');
});
});
diff --git a/packages/wallets/src/components/Dropzone/__tests__/Dropzone.spec.tsx b/packages/wallets/src/components/Dropzone/__tests__/Dropzone.spec.tsx
index e087cf87383c..d8901d3339ea 100644
--- a/packages/wallets/src/components/Dropzone/__tests__/Dropzone.spec.tsx
+++ b/packages/wallets/src/components/Dropzone/__tests__/Dropzone.spec.tsx
@@ -16,10 +16,10 @@ describe('Dropzone', () => {
const file = new File(['foo'], 'foo.txt', { type: 'text/plain' });
render(icon} />);
const input: HTMLInputElement = screen.getByTestId('dt_dropzone-input');
+ await userEvent.upload(input, file);
await waitFor(() => {
- userEvent.upload(input, file);
+ expect(input.files).toHaveLength(1);
});
- expect(input.files).toHaveLength(1);
});
it('should remove file when clicking on the remove button', () => {
@@ -45,10 +45,10 @@ describe('Dropzone', () => {
/>
);
const input = screen.getByTestId('dt_dropzone-input');
+ await userEvent.upload(input, file);
await waitFor(() => {
- userEvent.upload(input, file);
+ expect(screen.getByText('File uploaded is not supported')).toBeInTheDocument();
});
- expect(screen.getByText('File uploaded is not supported')).toBeInTheDocument();
});
it('should call onFileChange when file is changed', async () => {
@@ -63,47 +63,46 @@ describe('Dropzone', () => {
/>
);
const input = screen.getByTestId('dt_dropzone-input');
+ await userEvent.upload(input, file);
await waitFor(() => {
- userEvent.upload(input, file);
+ expect(onFileChange).toHaveBeenCalled();
});
- expect(onFileChange).toHaveBeenCalled();
});
it('should show error message if file size is invalid', async () => {
const file = new File(['foo'], 'foo.txt', { type: 'text/plain' });
render(icon} maxSize={1} />);
const input = screen.getByTestId('dt_dropzone-input');
+ await userEvent.upload(input, file);
await waitFor(() => {
- userEvent.upload(input, file);
+ expect(screen.getByText('File size should be 8MB or less')).toBeInTheDocument();
});
- expect(screen.getByText('File size should be 8MB or less')).toBeInTheDocument();
});
it('should show hover message when dragging the file', async () => {
const file = new File(['foo'], 'foo.txt', { type: 'text/plain' });
render(icon} />);
const input: HTMLInputElement = screen.getByTestId('dt_dropzone-input');
+ Object.defineProperty(input, 'files', {
+ value: [file],
+ });
+ fireEvent.dragEnter(input);
+ fireEvent.dragLeave(input);
await waitFor(() => {
- Object.defineProperty(input, 'files', {
- value: [file],
- });
- fireEvent.dragEnter(input);
- fireEvent.dragLeave(input);
+ expect(screen.getByText('Drop file here')).toBeInTheDocument();
});
- expect(screen.getByText('Drop file here')).toBeInTheDocument();
});
it('should be able to drop the file', async () => {
const file = new File(['foo'], 'foo.txt', { type: 'text/plain' });
render(icon} />);
const input: HTMLInputElement = screen.getByTestId('dt_dropzone-input');
+ Object.defineProperty(input, 'files', {
+ value: [file],
+ });
+ fireEvent.drop(input);
await waitFor(() => {
- Object.defineProperty(input, 'files', {
- value: [file],
- });
- fireEvent.drop(input);
+ expect(input.files).toHaveLength(1);
});
-
- expect(input.files).toHaveLength(1);
});
});
diff --git a/packages/wallets/src/components/FlowField/__tests__/FlowTextField.spec.tsx b/packages/wallets/src/components/FlowField/__tests__/FlowTextField.spec.tsx
index 129c14f3472d..9c32cebd76e9 100644
--- a/packages/wallets/src/components/FlowField/__tests__/FlowTextField.spec.tsx
+++ b/packages/wallets/src/components/FlowField/__tests__/FlowTextField.spec.tsx
@@ -88,7 +88,7 @@ describe('FlowTextField', () => {
});
const input = screen.getByDisplayValue('default');
- userEvent.type(input, 'test');
+ await userEvent.type(input, 'test');
expect(mockValidate).toHaveBeenCalled();
expect(input).toHaveValue('defaulttest');
});
@@ -115,7 +115,7 @@ describe('FlowTextField', () => {
});
const input = screen.getByDisplayValue('default');
- userEvent.type(input, 'test');
+ await userEvent.type(input, 'test');
expect(mockValidate).toHaveBeenCalled();
});
@@ -142,7 +142,7 @@ describe('FlowTextField', () => {
});
const input = screen.getByDisplayValue('default');
- userEvent.type(input, 'test');
+ await userEvent.type(input, 'test');
expect(screen.getByText('Field is required')).toBeInTheDocument();
});
@@ -163,7 +163,7 @@ describe('FlowTextField', () => {
});
const input = screen.getByDisplayValue('default');
- userEvent.type(input, 'test');
+ await userEvent.type(input, 'test');
expect(input).toHaveValue('default');
});
});
diff --git a/packages/wallets/src/components/Page404/__test__/Page404.spec.tsx b/packages/wallets/src/components/Page404/__test__/Page404.spec.tsx
index c4c46467c560..0b687f608494 100644
--- a/packages/wallets/src/components/Page404/__test__/Page404.spec.tsx
+++ b/packages/wallets/src/components/Page404/__test__/Page404.spec.tsx
@@ -42,11 +42,11 @@ describe('Page404', () => {
expect(screen.getByRole('img', { name: '404' })).toHaveAttribute('height', '200px');
});
- it('navigates to home page when button is clicked', () => {
+ it('navigates to home page when button is clicked', async () => {
render();
const button = screen.getByRole('button', { name: "Return to Trader's Hub" });
- userEvent.click(button);
+ await userEvent.click(button);
expect(mockHistoryPush).toHaveBeenCalledWith('/');
});
diff --git a/packages/wallets/src/components/WalletGradientBackground/__test__/WalletGradientBackground.spec.tsx b/packages/wallets/src/components/WalletGradientBackground/__test__/WalletGradientBackground.spec.tsx
index 67b0bed02dd3..f141cf327d88 100644
--- a/packages/wallets/src/components/WalletGradientBackground/__test__/WalletGradientBackground.spec.tsx
+++ b/packages/wallets/src/components/WalletGradientBackground/__test__/WalletGradientBackground.spec.tsx
@@ -1,7 +1,6 @@
import React from 'react';
import { render, screen, within } from '@testing-library/react';
import WalletGradientBackground from '../WalletGradientBackground';
-import '@testing-library/jest-dom/extend-expect';
describe('WalletGradientBackground', () => {
const defaultProps = {
diff --git a/packages/wallets/src/components/WalletsAddMoreCard/__tests__/WalletsAddMoreCard.spec.tsx b/packages/wallets/src/components/WalletsAddMoreCard/__tests__/WalletsAddMoreCard.spec.tsx
index 91a8ca61baf4..49633d2bfdd8 100644
--- a/packages/wallets/src/components/WalletsAddMoreCard/__tests__/WalletsAddMoreCard.spec.tsx
+++ b/packages/wallets/src/components/WalletsAddMoreCard/__tests__/WalletsAddMoreCard.spec.tsx
@@ -2,7 +2,6 @@
import React from 'react';
import { render, screen } from '@testing-library/react';
import WalletsAddMoreCard from '../WalletsAddMoreCard';
-import '@testing-library/jest-dom/extend-expect';
type TGradientBackground = {
children: React.ReactNode;
diff --git a/packages/wallets/src/components/WalletsAddMoreCardBanner/__tests__/WalletsAddMoreCardBanner.spec.tsx b/packages/wallets/src/components/WalletsAddMoreCardBanner/__tests__/WalletsAddMoreCardBanner.spec.tsx
index 4bf04262fd6a..3b313b8f2c2c 100644
--- a/packages/wallets/src/components/WalletsAddMoreCardBanner/__tests__/WalletsAddMoreCardBanner.spec.tsx
+++ b/packages/wallets/src/components/WalletsAddMoreCardBanner/__tests__/WalletsAddMoreCardBanner.spec.tsx
@@ -7,7 +7,6 @@ import useSyncLocalStorageClientAccounts from '../../../hooks/useSyncLocalStorag
import useWalletAccountSwitcher from '../../../hooks/useWalletAccountSwitcher';
import { ModalProvider } from '../../ModalProvider';
import WalletsAddMoreCardBanner from '../WalletsAddMoreCardBanner';
-import '@testing-library/jest-dom/extend-expect';
type TWalletError = {
buttonText: string;
diff --git a/packages/wallets/src/components/WalletsDisabledAccountsBanner/__tests__/WalletsDisabledAccountsBanner.spec.tsx b/packages/wallets/src/components/WalletsDisabledAccountsBanner/__tests__/WalletsDisabledAccountsBanner.spec.tsx
index f73faa6b8942..0e6081279d8b 100644
--- a/packages/wallets/src/components/WalletsDisabledAccountsBanner/__tests__/WalletsDisabledAccountsBanner.spec.tsx
+++ b/packages/wallets/src/components/WalletsDisabledAccountsBanner/__tests__/WalletsDisabledAccountsBanner.spec.tsx
@@ -106,19 +106,18 @@ describe('WalletsDisabledAccountsBanner', () => {
expect(screen.getByText(/Your USD, EUR, and BTC Wallets are disabled/)).toBeInTheDocument();
});
- it('calls open_chat_window on button click', () => {
+ it('calls open_chat_window on button click', async () => {
render();
const chatButton = screen.getByRole('button');
chatButton.addEventListener('click', () => window.LiveChatWidget.call('maximize'));
- userEvent.click(chatButton);
+ await userEvent.click(chatButton);
expect(window.LiveChatWidget.call).toHaveBeenCalledWith('maximize');
});
it('renders the icon', () => {
render();
- expect(screen.getByRole('img')).toBeInTheDocument();
- expect(screen.getByRole('img')).toHaveClass('deriv-section-message__icon--warning');
+ expect(screen.getByText('MockWarningIcon')).toBeInTheDocument();
});
});
diff --git a/packages/wallets/src/components/WalletsResetMT5Password/__test__/WalletSuccessResetMT5Password.spec.tsx b/packages/wallets/src/components/WalletsResetMT5Password/__test__/WalletSuccessResetMT5Password.spec.tsx
index 22a8c0047f12..b170343b8ee9 100644
--- a/packages/wallets/src/components/WalletsResetMT5Password/__test__/WalletSuccessResetMT5Password.spec.tsx
+++ b/packages/wallets/src/components/WalletsResetMT5Password/__test__/WalletSuccessResetMT5Password.spec.tsx
@@ -60,10 +60,10 @@ describe('', () => {
expect(screen.getByRole('button', { name: 'Done' }));
});
- it('should execute function onClick when button is clicked', () => {
+ it('should execute function onClick when button is clicked', async () => {
render(, { wrapper });
expect(screen.getByRole('button', { name: 'Done' }));
- userEvent.click(screen.getByRole('button', { name: 'Done' }));
+ await userEvent.click(screen.getByRole('button', { name: 'Done' }));
expect(props.onClick).toBeCalled();
});
diff --git a/packages/wallets/src/components/WalletsResetMT5Password/__test__/WalletsResetMT5Password.spec.tsx b/packages/wallets/src/components/WalletsResetMT5Password/__test__/WalletsResetMT5Password.spec.tsx
index 5b1c56402107..54d80a5bac2d 100644
--- a/packages/wallets/src/components/WalletsResetMT5Password/__test__/WalletsResetMT5Password.spec.tsx
+++ b/packages/wallets/src/components/WalletsResetMT5Password/__test__/WalletsResetMT5Password.spec.tsx
@@ -110,7 +110,7 @@ describe('WalletsResetMT5Password', () => {
fireEvent.change(inputBox, { target: { value: 'Abcd1234!' } });
expect(await inputBox).toHaveValue('Abcd1234!');
expect(createButton).toBeEnabled();
- await fireEvent.click(createButton);
+ fireEvent.click(createButton);
expect(mockMutate).toHaveBeenCalledTimes(1);
});
@@ -133,7 +133,7 @@ describe('WalletsResetMT5Password', () => {
fireEvent.change(inputBox, { target: { value: 'Abcd1234!' } });
expect(await inputBox).toHaveValue('Abcd1234!');
expect(createButton).toBeEnabled();
- await fireEvent.click(createButton);
+ fireEvent.click(createButton);
expect(mockMutate).toHaveBeenCalledTimes(1);
});
@@ -156,7 +156,7 @@ describe('WalletsResetMT5Password', () => {
fireEvent.change(inputBox, { target: { value: 'Abcd1234!' } });
expect(await inputBox).toHaveValue('Abcd1234!');
expect(createButton).toBeEnabled();
- await fireEvent.click(createButton);
+ fireEvent.click(createButton);
expect(mockMutate).toHaveBeenCalledTimes(1);
expect(mockShow).toBeCalled();
});
@@ -180,7 +180,7 @@ describe('WalletsResetMT5Password', () => {
fireEvent.change(inputBox, { target: { value: 'Abcd1234!' } });
expect(await inputBox).toHaveValue('Abcd1234!');
expect(createButton).toBeEnabled();
- await fireEvent.click(createButton);
+ fireEvent.click(createButton);
expect(mockMutate).toHaveBeenCalledTimes(1);
expect(mockShow).toBeCalled();
});
@@ -196,7 +196,7 @@ describe('WalletsResetMT5Password', () => {
it('should cancel reset on click of Cancel button', async () => {
render();
const cancelButton = await screen.findByRole('button', { name: /Cancel/ });
- await fireEvent.click(cancelButton);
+ fireEvent.click(cancelButton);
expect(mockHide).toHaveBeenCalledTimes(1);
});
});
diff --git a/packages/wallets/src/features/accounts/modules/DocumentService/components/IDVService/utils/idvServiceValidators.ts b/packages/wallets/src/features/accounts/modules/DocumentService/components/IDVService/utils/idvServiceValidators.ts
index 736c94c19d76..3dcf1a0f6a82 100644
--- a/packages/wallets/src/features/accounts/modules/DocumentService/components/IDVService/utils/idvServiceValidators.ts
+++ b/packages/wallets/src/features/accounts/modules/DocumentService/components/IDVService/utils/idvServiceValidators.ts
@@ -20,7 +20,7 @@ export const getDocumentNumberValidator = (
if (document.pattern) {
try {
pattern = new RegExp(document.pattern);
- } catch (err) {
+ } catch (_err) {
// Passport pattern has (?i) which is not supported in RegExp
// Replace the (?i) flag with the 'i' flag
const match = document.pattern?.match(/(\(\?i\))/);
diff --git a/packages/wallets/src/features/cashier/components/WalletCashierHeader/__tests__/WalletCashierHeader.spec.tsx b/packages/wallets/src/features/cashier/components/WalletCashierHeader/__tests__/WalletCashierHeader.spec.tsx
index 87616568ab06..35ccb1626b40 100644
--- a/packages/wallets/src/features/cashier/components/WalletCashierHeader/__tests__/WalletCashierHeader.spec.tsx
+++ b/packages/wallets/src/features/cashier/components/WalletCashierHeader/__tests__/WalletCashierHeader.spec.tsx
@@ -99,11 +99,11 @@ describe('', () => {
expect(screen.getByText('Transactions')).toBeInTheDocument();
});
- it('redirects to the root route with `accountsActiveTabIndex` history state, when the user closes cashier overlay', () => {
+ it('redirects to the root route with `accountsActiveTabIndex` history state, when the user closes cashier overlay', async () => {
render(, { wrapper });
const closeBtn = screen.getByTestId('dt_close_btn');
- userEvent.click(closeBtn);
+ await userEvent.click(closeBtn);
expect(mockPush).toHaveBeenCalledWith('/', { accountsActiveTabIndex: 0 });
});
diff --git a/packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoAddress/__tests__/DepositCryptoAddress.spec.tsx b/packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoAddress/__tests__/DepositCryptoAddress.spec.tsx
index 6963885aad34..9a7aa56051a9 100644
--- a/packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoAddress/__tests__/DepositCryptoAddress.spec.tsx
+++ b/packages/wallets/src/features/cashier/modules/DepositCrypto/components/DepositCryptoAddress/__tests__/DepositCryptoAddress.spec.tsx
@@ -34,10 +34,11 @@ describe('DepositCryptoAddress', () => {
expect(screen.getByTestId('dt_deposit-crypto-address-qr-code')).toBeInTheDocument();
});
- it('should show copy text when hovering', () => {
+ it('should show copy text when hovering', async () => {
+ (useDevice as jest.Mock).mockReturnValue({ isDesktop: true });
(useHover as jest.Mock).mockReturnValue(true);
render();
- userEvent.hover(screen.getByRole('button'));
+ await userEvent.hover(screen.getByRole('button'));
expect(screen.getByText('Copy')).toBeInTheDocument();
});
});
diff --git a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompleted/__tests__/TransactionsCompleted.spec.tsx b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompleted/__tests__/TransactionsCompleted.spec.tsx
index 8fe953928676..91d6fc003f2d 100644
--- a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompleted/__tests__/TransactionsCompleted.spec.tsx
+++ b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompleted/__tests__/TransactionsCompleted.spec.tsx
@@ -3,7 +3,6 @@ import { useActiveWalletAccount, useAllAccountsList, useInfiniteTransactions } f
import { act, fireEvent, render, screen } from '@testing-library/react';
import { CashierScrollContext } from '../../../../../context/CashierScrollContext';
import TransactionsCompleted from '../TransactionsCompleted';
-import '@testing-library/jest-dom/extend-expect';
jest.mock('@deriv/api-v2', () => ({
useActiveWalletAccount: jest.fn(),
diff --git a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompletedDemoResetBalance/__tests__/TransactionsCompletedDemoResetBalance.spec.tsx b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompletedDemoResetBalance/__tests__/TransactionsCompletedDemoResetBalance.spec.tsx
index 783b67b21a30..a99a357f38b8 100644
--- a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompletedDemoResetBalance/__tests__/TransactionsCompletedDemoResetBalance.spec.tsx
+++ b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompletedDemoResetBalance/__tests__/TransactionsCompletedDemoResetBalance.spec.tsx
@@ -2,7 +2,6 @@ import React from 'react';
import { useActiveWalletAccount, useAllAccountsList, useTransactions } from '@deriv/api-v2';
import { act, render, screen } from '@testing-library/react';
import TransactionsCompletedDemoResetBalance from '../TransactionsCompletedDemoResetBalance';
-import '@testing-library/jest-dom/extend-expect';
jest.mock('@deriv/api-v2', () => ({
useActiveWalletAccount: jest.fn(),
diff --git a/packages/wallets/src/features/cashier/modules/Transfer/__tests__/Transfer.spec.tsx b/packages/wallets/src/features/cashier/modules/Transfer/__tests__/Transfer.spec.tsx
index 1c91d05089bc..c94f05bf12b5 100644
--- a/packages/wallets/src/features/cashier/modules/Transfer/__tests__/Transfer.spec.tsx
+++ b/packages/wallets/src/features/cashier/modules/Transfer/__tests__/Transfer.spec.tsx
@@ -59,7 +59,7 @@ describe('Transfer', () => {
expect(screen.getByRole('button', { name: 'Make another transfer' })).toBeInTheDocument();
});
- it('should call reset transfer when Make another transfer button is clicked', () => {
+ it('should call reset transfer when Make another transfer button is clicked', async () => {
(useTransfer as jest.Mock).mockReturnValue({
error: { error: { code: 'Error', message: 'Error message' } },
receipt: undefined,
@@ -69,7 +69,7 @@ describe('Transfer', () => {
const resetErrorButton = screen.getByRole('button', { name: 'Make another transfer' });
expect(resetErrorButton).toBeInTheDocument();
- userEvent.click(resetErrorButton);
+ await userEvent.click(resetErrorButton);
expect(mockResetTransfer).toBeCalled();
});
});
diff --git a/packages/wallets/src/features/cashier/modules/Transfer/components/TransferForm/__tests__/TransferForm.spec.tsx b/packages/wallets/src/features/cashier/modules/Transfer/components/TransferForm/__tests__/TransferForm.spec.tsx
index c2be6bfbc63b..d5c24177a099 100644
--- a/packages/wallets/src/features/cashier/modules/Transfer/components/TransferForm/__tests__/TransferForm.spec.tsx
+++ b/packages/wallets/src/features/cashier/modules/Transfer/components/TransferForm/__tests__/TransferForm.spec.tsx
@@ -128,10 +128,8 @@ describe('', () => {
render(, { wrapper });
- await waitFor(() => {
- const transferSubmitButton = within(screen.getByTestId('dt_transfer_form_submit_btn')).getByRole('button');
- userEvent.click(transferSubmitButton);
- });
+ const transferSubmitButton = within(screen.getByTestId('dt_transfer_form_submit_btn')).getByRole('button');
+ await userEvent.click(transferSubmitButton);
await waitFor(() => {
expect(dummyRequest).toBeCalledWith({
diff --git a/packages/wallets/src/features/cashier/modules/Transfer/components/TransferFormAmountInput/__tests__/TransferFormAmountInput.spec.tsx b/packages/wallets/src/features/cashier/modules/Transfer/components/TransferFormAmountInput/__tests__/TransferFormAmountInput.spec.tsx
index c562de3db5f1..c24461f1ae3e 100644
--- a/packages/wallets/src/features/cashier/modules/Transfer/components/TransferFormAmountInput/__tests__/TransferFormAmountInput.spec.tsx
+++ b/packages/wallets/src/features/cashier/modules/Transfer/components/TransferFormAmountInput/__tests__/TransferFormAmountInput.spec.tsx
@@ -180,28 +180,28 @@ describe('TransferFormAmountInput', () => {
expect(field).toHaveValue('0.00000000');
});
- it('has 8 max digits restriction in case of USD', () => {
+ it('has 8 max digits restriction in case of USD', async () => {
renderField('fromAmount', 'USD');
const field = getField();
- userEvent.type(field, '9999999999999999999999999999');
+ await userEvent.type(field, '9999999999999999999999999999');
expect(field).toHaveValue('999,999.99');
});
- it('has 9 max digits restriction in case of BTC', () => {
+ it('has 9 max digits restriction in case of BTC', async () => {
renderField('fromAmount', 'BTC');
const field = getField();
- userEvent.type(field, '9999999999999999999999999999');
+ await userEvent.type(field, '9999999999999999999999999999');
expect(field).toHaveValue('9.99999999');
});
- it('should not react to pasting when exceeding max value in case of USD', () => {
+ it('should not react to pasting when exceeding max value in case of USD', async () => {
renderField('fromAmount', 'USD');
const field = getField();
const pastedVal = '9999999';
- userEvent.paste(field, pastedVal, {
+ await userEvent.paste(field, pastedVal, {
clipboardData: {
getData: (format: string) => (format === 'Text' ? pastedVal : ''),
} as DataTransfer,
@@ -209,12 +209,12 @@ describe('TransferFormAmountInput', () => {
expect(field).toHaveValue('0.00');
});
- it('should not react to pasting when exceeding max value in case of BTC', () => {
+ it('should not react to pasting when exceeding max value in case of BTC', async () => {
renderField('fromAmount', 'BTC');
const field = getField();
const pastedVal = '9999999999';
- userEvent.paste(field, pastedVal, {
+ await userEvent.paste(field, pastedVal, {
clipboardData: {
getData: (format: string) => (format === 'Text' ? pastedVal : ''),
} as DataTransfer,
@@ -222,12 +222,12 @@ describe('TransferFormAmountInput', () => {
expect(field).toHaveValue('0.00000000');
});
- it('should paste an integer value as an integer in case of fiat (USD)', () => {
+ it('should paste an integer value as an integer in case of fiat (USD)', async () => {
renderField('fromAmount', 'USD');
const field = getField();
const pastedVal = '123';
- userEvent.paste(field, pastedVal, {
+ await userEvent.paste(field, pastedVal, {
clipboardData: {
getData: (format: string) => (format === 'Text' ? pastedVal : ''),
} as DataTransfer,
@@ -235,17 +235,17 @@ describe('TransferFormAmountInput', () => {
expect(field).toHaveValue('123.00');
});
- it('should paste an integer value as a fraction in case of crypto (BTC)', () => {
+ it('should paste an integer value as a fraction in case of crypto (BTC)', async () => {
renderField('fromAmount', 'BTC');
const field = getField();
const pastedVal = '123';
- userEvent.paste(field, pastedVal, {
+ await userEvent.paste(field, pastedVal, {
clipboardData: {
getData: (format: string) => (format === 'Text' ? pastedVal : ''),
} as DataTransfer,
});
- userEvent.tab();
+ await userEvent.tab();
expect(field).toHaveValue('0.00000123');
});
diff --git a/packages/wallets/src/features/cashier/modules/Transfer/components/TransferReceipt/__tests__/TransferReceipt.spec.tsx b/packages/wallets/src/features/cashier/modules/Transfer/components/TransferReceipt/__tests__/TransferReceipt.spec.tsx
index 18b733b749de..ddff45e1bf46 100644
--- a/packages/wallets/src/features/cashier/modules/Transfer/components/TransferReceipt/__tests__/TransferReceipt.spec.tsx
+++ b/packages/wallets/src/features/cashier/modules/Transfer/components/TransferReceipt/__tests__/TransferReceipt.spec.tsx
@@ -146,14 +146,14 @@ describe('TransferReceipt', () => {
expect(fromCard).toHaveTextContent('-10,000.00 USD');
expect(toCard).toHaveTextContent('+100.00000000 BTC');
});
- it('Should invoke reset transfer when the reset button is clicked', () => {
+ it('Should invoke reset transfer when the reset button is clicked', async () => {
render(, { wrapper });
const resetBtn = screen.getByRole('button', {
name: 'Make a new transfer',
});
- userEvent.click(resetBtn);
+ await userEvent.click(resetBtn);
expect(mockResetTransfer).toBeCalled();
});
});
diff --git a/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/components/WithdrawalCryptoForm/__tests__/WithdrawalCryptoForm.spec.tsx b/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/components/WithdrawalCryptoForm/__tests__/WithdrawalCryptoForm.spec.tsx
index 191b6cc9aa7a..f308054a5caa 100644
--- a/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/components/WithdrawalCryptoForm/__tests__/WithdrawalCryptoForm.spec.tsx
+++ b/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/components/WithdrawalCryptoForm/__tests__/WithdrawalCryptoForm.spec.tsx
@@ -1,6 +1,6 @@
import React, { PropsWithChildren } from 'react';
import { APIProvider, AuthProvider, useGrowthbookIsOn } from '@deriv/api-v2';
-import { act, render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { useWithdrawalCryptoContext, WithdrawalCryptoProvider } from '../../../provider';
import WithdrawalCryptoForm from '../WithdrawalCryptoForm';
@@ -80,16 +80,16 @@ describe('WithdrawalCryptoForm', () => {
const cryptoAmountInput = screen.getByTestId('dt_withdrawal_crypto_amount_input');
const submitButton = screen.getByText('Withdraw');
- await act(async () => {
- await userEvent.type(cryptoAddressInput, 'SampleAddress', { delay: 1 });
- userEvent.type(cryptoAmountInput, '123');
- userEvent.click(submitButton);
- });
+ await userEvent.type(cryptoAddressInput, 'SampleAddress', { delay: 1 });
+ await userEvent.type(cryptoAmountInput, '123');
+ await userEvent.click(submitButton);
- expect(mockValues.requestCryptoWithdrawal).toBeCalledWith({
- address: 'SampleAddress',
- amount: 123,
- estimated_fee_unique_id: undefined,
+ await waitFor(() => {
+ expect(mockValues.requestCryptoWithdrawal).toBeCalledWith({
+ address: 'SampleAddress',
+ amount: 123,
+ estimated_fee_unique_id: undefined,
+ });
});
});
@@ -105,12 +105,12 @@ describe('WithdrawalCryptoForm', () => {
const cryptoAmountInput = screen.getByTestId('dt_withdrawal_crypto_amount_input');
const checkbox = screen.getByLabelText('Priority withdrawal');
- await act(async () => {
- await userEvent.type(cryptoAddressInput, 'SampleAddress', { delay: 1 });
- userEvent.type(cryptoAmountInput, '123');
- userEvent.click(checkbox);
- });
+ await userEvent.type(cryptoAddressInput, 'SampleAddress', { delay: 1 });
+ await userEvent.type(cryptoAmountInput, '123');
+ await userEvent.click(checkbox);
- expect(screen.getByText('122.99770000')).toBeInTheDocument();
+ await waitFor(() => {
+ expect(screen.getByText('122.99770000')).toBeInTheDocument();
+ });
});
});
diff --git a/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/components/WithdrawalCryptoForm/components/WithdrawalCryptoAmountConverter/__tests__/WithdrawalCryptoAmountConverter.spec.tsx b/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/components/WithdrawalCryptoForm/components/WithdrawalCryptoAmountConverter/__tests__/WithdrawalCryptoAmountConverter.spec.tsx
index 8cc0d8a2e39d..5c36466670c3 100644
--- a/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/components/WithdrawalCryptoForm/components/WithdrawalCryptoAmountConverter/__tests__/WithdrawalCryptoAmountConverter.spec.tsx
+++ b/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/components/WithdrawalCryptoForm/components/WithdrawalCryptoAmountConverter/__tests__/WithdrawalCryptoAmountConverter.spec.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import { Formik } from 'formik';
import { APIProvider } from '@deriv/api-v2';
-import { act, fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
import WalletsAuthProvider from '../../../../../../../../../AuthProvider';
import { useWithdrawalCryptoContext } from '../../../../../provider';
import { validateCryptoInput, validateFiatInput } from '../../../../../utils';
@@ -75,10 +75,10 @@ describe('WithdrawalCryptoAmountConverter', () => {
const cryptoInput = screen.getByTestId('dt_withdrawal_crypto_amount_input');
- await act(async () => {
- await fireEvent.change(cryptoInput, { target: { value: '10' } });
+ fireEvent.change(cryptoInput, { target: { value: '10' } });
+ await waitFor(() => {
+ expect(screen.getByText('Crypto Input Error')).toBeInTheDocument();
});
- expect(screen.getByText('Crypto Input Error')).toBeInTheDocument();
});
it('should change value of fiat input field when value of crypto input changes', async () => {
@@ -88,10 +88,10 @@ describe('WithdrawalCryptoAmountConverter', () => {
const cryptoInput = screen.getByTestId('dt_withdrawal_crypto_amount_input');
const fiatInput = screen.getByTestId('dt_withdrawal_fiat_amount_input');
- await act(async () => {
- await fireEvent.change(cryptoInput, { target: { value: '10' } });
+ fireEvent.change(cryptoInput, { target: { value: '10' } });
+ await waitFor(() => {
+ expect(fiatInput).toHaveValue('10');
});
- expect(fiatInput).toHaveValue('10');
});
it('should empty fiat input field if crypto input field has errors', async () => {
@@ -101,10 +101,10 @@ describe('WithdrawalCryptoAmountConverter', () => {
const cryptoInput = screen.getByTestId('dt_withdrawal_crypto_amount_input');
const fiatInput = screen.getByTestId('dt_withdrawal_fiat_amount_input');
- await act(async () => {
- await fireEvent.change(cryptoInput, { target: { value: '10' } });
+ fireEvent.change(cryptoInput, { target: { value: '10' } });
+ await waitFor(() => {
+ expect(fiatInput).toHaveValue('');
});
- expect(fiatInput).toHaveValue('');
});
it('should display error below fiat input field if fiat input is invalid', async () => {
@@ -113,11 +113,10 @@ describe('WithdrawalCryptoAmountConverter', () => {
render(, { wrapper });
const fiatInput = screen.getByTestId('dt_withdrawal_fiat_amount_input');
-
- await act(async () => {
- await fireEvent.change(fiatInput, { target: { value: '10' } });
+ fireEvent.change(fiatInput, { target: { value: '10' } });
+ await waitFor(() => {
+ expect(screen.getByText('Fiat Input Error')).toBeInTheDocument();
});
- expect(screen.getByText('Fiat Input Error')).toBeInTheDocument();
});
it('should change value of crypto input field when value of fiat input changes', async () => {
@@ -127,10 +126,10 @@ describe('WithdrawalCryptoAmountConverter', () => {
const cryptoInput = screen.getByTestId('dt_withdrawal_crypto_amount_input');
const fiatInput = screen.getByTestId('dt_withdrawal_fiat_amount_input');
- await act(async () => {
- await fireEvent.change(fiatInput, { target: { value: '10' } });
+ fireEvent.change(fiatInput, { target: { value: '10' } });
+ await waitFor(() => {
+ expect(cryptoInput).toHaveValue('10');
});
- expect(cryptoInput).toHaveValue('10');
});
it('should empty crypto input field if fiat input field has errors', async () => {
@@ -140,35 +139,33 @@ describe('WithdrawalCryptoAmountConverter', () => {
const cryptoInput = screen.getByTestId('dt_withdrawal_crypto_amount_input');
const fiatInput = screen.getByTestId('dt_withdrawal_fiat_amount_input');
- await act(async () => {
- await fireEvent.change(fiatInput, { target: { value: '10' } });
+ fireEvent.change(fiatInput, { target: { value: '10' } });
+ await waitFor(() => {
+ expect(cryptoInput).toHaveValue('');
});
- expect(cryptoInput).toHaveValue('');
});
it('should handle onFocus for crypto input field', async () => {
render(, { wrapper });
const cryptoInput = screen.getByTestId('dt_withdrawal_crypto_amount_input');
- await act(async () => {
- await fireEvent.focus(cryptoInput);
+ fireEvent.focus(cryptoInput);
+ await waitFor(() => {
+ expect(screen.queryByTestId('dt_withdrawal_crypto_amount_converter_arrow')).not.toHaveClass(
+ 'wallets-withdrawal-crypto-amount-converter__arrow--inverted'
+ );
});
-
- expect(screen.queryByTestId('dt_withdrawal_crypto_amount_converter_arrow')).not.toHaveClass(
- 'wallets-withdrawal-crypto-amount-converter__arrow--inverted'
- );
});
it('should handle onFocus for fiat input field', async () => {
render(, { wrapper });
const fiatInput = screen.getByTestId('dt_withdrawal_fiat_amount_input');
- await act(async () => {
- await fireEvent.focus(fiatInput);
+ fireEvent.focus(fiatInput);
+ await waitFor(() => {
+ expect(screen.getByTestId('dt_withdrawal_crypto_amount_converter_arrow')).toHaveClass(
+ 'wallets-withdrawal-crypto-amount-converter__arrow--inverted'
+ );
});
-
- expect(screen.getByTestId('dt_withdrawal_crypto_amount_converter_arrow')).toHaveClass(
- 'wallets-withdrawal-crypto-amount-converter__arrow--inverted'
- );
});
});
diff --git a/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/components/WithdrawalCryptoForm/components/WithdrawalCryptoPriority/__tests__/WithdrawalCryptoPriority.spec.tsx b/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/components/WithdrawalCryptoForm/components/WithdrawalCryptoPriority/__tests__/WithdrawalCryptoPriority.spec.tsx
index 933bc3bf64ea..e6ed44279a4e 100644
--- a/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/components/WithdrawalCryptoForm/components/WithdrawalCryptoPriority/__tests__/WithdrawalCryptoPriority.spec.tsx
+++ b/packages/wallets/src/features/cashier/modules/WithdrawalCrypto/components/WithdrawalCryptoForm/components/WithdrawalCryptoPriority/__tests__/WithdrawalCryptoPriority.spec.tsx
@@ -1,7 +1,7 @@
import React, { PropsWithChildren } from 'react';
import { useFormikContext } from 'formik';
import { APIProvider, AuthProvider } from '@deriv/api-v2';
-import { act, render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { useWithdrawalCryptoContext, WithdrawalCryptoProvider } from '../../../../../provider';
import WithdrawalCryptoPriority from '../WithdrawalCryptoPriority';
@@ -72,10 +72,10 @@ describe('WithdrawalCryptoForm', () => {
const checkbox = screen.getByLabelText('Priority withdrawal');
- await act(async () => {
- userEvent.click(checkbox);
- });
+ await userEvent.click(checkbox);
- expect(screen.getByText('122.99770000')).toBeInTheDocument();
+ await waitFor(() => {
+ expect(screen.getByText('122.99770000')).toBeInTheDocument();
+ });
});
});
diff --git a/packages/wallets/src/features/cashier/screens/TransferNotAvailable/__tests__/TransferNotAvailableProvider.spec.tsx b/packages/wallets/src/features/cashier/screens/TransferNotAvailable/__tests__/TransferNotAvailableProvider.spec.tsx
index ee10afd74cc0..5a23c9b44cbe 100644
--- a/packages/wallets/src/features/cashier/screens/TransferNotAvailable/__tests__/TransferNotAvailableProvider.spec.tsx
+++ b/packages/wallets/src/features/cashier/screens/TransferNotAvailable/__tests__/TransferNotAvailableProvider.spec.tsx
@@ -28,7 +28,7 @@ describe('TransferNotAvailableProvider', () => {
jest.clearAllMocks();
});
- it('returns correct message when no accounts are available for transfer', () => {
+ it('returns correct message when no accounts are available for transfer', async () => {
const result = getMessage({
currency: 'USD',
hasAccountsForTransfer: false,
@@ -53,7 +53,7 @@ describe('TransferNotAvailableProvider', () => {
screen.getByText("Add a trading account or Wallet in Trader's hub to receive funds from this Wallet.")
).toBeInTheDocument();
const button = screen.getByText("Back to Trader's hub");
- userEvent.click(button);
+ await userEvent.click(button);
expect(mockHistory.push).toHaveBeenCalledWith('/');
});
@@ -84,7 +84,7 @@ describe('TransferNotAvailableProvider', () => {
).toBeInTheDocument();
});
- it('returns correct message when no accounts have funds', () => {
+ it('returns correct message when no accounts have funds', async () => {
const result = getMessage({
currency: 'USD',
hasAccountsForTransfer: true,
@@ -106,11 +106,11 @@ describe('TransferNotAvailableProvider', () => {
expect(screen.getByText('No funds in any trading accounts or wallets')).toBeInTheDocument();
expect(screen.getByText('Please make a deposit to your USD Wallet to make a transfer.')).toBeInTheDocument();
const button = screen.getByText('Deposit');
- userEvent.click(button);
+ await userEvent.click(button);
expect(mockHistory.push).toHaveBeenCalledWith('/wallet/deposit');
});
- it('returns correct message for virtual account when no accounts have funds', () => {
+ it('returns correct message for virtual account when no accounts have funds', async () => {
const result = getMessage({
currency: 'USD',
hasAccountsForTransfer: true,
@@ -134,7 +134,7 @@ describe('TransferNotAvailableProvider', () => {
screen.getByText('Please reset the balance of your Demo Wallet to make a transfer.')
).toBeInTheDocument();
const button = screen.getByText('Reset balance');
- userEvent.click(button);
+ await userEvent.click(button);
expect(mockHistory.push).toHaveBeenCalledWith('/wallet/reset-balance');
});
diff --git a/packages/wallets/src/features/cashier/screens/WithdrawalErrorScreen/__tests__/WithdrawalErrorScreen.spec.tsx b/packages/wallets/src/features/cashier/screens/WithdrawalErrorScreen/__tests__/WithdrawalErrorScreen.spec.tsx
index eb0c1eec2cb1..d00017df2d68 100644
--- a/packages/wallets/src/features/cashier/screens/WithdrawalErrorScreen/__tests__/WithdrawalErrorScreen.spec.tsx
+++ b/packages/wallets/src/features/cashier/screens/WithdrawalErrorScreen/__tests__/WithdrawalErrorScreen.spec.tsx
@@ -38,7 +38,7 @@ describe('WithdrawalErrorScreen', () => {
expect(screen.getByRole('button', { name: 'Resend email' })).toBeInTheDocument();
});
- it('should trigger proper callbacks when the user is clicking on `Resend email` button', () => {
+ it('should trigger proper callbacks when the user is clicking on `Resend email` button', async () => {
const error = {
code: 'InvalidToken',
message: 'Error message',
@@ -48,7 +48,7 @@ describe('WithdrawalErrorScreen', () => {
const resendEmailBtn = screen.getByRole('button', { name: 'Resend email' });
- userEvent.click(resendEmailBtn);
+ await userEvent.click(resendEmailBtn);
expect(resetError).toHaveBeenCalledTimes(1);
expect(setResendEmail).toHaveBeenCalledTimes(1);
expect(setResendEmail).toHaveBeenCalledWith(true);
@@ -127,7 +127,7 @@ describe('WithdrawalErrorScreen', () => {
expect(screen.queryByText('Verify identity')).toBeInTheDocument();
});
- it('should show redirect the user to the account/proof-of-identity when the user clicks on `Verify identity` after receiving crypto age limit verified error', () => {
+ it('should show redirect the user to the account/proof-of-identity when the user clicks on `Verify identity` after receiving crypto age limit verified error', async () => {
const mockHistoryPush = jest.fn();
(useHistory as jest.Mock).mockReturnValueOnce({
push: mockHistoryPush,
@@ -140,12 +140,12 @@ describe('WithdrawalErrorScreen', () => {
render();
const verifyIdentityButton = screen.getByText('Verify identity');
- userEvent.click(verifyIdentityButton);
+ await userEvent.click(verifyIdentityButton);
expect(mockHistoryPush).toBeCalledWith('/account/proof-of-identity');
});
- it('should reload page when the user clicks on `Try again` button', () => {
+ it('should reload page when the user clicks on `Try again` button', async () => {
const reloadMock = jest.fn();
Object.defineProperty(window, 'location', {
value: { reload: reloadMock },
@@ -162,11 +162,11 @@ describe('WithdrawalErrorScreen', () => {
expect(screen.getByText('Error message')).toBeInTheDocument();
const ReloadButton = screen.getByRole('button', { name: 'Try again' });
- userEvent.click(ReloadButton);
+ await userEvent.click(ReloadButton);
expect(reloadMock).toHaveBeenCalled();
});
- it('should reload page when the user clicks on `Try again` button for invalid crypto address error', () => {
+ it('should reload page when the user clicks on `Try again` button for invalid crypto address error', async () => {
const error = {
code: 'CryptoInvalidAddress',
message: 'Crypto Invalid Address',
@@ -178,7 +178,7 @@ describe('WithdrawalErrorScreen', () => {
expect(screen.getByText('Crypto Invalid Address')).toBeInTheDocument();
const ReloadButton = screen.getByRole('button', { name: 'Try again' });
- userEvent.click(ReloadButton);
+ await userEvent.click(ReloadButton);
expect(resetError).toHaveBeenCalledTimes(1);
});
@@ -196,7 +196,7 @@ describe('WithdrawalErrorScreen', () => {
expect(screen.getByRole('button', { name: 'Try again' })).toBeInTheDocument();
});
- it('should render without crashing when optional parameters are not received', () => {
+ it('should render without crashing when optional parameters are not received', async () => {
const error = {
code: 'InvalidToken',
message: 'Error message',
@@ -206,7 +206,7 @@ describe('WithdrawalErrorScreen', () => {
const resendEmailBtn = screen.getByRole('button', { name: 'Resend email' });
- userEvent.click(resendEmailBtn);
+ await userEvent.click(resendEmailBtn);
expect(screen.getByText('Email verification failed')).toBeInTheDocument();
expect(
screen.getByText('The verification link you used is invalid or expired. Please request for a new one.')
diff --git a/packages/wallets/src/features/cfd/__tests__/CFDPlatformsList.spec.tsx b/packages/wallets/src/features/cfd/__tests__/CFDPlatformsList.spec.tsx
index 3f3ab35e522b..81d81e790365 100644
--- a/packages/wallets/src/features/cfd/__tests__/CFDPlatformsList.spec.tsx
+++ b/packages/wallets/src/features/cfd/__tests__/CFDPlatformsList.spec.tsx
@@ -63,13 +63,13 @@ describe('CFDPlatformsList', () => {
expect(learnMoreEl).toHaveAttribute('href', 'https://deriv.com/trade-types/cfds/');
});
- it('redirects to `/compare-accounts` route when the user is clicking on `Compare accounts` button', () => {
+ it('redirects to `/compare-accounts` route when the user is clicking on `Compare accounts` button', async () => {
//@ts-expect-error we only need partial action types
mockUseDevice.mockReturnValueOnce({ isMobile: true });
render();
const compareAccountsBtn = screen.getByText('Compare accounts');
- userEvent.click(compareAccountsBtn);
+ await userEvent.click(compareAccountsBtn);
expect(mockPush).toHaveBeenCalledWith('/compare-accounts');
});
@@ -95,11 +95,11 @@ describe('CFDPlatformsList', () => {
expect(learnMoreEl).toHaveAttribute('href', 'https://deriv.com/trade-types/cfds');
});
- it('redirects to `/compare-accounts` route when the user is clicking on `Compare accounts` button', () => {
+ it('redirects to `/compare-accounts` route when the user is clicking on `Compare accounts` button', async () => {
render();
const compareAccountsBtn = screen.getByText('Compare accounts');
- userEvent.click(compareAccountsBtn);
+ await userEvent.click(compareAccountsBtn);
expect(mockPush).toHaveBeenCalledWith('/compare-accounts');
});
diff --git a/packages/wallets/src/features/cfd/__tests__/CFDPlatformsListEmptyState.spec.tsx b/packages/wallets/src/features/cfd/__tests__/CFDPlatformsListEmptyState.spec.tsx
index f0f2017a26cc..9cccc6ad0cd0 100644
--- a/packages/wallets/src/features/cfd/__tests__/CFDPlatformsListEmptyState.spec.tsx
+++ b/packages/wallets/src/features/cfd/__tests__/CFDPlatformsListEmptyState.spec.tsx
@@ -40,11 +40,11 @@ describe('CFDPlatformsListEmptyState', () => {
).toBeInTheDocument();
});
- it('redirects to `wallet/account-transfer` route if the user is clicking on `Transfer` button', () => {
+ it('redirects to `wallet/account-transfer` route if the user is clicking on `Transfer` button', async () => {
render();
const transferBtn = screen.getByTestId('dt_cfd_empty_state_transfer_button');
- userEvent.click(transferBtn);
+ await userEvent.click(transferBtn);
expect(mockPush).toHaveBeenCalledWith('/wallet/account-transfer', { shouldSelectDefaultWallet: true });
});
diff --git a/packages/wallets/src/features/cfd/flows/MT5/AddedMT5AccountsList/__tests__/AddedMT5AccountsList.spec.tsx b/packages/wallets/src/features/cfd/flows/MT5/AddedMT5AccountsList/__tests__/AddedMT5AccountsList.spec.tsx
index 1b5f66f84d52..f0ae6c993b88 100644
--- a/packages/wallets/src/features/cfd/flows/MT5/AddedMT5AccountsList/__tests__/AddedMT5AccountsList.spec.tsx
+++ b/packages/wallets/src/features/cfd/flows/MT5/AddedMT5AccountsList/__tests__/AddedMT5AccountsList.spec.tsx
@@ -166,7 +166,7 @@ describe('AddedMT5AccountsList', () => {
// @ts-expect-error - since this is a mock, we only need partial properties of the account
render(, { wrapper });
- userEvent.click(screen.getByTestId('dt_wallets_trading_account_card'));
+ await userEvent.click(screen.getByTestId('dt_wallets_trading_account_card'));
await waitFor(() => {
expect(screen.getByText('MT5TradeModal')).toBeInTheDocument();
@@ -188,7 +188,7 @@ describe('AddedMT5AccountsList', () => {
// @ts-expect-error - since this is a mock, we only need partial properties of the account
render(, { wrapper });
- userEvent.click(screen.getByTestId('dt_wallets_trading_account_card'));
+ await userEvent.click(screen.getByTestId('dt_wallets_trading_account_card'));
await waitFor(() => {
expect(screen.getByText('TradingPlatformStatusModal')).toBeInTheDocument();
diff --git a/packages/wallets/src/features/cfd/flows/MT5/AvailableMT5AccountsList/__test__/AvailableMT5AcountsList.spec.tsx b/packages/wallets/src/features/cfd/flows/MT5/AvailableMT5AccountsList/__test__/AvailableMT5AcountsList.spec.tsx
index 8b6ef7708732..9eef6b865cf6 100644
--- a/packages/wallets/src/features/cfd/flows/MT5/AvailableMT5AccountsList/__test__/AvailableMT5AcountsList.spec.tsx
+++ b/packages/wallets/src/features/cfd/flows/MT5/AvailableMT5AccountsList/__test__/AvailableMT5AcountsList.spec.tsx
@@ -79,12 +79,12 @@ describe('AvailableMT5AccountsList', () => {
expect(screen.getByText('Standard')).toBeInTheDocument();
});
- it('handles button click when platform status is active for real wallet account', () => {
+ it('handles button click when platform status is active for real wallet account', async () => {
// @ts-expect-error - since this is a mock, we only need partial properties of the account
render();
const button = screen.getByTestId('dt_wallets_trading_account_card');
- userEvent.click(button);
+ await userEvent.click(button);
// @ts-expect-error - since this is a mock, we only need partial properties of the account
expect(mockShow).toHaveBeenCalledWith();
@@ -92,7 +92,7 @@ describe('AvailableMT5AccountsList', () => {
expect(mockSetModalState).toHaveBeenCalledWith('selectedJurisdiction', 'svg');
});
- it('shows TradingPlatformStatusModal when there is an unavailable account', () => {
+ it('shows TradingPlatformStatusModal when there is an unavailable account', async () => {
(useMT5AccountsList as jest.Mock).mockReturnValue({
data: [{ status: 'unavailable' }],
});
@@ -101,12 +101,12 @@ describe('AvailableMT5AccountsList', () => {
render();
const button = screen.getByTestId('dt_wallets_trading_account_card');
- userEvent.click(button);
+ await userEvent.click(button);
expect(mockShow).toHaveBeenCalledWith();
});
- it('shows TradingPlatformStatusModal when there is an unavailable platform', () => {
+ it('shows TradingPlatformStatusModal when there is an unavailable platform', async () => {
(useTradingPlatformStatus as jest.Mock).mockReturnValue({
getPlatformStatus: jest.fn(() => 'unavailable'),
});
@@ -114,12 +114,12 @@ describe('AvailableMT5AccountsList', () => {
render();
const button = screen.getByTestId('dt_wallets_trading_account_card');
- userEvent.click(button);
+ await userEvent.click(button);
expect(mockShow).toHaveBeenCalledWith();
});
- it('shows TradingPlatformStatusModal with isServerMaintenance when platform status is maintenance', () => {
+ it('shows TradingPlatformStatusModal with isServerMaintenance when platform status is maintenance', async () => {
(useTradingPlatformStatus as jest.Mock).mockReturnValue({
getPlatformStatus: jest.fn(() => 'maintenance'),
});
@@ -127,7 +127,7 @@ describe('AvailableMT5AccountsList', () => {
render();
const button = screen.getByTestId('dt_wallets_trading_account_card');
- userEvent.click(button);
+ await userEvent.click(button);
expect(mockShow).toHaveBeenCalledWith();
});
diff --git a/packages/wallets/src/features/cfd/flows/OtherCFDs/Dxtrade/AvailableDxtradeAccountsList/__test__/AvailableDxtradeAccountsList.spec.tsx b/packages/wallets/src/features/cfd/flows/OtherCFDs/Dxtrade/AvailableDxtradeAccountsList/__test__/AvailableDxtradeAccountsList.spec.tsx
index 4688a707d239..b722048e89e3 100644
--- a/packages/wallets/src/features/cfd/flows/OtherCFDs/Dxtrade/AvailableDxtradeAccountsList/__test__/AvailableDxtradeAccountsList.spec.tsx
+++ b/packages/wallets/src/features/cfd/flows/OtherCFDs/Dxtrade/AvailableDxtradeAccountsList/__test__/AvailableDxtradeAccountsList.spec.tsx
@@ -30,10 +30,10 @@ describe('AvailableDxtradeAccountsList', () => {
expect(screen.getByText('Deriv X')).toBeInTheDocument();
});
- it('shows DxtradeEnterPasswordModal upon clicking on the TradingAccountCard component', () => {
+ it('shows DxtradeEnterPasswordModal upon clicking on the TradingAccountCard component', async () => {
render(, { wrapper });
const tradingAccountCard = screen.getByTestId('dt_wallets_trading_account_card');
- userEvent.click(tradingAccountCard);
+ await userEvent.click(tradingAccountCard);
expect(mockShow).toHaveBeenCalled();
});
});
diff --git a/packages/wallets/src/features/cfd/modals/DxtradeEnterPasswordModal/__tests__/DxtradeEnterPasswordModal.spec.tsx b/packages/wallets/src/features/cfd/modals/DxtradeEnterPasswordModal/__tests__/DxtradeEnterPasswordModal.spec.tsx
index 62a8ae114e1b..c96476c25873 100644
--- a/packages/wallets/src/features/cfd/modals/DxtradeEnterPasswordModal/__tests__/DxtradeEnterPasswordModal.spec.tsx
+++ b/packages/wallets/src/features/cfd/modals/DxtradeEnterPasswordModal/__tests__/DxtradeEnterPasswordModal.spec.tsx
@@ -156,8 +156,8 @@ describe('DxtradeEnterPasswordModal', () => {
);
expect(screen.getByText('CreatePasswordModal')).toBeInTheDocument();
- userEvent.type(screen.getByTestId('dt_password_input'), 'NewPassword123');
- userEvent.click(screen.getByText('Submit'));
+ await userEvent.type(screen.getByTestId('dt_password_input'), 'NewPassword123');
+ await userEvent.click(screen.getByText('Submit'));
expect(mockMutateAsync).toHaveBeenCalledWith({
payload: {
account_type: 'real',
@@ -186,15 +186,15 @@ describe('DxtradeEnterPasswordModal', () => {
);
- userEvent.type(screen.getByTestId('dt_password_input'), 'NewPassword123');
- userEvent.click(screen.getByText('Submit'));
+ await userEvent.type(screen.getByTestId('dt_password_input'), 'NewPassword123');
+ await userEvent.click(screen.getByText('Submit'));
await waitFor(() => {
expect(mockMutateAsync).toHaveBeenCalled();
expect(screen.getByTestId('dt_password_input')).toHaveValue('');
});
});
- it('handles EnterPasswordModal password change and button clicks', () => {
+ it('handles EnterPasswordModal password change and button clicks', async () => {
const mockMutateAsync = jest.fn().mockResolvedValueOnce({});
const mockSendEmail = jest.fn();
(useCreateOtherCFDAccount as jest.Mock).mockReturnValue({
@@ -218,8 +218,8 @@ describe('DxtradeEnterPasswordModal', () => {
);
expect(screen.getByText('EnterPasswordModal')).toBeInTheDocument();
- userEvent.type(screen.getByTestId('dt_password_input'), 'NewPassword123');
- userEvent.click(screen.getByText('Submit'));
+ await userEvent.type(screen.getByTestId('dt_password_input'), 'NewPassword123');
+ await userEvent.click(screen.getByText('Submit'));
expect(mockMutateAsync).toHaveBeenCalledWith({
payload: {
account_type: 'real',
@@ -229,13 +229,13 @@ describe('DxtradeEnterPasswordModal', () => {
},
});
- userEvent.click(screen.getByText('Forgot Password'));
+ await userEvent.click(screen.getByText('Forgot Password'));
expect(mockSendEmail).toHaveBeenCalledWith({
platform: 'dxtrade',
});
});
- it('handles PasswordLimitExceededModal primary and secondary button clicks', () => {
+ it('handles PasswordLimitExceededModal primary and secondary button clicks', async () => {
const mockSendEmail = jest.fn();
(useSendPasswordResetEmail as jest.Mock).mockReturnValue({
sendEmail: mockSendEmail,
@@ -252,16 +252,16 @@ describe('DxtradeEnterPasswordModal', () => {
);
expect(screen.getByText('PasswordLimitExceededModal')).toBeInTheDocument();
- userEvent.click(screen.getByText('OK'));
+ await userEvent.click(screen.getByText('OK'));
expect(mockHide).toHaveBeenCalled();
- userEvent.click(screen.getByText('Reset Password'));
+ await userEvent.click(screen.getByText('Reset Password'));
expect(mockSendEmail).toHaveBeenCalledWith({
platform: 'dxtrade',
});
});
- it('handles SuccessModal primary and secondary button clicks', () => {
+ it('handles SuccessModal primary and secondary button clicks', async () => {
(useCreateOtherCFDAccount as jest.Mock).mockReturnValue({
data: {
account_id: 'CRW123',
@@ -284,13 +284,13 @@ describe('DxtradeEnterPasswordModal', () => {
);
expect(screen.getByText('SuccessModal')).toBeInTheDocument();
- userEvent.click(screen.getByText('Transfer'));
+ await userEvent.click(screen.getByText('Transfer'));
expect(mockHide).toHaveBeenCalled();
expect(mockPush).toHaveBeenCalledWith('/wallet/account-transfer', {
toAccountLoginId: 'CRW123',
});
- userEvent.click(screen.getByText('Maybe Later'));
+ await userEvent.click(screen.getByText('Maybe Later'));
expect(mockHide).toHaveBeenCalled();
});
diff --git a/packages/wallets/src/features/cfd/modals/MT5AccountAdded/__tests__/MT5AccountAdded.spec.tsx b/packages/wallets/src/features/cfd/modals/MT5AccountAdded/__tests__/MT5AccountAdded.spec.tsx
index e7ec3d90111c..d82da41fb27f 100644
--- a/packages/wallets/src/features/cfd/modals/MT5AccountAdded/__tests__/MT5AccountAdded.spec.tsx
+++ b/packages/wallets/src/features/cfd/modals/MT5AccountAdded/__tests__/MT5AccountAdded.spec.tsx
@@ -206,7 +206,7 @@ describe('MT5AccountAdded', () => {
expect(screen.queryByText('Your Financial account is ready')).not.toBeInTheDocument();
});
- it('handles "Maybe later" button click', () => {
+ it('handles "Maybe later" button click', async () => {
(useActiveWalletAccount as jest.Mock).mockReturnValue({
data: {
display_balance: '10000 USD',
@@ -243,7 +243,7 @@ describe('MT5AccountAdded', () => {
const maybeLaterButton = screen.getAllByRole('button', { name: 'Maybe later' })[0];
expect(maybeLaterButton).toBeInTheDocument();
- userEvent.click(maybeLaterButton);
+ await userEvent.click(maybeLaterButton);
expect(mockHide).toHaveBeenCalled();
});
});
diff --git a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/__tests__/MT5PasswordModal.spec.tsx b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/__tests__/MT5PasswordModal.spec.tsx
index 0ab4c9a81949..9340b529f6e9 100644
--- a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/__tests__/MT5PasswordModal.spec.tsx
+++ b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/__tests__/MT5PasswordModal.spec.tsx
@@ -278,7 +278,7 @@ describe('MT5PasswordModal', () => {
expect(screen.getByText('SentEmailContent')).toBeInTheDocument();
});
- it('handles primary and secondary button clicks in EnterPassword', () => {
+ it('handles primary and secondary button clicks in EnterPassword', async () => {
(useCreateMT5Account as jest.Mock).mockReturnValue({ mutate: mockCreateMT5AccountMutate, status: 'idle' });
(useVerifyEmail as jest.Mock).mockReturnValue({
mutate: mockEmailVerificationMutate,
@@ -302,9 +302,9 @@ describe('MT5PasswordModal', () => {
const passwordInput = screen.getByTestId('dt_enter_password_input');
const tncCheckbox = screen.getByTestId('dt_enter_password_tnc');
- userEvent.type(passwordInput, 'test123');
- userEvent.click(tncCheckbox);
- userEvent.click(screen.getByTestId('dt_enter_password_primary_button'));
+ await userEvent.type(passwordInput, 'test123');
+ await userEvent.click(tncCheckbox);
+ await userEvent.click(screen.getByTestId('dt_enter_password_primary_button'));
expect(mockCreateMT5AccountMutate).toHaveBeenCalledWith({
payload: {
account_type: 'gaming',
@@ -321,7 +321,7 @@ describe('MT5PasswordModal', () => {
},
});
- userEvent.click(screen.getByTestId('dt_enter_password_secondary_button'));
+ await userEvent.click(screen.getByTestId('dt_enter_password_secondary_button'));
expect(mockEmailVerificationMutate).toHaveBeenCalledWith({
type: 'trading_platform_mt5_password_reset',
url_parameters: {
@@ -350,7 +350,7 @@ describe('MT5PasswordModal', () => {
expect(screen.getByText('Create Deriv MT5 password')).toBeInTheDocument();
});
- it('handles primary button click for CreatePassword', () => {
+ it('handles primary button click for CreatePassword', async () => {
(useAccountStatus as jest.Mock).mockReturnValue({ data: { is_mt5_password_not_set: true }, isLoading: false });
(useDevice as jest.Mock).mockReturnValue({ isDesktop: false });
(useTradingPlatformPasswordChange as jest.Mock).mockReturnValue({
@@ -361,8 +361,8 @@ describe('MT5PasswordModal', () => {
render();
const input = screen.getByTestId('dt_create_password_input');
- userEvent.type(input, 'test123');
- userEvent.click(screen.getByTestId('dt_create_password_primary_button'));
+ await userEvent.type(input, 'test123');
+ await userEvent.click(screen.getByTestId('dt_create_password_primary_button'));
expect(mockTradingPasswordChangeMutateAsync).toHaveBeenCalledWith({
new_password: 'test123',
platform: 'mt5',
@@ -378,7 +378,7 @@ describe('MT5PasswordModal', () => {
expect(screen.getByText('CreatePasswordMT5')).toBeInTheDocument();
});
- it('handles primary button click for CreatePasswordMT5', () => {
+ it('handles primary button click for CreatePasswordMT5', async () => {
(useAccountStatus as jest.Mock).mockReturnValue({ data: { is_mt5_password_not_set: true }, isLoading: false });
(useTradingPlatformPasswordChange as jest.Mock).mockReturnValue({
mutateAsync: mockTradingPasswordChangeMutateAsync,
@@ -389,9 +389,9 @@ describe('MT5PasswordModal', () => {
const passwordInput = screen.getByTestId('dt_create_password_mt5_input');
const tncCheckbox = screen.getByTestId('dt_create_password_mt5_tnc');
- userEvent.type(passwordInput, 'test123');
- userEvent.click(tncCheckbox);
- userEvent.click(screen.getByTestId('dt_create_password_mt5_primary_button'));
+ await userEvent.type(passwordInput, 'test123');
+ await userEvent.click(tncCheckbox);
+ await userEvent.click(screen.getByTestId('dt_create_password_mt5_primary_button'));
expect(mockTradingPasswordChangeMutateAsync).toHaveBeenCalledWith({
new_password: 'test123',
platform: 'mt5',
@@ -424,7 +424,7 @@ describe('MT5PasswordModal', () => {
expect(screen.getByText('Deriv MT5 latest password requirements')).toBeInTheDocument();
});
- it('handles primary and secondary button clicks for MT5ResetPasswordModal', () => {
+ it('handles primary and secondary button clicks for MT5ResetPasswordModal', async () => {
(useSettings as jest.Mock).mockReturnValue({ data: { email: 'test@example.com' } });
(useCreateMT5Account as jest.Mock).mockReturnValue({
error: { error: { code: 'InvalidTradingPlatformPasswordFormat' } },
@@ -441,14 +441,14 @@ describe('MT5PasswordModal', () => {
//@ts-expect-error since this is a mock, we only need partial properties of the account
render();
- userEvent.click(screen.getByTestId('dt_mt5_reset_password_modal_primary_button'));
+ await userEvent.click(screen.getByTestId('dt_mt5_reset_password_modal_primary_button'));
expect(mockTradingPasswordChangeMutateAsync).toHaveBeenCalledWith({
new_password: 'newPass',
old_password: 'oldPass',
platform: 'mt5',
});
- userEvent.click(screen.getByTestId('dt_mt5_reset_password_modal_secondary_button'));
+ await userEvent.click(screen.getByTestId('dt_mt5_reset_password_modal_secondary_button'));
expect(mockEmailVerificationMutate).toHaveBeenCalledWith({
type: 'trading_platform_mt5_password_reset',
url_parameters: {
@@ -483,7 +483,7 @@ describe('MT5PasswordModal', () => {
expect(screen.getByText('PasswordLimitExceededModal')).toBeInTheDocument();
});
- it('handles primary button click for PasswordLimitExceededModal', () => {
+ it('handles primary button click for PasswordLimitExceededModal', async () => {
(useSettings as jest.Mock).mockReturnValue({ data: { email: 'test@example.com' } });
(useCreateMT5Account as jest.Mock).mockReturnValue({
error: { error: { code: 'PasswordReset' } },
@@ -497,7 +497,7 @@ describe('MT5PasswordModal', () => {
//@ts-expect-error since this is a mock, we only need partial properties of the account
render();
- userEvent.click(screen.getByTestId('dt_password_limit_exceeded_modal_secondary_button'));
+ await userEvent.click(screen.getByTestId('dt_password_limit_exceeded_modal_secondary_button'));
expect(mockEmailVerificationMutate).toHaveBeenCalledWith({
type: 'trading_platform_mt5_password_reset',
url_parameters: {
@@ -507,7 +507,7 @@ describe('MT5PasswordModal', () => {
});
});
- it('handles secondary button click for MT5PasswordModalFooter', () => {
+ it('handles secondary button click for MT5PasswordModalFooter', async () => {
(useSettings as jest.Mock).mockReturnValue({ data: { email: 'test@example.com' } });
(useDevice as jest.Mock).mockReturnValue({ isDesktop: false });
(useVerifyEmail as jest.Mock).mockReturnValue({
@@ -518,7 +518,7 @@ describe('MT5PasswordModal', () => {
//@ts-expect-error since this is a mock, we only need partial properties of the account
render();
- userEvent.click(screen.getByTestId('dt_mt5_password_modal_footer_secondary_button'));
+ await userEvent.click(screen.getByTestId('dt_mt5_password_modal_footer_secondary_button'));
expect(mockEmailVerificationMutate).toHaveBeenCalledWith({
type: 'trading_platform_mt5_password_reset',
url_parameters: {
@@ -528,7 +528,7 @@ describe('MT5PasswordModal', () => {
});
});
- it('sends create MT5 account request with correct parameters for demo account', () => {
+ it('sends create MT5 account request with correct parameters for demo account', async () => {
(useCreateMT5Account as jest.Mock).mockReturnValue({ mutate: mockCreateMT5AccountMutate, status: 'idle' });
(useDevice as jest.Mock).mockReturnValue({ isDesktop: false });
(useSettings as jest.Mock).mockReturnValue({
@@ -547,7 +547,7 @@ describe('MT5PasswordModal', () => {
//@ts-expect-error since this is a mock, we only need partial properties of the account
render();
- userEvent.click(screen.getByTestId('dt_enter_password_primary_button'));
+ await userEvent.click(screen.getByTestId('dt_enter_password_primary_button'));
expect(mockCreateMT5AccountMutate).toHaveBeenCalledWith({
payload: {
account_type: 'demo',
diff --git a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/__tests__/MT5PasswordModalFooters.spec.tsx b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/__tests__/MT5PasswordModalFooters.spec.tsx
index e952b6776f4f..f575d5edb64a 100644
--- a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/__tests__/MT5PasswordModalFooters.spec.tsx
+++ b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/__tests__/MT5PasswordModalFooters.spec.tsx
@@ -25,7 +25,7 @@ describe('MT5PasswordModalFooter', () => {
expect(screen.getByText('Add account')).toBeInTheDocument();
});
- it('calls onSecondaryClick when forgot password button is clicked', () => {
+ it('calls onSecondaryClick when forgot password button is clicked', async () => {
(useDevice as jest.Mock).mockReturnValue({ isDesktop: true });
const mockSecondaryClick = jest.fn();
@@ -37,11 +37,11 @@ describe('MT5PasswordModalFooter', () => {
onSecondaryClick={mockSecondaryClick}
/>
);
- userEvent.click(screen.getByText('Forgot password?'));
+ await userEvent.click(screen.getByText('Forgot password?'));
expect(mockSecondaryClick).toHaveBeenCalled();
});
- it('calls onPrimaryClick when add account button is clicked', () => {
+ it('calls onPrimaryClick when add account button is clicked', async () => {
(useDevice as jest.Mock).mockReturnValue({ isDesktop: true });
const mockPrimaryClick = jest.fn();
@@ -53,7 +53,7 @@ describe('MT5PasswordModalFooter', () => {
onSecondaryClick={jest.fn()}
/>
);
- userEvent.click(screen.getByText('Add account'));
+ await userEvent.click(screen.getByText('Add account'));
expect(mockPrimaryClick).toHaveBeenCalled();
});
});
diff --git a/packages/wallets/src/features/cfd/screens/ChangePassword/InvestorPassword/__tests__/MT5ChangeInvestorPasswordInputsScreen.spec.tsx b/packages/wallets/src/features/cfd/screens/ChangePassword/InvestorPassword/__tests__/MT5ChangeInvestorPasswordInputsScreen.spec.tsx
index 6523485ee119..94e20abb644f 100644
--- a/packages/wallets/src/features/cfd/screens/ChangePassword/InvestorPassword/__tests__/MT5ChangeInvestorPasswordInputsScreen.spec.tsx
+++ b/packages/wallets/src/features/cfd/screens/ChangePassword/InvestorPassword/__tests__/MT5ChangeInvestorPasswordInputsScreen.spec.tsx
@@ -88,9 +88,9 @@ describe('MT5ChangeInvestorPasswordInputsScreen', () => {
it('validates current password field', async () => {
render();
- userEvent.click(screen.getByText('Current investor password'));
- userEvent.tab();
- userEvent.click(screen.getByText(/Change investor password/));
+ await userEvent.click(screen.getByText('Current investor password'));
+ await userEvent.tab();
+ await userEvent.click(screen.getByText(/Change investor password/));
await waitFor(() => {
expect(screen.getByText('The field is required')).toBeInTheDocument();
@@ -107,11 +107,11 @@ describe('MT5ChangeInvestorPasswordInputsScreen', () => {
render();
- userEvent.type(screen.getByLabelText(/Current investor password/), oldPassword);
+ await userEvent.type(screen.getByLabelText(/Current investor password/), oldPassword);
const newInvestorPasswordInput = await screen.findByText('New investor password');
- userEvent.type(newInvestorPasswordInput, newPassword);
+ await userEvent.type(newInvestorPasswordInput, newPassword);
- userEvent.click(screen.getByText(/Change investor password/));
+ await userEvent.click(screen.getByText(/Change investor password/));
await waitFor(() => {
expect(mockChangePassword).toHaveBeenCalledWith({
@@ -148,13 +148,13 @@ describe('MT5ChangeInvestorPasswordInputsScreen', () => {
).toBeInTheDocument();
});
- it('displays the password when the viewer icon is clicked', () => {
+ it('displays the password when the viewer icon is clicked', async () => {
render();
const currentPasswordInput = screen.getByPlaceholderText('Current investor password');
expect(currentPasswordInput).toHaveAttribute('type', 'password');
- userEvent.click(screen.getAllByRole('button', { name: 'PasswordViewerIcon' })[0]);
+ await userEvent.click(screen.getAllByRole('button', { name: 'PasswordViewerIcon' })[0]);
expect(currentPasswordInput).toHaveAttribute('type', 'text');
});
diff --git a/packages/wallets/src/features/cfd/screens/ChangePassword/InvestorPassword/__tests__/MT5ChangeInvestorPasswordSavedScreen.spec.tsx b/packages/wallets/src/features/cfd/screens/ChangePassword/InvestorPassword/__tests__/MT5ChangeInvestorPasswordSavedScreen.spec.tsx
index 25c8d4a2bf67..ff3fa2dfe3cf 100644
--- a/packages/wallets/src/features/cfd/screens/ChangePassword/InvestorPassword/__tests__/MT5ChangeInvestorPasswordSavedScreen.spec.tsx
+++ b/packages/wallets/src/features/cfd/screens/ChangePassword/InvestorPassword/__tests__/MT5ChangeInvestorPasswordSavedScreen.spec.tsx
@@ -12,12 +12,12 @@ describe('MT5ChangeInvestorPasswordSavedScreen', () => {
expect(screen.getByRole('button', { name: /OK/i })).toBeInTheDocument();
});
- it('calls setNextScreen when OK button is clicked', () => {
+ it('calls setNextScreen when OK button is clicked', async () => {
const setNextScreenMock = jest.fn();
render();
- userEvent.click(screen.getByRole('button', { name: /OK/i }));
+ await userEvent.click(screen.getByRole('button', { name: /OK/i }));
expect(setNextScreenMock).toHaveBeenCalled();
});
diff --git a/packages/wallets/src/features/cfd/screens/ChangePassword/InvestorPassword/__tests__/MT5ChangeInvestorPasswordScreens.spec.tsx b/packages/wallets/src/features/cfd/screens/ChangePassword/InvestorPassword/__tests__/MT5ChangeInvestorPasswordScreens.spec.tsx
index aeaae696223c..58474f52f75c 100644
--- a/packages/wallets/src/features/cfd/screens/ChangePassword/InvestorPassword/__tests__/MT5ChangeInvestorPasswordScreens.spec.tsx
+++ b/packages/wallets/src/features/cfd/screens/ChangePassword/InvestorPassword/__tests__/MT5ChangeInvestorPasswordScreens.spec.tsx
@@ -58,7 +58,7 @@ describe('MT5ChangeInvestorPasswordScreens', () => {
render();
- userEvent.click(screen.getByRole('button', { name: 'Send Email' }));
+ await userEvent.click(screen.getByRole('button', { name: 'Send Email' }));
await waitFor(() => {
expect(mutate).toHaveBeenCalled();
@@ -67,21 +67,21 @@ describe('MT5ChangeInvestorPasswordScreens', () => {
});
});
- it('switches to saved screen on next screen button click', () => {
+ it('switches to saved screen on next screen button click', async () => {
render();
- userEvent.click(screen.getByRole('button', { name: 'Next Screen' }));
+ await userEvent.click(screen.getByRole('button', { name: 'Next Screen' }));
expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument();
});
- it('calls hide modal on close button click in saved screen', () => {
+ it('calls hide modal on close button click in saved screen', async () => {
const { hide } = useModal();
render();
- userEvent.click(screen.getByRole('button', { name: 'Next Screen' }));
- userEvent.click(screen.getByRole('button', { name: 'Close' }));
+ await userEvent.click(screen.getByRole('button', { name: 'Next Screen' }));
+ await userEvent.click(screen.getByRole('button', { name: 'Close' }));
expect(hide).toHaveBeenCalled();
});
diff --git a/packages/wallets/src/features/cfd/screens/ChangePassword/__tests__/MT5ChangePasswordScreens.spec.tsx b/packages/wallets/src/features/cfd/screens/ChangePassword/__tests__/MT5ChangePasswordScreens.spec.tsx
index 4aee9a4d661a..38527ac7b995 100644
--- a/packages/wallets/src/features/cfd/screens/ChangePassword/__tests__/MT5ChangePasswordScreens.spec.tsx
+++ b/packages/wallets/src/features/cfd/screens/ChangePassword/__tests__/MT5ChangePasswordScreens.spec.tsx
@@ -84,10 +84,10 @@ describe('MT5ChangePasswordScreens', () => {
expect(screen.getByText('Investor Password')).toBeInTheDocument();
});
- it('renders SentEmailContent when create or reset investor password button is clicked', () => {
+ it('renders SentEmailContent when create or reset investor password button is clicked', async () => {
render();
- userEvent.click(screen.getByText('Investor Password'));
+ await userEvent.click(screen.getByText('Investor Password'));
const createOrResetInvestorPasswordButton = screen.getByRole('button', {
name: 'Create or reset investor password',
@@ -95,7 +95,7 @@ describe('MT5ChangePasswordScreens', () => {
expect(createOrResetInvestorPasswordButton).toBeInTheDocument();
- userEvent.click(createOrResetInvestorPasswordButton);
+ await userEvent.click(createOrResetInvestorPasswordButton);
expect(screen.getByText('Sent Email Content')).toBeInTheDocument();
expect(screen.getByTestId('dt_change_password_sent_email_content_wrapper')).toBeInTheDocument();
diff --git a/packages/wallets/src/features/cfd/screens/ChangePassword/__tests__/TradingPlatformChangePasswordScreens.spec.tsx b/packages/wallets/src/features/cfd/screens/ChangePassword/__tests__/TradingPlatformChangePasswordScreens.spec.tsx
index 7ce24f9e9ec1..ff263fcf419c 100644
--- a/packages/wallets/src/features/cfd/screens/ChangePassword/__tests__/TradingPlatformChangePasswordScreens.spec.tsx
+++ b/packages/wallets/src/features/cfd/screens/ChangePassword/__tests__/TradingPlatformChangePasswordScreens.spec.tsx
@@ -85,10 +85,10 @@ describe('TradingPlatformChangePasswordScreens', () => {
expect(screen.getByText('Change password')).toBeInTheDocument();
});
- it('renders confirmation screen when Change password is clicked', () => {
+ it('renders confirmation screen when Change password is clicked', async () => {
render();
- userEvent.click(screen.getByRole('button', { name: 'Change password' }));
+ await userEvent.click(screen.getByRole('button', { name: 'Change password' }));
expect(screen.getByText('Confirm to change your Deriv MT5 password')).toBeInTheDocument();
expect(
@@ -101,19 +101,19 @@ describe('TradingPlatformChangePasswordScreens', () => {
it('renders email verification screen when Confirm is clicked', async () => {
render();
- userEvent.click(screen.getByRole('button', { name: 'Change password' }));
- userEvent.click(screen.getByRole('button', { name: 'Confirm' }));
+ await userEvent.click(screen.getByRole('button', { name: 'Change password' }));
+ await userEvent.click(screen.getByRole('button', { name: 'Confirm' }));
expect(screen.getByText('SentEmailContent')).toBeInTheDocument();
});
- it('calls handleSendEmail when Confirm is clicked and the platform is mt5', () => {
+ it('calls handleSendEmail when Confirm is clicked and the platform is mt5', async () => {
(useDevice as jest.Mock).mockReturnValue({ isMobile: true });
render();
- userEvent.click(screen.getByRole('button', { name: 'Change password' }));
- userEvent.click(screen.getByRole('button', { name: 'Confirm' }));
+ await userEvent.click(screen.getByRole('button', { name: 'Change password' }));
+ await userEvent.click(screen.getByRole('button', { name: 'Confirm' }));
expect(mockUseVerifyEmail).toHaveBeenCalledWith({
type: 'trading_platform_mt5_password_reset',
@@ -124,11 +124,11 @@ describe('TradingPlatformChangePasswordScreens', () => {
});
});
- it('calls handleSendEmail when Confirm is clicked and the platform is dxtrade', () => {
+ it('calls handleSendEmail when Confirm is clicked and the platform is dxtrade', async () => {
render();
- userEvent.click(screen.getByRole('button', { name: 'Change password' }));
- userEvent.click(screen.getByRole('button', { name: 'Confirm' }));
+ await userEvent.click(screen.getByRole('button', { name: 'Change password' }));
+ await userEvent.click(screen.getByRole('button', { name: 'Confirm' }));
expect(mockUseVerifyEmail).toHaveBeenCalledWith({
type: 'trading_platform_dxtrade_password_reset',
@@ -139,13 +139,13 @@ describe('TradingPlatformChangePasswordScreens', () => {
});
});
- it('hides modal when Cancel is clicked', () => {
+ it('hides modal when Cancel is clicked', async () => {
const { hide } = useModal();
render();
- userEvent.click(screen.getByRole('button', { name: 'Change password' }));
- userEvent.click(screen.getByRole('button', { name: 'Cancel' }));
+ await userEvent.click(screen.getByRole('button', { name: 'Change password' }));
+ await userEvent.click(screen.getByRole('button', { name: 'Cancel' }));
expect(hide).toHaveBeenCalled();
});
diff --git a/packages/wallets/src/features/cfd/screens/Jurisdiction/__tests__/JurisdictionScreen.spec.tsx b/packages/wallets/src/features/cfd/screens/Jurisdiction/__tests__/JurisdictionScreen.spec.tsx
index 9723b9957736..03af7403845b 100644
--- a/packages/wallets/src/features/cfd/screens/Jurisdiction/__tests__/JurisdictionScreen.spec.tsx
+++ b/packages/wallets/src/features/cfd/screens/Jurisdiction/__tests__/JurisdictionScreen.spec.tsx
@@ -99,7 +99,7 @@ describe('JurisdictionScreen', () => {
expect(screen.getByText('JurisdictionTncSection')).toBeInTheDocument();
});
- it('handles jurisdiction selection when the clicked item is not the same as the selectedJurisdiction', () => {
+ it('handles jurisdiction selection when the clicked item is not the same as the selectedJurisdiction', async () => {
(useAvailableMT5Accounts as jest.Mock).mockReturnValue({
data: [{ market_type: 'forex', product: 'standard', shortcode: 'bvi' }],
isLoading: false,
@@ -123,12 +123,12 @@ describe('JurisdictionScreen', () => {
/>
);
- userEvent.click(screen.getByText('JurisdictionCard: bvi'));
+ await userEvent.click(screen.getByText('JurisdictionCard: bvi'));
expect(setSelectedJurisdiction).toHaveBeenCalledWith('bvi');
});
- it('handles jurisdiction selection when the clicked item is the same as the selectedJurisdiction', () => {
+ it('handles jurisdiction selection when the clicked item is the same as the selectedJurisdiction', async () => {
(useAvailableMT5Accounts as jest.Mock).mockReturnValue({
data: [{ market_type: 'forex', product: 'standard', shortcode: 'bvi' }],
isLoading: false,
@@ -152,7 +152,7 @@ describe('JurisdictionScreen', () => {
/>
);
- userEvent.click(screen.getByText('JurisdictionCard: bvi'));
+ await userEvent.click(screen.getByText('JurisdictionCard: bvi'));
expect(setSelectedJurisdiction).toHaveBeenCalledWith('');
});
diff --git a/packages/wallets/src/features/cfd/screens/MT5TradeScreen/MT5TradeLink/__tests__/MT5MobileRedirectOption.spec.tsx b/packages/wallets/src/features/cfd/screens/MT5TradeScreen/MT5TradeLink/__tests__/MT5MobileRedirectOption.spec.tsx
index 3bcb1cbcca30..e4578d2fcbdd 100644
--- a/packages/wallets/src/features/cfd/screens/MT5TradeScreen/MT5TradeLink/__tests__/MT5MobileRedirectOption.spec.tsx
+++ b/packages/wallets/src/features/cfd/screens/MT5TradeScreen/MT5TradeLink/__tests__/MT5MobileRedirectOption.spec.tsx
@@ -15,7 +15,7 @@ describe('MT5MobileRedirectOption', () => {
let originalLocation: Location;
beforeEach(() => {
- jest.useFakeTimers();
+ jest.useFakeTimers({ legacyFakeTimers: true });
(getDeeplinkUrl as jest.Mock).mockReturnValue('mock-deeplink-url');
(getMobileAppInstallerUrl as jest.Mock).mockResolvedValue('mock-installer-url');
(getWebtraderUrl as jest.Mock).mockReturnValue('mock-webtrader-url');
diff --git a/packages/wallets/src/features/cfd/screens/VerificationFailed/__tests__/VerificationFailed.spec.tsx b/packages/wallets/src/features/cfd/screens/VerificationFailed/__tests__/VerificationFailed.spec.tsx
index 7c93ae688f48..880d0a19ccb5 100644
--- a/packages/wallets/src/features/cfd/screens/VerificationFailed/__tests__/VerificationFailed.spec.tsx
+++ b/packages/wallets/src/features/cfd/screens/VerificationFailed/__tests__/VerificationFailed.spec.tsx
@@ -95,7 +95,7 @@ describe('', () => {
expect(screen.getByText('Why did my verification fail?')).toBeInTheDocument();
- userEvent.click(screen.getByText('Maybe later'));
+ await userEvent.click(screen.getByText('Maybe later'));
await waitFor(() => {
expect(mockHideModal).toBeCalled();
@@ -113,7 +113,7 @@ describe('', () => {
expect(screen.getByText('Why did my verification fail?')).toBeInTheDocument();
- userEvent.click(screen.getAllByText('Resubmit documents')[1]);
+ await userEvent.click(screen.getAllByText('Resubmit documents')[1]);
await waitFor(() => {
expect(mockShowModal).toBeCalled();
diff --git a/setupTests.js b/setupTests.js
index 4856ee60aeb5..f21ff313897e 100644
--- a/setupTests.js
+++ b/setupTests.js
@@ -7,7 +7,6 @@
/** provides a set of custom jest matchers that you can use to extend jest.
* These will make your tests more declarative, clear to read and to maintain. */
import '@testing-library/jest-dom';
-import '@testing-library/jest-dom/extend-expect';
/**
* jest-extended aims to add additional matchers to Jest's default ones making it easy to test everything raised_hands
diff --git a/types/global.d.ts b/types/global.d.ts
index 386bd2be3926..a9677c64eb12 100644
--- a/types/global.d.ts
+++ b/types/global.d.ts
@@ -10,15 +10,18 @@ declare global {
TrackJS: { console: { log: (arg0: unknown[]) => void }; track: (arg0: object) => void };
Blockly;
Onfido: {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
init: (args: any) => any;
};
DD_RUM: object | undefined;
+ dataLayer: object[];
fcWidget: {
show: VoidFunction;
hide: VoidFunction;
open: VoidFunction;
close: VoidFunction;
on: (key: string, callback: VoidFunction) => void;
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
setConfig: (config: Record>) => void;
isLoaded: () => boolean;
isInitialized: () => boolean;
@@ -27,14 +30,17 @@ declare global {
};
};
fcWidgetMessengerConfig: {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
config: Record>;
};
fcSettings: {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
[key: string]: any;
};
FreshChat: {
initialize: (config: FreshChatConfig) => void;
};
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
Analytics: any;
GrowthbookFeatures: { [key: string]: boolean };
}
+