test: add missing unit test cases

Author: hamidyfine

.gitignore

@@ -1,7 +1,7 @@
 import type { JestConfigWithTsJest } from 'ts-jest';
 
 const jestConfig: JestConfigWithTsJest = {
-    collectCoverage: false,
+    collectCoverage: true,
     collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}'],
     coverageDirectory: 'coverage',
     moduleDirectories: [

jest.config.ts

@@ -3,20 +3,20 @@ import { renderWrapper, screen } from '@/tests';
 import { Button } from './button';
 
 describe('Button Component', () => {
-    test('renders the component', () => {
+    it('renders the component', () => {
         renderWrapper(<Button>Hello</Button>);
         expect(screen.getByText((content) => content.includes('Edit'))).toBeInTheDocument();
     });
-    test('renders the component and finds the button by text', () => {
+    it('renders the component and finds the button by text', () => {
         renderWrapper(<Button>Hello</Button>);
         expect(screen.getByText(/edit/i)).toBeInTheDocument();
     });
-    test('renders the component and finds the button by role', () => {
+    it('renders the component and finds the button by role', () => {
         renderWrapper(<Button>Hello</Button>);
         expect(screen.getByRole('button')).toBeInTheDocument();
     });
 
-    test('renders the component and finds the button by text', () => {
+    it('renders the component and finds the button by text', () => {
         renderWrapper(<Button>Hello</Button>);
         expect(screen.getByText((content) => content.includes('Hello'))).toBeInTheDocument();
     });

src/components/button/button.spec.tsx

@@ -0,0 +1,65 @@
+import { render } from '@testing-library/react';
+
+import { Trans, TransMacro } from './trans';
+
+jest.mock('@lingui/react', () => ({
+    Trans: jest.fn(({ children, ...props }) => (
+        <span
+            data-testid="mock-trans"
+            {...props}
+        >
+            {children}
+        </span>
+    )),
+}));
+
+jest.mock('@lingui/react/macro', () => ({
+    Trans: jest.fn(({ children, ...props }) => (
+        <span
+            data-testid="mock-macro"
+            {...props}
+        >
+            {children}
+        </span>
+    )),
+}));
+
+describe('Trans Component', () => {
+    it('should render the Trans component with passed props', () => {
+        const { getByTestId } = render(<Trans id="test.message" />);
+        const element = getByTestId('mock-trans');
+
+        expect(element).toBeInTheDocument();
+        expect(element).toHaveAttribute('id', 'test.message');
+    });
+
+    it('should render children correctly', () => {
+        const { getByTestId, getByText } = render(
+            <Trans id="test.message">Hello, world!</Trans>,
+        );
+        const element = getByTestId('mock-trans');
+
+        expect(element).toBeInTheDocument();
+        expect(getByText('Hello, world!')).toBeInTheDocument();
+    });
+});
+
+describe('TransMacro Component', () => {
+    it('should render the TransMacro component with passed props', () => {
+        const { getByTestId } = render(<TransMacro id="macro.message">Test</TransMacro>);
+        const element = getByTestId('mock-macro');
+
+        expect(element).toBeInTheDocument();
+        expect(element).toHaveAttribute('id', 'macro.message');
+    });
+
+    it('should render children correctly', () => {
+        const { getByTestId, getByText } = render(
+            <TransMacro id="macro.message">This is a macro!</TransMacro>,
+        );
+        const element = getByTestId('mock-macro');
+
+        expect(element).toBeInTheDocument();
+        expect(getByText('This is a macro!')).toBeInTheDocument();
+    });
+});

src/components/trans/trans.spec.tsx

@@ -0,0 +1,36 @@
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { renderHook } from '@testing-library/react';
+
+import { useTrans } from './trans.hook';
+
+jest.mock('@lingui/react');
+jest.mock('@lingui/core/macro');
+
+describe('useTrans hook', () => {
+    const mockI18n = {
+        _: jest.fn(),
+    };
+
+    beforeEach(() => {
+        (useLingui as jest.Mock).mockReturnValue({ i18n: mockI18n });
+    });
+
+    it('should return i18n object', () => {
+        const { result } = renderHook(() => useTrans());
+        expect(result.current.i18n).toBe(mockI18n);
+    });
+
+    it('should return macro function', () => {
+        const { result } = renderHook(() => useTrans());
+        expect(result.current.macro).toBe(msg);
+    });
+
+    it('should call i18n._ with correct parameters in trans function', () => {
+        const { result } = renderHook(() => useTrans());
+        const id = 'test.id';
+        const values = { name: 'John' };
+        result.current.trans(id, values);
+        expect(mockI18n._).toHaveBeenCalledWith(id, values);
+    });
+});

src/hooks/trans.hook.spec.ts

@@ -0,0 +1,58 @@
+import { i18n } from '@lingui/core';
+
+import { renderWrapper, waitFor } from '@/tests';
+
+import { messages as enMessages } from '../locales/en/messages';
+import { IntlProvider } from './intl.provider';
+
+jest.mock('@lingui/core', () => {
+    const originalModule = jest.requireActual('@lingui/core');
+    return {
+        ...originalModule,
+        i18n: {
+            ...originalModule.i18n,
+            activate: jest.fn(),
+            load: jest.fn(),
+            on: jest.fn(),
+        },
+    };
+});
+
+describe('IntlProvider Component', () => {
+    beforeAll(() => {
+        i18n.load({ en: enMessages });
+        i18n.activate('en');
+    });
+
+    it('should activate the default locale (en) if none is provided', async () => {
+        renderWrapper(
+            <IntlProvider>
+                <div>Default Locale</div>
+            </IntlProvider>,
+        );
+
+        await waitFor(() => expect(i18n.activate).toHaveBeenCalledWith('en'));
+    });
+
+    it('should activate the specified locale', async () => {
+        const locale = 'en';
+
+        renderWrapper(
+            <IntlProvider locale={locale}>
+                <div>Specific Locale</div>
+            </IntlProvider>,
+        );
+
+        await waitFor(() => expect(i18n.activate).toHaveBeenCalledWith(locale));
+    });
+
+    it('should load the correct catalogs', async () => {
+        renderWrapper(
+            <IntlProvider locale="en">
+                <div>Catalog Test</div>
+            </IntlProvider>,
+        );
+
+        await waitFor(() => expect(i18n.load).toHaveBeenCalledWith({ en: enMessages }));
+    });
+});

src/providers/intl.provider.spec.tsx

@@ -5,12 +5,12 @@ import type { PropsWithChildren } from 'react';
 // Import Catalogs
 import { messages as enMessages } from '../locales/en/messages';
 
-// Inject Catalogs
-i18n.load({
-    en: enMessages,
-});
-
 export const IntlProvider = ({ children, locale = 'en' }: PropsWithChildren<{ locale?: string }>) => {
+    // Inject Catalogs
+    i18n.load({
+        en: enMessages,
+    });
+
     // Activate Catalog
     i18n.activate(locale);
 

src/providers/intl.provider.tsx

@@ -0,0 +1,56 @@
+import { act, renderHook } from '@/tests';
+
+import { useAppStores } from './app.store';
+
+describe('useAppStores Zustand Store', () => {
+    it('should initialize with 0 bears', () => {
+        const { result } = renderHook(() => useAppStores());
+        expect(result.current.bears).toBe(0);
+    });
+
+    it('should increase the bear population by 1', () => {
+        const { result } = renderHook(() => useAppStores());
+
+        act(() => {
+            result.current.increasePopulation();
+        });
+
+        expect(result.current.bears).toBe(1);
+    });
+
+    it('should reset the bear population to 0', () => {
+        const { result } = renderHook(() => useAppStores());
+
+        act(() => {
+            result.current.increasePopulation();
+            result.current.increasePopulation();
+            result.current.removeAllBears();
+        });
+
+        expect(result.current.bears).toBe(0);
+    });
+
+    it('should update the bear population to a specific number', () => {
+        const { result } = renderHook(() => useAppStores());
+
+        act(() => {
+            result.current.updateBears(5);
+        });
+
+        expect(result.current.bears).toBe(5);
+    });
+
+    it('should handle multiple updates correctly', () => {
+        const { result } = renderHook(() => useAppStores());
+
+        act(() => {
+            result.current.updateBears(10);
+            result.current.increasePopulation();
+            result.current.increasePopulation();
+            result.current.removeAllBears();
+            result.current.updateBears(7);
+        });
+
+        expect(result.current.bears).toBe(7);
+    });
+});