feat: add AppRouter tests

TomatoVan · Mar 24, 2024 · 3d2de35 · 3d2de35
1 parent b720f38
commit 3d2de35
Show file tree

Hide file tree

Showing 25 changed files with 140 additions and 67 deletions.
diff --git a/package.json b/package.json
@@ -48,7 +48,7 @@
     "@storybook/testing-library": "^0.0.9",
     "@svgr/webpack": "^6.2.1",
     "@testing-library/jest-dom": "^5.16.2",
-    "@testing-library/react": "^12.1.3",
+    "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.3.0",
     "@types/jest": "^27.4.1",
     "@types/node": "^17.0.21",

diff --git a/src/app/providers/router/config/routeConfig.tsx b/src/app/providers/router/config/routeConfig.tsx
@@ -10,63 +10,63 @@ import { ForbiddenPage } from '@/pages/ForbiddenPage';
 import { NotFoundPage } from '@/pages/NotFoundPage';
 import {
     AppRoutes,
-    getRouterAbout,
-    getRouterAdminPanel,
-    getRouterArticleCreate,
-    getRouterArticleDetails,
-    getRouterArticleEdit,
-    getRouterArticles, getRouterForbidden,
-    getRouterMain, getRouterNotFound,
-    getRouterProfile,
+    getRouteAbout,
+    getRouteAdminPanel,
+    getRouteArticleCreate,
+    getRouteArticleDetails,
+    getRouteArticleEdit,
+    getRouteArticles, getRouteForbidden,
+    getRouteMain, getRouteNotFound,
+    getRouteProfile,
 } from '@/shared/const/router';
 import { AppRoutesProps } from '@/shared/types/router';
 
 export const routeConfig: Record<AppRoutes, AppRoutesProps> = {
     [AppRoutes.MAIN]: {
-        path: getRouterMain(),
+        path: getRouteMain(),
         element: <MainPage />,
     },
     [AppRoutes.ABOUT]: {
-        path: getRouterAbout(),
+        path: getRouteAbout(),
         element: <AboutPage />,
     },
     [AppRoutes.PROFILE]: {
-        path: getRouterProfile(':id'),
+        path: getRouteProfile(':id'),
         element: <ProfilePage />,
         authOnly: true,
     },
     [AppRoutes.ARTICLES]: {
-        path: getRouterArticles(),
+        path: getRouteArticles(),
         element: <ArticlesPage />,
         authOnly: true,
     },
     [AppRoutes.ARTICLE_DETAILS]: {
-        path: getRouterArticleDetails(':id'),
+        path: getRouteArticleDetails(':id'),
         element: <ArticlesDetailsPage />,
         authOnly: true,
     },
     [AppRoutes.ARTICLE_CREATE]: {
-        path: getRouterArticleCreate(),
+        path: getRouteArticleCreate(),
         element: <ArticleEditPage />,
         authOnly: true,
     },
     [AppRoutes.ARTICLE_EDIT]: {
-        path: getRouterArticleEdit(':id'),
+        path: getRouteArticleEdit(':id'),
         element: <ArticleEditPage />,
         authOnly: true,
     },
     [AppRoutes.ADMIN_PANEL]: {
-        path: getRouterAdminPanel(),
+        path: getRouteAdminPanel(),
         element: <AdminPanelPage />,
         authOnly: true,
         roles: [UserRole.ADMIN, UserRole.MANAGER],
     },
     [AppRoutes.FORBIDDEN]: {
-        path: getRouterForbidden(),
+        path: getRouteForbidden(),
         element: <ForbiddenPage />,
     },
     [AppRoutes.NOT_FOUND]: {
-        path: getRouterNotFound(),
+        path: getRouteNotFound(),
         element: <NotFoundPage />,
     },
 };
