feat: add redux toolkit \ counter tests

config/jest/jest.config.ts

@@ -6,6 +6,9 @@
 import path from 'path';
 
 export default {
+    globals: {
+        __IS_DEV__: true,
+    },
     clearMocks: true,
     testEnvironment: 'jsdom',
     coveragePathIgnorePatterns: [

public/locales/en/translation.json

@@ -10,5 +10,7 @@
   "throw error": "throw error",
   "Главная": "Main",
   "О сайте": "About us",
-  "Короткий язык": "En"
+  "Короткий язык": "En",
+  "increment": "increment",
+  "decrement": "decrement"
 }

public/locales/ru/translation.json

@@ -10,5 +10,7 @@
   "throw error": "throw error",
   "Главная": "Главная",
   "О сайте": "О сайте",
-  "Короткий язык": "Ru"
+  "Короткий язык": "Ru",
+  "increment": "Увеличить",
+  "decrement": "Уменьшить"
 }

src/app/providers/StoreProvider/ui/StoreProvider.tsx

@@ -2,10 +2,11 @@ import { ReactNode } from 'react';
 import { Provider } from 'react-redux';
 import { createReduxStore } from 'app/providers/StoreProvider/config/store';
 import { StateSchema } from 'app/providers/StoreProvider/config/StateSchema';
