Refactor MyProfileHeader component

packages/p2p/src/components/my-profile/my-profile-header/__test__/my-profile-header.spec.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import UserEvent from '@testing-library/user-event';
+import MyProfileHeader from '../my-profile-header';
+
+describe('<MyProfileHeader/>', () => {
+    it('renders the MyProfileHeader component with all the tabs', () => {
+        render(<MyProfileHeader />);
+
+        expect(screen.getByText('Stats')).toBeInTheDocument();
+        expect(screen.getByText('Payment methods')).toBeInTheDocument();
+        expect(screen.getByText('Ad details')).toBeInTheDocument();
+        expect(screen.getByText('My counterparties')).toBeInTheDocument();
+    });
+
+    it('can switch between tabs when a tab is clicked on', () => {
+        render(<MyProfileHeader />);
+
+        const StatsTab = screen.getByRole('button', { name: 'Stats' });
+        const MyCounterpartiesTab = screen.getByRole('button', { name: 'My counterparties' });
+
+        expect(StatsTab).toHaveClass('dc-button-menu__button--active');
+
+        UserEvent.click(MyCounterpartiesTab);
+
+        expect(StatsTab).not.toHaveClass('dc-button-menu__button--active');
+        expect(MyCounterpartiesTab).toHaveClass('dc-button-menu__button--active');
+    });
+});

packages/p2p/src/components/my-profile/my-profile-header/index.js → packages/p2p/src/components/my-profile/my-profile-header/index.ts

@@ -1,4 +1,4 @@
-import MyProfileHeader from './my-profile-header.jsx';
+import MyProfileHeader from './my-profile-header';
 import './my-profile-header.scss';
 
 export default MyProfileHeader;

packages/p2p/src/components/my-profile/my-profile-header/my-profile-header.jsx → packages/p2p/src/components/my-profile/my-profile-header/my-profile-header.tsx

@@ -1,10 +1,10 @@
-import * as React from 'react';
-import { observer } from 'mobx-react-lite';
+import React from 'react';
+import { observer } from '@deriv/stores';
 import { ButtonToggle } from '@deriv/components';
+import { useStores } from 'Stores';
+import { my_profile_tabs } from 'Constants/my-profile-tabs';
 import ToggleContainer from 'Components/misc/toggle-container.jsx';
 import { localize } from 'Components/i18next';
-import { my_profile_tabs } from 'Constants/my-profile-tabs';
-import { useStores } from 'Stores';
 
 const MyProfileHeader = () => {
     const { my_profile_store } = useStores();
@@ -28,7 +28,8 @@ const MyProfileHeader = () => {
         },
     ];
 
-    const onChangeTab = event => my_profile_store.setActiveTab(event.target.value);
+    const onChangeTab = (event: { target: { value: string; name: string } }) =>
+        my_profile_store.setActiveTab(event.target.value);
 
     return (
         <ToggleContainer>