diff --git a/src/app/providers/router/ui/AppRouter.test.tsx b/src/app/providers/router/ui/AppRouter.test.tsx
@@ -0,0 +1,66 @@
+import { screen } from '@testing-library/react';
+import AppRouter from './AppRouter';
+import { componentRender } from '@/shared/lib/tests/componentRender/componentRender';
+import { getRouteAbout, getRouteAdminPanel, getRouteProfile } from '@/shared/const/router';
+import { UserRole } from '@/entities/User';
+
+describe('AppRouter', () => {
+    test('Test render', async () => {
+        componentRender(<AppRouter />, {
+            route: getRouteAbout(),
+        });
+        const page = await screen.findByTestId('AboutPage');
+        expect(page).toBeInTheDocument();
+    });
+    test('no page foundN', async () => {
+        componentRender(<AppRouter />, {
+            route: '/dadsdsad',
+        });
+        const page = await screen.findByTestId('NotFoundPage');
+        expect(page).toBeInTheDocument();
+    });
+    test('redirect no auth to main page', async () => {
+        componentRender(<AppRouter />, {
+            route: getRouteProfile('1'),
+        });
+
+        const page = await screen.findByTestId('MainPage');
+        expect(page).toBeInTheDocument();
+    });
+
+    test('access to profile', async () => {
+        componentRender(<AppRouter />, {
+            route: getRouteProfile('1'),
+            initialState: {
+                user: { _inited: true, authData: {} },
+            },
+        });
+
+        const page = await screen.findByTestId('ProfilePage');
+        expect(page).toBeInTheDocument();
+    });
+
+    test('access denied (no roles)', async () => {
+        componentRender(<AppRouter />, {
+            route: getRouteAdminPanel(),
+            initialState: {
+                user: { _inited: true, authData: {} },
+            },
+        });
+
+        const page = await screen.findByTestId('ForbiddenPage');
+        expect(page).toBeInTheDocument();
+    });
+
+    test('access granted (have roles)', async () => {
+        componentRender(<AppRouter />, {
+            route: getRouteAdminPanel(),
+            initialState: {
+                user: { _inited: true, authData: { roles: [UserRole.ADMIN] } },
+            },
+        });
+
+        const page = await screen.findByTestId('AdminPanelPage');
+        expect(page).toBeInTheDocument();
+    });
+});
diff --git a/src/app/providers/router/ui/RequireAuth.tsx b/src/app/providers/router/ui/RequireAuth.tsx
@@ -6,7 +6,7 @@ import {
     getUserRoles,
     UserRole,
 } from '../../../../entities/User';
-import { getRouterForbidden, getRouterMain } from '@/shared/const/router';
+import { getRouteForbidden, getRouteMain } from '@/shared/const/router';
 
 interface RequireAuthProps {
   children: JSX.Element;
@@ -27,11 +27,11 @@ export function RequireAuth({ children, roles }: RequireAuthProps) {
     }, [roles, userRoles]);
 
     if (!auth) {
-        return <Navigate to={getRouterMain()} state={{ from: location }} replace />;
+        return <Navigate to={getRouteMain()} state={{ from: location }} replace />;
     }
 
     if (!hasRequiredRoles) {
-        return <Navigate to={getRouterForbidden()} state={{ from: location }} replace />;
+        return <Navigate to={getRouteForbidden()} state={{ from: location }} replace />;
     }
 
     return children;

diff --git a/src/entities/Article/ui/ArticleListItem/ArticleListItem.tsx b/src/entities/Article/ui/ArticleListItem/ArticleListItem.tsx
@@ -12,7 +12,7 @@ import { ArticleBlockType, ArticleView } from '../../model/consts/consts';
 import { ArticleTextBlockComponent } from '../ArticleTextBlockComponent/ArticleTextBlockComponent';
 import { Article, ArticleTextBlock } from '../../model/types/article';
 import cls from './ArticleListItem.module.scss';
-import { getRouterArticleDetails } from '@/shared/const/router';
+import { getRouteArticleDetails } from '@/shared/const/router';
 import { AppImage } from '@/shared/ui/AppImage';
 import { Skeleton } from '@/shared/ui/Skeleton';
 