+import { DeepPartial } from '@reduxjs/toolkit';
 
 interface StoreProviderProps {
   children?: ReactNode | any;
-  initialState?: StateSchema;
+  initialState?: DeepPartial<StateSchema>;
 }
 
 export const StoreProvider = (props: StoreProviderProps) => {
@@ -14,7 +15,7 @@ export const StoreProvider = (props: StoreProviderProps) => {
         initialState,
     } = props;
 
-    const store = createReduxStore(initialState);
+    const store = createReduxStore(initialState as StateSchema);
     return (
         <Provider store={store}>
             {children}

src/entities/Counter/model/selectors/getCounter/getCounter.test.ts

@@ -0,0 +1,12 @@
+import { DeepPartial } from '@reduxjs/toolkit';
+import { StateSchema } from 'app/providers/StoreProvider';
+import { getCounter } from './getCounter';
+
+describe('getCounter', () => {
+    test('should return counter value', () => {
+        const state:DeepPartial<StateSchema> = {
+            counter: { value: 10 },
+        };
+        expect(getCounter(state as StateSchema)).toEqual({ value: 10 });
+    });
+});

src/entities/Counter/model/selectors/getCounterValue/getCounterValue.test.ts

@@ -0,0 +1,13 @@
+import { getCounterValue } from 'entities/Counter/model/selectors/getCounterValue/getCounterValue';
+import { DeepPartial } from '@reduxjs/toolkit';
+import { StateSchema } from 'app/providers/StoreProvider';
+
+describe('getCounterValue.test', () => {
+    test('get counter value', () => {
+        const state:DeepPartial<StateSchema> = {
+            counter: { value: 10 },
+        };
+
+        expect(getCounterValue(state as StateSchema)).toEqual(10);
+    });
+});

src/entities/Counter/model/slice/counterSlise.test.ts

@@ -0,0 +1,28 @@
+import { CounterSchema } from 'entities/Counter';
+import { counterActions, counterReducer } from './counterSlice';
+
+describe('counterSlise.test', () => {
+    test('decrement', () => {
+        const state: CounterSchema = {
+            value: 10,
+        };
+        expect(counterReducer(state, counterActions.decrement)).toEqual({
+            value: 9,
+        });
+    });
+
+    test('increment', () => {
+        const state: CounterSchema = {
+            value: 10,
+        };
+        expect(counterReducer(state, counterActions.increment)).toEqual({
+            value: 11,
+        });
+    });
+
+    test('should work with empty state', () => {
+        expect(counterReducer(undefined, counterActions.increment)).toEqual({
+            value: 1,
+        });
+    });
+});

src/entities/Counter/ui/Counter.test.tsx

@@ -0,0 +1,30 @@
+import { fireEvent, screen } from '@testing-library/react';
+import { componentRender } from 'shared/lib/tests/componentRender/componentRender';
+import { Counter } from './Counter';
+
+describe('Counter', () => {
+    test('with only first param', () => {
+        componentRender(<Counter />, {
+            initialState: { counter: { value: 10 } },
+        });
+        expect(screen.getByTestId('value-title')).toHaveTextContent('10');
+    });
+
+    test('increment param click', () => {
+        componentRender(<Counter />, {
+            initialState: { counter: { value: 10 } },
+        });
+        const toggleBtn = screen.getByTestId('increment-btn');
+        fireEvent.click(toggleBtn);
+        expect(screen.getByTestId('value-title')).toHaveTextContent('11');
+    });
+
+    test('decrement param click', () => {
+        componentRender(<Counter />, {
+            initialState: { counter: { value: 10 } },
+        });
+        const toggleBtn = screen.getByTestId('decrement-btn');
+        fireEvent.click(toggleBtn);
+        expect(screen.getByTestId('value-title')).toHaveTextContent('9');
+    });
+});

src/entities/Counter/ui/Counter.tsx

@@ -1,12 +1,15 @@
 import { Button } from 'shared/ui/Button/Button';
 import { useDispatch, useSelector } from 'react-redux';
+import { useTranslation } from 'react-i18next';
 import { getCounterValue } from '../model/selectors/getCounterValue/getCounterValue';
 import { counterActions } from '../model/slice/counterSlice';
 
 export const Counter = () => {
     const dispatch = useDispatch();
     const counterValue = useSelector(getCounterValue);
 
+    const { t } = useTranslation();
+
     const increment = () => {
         dispatch(counterActions.increment());
     };
@@ -17,9 +20,9 @@ export const Counter = () => {
 
     return (
         <div>
-            <h1>{counterValue}</h1>
-            <Button onClick={increment}>increment</Button>
-            <Button onClick={decrement}>decrement</Button>
+            <h1 data-testid="value-title">{counterValue}</h1>
+            <Button data-testid="increment-btn" onClick={increment}>{t('increment')}</Button>
+            <Button data-testid="decrement-btn" onClick={decrement}>{t('decrement')}</Button>
         </div>
     );
 };

src/pages/MainPage/ui/MainPage.tsx

@@ -1,14 +1,12 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Counter } from 'entities/Counter';
 
 const MainPage = (props: any) => {
     const { t } = useTranslation();
 
     return (
         <div>
             {t('Главная страница')}
-            <Counter />
         </div>
     );
 };

src/shared/lib/tests/componentRender/componentRender.tsx

@@ -3,20 +3,27 @@ import { render } from '@testing-library/react';
 import i18nForTests from 'shared/config/i18n/i18nForTests';
 import { I18nextProvider } from 'react-i18next';
 import { MemoryRouter } from 'react-router-dom';
+import { StateSchema, StoreProvider } from 'app/providers/StoreProvider';
+import { DeepPartial } from '@reduxjs/toolkit';
 
 export interface componentRenderOptions {
   route?: string;
+	initialState?: DeepPartial<StateSchema>;
 }
 
 export function componentRender(component: ReactNode, options: componentRenderOptions = {}) {
     const {
         route = '/',
+        initialState,
     } = options;
     return render(
-        <MemoryRouter initialEntries={[route]}>
-            <I18nextProvider i18n={i18nForTests}>
-                {component}
-            </I18nextProvider>
-        </MemoryRouter>,
+        <StoreProvider initialState={initialState}>
+            <MemoryRouter initialEntries={[route]}>
+                <I18nextProvider i18n={i18nForTests}>
+                    {component}
+                </I18nextProvider>
+            </MemoryRouter>
+        </StoreProvider>
+        ,
     );
 }