Kate / WEBREL-40 / Test coverage: MarketUnavailableModal + UnsupportedContractModal in Trader package

packages/stores/src/mockStore.ts

@@ -276,11 +276,14 @@ const mock = (): TStores & { is_mock: boolean } => {
                 current: null,
             },
             current_focus: null,
+            is_loading: false,
             is_cashier_visible: false,
             is_app_disabled: false,
             is_closing_create_real_account_modal: false,
             is_dark_mode_on: false,
             is_language_settings_modal_on: false,
+            is_unsupported_contract_modal_visible: false,
+            has_only_forward_starting_contracts: false,
             is_link_expired_modal_visible: false,
             is_mobile: false,
             is_reports_visible: false,

packages/stores/types.ts

@@ -413,8 +413,11 @@ type TUiStore = {
     disableApp: () => void;
     enableApp: () => void;
     has_real_account_signup_ended: boolean;
+    is_loading: boolean;
     is_cashier_visible: boolean;
     is_closing_create_real_account_modal: boolean;
+    is_unsupported_contract_modal_visible: boolean;
+    has_only_forward_starting_contracts: boolean;
     is_dark_mode_on: boolean;
     is_reports_visible: boolean;
     is_language_settings_modal_on: boolean;

packages/trader/src/App/Components/Elements/Modals/MarketUnavailableModal/__tests__/market-unavailable.spec.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { render, screen } from '@testing-library/react';
+import MarketUnavailableModal from '../market-unavailable';
+import { mockStore } from '@deriv/stores';
+import TraderProviders from '../../../../../../trader-providers';
+
+const mock_props = {
+    onCancel: jest.fn(),
+    onConfirm: jest.fn(),
+};
+
+describe('MarketUnavailableModal', () => {
+    it('should render modal component', () => {
+        const mock_root_store = mockStore({ ui: { has_only_forward_starting_contracts: true } });
+
+        ReactDOM.createPortal = jest.fn(component => {
+            return component;
+        });
+
+        render(<MarketUnavailableModal {...mock_props} />, {
+            wrapper: ({ children }) => <TraderProviders store={mock_root_store}>{children}</TraderProviders>,
+        });
+
+        expect(screen.getByText(/This market is not yet/i)).toBeInTheDocument();
+    });
+});

packages/trader/src/App/Components/Elements/Modals/UnsupportedContractModal/__tests__/unsupported-contract-modal.spec.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { render, screen } from '@testing-library/react';
+import UnsupportedContractModal from '../unsupported-contract-modal';
+import { mockStore } from '@deriv/stores';
+import TraderProviders from '../../../../../../trader-providers';
+
+const mock_props = {
+    onClose: jest.fn(),
+    onConfirm: jest.fn(),
+};
+
+describe('UnsupportedContractModal', () => {
+    it('should render modal component', () => {
+        const mock_root_store = mockStore({ ui: { is_unsupported_contract_modal_visible: true } });
+
+        ReactDOM.createPortal = jest.fn(component => {
+            return component;
+        });
+
+        render(<UnsupportedContractModal {...mock_props} />, {
+            wrapper: ({ children }) => <TraderProviders store={mock_root_store}>{children}</TraderProviders>,
+        });
+
+        expect(screen.getByText(/You’ve selected a trade type that is currently unsupported/i)).toBeInTheDocument();
+    });
+});