feat: resolve conflicts

Author: amina-deriv

__mocks__/translation.mock.js

@@ -44,7 +44,12 @@ const useTranslations = () => ({
 
 const localize = mockFn;
 
-const getAllowedLanguages = jest.fn(() => ({ EN: 'English', VI: 'Tiếng Việt' }));
+const getAllowedLanguages = jest.fn(unsupported_languages => {
+    if (unsupported_languages.includes('VI')) {
+        return { EN: 'English' };
+    }
+    return { EN: 'English', VI: 'Tiếng Việt' };
+});
 
 const getInitialLanguage = jest.fn(() => 'EN');
 

packages/account/src/Sections/Profile/LanguageSettings/language-settings.tsx

@@ -1,5 +1,5 @@
 import { Redirect } from 'react-router-dom';
-import { UNSUPPORTED_LANGUAGES, routes } from '@deriv/shared';
+import { UNSUPPORTED_LANGUAGES, WALLETS_UNSUPPORTED_LANGUAGES, routes } from '@deriv/shared';
 import { observer, useStore } from '@deriv/stores';
 import { useTranslations, getAllowedLanguages } from '@deriv-com/translations';
 import FormSubHeader from '../../../Components/form-sub-header';
@@ -25,13 +25,9 @@ const LanguageSettings = observer(() => {
         switchLanguage(language_key);
     };
 
-    let allowed_languages: Record<string, string> = getAllowedLanguages(UNSUPPORTED_LANGUAGES);
-
-    if (has_wallet) {
-        allowed_languages = Object.fromEntries(
-            Object.entries(allowed_languages).filter(([language_key]) => ['EN', 'AR'].includes(language_key))
-        );
-    }
+    const allowed_languages: Record<string, string> = getAllowedLanguages(
+        has_wallet ? WALLETS_UNSUPPORTED_LANGUAGES : UNSUPPORTED_LANGUAGES
+    );
 
     return (
         <div className='settings-language'>

packages/account/src/Sections/Security/Passwords/__tests__/deriv-email.spec.tsx

@@ -33,11 +33,10 @@ describe('DerivEmail', () => {
             </APIProvider>
         );
 
-    it('should render email address in disabled form', () => {
+    it('should render message properly', () => {
         renderComponent({});
 
-        const el_input_field = screen.getByRole('textbox', { name: /Email address\*/i });
-        expect(el_input_field).toBeDisabled();
+        expect(screen.getByText(/This is the email address associated with your Deriv account./i)).toBeInTheDocument();
     });
 
     it('should display button when it is not redirected from deriv-go', () => {

packages/account/src/Sections/Security/Passwords/__tests__/deriv-mt5-password.spec.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import DerivMT5Password from '../deriv-mt5-password';
+import { APIProvider, useMutation } from '@deriv/api';
+import { mockStore, StoreProvider } from '@deriv/stores';
+
+jest.mock('@deriv/quill-icons', () => ({
+    ...jest.requireActual('@deriv/quill-icons'),
+    PartnersProductDerivMt5BrandLightLogoHorizontalIcon: () => 'PartnersProductDerivMt5BrandLightLogoHorizontalIcon',
+}));
+
+jest.mock('@deriv/api', () => ({
+    ...jest.requireActual('@deriv/api'),
+    useMutation: jest.fn(() => ({ mutate: jest.fn() })),
+}));
+
+describe('<DerivMT5Password />', () => {
+    let modal_root_el: HTMLDivElement;
+
+    beforeAll(() => {
+        modal_root_el = document.createElement('div');
+        modal_root_el.setAttribute('id', 'modal_root');
+        document.body.appendChild(modal_root_el);
+    });
+
+    afterAll(() => {
+        document.body.removeChild(modal_root_el);
+    });
+
+    const store = mockStore({ client: { email: '[email protected]' } });
+
+    const renderComponent = ({ store_config = store }) =>
+        render(
+            <APIProvider>
+                <StoreProvider store={store_config}>
+                    <DerivMT5Password />
+                </StoreProvider>
+            </APIProvider>
+        );
+
+    it('Should render properly', async () => {
+        renderComponent({});
+
+        expect(screen.getAllByText(/deriv mt5 password/i)).toHaveLength(2);
+        expect(
+            screen.getByText(/use your to log in to your Deriv MT5 accounts on the desktop, web and mobile apps\./i)
+        ).toBeInTheDocument();
+        expect(screen.queryByText(/PartnersProductDerivMt5BrandLightLogoHorizontalIcon/i)).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: /Change password/i })).toBeInTheDocument();
+        expect(screen.queryByText(/unlink from/i)).not.toBeInTheDocument();
+    });
+
+    it('displays a change password button', () => {
+        renderComponent({});
+        const change_password_button = screen.getByRole('button', {
+            name: /change password/i,
+        });
+
+        expect(change_password_button).toBeInTheDocument();
+    });
+
+    it('should invoke useMutation when change password is clicked', async () => {
+        renderComponent({});
+        const ele_change_btn = screen.getByRole('button', {
+            name: /change password/i,
+        });
+        fireEvent.click(ele_change_btn);
+        expect(screen.queryByText(/we’ve sent you an email/i)).toBeInTheDocument();
+        expect(screen.getByText(/please click on the link in the email to change your/i)).toBeInTheDocument();
+        await waitFor(() => {
+            expect(useMutation).toHaveBeenCalled();
+        });
+    });
+});

packages/account/src/Sections/Security/Passwords/__tests__/deriv-password.spec.tsx

@@ -41,22 +41,15 @@ describe('<DerivPassword />', () => {
     it('Should render properly', async () => {
         renderComponent({});
 
-        expect(
-            screen.getByRole('heading', {
-                name: /deriv password/i,
-            })
-        ).toBeInTheDocument();
+        expect(screen.getAllByText(/deriv password/i)).toHaveLength(2);
         expect(
             screen.getByText(
-                /use the to log in to deriv\.com, deriv go, deriv trader, smarttrader, deriv bot and deriv ctrader\./i
+                /use your to log in to deriv\.com, deriv go, deriv trader, smarttrader, deriv bot and deriv ctrader\./i
             )
         ).toBeInTheDocument();
         expect(screen.queryByText(/BrandDerivLogoCoralIcon/i)).toBeInTheDocument();
-        expect(screen.getByRole('button', { name: /change password/i })).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: /Change password/i })).toBeInTheDocument();
         expect(screen.queryByText(/unlink from/i)).not.toBeInTheDocument();
-
-        const popover_wrapper = screen.getAllByTestId('dt_popover_wrapper');
-        expect(popover_wrapper).toHaveLength(5);
     });
 
     it('displays the correct platform information for non-MF clients & restricted countries', () => {
@@ -65,12 +58,7 @@ describe('<DerivPassword />', () => {
         });
         renderComponent({ store_config });
 
-        expect(screen.getByText(/use the to log in to deriv\.com, deriv trader and deriv go\./i));
-
-        const popover_wrapper = screen.getAllByTestId('dt_popover_wrapper');
-        // expect popover to have length of 4
-        expect(popover_wrapper).toHaveLength(3);
-        // expect button with text change password to be in the document
+        expect(screen.getByText(/use your to log in to deriv\.com, deriv trader and deriv go\./i));
         expect(screen.getByRole('button', { name: /change password/i })).toBeInTheDocument();
     });
 
@@ -80,11 +68,8 @@ describe('<DerivPassword />', () => {
         });
         renderComponent({ store_config });
 
-        expect(screen.getByText(/use the to log in to deriv\.com and deriv trader\./i)).toBeInTheDocument();
-
-        const popover_wrapper = screen.getByTestId('dt_popover_wrapper');
+        expect(screen.getByText(/use your to log in to deriv\.com and deriv trader\./i)).toBeInTheDocument();
 
-        expect(popover_wrapper).toBeInTheDocument();
         expect(screen.getByRole('button', { name: /change password/i })).toBeInTheDocument();
     });
 

packages/account/src/Sections/Security/Passwords/__tests__/deriv-x-password.spec.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import DerivXPassword from '../deriv-x-password';
+import { APIProvider, useMutation } from '@deriv/api';
+import { mockStore, StoreProvider } from '@deriv/stores';
+
+jest.mock('@deriv/quill-icons', () => ({
+    ...jest.requireActual('@deriv/quill-icons'),
+    AccountsDerivXIcon: () => 'AccountsDerivXIcon',
+}));
+
+jest.mock('@deriv/api', () => ({
+    ...jest.requireActual('@deriv/api'),
+    useMutation: jest.fn(() => ({ mutate: jest.fn() })),
+}));
+
+describe('<DerivXPassword />', () => {
+    let modal_root_el: HTMLDivElement;
+
+    beforeAll(() => {
+        modal_root_el = document.createElement('div');
+        modal_root_el.setAttribute('id', 'modal_root');
+        document.body.appendChild(modal_root_el);
+    });
+
+    afterAll(() => {
+        document.body.removeChild(modal_root_el);
+    });
+
+    const store = mockStore({ client: { email: '[email protected]' } });
+
+    const renderComponent = ({ store_config = store }) =>
+        render(
+            <APIProvider>
+                <StoreProvider store={store_config}>
+                    <DerivXPassword />
+                </StoreProvider>
+            </APIProvider>
+        );
+
+    it('Should render properly', async () => {
+        renderComponent({});
+
+        expect(screen.getAllByText(/deriv x password/i)).toHaveLength(2);
+        expect(
+            screen.getByText(/use your to log in to your Deriv X accounts on the web and mobile apps\./i)
+        ).toBeInTheDocument();
+        expect(screen.queryByText(/AccountsDerivXIcon/i)).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: /Change password/i })).toBeInTheDocument();
+        expect(screen.queryByText(/unlink from/i)).not.toBeInTheDocument();
+    });
+
+    it('displays a change password button', () => {
+        renderComponent({});
+        const change_password_button = screen.getByRole('button', {
+            name: /change password/i,
+        });
+
+        expect(change_password_button).toBeInTheDocument();
+    });
+
+    it('should invoke useMutation when change password is clicked', async () => {
+        renderComponent({});
+        const ele_change_btn = screen.getByRole('button', {
+            name: /change password/i,
+        });
+        fireEvent.click(ele_change_btn);
+        expect(screen.queryByText(/we’ve sent you an email/i)).toBeInTheDocument();
+        expect(screen.getByText(/please click on the link in the email to change your/i)).toBeInTheDocument();
+        await waitFor(() => {
+            expect(useMutation).toHaveBeenCalled();
+        });
+    });
+});

