Merge pull request #138 from niloofar-deriv/sidemenu-tests

Niloofar/ Added test cases for BackButton and MenuContent components

Author: matin-deriv

src/components/AppHeader/MobileMenu/MenuContent.tsx

@@ -22,6 +22,7 @@ export const MenuContent = () => {
                             className={clsx('pl-[4.8rem] pr-[1.6rem]', {
                                 'border-b border-[#f2f3f4]': !removeBorderBottom,
                             })}
+                            data-testid='dt_menu_item'
                             key={index}
                         >
                             {item.map(({ LeftComponent, RightComponent, as, href, label, onClick, target }) => {

src/components/AppHeader/MobileMenu/__tests__/BackButton.spec.tsx

@@ -0,0 +1,37 @@
+import { useDevice } from '@deriv-com/ui';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { BackButton } from '../BackButton';
+
+const mockOnClick = jest.fn();
+
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    useDevice: jest.fn(() => ({ isMobile: true })),
+}));
+
+describe('BackButton Component', () => {
+    it('renders the button with the correct text', () => {
+        render(<BackButton buttonText='Go Back' onClick={mockOnClick} />);
+        expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+
+    it('calls the onClick handler when clicked', async () => {
+        render(<BackButton buttonText='Go Back' onClick={mockOnClick} />);
+        await userEvent.click(screen.getByRole('button'));
+        expect(mockOnClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('adjusts the text size for mobile devices', () => {
+        render(<BackButton buttonText='Go Back' onClick={mockOnClick} />);
+        const textComponent = screen.getByText('Go Back');
+        expect(textComponent).toHaveClass('derivs-text__size--lg');
+    });
+
+    it('uses a smaller text size for non-mobile devices', () => {
+        (useDevice as jest.Mock).mockReturnValue({ isMobile: false });
+        render(<BackButton buttonText='Go Back' onClick={mockOnClick} />);
+        const textComponent = screen.getByText('Go Back');
+        expect(textComponent).toHaveClass('derivs-text__size--md');
+    });
+});

src/components/AppHeader/MobileMenu/__tests__/MenuContent.spec.tsx

@@ -0,0 +1,105 @@
+import { useDevice } from '@deriv-com/ui';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MenuContent } from '../MenuContent';
+
+const mockSettingsButtonClick = jest.fn();
+
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    useDevice: jest.fn(() => ({ isMobile: true })),
+}));
+
+jest.mock('@deriv-com/api-hooks', () => ({
+    useAuthData: jest.fn().mockReturnValue({
+        isAuthorized: true,
+    }),
+}));
+
+jest.mock('../../PlatformSwitcher', () => ({
+    PlatformSwitcher: () => <div>PlatformSwitcher</div>,
+}));
+
+jest.mock('../MobileMenuConfig', () => ({
+    MobileMenuConfig: jest.fn(() => [
+        [
+            {
+                as: 'a',
+                href: '/home',
+                label: 'Home',
+                LeftComponent: () => <span>Home Icon</span>,
+                removeBorderBottom: false,
+            },
+        ],
+        [
+            {
+                as: 'button',
+                label: 'Settings',
+                LeftComponent: () => <span>Settings Icon</span>,
+                onClick: mockSettingsButtonClick,
+                removeBorderBottom: true,
+            },
+        ],
+    ]),
+}));
+
+describe('MenuContent Component', () => {
+    beforeEach(() => {
+        Object.defineProperty(window, 'matchMedia', {
+            value: jest.fn(),
+            writable: true,
+        });
+    });
+
+    it('renders PlatformSwitcher and MenuItem components correctly', () => {
+        render(<MenuContent />);
+        expect(screen.getByText('PlatformSwitcher')).toBeInTheDocument();
+        expect(screen.getByText('Home')).toBeInTheDocument();
+        expect(screen.getByText('Settings')).toBeInTheDocument();
+    });
+
+    it('renders MenuItem as an anchor when `as` prop is "a"', () => {
+        render(<MenuContent />);
+        expect(screen.getByRole('link', { name: 'Home Icon Home' })).toBeInTheDocument();
+    });
+
+    it('renders anchor props correctly', () => {
+        render(<MenuContent />);
+        const link = screen.getByRole('link', { name: 'Home Icon Home' });
+        expect(link).toBeInTheDocument();
+        expect(link).toHaveAttribute('href', '/home');
+        expect(screen.getByText('Home Icon')).toBeInTheDocument();
+    });
+
+    it('renders MenuItem as a button when `as` prop is "button"', () => {
+        render(<MenuContent />);
+        expect(screen.getByRole('button', { name: 'Settings Icon Settings' })).toBeInTheDocument();
+    });
+
+    it('renders button props correctly', async () => {
+        render(<MenuContent />);
+        const settingsButton = screen.getByRole('button', { name: 'Settings Icon Settings' });
+        expect(settingsButton).toBeInTheDocument();
+        await userEvent.click(settingsButton);
+        expect(mockSettingsButtonClick).toHaveBeenCalled();
+    });
+
+    it('adjusts text size for mobile devices', () => {
+        render(<MenuContent />);
+        const text = screen.getByText('Home');
+        expect(text).toHaveClass('derivs-text__size--md');
+    });
+
+    it('adjusts text size for desktop devices', () => {
+        (useDevice as jest.Mock).mockReturnValue({ isMobile: false });
+        render(<MenuContent />);
+        const text = screen.getByText('Home');
+        expect(text).toHaveClass('derivs-text__size--sm');
+    });
+
+    it('applies conditional border styles based on configuration', () => {
+        render(<MenuContent />);
+        expect(screen.getAllByTestId('dt_menu_item')[0]).toHaveClass('border-b');
+        expect(screen.getAllByTestId('dt_menu_item')[1]).not.toHaveClass('border-b');
+    });
+});