From c76068193c0c6cd139a703beb75d64fbc7f6fcf5 Mon Sep 17 00:00:00 2001
From: Niloofar <niloofar.sadeghi@regentmarkets.com>
Date: Tue, 18 Jun 2024 13:21:35 +0800
Subject: [PATCH] test: added test cases for menu header component

---
 .../MobileMenu/__tests__/MenuHeader.spec.tsx  | 52 +++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 src/components/AppHeader/MobileMenu/__tests__/MenuHeader.spec.tsx

diff --git a/src/components/AppHeader/MobileMenu/__tests__/MenuHeader.spec.tsx b/src/components/AppHeader/MobileMenu/__tests__/MenuHeader.spec.tsx
new file mode 100644
index 00000000..3e87de42
--- /dev/null
+++ b/src/components/AppHeader/MobileMenu/__tests__/MenuHeader.spec.tsx
@@ -0,0 +1,52 @@
+import { useTranslations } from '@deriv-com/translations';
+import { useDevice } from '@deriv-com/ui';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MenuHeader } from '../MenuHeader';
+
+const mockOpenLanguageSetting = jest.fn();
+
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    useDevice: jest.fn(() => ({ isMobile: true })),
+}));
+
+jest.mock('@deriv-com/translations', () => ({
+    useTranslations: jest.fn(),
+}));
+
+describe('MenuHeader component', () => {
+    beforeEach(() => {
+        (useTranslations as jest.Mock).mockReturnValue({
+            currentLang: 'EN',
+            localize: jest.fn(text => text),
+        });
+    });
+
+    it('renders "Menu" with "lg" text size in mobile view', () => {
+        render(<MenuHeader hideLanguageSetting={false} openLanguageSetting={mockOpenLanguageSetting} />);
+        expect(screen.getByText('Menu')).toHaveClass('derivs-text__size--lg');
+    });
+
+    it('renders "Menu" with "md" text size in desktop view', () => {
+        (useDevice as jest.Mock).mockReturnValue({ isMobile: false });
+        render(<MenuHeader hideLanguageSetting={false} openLanguageSetting={mockOpenLanguageSetting} />);
+        expect(screen.getByText('Menu')).toHaveClass('derivs-text__size--md');
+    });
+
+    it('does not render language setting button when hideLanguageSetting is true', () => {
+        render(<MenuHeader hideLanguageSetting openLanguageSetting={mockOpenLanguageSetting} />);
+        expect(screen.queryByText('EN')).not.toBeInTheDocument();
+    });
+
+    it('renders language setting button with correct content when hideLanguageSetting is false', () => {
+        render(<MenuHeader hideLanguageSetting={false} openLanguageSetting={mockOpenLanguageSetting} />);
+        expect(screen.getByText('EN')).toBeInTheDocument();
+    });
+
+    it('calls openLanguageSetting when language button is clicked', async () => {
+        render(<MenuHeader hideLanguageSetting={false} openLanguageSetting={mockOpenLanguageSetting} />);
+        await userEvent.click(screen.getByText('EN'));
+        expect(mockOpenLanguageSetting).toHaveBeenCalled();
+    });
+});