packages/account/src/Sections/Security/Passwords/__tests__/email-password-section.spec.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import EmailPasswordSection from '../email-password-section';
+
+describe('EmailPasswordSection', () => {
+    const mockProps = {
+        title: 'Test Title',
+        title_icon: 'test-icon',
+        description: 'Test description',
+        onClick: jest.fn(),
+        button_text: 'Test Button',
+    };
+
+    it('should renders correctly with all props', () => {
+        render(<EmailPasswordSection {...mockProps} />);
+
+        expect(screen.getByText('Test Title')).toBeInTheDocument();
+        expect(screen.getByText('Test description')).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Test Button' })).toBeInTheDocument();
+    });
+
+    it('should calls onClick when button is clicked', () => {
+        render(<EmailPasswordSection {...mockProps} />);
+
+        const button = screen.getByRole('button', { name: 'Test Button' });
+        fireEvent.click(button);
+
+        expect(mockProps.onClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('should not render button when should_display_button is false', () => {
+        render(<EmailPasswordSection {...mockProps} should_display_button={false} />);
+
+        expect(screen.queryByRole('button')).not.toBeInTheDocument();
+    });
+
+    it('should render button with icon when provided', () => {
+        const buttonIcon = <span data-testid='test-icon'>Icon</span>;
+        render(<EmailPasswordSection {...mockProps} button_icon={buttonIcon} />);
+
+        const button = screen.getByRole('button', { name: 'Icon Test Button' });
+        expect(button).toContainElement(screen.getByTestId('test-icon'));
+    });
+
+    it('should render description as ReactNode when provided', () => {
+        const customDescription = <span data-testid='custom-description'>Custom Description</span>;
+        render(<EmailPasswordSection {...mockProps} description={customDescription} />);
+
+        expect(screen.getByTestId('custom-description')).toBeInTheDocument();
+    });
+});

packages/account/src/Sections/Security/Passwords/__tests__/email-password-title.spec.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import EmailPasswordTitle from '../email-password-title';
+import { AccountsDerivXIcon, BrandDerivLogoCoralIcon, LegacyEmailIcon } from '@deriv/quill-icons';
+
+jest.mock('@deriv/quill-icons', () => ({
+    AccountsDerivXIcon: jest.fn(() => null),
+    BrandDerivLogoCoralIcon: jest.fn(() => null),
+    PartnersProductDerivMt5BrandLightLogoHorizontalIcon: jest.fn(() => null),
+    LegacyEmailIcon: jest.fn(() => null),
+}));
+
+describe('EmailPasswordTitle', () => {
+    it('renders the correct icon and title for deriv_email', () => {
+        render(<EmailPasswordTitle icon='deriv_email' title='Email' />);
+
+        expect(LegacyEmailIcon).toHaveBeenCalledWith({ iconSize: 'sm' }, {});
+        expect(screen.getByText('Email')).toBeInTheDocument();
+    });
+
+    it('renders the correct icon and title for deriv_password', () => {
+        render(<EmailPasswordTitle icon='deriv_password' title='Deriv Password' />);
+
+        expect(BrandDerivLogoCoralIcon).toHaveBeenCalledWith({ height: 24, width: 24 }, {});
+        expect(screen.getByText('Deriv Password')).toBeInTheDocument();
+    });
+
+    it('renders the correct icon and title for deriv_mt5_password', () => {
+        render(<EmailPasswordTitle icon='deriv_mt5_password' title='MT5 Password' />);
+
+        expect(BrandDerivLogoCoralIcon).toHaveBeenCalledWith({ height: 24, width: 24 }, {});
+        expect(screen.getByText('MT5 Password')).toBeInTheDocument();
+    });
+
+    it('renders the correct icon and title for deriv_x_password', () => {
+        render(<EmailPasswordTitle icon='deriv_x_password' title='Deriv X Password' />);
+
+        expect(AccountsDerivXIcon).toHaveBeenCalledWith({ iconSize: 'sm' }, {});
+        expect(screen.getByText('Deriv X Password')).toBeInTheDocument();
+    });
+});