add Counter-example component for test rtk, add test

VanyaMate · Apr 4, 2024 · 68406de · 68406de
1 parent c7face6
commit 68406de
Show file tree

Hide file tree

Showing 21 changed files with 405 additions and 27 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -27,13 +27,15 @@
     },
     "dependencies": {
         "@playwright/experimental-ct-react": "^1.42.1",
+        "@reduxjs/toolkit": "^2.2.3",
         "classnames": "^2.5.1",
         "i18next": "^23.10.1",
         "i18next-browser-languagedetector": "^7.2.0",
         "i18next-http-backend": "^2.5.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-i18next": "^14.1.0",
+        "react-redux": "^9.1.0",
         "react-router-dom": "^6.22.3"
     },
     "devDependencies": {
@@ -52,6 +54,7 @@
         "@storybook/test": "^8.0.5",
         "@testing-library/jest-dom": "^6.4.2",
         "@testing-library/react": "^14.2.2",
+        "@testing-library/user-event": "^14.5.2",
         "@types/jest": "^29.5.12",
         "@types/react": "^18.2.66",
         "@types/react-dom": "^18.2.22",

diff --git a/src/apps/SiteApp/SiteApp.tsx b/src/apps/SiteApp/SiteApp.tsx
@@ -11,6 +11,7 @@ import ScreenHeight from '@/components/shared/ui/screen/ScreenHeight/ScreenHeigh
 import ErrorBoundary from '@/components/shared/ui/errors/ErrorBoundary/ErrorBoundary.tsx';
 import i18n from './configs/i18n/i18n.ts';
 import { I18nextProvider } from 'react-i18next';
+import SiteAppReduxToolkitProvider from './providers/SiteAppReduxToolkitProvider.tsx';
 
 
 export type SiteAppProps = {};
@@ -20,25 +21,27 @@ const SiteApp: React.FC<SiteAppProps> = (props) => {
 
     return (
         <React.StrictMode>
-            <I18nextProvider i18n={ i18n }>
-                <BrowserRouter>
-                    <ThemeProvider isPageTheme={ true }
-                                   storageId="site-app"
-                                   withStorage={ true }
-                    >
-                        <ErrorBoundary>
-                            <ScreenHeight
-                                footer={ <FooterNavBar/> }
-                            >
-                                {/* eslint-disable-next-line react/jsx-max-depth */ }
-                                <HeaderNavBar/>
-                                {/* eslint-disable-next-line react/jsx-max-depth */ }
-                                <SiteRouter/>
-                            </ScreenHeight>
-                        </ErrorBoundary>
-                    </ThemeProvider>
-                </BrowserRouter>
-            </I18nextProvider>
+            <SiteAppReduxToolkitProvider>
+                <I18nextProvider i18n={ i18n }>
+                    <BrowserRouter>
+                        <ThemeProvider isPageTheme={ true }
+                                       storageId="site-app"
+                                       withStorage={ true }
+                        >
+                            <ErrorBoundary>
+                                <ScreenHeight
+                                    footer={ <FooterNavBar/> }
+                                >
+                                    {/* eslint-disable-next-line react/jsx-max-depth */ }
+                                    <HeaderNavBar/>
+                                    {/* eslint-disable-next-line react/jsx-max-depth */ }
+                                    <SiteRouter/>
+                                </ScreenHeight>
+                            </ErrorBoundary>
+                        </ThemeProvider>
+                    </BrowserRouter>
+                </I18nextProvider>
+            </SiteAppReduxToolkitProvider>
         </React.StrictMode>
     );
 };

diff --git a/src/apps/SiteApp/configs/redux-tollkit/site-app.rtk-store-config.ts b/src/apps/SiteApp/configs/redux-tollkit/site-app.rtk-store-config.ts
@@ -0,0 +1,18 @@
+import { configureStore } from '@reduxjs/toolkit';
+import {
+    SiteAppRtkStoreSchema,
+} from '@/apps/SiteApp/configs/redux-tollkit/site-app.rtk-store-schema.ts';
+import {
+    counterReducer,
+} from '@/components/entities/Counter/model/slice/counterSlice.ts';
+
+
+export const createSiteAppReduxStore = function (initialState?: SiteAppRtkStoreSchema) {
+    return configureStore<SiteAppRtkStoreSchema>({
+        reducer       : {
+            counter: counterReducer,
+        },
+        devTools      : __IS_DEV__,
+        preloadedState: initialState,
+    });
+};
diff --git a/src/apps/SiteApp/configs/redux-tollkit/site-app.rtk-store-schema.ts b/src/apps/SiteApp/configs/redux-tollkit/site-app.rtk-store-schema.ts
@@ -0,0 +1,8 @@
+import {
+    CounterSchema,
+} from '@/components/entities/Counter/model/types/counterSchema.ts';
+
+
+export interface SiteAppRtkStoreSchema {
+    counter: CounterSchema;
+}
diff --git a/src/apps/SiteApp/containers/widgets/navigation/HeaderNavBar/HeaderNavBar.tsx b/src/apps/SiteApp/containers/widgets/navigation/HeaderNavBar/HeaderNavBar.tsx
@@ -12,6 +12,7 @@ import {
     useModalController,
 } from '@/components/shared/ui/modal/Modal/hooks/useModalController.ts';
 import Modal from '@/components/shared/ui/modal/Modal/Modal.tsx';
+import Counter from '@/components/entities/Counter/Counter.tsx';
 
 
 export type HeaderNavBarProps = {};
@@ -28,9 +29,9 @@ const HeaderNavBar: React.FC<HeaderNavBarProps> = (props) => {
             </h1>
             <div className={ css.side }>
                 <Modal controller={ controller }>
-                    h1
+                    <Counter/>
                 </Modal>
-                <Button onClick={ () => controller.setOpened(true) }>Open modal</Button>
+                <Button onClick={ () => controller.setOpened(true) }>[-]</Button>
                 <nav>
                     <ul className={ classNames(css.links, {}, [ css.list ]) }>
                         <li>

diff --git a/src/apps/SiteApp/providers/SiteAppReduxToolkitProvider.tsx b/src/apps/SiteApp/providers/SiteAppReduxToolkitProvider.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import {
+    createSiteAppReduxStore,
+} from '@/apps/SiteApp/configs/redux-tollkit/site-app.rtk-store-config.ts';
+
+
+export type SiteAppReduxToolkitProviderProps = {
+    children: React.ReactNode;
+};
+
+const SiteAppReduxToolkitProvider: React.FC<SiteAppReduxToolkitProviderProps> = (props) => {
+    const { children } = props;
+    const store        = createSiteAppReduxStore();
+
+    return (
+        <Provider store={ store }>
+            { children }
+        </Provider>
+    );
+};
+
+export default React.memo(SiteAppReduxToolkitProvider);
diff --git a/src/components/entities/Counter/Counter.module.scss b/src/components/entities/Counter/Counter.module.scss
@@ -0,0 +1,11 @@
+.container {
+    display        : flex;
+    flex-direction : column;
+    gap            : var(--offset-medium);
+    align-items    : center;
+
+    .buttons {
+        display : flex;
+        gap     : var(--offset-medium);
+    }
+}
diff --git a/src/components/entities/Counter/Counter.test.ts b/src/components/entities/Counter/Counter.test.ts
@@ -0,0 +1,7 @@
+import CounterSimpleTestIt
+    from '@/components/entities/Counter/__its__/Counter.simple-test.it.tsx';
+
+
+describe('Counter', () => {
+    it('Simple-test', CounterSimpleTestIt);
+});