@@ -66,7 +66,7 @@ export const ArticleListItem = memo((props: ArticleListItemProps) => {
                     <div className={cls.footer}>
                         <AppLink
                             target={target}
-                            to={getRouterArticleDetails(article.id)}
+                            to={getRouteArticleDetails(article.id)}
                         >
                             <Button theme={ButtonTheme.OUTLINE}>
                                 {t('Read more...')}
@@ -82,7 +82,7 @@ export const ArticleListItem = memo((props: ArticleListItemProps) => {
     return (
         <AppLink
             target={target}
-            to={getRouterArticleDetails(article.id)}
+            to={getRouteArticleDetails(article.id)}
             className={classNames(cls.ArticleListItem, {}, [className, cls[view]])}
         >
             <Card>

diff --git a/src/entities/Comment/ui/CommentCard/CommentCard.tsx b/src/entities/Comment/ui/CommentCard/CommentCard.tsx
@@ -8,7 +8,7 @@ import { Comment } from '../../model/types/comment';
 import { Avatar } from '../../../../shared/ui/Avatar/Avatar';
 import { Text } from '../../../../shared/ui/Text/Text';
 import { Skeleton } from '../../../../shared/ui/Skeleton/Skeleton';
-import { getRouterProfile } from '@/shared/const/router';
+import { getRouteProfile } from '@/shared/const/router';
 
 interface CommentCardProps {
   className?: string;
@@ -38,7 +38,7 @@ export const CommentCard = memo(({ className, comment, isLoading }: CommentCardP
 
     return (
         <VStack max gap="8" className={classNames(cls.CommentCard, {}, [className])}>
-            <AppLink to={getRouterProfile(comment.user.id)} className={cls.header}>
+            <AppLink to={getRouteProfile(comment.user.id)} className={cls.header}>
                 {comment.user.avatar && <Avatar src={comment.user.avatar} alt={comment.user.username} size={30} />}
                 <Text className={cls.username} title={comment.user.username} />
             </AppLink>

diff --git a/src/features/ArtilcleSortSelector/ui/ArticleSortSelector.tsx b/src/features/ArtilcleSortSelector/ui/ArticleSortSelector.tsx
@@ -2,7 +2,7 @@ import { useTranslation } from 'react-i18next';
 import { memo, useMemo } from 'react';
 import { classNames } from '@/shared/lib/classNames/classNames';
 import { Select, SelectOption } from '@/shared/ui/Select';
-import { SortOrder } from '@/shared/types';
+import { SortOrder } from '@/shared/types/sort';
 import cls from './ArticleSortSelector.module.scss';
 import { ArticleSortField } from '@/entities/Article';
 

diff --git a/src/features/avatarDropdown/ui/AvatarDropDown/AvatarDropDown.tsx b/src/features/avatarDropdown/ui/AvatarDropDown/AvatarDropDown.tsx
@@ -10,7 +10,7 @@ import {
     isUserManager,
     userActions,
 } from '../../../../entities/User';
-import { getRouterAdminPanel, getRouterProfile } from '@/shared/const/router';
+import { getRouteAdminPanel, getRouteProfile } from '@/shared/const/router';
 
 export const AvatarDropDown = memo(() => {
     const { t } = useTranslation();
@@ -39,13 +39,13 @@ export const AvatarDropDown = memo(() => {
                     ? [
                         {
                             content: t('Admin panel'),
-                            href: getRouterAdminPanel(),
+                            href: getRouteAdminPanel(),
                         },
                     ]
                     : []),
                 {
                     content: t('Profile'),
-                    href: getRouterProfile(authData.id),
+                    href: getRouteProfile(authData.id),
                 },
                 {
                     content: t('Exit'),

diff --git a/src/pages/AboutPage/ui/AboutPage.tsx b/src/pages/AboutPage/ui/AboutPage.tsx
@@ -1,13 +1,14 @@
 import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Page } from '@/widgets/Page';
 
 const AboutPage = memo((props: any) => {
     const { t } = useTranslation('about');
 
     return (
-        <div>
+        <Page data-testid="AboutPage">
             {t('About website')}
-        </div>
+        </Page>
     );
 });
 

diff --git a/src/pages/AdminPanelPage/ui/AdminPanelPage.tsx b/src/pages/AdminPanelPage/ui/AdminPanelPage.tsx
@@ -6,7 +6,7 @@ const AdminPanelPage = memo((props: any) => {
     const { t } = useTranslation('');
 
     return (
-        <Page>
+        <Page data-testid="AdminPanelPage">
             {t('Admin panel')}
         </Page>
     );

diff --git a/src/pages/ArticlesDetailsPage/ui/ArticlesDetailsPageHeader/ArticlesDetailsPageHeader.tsx b/src/pages/ArticlesDetailsPage/ui/ArticlesDetailsPageHeader/ArticlesDetailsPageHeader.tsx
@@ -7,7 +7,7 @@ import { classNames } from '@/shared/lib/classNames/classNames';
 import { HStack } from '@/shared/ui/Stack';
 import { getCanEditArticle } from '../../model/selectors/article';
 import { getArticlesDetailsData } from '../../../../entities/Article';
-import { getRouterArticleEdit, getRouterArticles } from '@/shared/const/router';
+import { getRouteArticleEdit, getRouteArticles } from '@/shared/const/router';
 
 interface ArticlesDetailsPageHeaderProps {
   className?: string;
@@ -21,11 +21,11 @@ export const ArticlesDetailsPageHeader = memo((props: ArticlesDetailsPageHeaderP
     const article = useSelector(getArticlesDetailsData);
 
     const onBackToList = useCallback(() => {
-        navigate(getRouterArticles());
+        navigate(getRouteArticles());
     }, [navigate]);
 
     const onEditArticle = useCallback(() => {
-        navigate(getRouterArticleEdit(article?.id || ''));
+        navigate(getRouteArticleEdit(article?.id || ''));
     }, [article?.id, navigate]);
 
     const canEdit = useSelector(getCanEditArticle);

diff --git a/src/pages/ArticlesPage/model/services/initArticlesPage/initArticlesPage.ts b/src/pages/ArticlesPage/model/services/initArticlesPage/initArticlesPage.ts
@@ -1,6 +1,6 @@
 import { createAsyncThunk } from '@reduxjs/toolkit';
 import { ThunkConfig } from '@/app/providers/StoreProvider';
-import { SortOrder } from '@/shared/types';
+import { SortOrder } from '@/shared/types/sort';
 import { getArticlesPageInited } from '../../../model/selectors/articlesPageSelectors';
 import { articlesPageActions } from '../../../model/slices/articlesPageSlice';
 import { fetchArticlesList } from '../../../model/services/fetchArticlesList/fetchArticlesList';

diff --git a/src/pages/ArticlesPage/model/slices/articlesPageSlice.ts b/src/pages/ArticlesPage/model/slices/articlesPageSlice.ts
@@ -5,7 +5,7 @@ import {
 } from '@reduxjs/toolkit';
 import { StateSchema } from '@/app/providers/StoreProvider';
 import { ARTICLE_VIEW_LOCALSTORAGE_KEY } from '@/shared/const/localstorage';
-import { SortOrder } from '@/shared/types';
+import { SortOrder } from '@/shared/types/sort';
 import { ArticlesPageSchema } from '../types/articlesPageSchema';
 import {
     Article, ArticleSortField, ArticleType, ArticleView,

diff --git a/src/pages/ArticlesPage/model/types/articlesPageSchema.ts b/src/pages/ArticlesPage/model/types/articlesPageSchema.ts
@@ -2,7 +2,7 @@ import { EntityState } from '@reduxjs/toolkit';
 import {
     Article, ArticleView, ArticleSortField, ArticleType,
 } from '@/entities/Article';
-import { SortOrder } from '@/shared/types';
+import { SortOrder } from '@/shared/types/sort';
 
 export interface ArticlesPageSchema extends EntityState<Article> {
 	isLoading?: boolean;

diff --git a/src/pages/ArticlesPage/ui/ArticlesPageFilters/ArticlesPageFilters.tsx b/src/pages/ArticlesPage/ui/ArticlesPageFilters/ArticlesPageFilters.tsx
@@ -6,7 +6,7 @@ import { ArticleViewSelector } from '@/features/ArticleViewSelector';
 import { useAppDispatch } from '@/shared/lib/hook/useAppDispatch/useAppDispatch';
 import { Input } from '@/shared/ui/Input';
 import { Card } from '@/shared/ui/Card';
-import { SortOrder } from '@/shared/types';
+import { SortOrder } from '@/shared/types/sort';
 import { useDebounce } from '@/shared/lib/hook/useDebounce/useDebounce';
 import { ArticleTypeTabs } from '@/features/ArticleTypeTabs';
 import { fetchArticlesList } from '../../model/services/fetchArticlesList/fetchArticlesList';

diff --git a/src/pages/ForbiddenPage/ui/ForbiddenPage.tsx b/src/pages/ForbiddenPage/ui/ForbiddenPage.tsx
@@ -6,7 +6,7 @@ const ForbiddenPage = memo((props: any) => {
     const { t } = useTranslation('');
 
     return (
-        <Page>
+        <Page data-testid="ForbiddenPage">
             {t('You don`t have access to this page!')}
         </Page>
     );

diff --git a/src/pages/MainPage/ui/MainPage.tsx b/src/pages/MainPage/ui/MainPage.tsx
@@ -1,13 +1,14 @@
 import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Page } from '@/widgets/Page';
 
 const MainPage = memo((props: any) => {
     const { t } = useTranslation();
 
     return (
-        <div>
+        <Page data-testid="MainPage">
             {t('Главная страница')}
-        </div>
+        </Page>
     );
 });
 

diff --git a/src/pages/NotFoundPage/ui/NotFoundPage.tsx b/src/pages/NotFoundPage/ui/NotFoundPage.tsx
@@ -10,7 +10,7 @@ interface NotFoundPageProps {
 export const NotFoundPage = memo(({ className }: NotFoundPageProps) => {
     const { t } = useTranslation();
     return (
-        <div className={classNames(cls.NotFoundPage, {}, [className])}>
+        <div data-testid="NotFoundPage" className={classNames(cls.NotFoundPage, {}, [className])}>
 
             Page not found
         </div>

diff --git a/src/pages/ProfilePage/ui/ProfilePage.tsx b/src/pages/ProfilePage/ui/ProfilePage.tsx
@@ -13,7 +13,7 @@ const ProfilePage = memo(({ className }: ProfilePageProps) => {
     const { id } = useParams<{ id: string }>();
 
     return (
-        <Page className={classNames('', {}, [className])}>
+        <Page data-testid="ProfilePage" className={classNames('', {}, [className])}>
             <VStack gap="16" max>
                 <EditableProfileCard id={id} />
             </VStack>