diff --git a/packages/appstore/src/components/main-title-bar/__tests__/asset-summary.spec.tsx b/packages/appstore/src/components/main-title-bar/__tests__/asset-summary.spec.tsx
new file mode 100644
index 000000000000..ede98873e952
--- /dev/null
+++ b/packages/appstore/src/components/main-title-bar/__tests__/asset-summary.spec.tsx
@@ -0,0 +1,233 @@
+import React from 'react';
+import AssetSummary from '../asset-summary';
+import { render, screen } from '@testing-library/react';
+import { StoreProvider, mockStore } from '@deriv/stores';
+import { isMobile } from '@deriv/shared';
+
+jest.mock('../../pre-loader/total-assets-loader', () => ({
+ __esModule: true,
+ default: () =>
TotalAssetsLoader
,
+}));
+
+jest.mock('@deriv/shared', () => ({
+ ...jest.requireActual('@deriv/shared'),
+ isMobile: jest.fn(),
+}));
+
+jest.mock('@deriv/hooks', () => ({
+ ...jest.requireActual('@deriv/hooks'),
+ usePlatformAccounts: jest.fn(() => ({
+ real: [
+ {
+ balance: 100,
+ currency: 'USD',
+ },
+ ],
+ demo: {
+ balance: 10000,
+ currency: 'USD',
+ },
+ })),
+ useCfdAccounts: jest.fn(() => ({
+ real: [
+ {
+ balance: 15000,
+ currency: 'USD',
+ },
+ ],
+ demo: {
+ balance: 123213,
+ currency: 'USD',
+ },
+ })),
+}));
+
+describe('AssetSummary', () => {
+ it('should render correctly', () => {
+ const mock = mockStore({});
+
+ const wrapper = ({ children }: { children: JSX.Element }) => (
+ {children}
+ );
+
+ const { container } = render(, {
+ wrapper,
+ });
+ expect(container).toBeInTheDocument();
+ });
+
+ it('should render the text and balance correctly', () => {
+ const mock = mockStore({});
+
+ const wrapper = ({ children }: { children: JSX.Element }) => (
+ {children}
+ );
+
+ const { container } = render(, {
+ wrapper,
+ });
+ expect(container).toBeInTheDocument();
+ expect(screen.getByText('Total asset')).toBeInTheDocument();
+ expect(screen.getByText('15,100.00')).toBeInTheDocument();
+ });
+
+ it('should not show Total Assets title if isMobile is true ', () => {
+ isMobile.mockReturnValue(true);
+ const mock = mockStore({});
+
+ const wrapper = ({ children }: { children: JSX.Element }) => (
+ {children}
+ );
+
+ const { container } = render(, {
+ wrapper,
+ });
+ expect(container).toBeInTheDocument();
+ expect(screen.queryByText('Total assets')).not.toBeInTheDocument();
+ });
+
+ it('should show loader if is_switching is true ', () => {
+ const mock = mockStore({
+ client: {
+ is_switching: true,
+ },
+ });
+
+ const wrapper = ({ children }: { children: JSX.Element }) => (
+ {children}
+ );
+
+ const { container } = render(, {
+ wrapper,
+ });
+ expect(container).toBeInTheDocument();
+ expect(screen.getByText('TotalAssetsLoader')).toBeInTheDocument();
+ });
+
+ it('should not render if user has no real account ', () => {
+ const mock = mockStore({
+ client: {
+ has_maltainvest_account: false,
+ },
+ traders_hub: {
+ selected_account_type: 'real',
+ is_eu_user: true,
+ },
+ });
+
+ const wrapper = ({ children }: { children: JSX.Element }) => (
+ {children}
+ );
+
+ const { container } = render(, {
+ wrapper,
+ });
+ expect(container).toBeInTheDocument();
+ });
+
+ it('should show the correct amount in real tab', () => {
+ const mock = mockStore({
+ traders_hub: {
+ selected_account_type: 'real',
+ },
+ });
+
+ const wrapper = ({ children }: { children: JSX.Element }) => (
+ {children}
+ );
+
+ const { container } = render(, {
+ wrapper,
+ });
+ expect(container).toBeInTheDocument();
+ expect(screen.getByText('15,100.00')).toBeInTheDocument();
+ });
+
+ it('should not show component if user has no real MF account and in eu regulation', () => {
+ const mock = mockStore({
+ traders_hub: {
+ selected_account_type: 'real',
+ is_eu_user: true,
+ no_MF_account: true,
+ },
+ });
+
+ const wrapper = ({ children }: { children: JSX.Element }) => (
+ {children}
+ );
+
+ const { container } = render(, {
+ wrapper,
+ });
+ expect(container).toBeInTheDocument();
+ expect(screen.queryByText('Total assets')).not.toBeInTheDocument();
+ });
+
+ it('should not show component if user has no real CR account and in non-eu regulation', () => {
+ const mock = mockStore({
+ traders_hub: {
+ selected_account_type: 'real',
+ no_CR_account: true,
+ },
+ });
+
+ const wrapper = ({ children }: { children: JSX.Element }) => (
+ {children}
+ );
+
+ const { container } = render(, {
+ wrapper,
+ });
+ expect(container).toBeInTheDocument();
+ expect(screen.queryByText('Total assets')).not.toBeInTheDocument();
+ });
+
+ it('should show the correct balance for demo account ', () => {
+ const mock = mockStore({
+ traders_hub: {
+ selected_account_type: 'demo',
+ platform_demo_balance: {
+ balance: 10000,
+ },
+ },
+ });
+
+ const wrapper = ({ children }: { children: JSX.Element }) => (
+ {children}
+ );
+
+ const { container } = render(, {
+ wrapper,
+ });
+ expect(container).toBeInTheDocument();
+ expect(screen.getByText('10,000.00')).toBeInTheDocument();
+ });
+
+ it('should show the correct real total amount with total cfd currency', () => {
+ const mock = mockStore({});
+
+ const wrapper = ({ children }: { children: JSX.Element }) => (
+ {children}
+ );
+
+ const { container } = render(, {
+ wrapper,
+ });
+ expect(container).toBeInTheDocument();
+ expect(screen.getByText('15,100.00')).toBeInTheDocument();
+ });
+
+ it('should show the correct total demo amount with total demo cfd currency', () => {
+ const mock = mockStore({});
+
+ const wrapper = ({ children }: { children: JSX.Element }) => (
+ {children}
+ );
+
+ const { container } = render(, {
+ wrapper,
+ });
+ expect(container).toBeInTheDocument();
+ expect(screen.getByText('15,100.00')).toBeInTheDocument();
+ });
+});
diff --git a/packages/stores/src/mockStore.ts b/packages/stores/src/mockStore.ts
index d88d15e342a7..f39cee715eeb 100644
--- a/packages/stores/src/mockStore.ts
+++ b/packages/stores/src/mockStore.ts
@@ -214,6 +214,7 @@ const mock = (): TStores & { is_mock: boolean } => {
current_language: 'EN',
is_network_online: false,
is_language_changing: false,
+ getExchangeRate: jest.fn(),
},
ui: {
app_contents_scroll_ref: {
@@ -260,6 +261,22 @@ const mock = (): TStores & { is_mock: boolean } => {
is_real: false,
selectRegion: jest.fn(),
is_low_risk_cr_eu_real: false,
+ platform_real_balance: {
+ currency: '',
+ balance: 0,
+ },
+ cfd_demo_balance: {
+ currency: '',
+ balance: 0,
+ },
+ platform_demo_balance: {
+ currency: '',
+ balance: 0,
+ },
+ cfd_real_balance: {
+ currency: '',
+ balance: 0,
+ },
financial_restricted_countries: false,
selected_account_type: 'real',
no_CR_account: false,
diff --git a/packages/stores/types.ts b/packages/stores/types.ts
index 20c9df92fc7b..46c43cf2f0fd 100644
--- a/packages/stores/types.ts
+++ b/packages/stores/types.ts
@@ -219,6 +219,7 @@ type TCommonStore = {
changeSelectedLanguage: (key: string) => void;
current_language: string;
is_language_changing: boolean;
+ getExchangeRate: (from_currency: string, to_currency: string) => Promise;
};
type TUiStore = {
@@ -289,6 +290,22 @@ type TTradersHubStore = {
setTogglePlatformType: (platform_type: string) => void;
is_real: boolean;
selectRegion: (region: string) => void;
+ platform_real_balance: {
+ currency: string;
+ balance: number;
+ };
+ cfd_demo_balance: {
+ currency: string;
+ balance: number;
+ };
+ platform_demo_balance: {
+ currency: string;
+ balance: number;
+ };
+ cfd_real_balance: {
+ currency: string;
+ balance: number;
+ };
financial_restricted_countries: boolean;
selected_account_type: string;
no_CR_account: boolean;