From a814e83247224da1649524f214afe16500208722 Mon Sep 17 00:00:00 2001 From: Mav-Ivan <110425368+Mav-Ivan@users.noreply.github.com> Date: Wed, 9 Aug 2023 23:38:03 +0300 Subject: [PATCH 1/7] fixed troubles --- .../pages/tutor-profile/TutorProfile.spec.jsx | 87 +++++++++++++++++++ 1 file changed, 87 insertions(+) create mode 100644 tests/unit/pages/tutor-profile/TutorProfile.spec.jsx diff --git a/tests/unit/pages/tutor-profile/TutorProfile.spec.jsx b/tests/unit/pages/tutor-profile/TutorProfile.spec.jsx new file mode 100644 index 000000000..71debef07 --- /dev/null +++ b/tests/unit/pages/tutor-profile/TutorProfile.spec.jsx @@ -0,0 +1,87 @@ +import { vi } from 'vitest' +import { screen } from '@testing-library/react' + +import useAxios from '~/hooks/use-axios' +import TutorProfile from '~/pages/tutor-profile/TutorProfile.jsx' +import { renderWithProviders } from '~tests/test-utils' + +const route = '/tutor/my-profile' +const appMain = { + userRole: 'tutor', + _id: '648850c4fdc2d1a130c24aea' +} + +const mockData = { + firstName: 'Іван', + lastName: 'Мавдрик', + mainSubjects: { + student: [], + tutor: [ + { + _id: '648850c4fdc2d1a130c24aea', + name: 'Guitar', + category: '64884f21fdc2d1a130c24ac0', + totalOffers: { + student: 4, + tutor: 12 + } + }, + { + _id: '64885108fdc2d1a130c24af9', + name: 'Cybersecurity', + category: '64884f33fdc2d1a130c24ac2', + totalOffers: { + student: 3, + tutor: 20 + } + } + ] + }, + totalReviews: { + student: 0, + tutor: 0 + }, + averageRating: { + student: 0, + tutor: 0 + } +} + +const getFakeData = (load) => { + return { + loading: load, + response: mockData + } +} + +vi.mock('~/hooks/use-axios') + +describe('TutorProfile', () => { + it('should render loader', () => { + const fakeData = getFakeData(true) + + useAxios.mockImplementation(() => fakeData) + renderWithProviders(, { + initialEntries: route, + preloadedState: { appMain } + }) + + const loader = screen.getByTestId('loader') + + expect(loader).toBeInTheDocument() + }) + + it('should find rendering name', () => { + const fakeData = getFakeData(false) + + useAxios.mockImplementation(() => fakeData) + renderWithProviders(, { + initialEntries: route, + preloadedState: { appMain } + }) + + const name = screen.getByText(`${mockData.firstName} ${mockData.lastName}`) + + expect(name).toBeInTheDocument() + }) +}) From 02b6b2f2185676724dcbd8f6e3a89ba1038ae3e9 Mon Sep 17 00:00:00 2001 From: Mav-Ivan <110425368+Mav-Ivan@users.noreply.github.com> Date: Wed, 11 Oct 2023 20:15:42 +0300 Subject: [PATCH 2/7] fix --- .../my-quizzes/QuizzesContainer.tsx | 7 +++- .../AddResourceWithInput.styles.ts | 4 ++ .../AddResourceWithInput.tsx | 41 ++++++++++++++----- .../AttachmentsContainer.tsx | 6 ++- .../CategoriesContainer.tsx | 2 +- .../lessons-container/LessonsContainer.tsx | 6 ++- .../QuestionsContainer.tsx | 11 +++-- 7 files changed, 59 insertions(+), 18 deletions(-) diff --git a/src/containers/my-quizzes/QuizzesContainer.tsx b/src/containers/my-quizzes/QuizzesContainer.tsx index 2c2cd850b..af39f00e6 100644 --- a/src/containers/my-quizzes/QuizzesContainer.tsx +++ b/src/containers/my-quizzes/QuizzesContainer.tsx @@ -1,4 +1,4 @@ -import { useCallback, useRef } from 'react' +import { useCallback, useRef, useState } from 'react' import Box from '@mui/material/Box' import { useSnackBarContext } from '~/context/snackbar-context' @@ -11,6 +11,7 @@ import useBreakpoints from '~/hooks/use-breakpoints' import useAxios from '~/hooks/use-axios' import usePagination from '~/hooks/table/use-pagination' import { authRoutes } from '~/router/constants/authRoutes' +import { ResourceService } from '~/services/resource-service' import { defaultResponses, snackbarVariants } from '~/constants' import { @@ -35,6 +36,7 @@ const QuizzesContainer = () => { const sortOptions = useSort({ initialSort }) const searchTitle = useRef('') const breakpoints = useBreakpoints() + const [selectedItems, setSelectedItems] = useState([]) const { sort } = sortOptions const itemsPerPage = getScreenBasedLimit(breakpoints, itemsLoadLimit) @@ -94,9 +96,12 @@ const QuizzesContainer = () => { {loading ? ( diff --git a/src/containers/my-resources/add-resource-with-input/AddResourceWithInput.styles.ts b/src/containers/my-resources/add-resource-with-input/AddResourceWithInput.styles.ts index 4e29aa17e..332d8f087 100644 --- a/src/containers/my-resources/add-resource-with-input/AddResourceWithInput.styles.ts +++ b/src/containers/my-resources/add-resource-with-input/AddResourceWithInput.styles.ts @@ -12,5 +12,9 @@ export const styles = { border: '1px solid', borderColor: 'primary.500', borderRadius: '6px' + }, + filterWithInput: { + display: 'flex', + columnGap: '25px' } } diff --git a/src/containers/my-resources/add-resource-with-input/AddResourceWithInput.tsx b/src/containers/my-resources/add-resource-with-input/AddResourceWithInput.tsx index 8b04587e3..47d3e17d0 100644 --- a/src/containers/my-resources/add-resource-with-input/AddResourceWithInput.tsx +++ b/src/containers/my-resources/add-resource-with-input/AddResourceWithInput.tsx @@ -3,7 +3,9 @@ import { ChangeEvent, FC, MutableRefObject, - ReactElement + ReactElement, + Dispatch, + SetStateAction } from 'react' import { useTranslation } from 'react-i18next' import { Link } from 'react-router-dom' @@ -14,6 +16,8 @@ import Box from '@mui/material/Box' import { useDebounce } from '~/hooks/use-debounce' import AppButton from '~/components/app-button/AppButton' import InputWithIcon from '~/components/input-with-icon/InputWithIcon' +import FilterSelector from '~/components/filter-selector/FilterSelector' +import { ServiceFunction } from '~/types' import { styles } from '~/containers/my-resources/add-resource-with-input/AddResourceWithInput.styles' @@ -23,6 +27,9 @@ interface AddResourceWithInputProps { link?: string searchRef: MutableRefObject button?: ReactElement + categoryService?: ServiceFunction + selectedItems?: string[] + setItems?: Dispatch> } const AddResourceWithInput: FC = ({ @@ -30,7 +37,10 @@ const AddResourceWithInput: FC = ({ fetchData, link, searchRef, - button + button, + categoryService, + selectedItems, + setItems }) => { const { t } = useTranslation() const [searchInput, setSearchInput] = useState('') @@ -51,6 +61,13 @@ const AddResourceWithInput: FC = ({ void fetchData() } + const filterProps = { + title: 'Category', + service: categoryService, + selectedItems: selectedItems, + setSelectedItems: setItems + } + return ( {!button ? ( @@ -61,15 +78,17 @@ const AddResourceWithInput: FC = ({ ) : ( button )} - - } - onChange={onChange} - onClear={onClear} - placeholder={t('common.search')} - sx={styles.input} - value={searchInput} - /> + + {categoryService ? : ''} + } + onChange={onChange} + onClear={onClear} + placeholder={t('common.search')} + sx={styles.input} + value={searchInput} + /> + ) } diff --git a/src/containers/my-resources/attachments-container/AttachmentsContainer.tsx b/src/containers/my-resources/attachments-container/AttachmentsContainer.tsx index bb53e021c..e595e0227 100644 --- a/src/containers/my-resources/attachments-container/AttachmentsContainer.tsx +++ b/src/containers/my-resources/attachments-container/AttachmentsContainer.tsx @@ -1,4 +1,4 @@ -import { useCallback, useRef } from 'react' +import { useCallback, useRef, useState } from 'react' import Box from '@mui/material/Box' import AddIcon from '@mui/icons-material/Add' import { useTranslation } from 'react-i18next' @@ -43,6 +43,7 @@ const AttachmentsContainer = () => { const { page, handleChangePage } = usePagination() const sortOptions = useSort({ initialSort }) const searchFileName = useRef('') + const [selectedItems, setSelectedItems] = useState([]) const formData = new FormData() const { sort } = sortOptions @@ -166,8 +167,11 @@ const AttachmentsContainer = () => { variant={ButtonVariantEnum.Contained} /> } + categoryService={ResourceService.getResourcesCategoriesNames} fetchData={fetchAttachments} searchRef={searchFileName} + selectedItems={selectedItems} + setItems={setSelectedItems} /> ) diff --git a/src/containers/my-resources/categories-container/CategoriesContainer.tsx b/src/containers/my-resources/categories-container/CategoriesContainer.tsx index e0b391f9d..193938f99 100644 --- a/src/containers/my-resources/categories-container/CategoriesContainer.tsx +++ b/src/containers/my-resources/categories-container/CategoriesContainer.tsx @@ -59,7 +59,7 @@ const CategoriesContainer = () => { limit: itemsPerPage, skip: (page - 1) * itemsPerPage, sort, - title: searchTitle.current + name: searchTitle.current }), [page, itemsPerPage, sort, searchTitle] ) diff --git a/src/containers/my-resources/lessons-container/LessonsContainer.tsx b/src/containers/my-resources/lessons-container/LessonsContainer.tsx index 4f3b75d7a..c703a3cce 100644 --- a/src/containers/my-resources/lessons-container/LessonsContainer.tsx +++ b/src/containers/my-resources/lessons-container/LessonsContainer.tsx @@ -1,4 +1,4 @@ -import { useCallback, useRef } from 'react' +import { useCallback, useRef, useState } from 'react' import { useNavigate } from 'react-router-dom' import Box from '@mui/material/Box' @@ -40,6 +40,7 @@ const LessonsContainer = () => { const sortOptions = useSort({ initialSort }) const searchTitle = useRef('') const breakpoints = useBreakpoints() + const [selectedItems, setSelectedItems] = useState([]) const { sort } = sortOptions const itemsPerPage = getScreenBasedLimit(breakpoints, itemsLoadLimit) @@ -103,9 +104,12 @@ const LessonsContainer = () => { {loading ? ( diff --git a/src/containers/my-resources/questions-container/QuestionsContainer.tsx b/src/containers/my-resources/questions-container/QuestionsContainer.tsx index c2ecf7c44..16f8b49ad 100644 --- a/src/containers/my-resources/questions-container/QuestionsContainer.tsx +++ b/src/containers/my-resources/questions-container/QuestionsContainer.tsx @@ -1,4 +1,4 @@ -import { useCallback, useRef } from 'react' +import { useCallback, useRef, useState } from 'react' import Box from '@mui/material/Box' import { useSnackBarContext } from '~/context/snackbar-context' @@ -34,6 +34,7 @@ const QuestionsContainer = () => { const searchTitle = useRef('') const breakpoints = useBreakpoints() const { page, handleChangePage } = usePagination() + const [selectedItems, setSelectedItems] = useState([]) const { sort } = sortOptions const itemsPerPage = getScreenBasedLimit(breakpoints, itemsLoadLimit) @@ -59,9 +60,10 @@ const QuestionsContainer = () => { limit: itemsPerPage, sort, title: searchTitle.current, - skip: (page - 1) * itemsPerPage + skip: (page - 1) * itemsPerPage, + categories: selectedItems }), - [itemsPerPage, sort, page] + [itemsPerPage, sort, page, selectedItems] ) const { response, loading, fetchData } = useAxios< @@ -142,9 +144,12 @@ const QuestionsContainer = () => { {loading ? ( From 669e17d2d5a5f11dced715fc4bdf3c3201c11822 Mon Sep 17 00:00:00 2001 From: Mav-Ivan <110425368+Mav-Ivan@users.noreply.github.com> Date: Wed, 11 Oct 2023 19:38:04 +0300 Subject: [PATCH 3/7] fix issues --- .../add-resource-with-input/AddResourceWithInput.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/containers/my-resources/add-resource-with-input/AddResourceWithInput.tsx b/src/containers/my-resources/add-resource-with-input/AddResourceWithInput.tsx index 47d3e17d0..617e982c7 100644 --- a/src/containers/my-resources/add-resource-with-input/AddResourceWithInput.tsx +++ b/src/containers/my-resources/add-resource-with-input/AddResourceWithInput.tsx @@ -17,8 +17,8 @@ import { useDebounce } from '~/hooks/use-debounce' import AppButton from '~/components/app-button/AppButton' import InputWithIcon from '~/components/input-with-icon/InputWithIcon' import FilterSelector from '~/components/filter-selector/FilterSelector' -import { ServiceFunction } from '~/types' +import { ServiceFunction } from '~/types' import { styles } from '~/containers/my-resources/add-resource-with-input/AddResourceWithInput.styles' interface AddResourceWithInputProps { @@ -62,7 +62,7 @@ const AddResourceWithInput: FC = ({ } const filterProps = { - title: 'Category', + title: t('myResourcesPage.questions.category'), service: categoryService, selectedItems: selectedItems, setSelectedItems: setItems @@ -79,7 +79,7 @@ const AddResourceWithInput: FC = ({ button )} - {categoryService ? : ''} + {categoryService && } } onChange={onChange} From 29ed7973532af37bd5ff98f62a33b54bf7e5d1dd Mon Sep 17 00:00:00 2001 From: Mav-Ivan <110425368+Mav-Ivan@users.noreply.github.com> Date: Tue, 17 Oct 2023 15:16:57 +0300 Subject: [PATCH 4/7] fix lint --- .../filter-selector/FilterSelector.tsx | 15 +++++++++++---- src/containers/my-quizzes/QuizzesContainer.tsx | 2 -- .../AddResourceWithInput.tsx | 18 +++++++++++------- .../AttachmentsContainer.tsx | 1 - .../CategoriesContainer.tsx | 2 ++ .../lessons-container/LessonsContainer.tsx | 1 - .../questions-container/QuestionsContainer.tsx | 1 - 7 files changed, 24 insertions(+), 16 deletions(-) diff --git a/src/components/filter-selector/FilterSelector.tsx b/src/components/filter-selector/FilterSelector.tsx index e5ccabd7e..6a1a1b4c6 100644 --- a/src/components/filter-selector/FilterSelector.tsx +++ b/src/components/filter-selector/FilterSelector.tsx @@ -71,14 +71,21 @@ const FilterSelector = ({ selectedItems.length && setSelectedItems([]) } - const { loading, response } = useAxios({ - service, + // const getCategories = useCallback(() => + // ResourceService.getResourcesCategoriesNames() + // ,[]) + + const { loading, response } = useAxios< + T[] + // ServiceFunction + >({ + service: service, defaultResponse: defaultResponses.array }) const filteredItems = useMemo( () => - response.filter((item) => + response.filter((item: T) => String(valueField ? item[valueField] : item) .toLowerCase() .includes(inputValue.toLowerCase()) @@ -86,7 +93,7 @@ const FilterSelector = ({ [response, inputValue, valueField] ) - const menuItems = filteredItems.map((item) => { + const menuItems: JSX.Element[] = filteredItems.map((item: T) => { const field = String(valueField ? item[valueField] : item) return ( diff --git a/src/containers/my-quizzes/QuizzesContainer.tsx b/src/containers/my-quizzes/QuizzesContainer.tsx index af39f00e6..09a6465fe 100644 --- a/src/containers/my-quizzes/QuizzesContainer.tsx +++ b/src/containers/my-quizzes/QuizzesContainer.tsx @@ -11,7 +11,6 @@ import useBreakpoints from '~/hooks/use-breakpoints' import useAxios from '~/hooks/use-axios' import usePagination from '~/hooks/table/use-pagination' import { authRoutes } from '~/router/constants/authRoutes' -import { ResourceService } from '~/services/resource-service' import { defaultResponses, snackbarVariants } from '~/constants' import { @@ -96,7 +95,6 @@ const QuizzesContainer = () => { button?: ReactElement - categoryService?: ServiceFunction selectedItems?: string[] setItems?: Dispatch> + hideCategoriesFilter?: boolean } const AddResourceWithInput: FC = ({ @@ -38,9 +39,9 @@ const AddResourceWithInput: FC = ({ link, searchRef, button, - categoryService, selectedItems, - setItems + setItems, + hideCategoriesFilter }) => { const { t } = useTranslation() const [searchInput, setSearchInput] = useState('') @@ -63,9 +64,10 @@ const AddResourceWithInput: FC = ({ const filterProps = { title: t('myResourcesPage.questions.category'), - service: categoryService, + service: ResourceService.getResourcesCategoriesNames, selectedItems: selectedItems, - setSelectedItems: setItems + setSelectedItems: setItems, + valueField: 'name' } return ( @@ -79,7 +81,9 @@ const AddResourceWithInput: FC = ({ button )} - {categoryService && } + {!hideCategoriesFilter && ( + {...filterProps} /> + )} } onChange={onChange} diff --git a/src/containers/my-resources/attachments-container/AttachmentsContainer.tsx b/src/containers/my-resources/attachments-container/AttachmentsContainer.tsx index e595e0227..cffb5d055 100644 --- a/src/containers/my-resources/attachments-container/AttachmentsContainer.tsx +++ b/src/containers/my-resources/attachments-container/AttachmentsContainer.tsx @@ -167,7 +167,6 @@ const AttachmentsContainer = () => { variant={ButtonVariantEnum.Contained} /> } - categoryService={ResourceService.getResourcesCategoriesNames} fetchData={fetchAttachments} searchRef={searchFileName} selectedItems={selectedItems} diff --git a/src/containers/my-resources/categories-container/CategoriesContainer.tsx b/src/containers/my-resources/categories-container/CategoriesContainer.tsx index 193938f99..795a10106 100644 --- a/src/containers/my-resources/categories-container/CategoriesContainer.tsx +++ b/src/containers/my-resources/categories-container/CategoriesContainer.tsx @@ -39,6 +39,7 @@ const CategoriesContainer = () => { const { page, handleChangePage } = usePagination() const { setAlert } = useSnackBarContext() const [selectedItemId, setSelectedItemId] = useState('') + const hideCategories = true const { sort } = sortOptions const itemsPerPage = getScreenBasedLimit(breakpoints, itemsLoadLimit) @@ -119,6 +120,7 @@ const CategoriesContainer = () => { {loading ? ( diff --git a/src/containers/my-resources/lessons-container/LessonsContainer.tsx b/src/containers/my-resources/lessons-container/LessonsContainer.tsx index c703a3cce..606453116 100644 --- a/src/containers/my-resources/lessons-container/LessonsContainer.tsx +++ b/src/containers/my-resources/lessons-container/LessonsContainer.tsx @@ -104,7 +104,6 @@ const LessonsContainer = () => { { Date: Tue, 17 Oct 2023 15:47:09 +0300 Subject: [PATCH 5/7] fix issues --- src/components/filter-selector/FilterSelector.tsx | 9 +-------- .../my-resources/AddResourceWithInput.spec.jsx | 3 ++- 2 files changed, 3 insertions(+), 9 deletions(-) diff --git a/src/components/filter-selector/FilterSelector.tsx b/src/components/filter-selector/FilterSelector.tsx index 6a1a1b4c6..9176319bd 100644 --- a/src/components/filter-selector/FilterSelector.tsx +++ b/src/components/filter-selector/FilterSelector.tsx @@ -71,14 +71,7 @@ const FilterSelector = ({ selectedItems.length && setSelectedItems([]) } - // const getCategories = useCallback(() => - // ResourceService.getResourcesCategoriesNames() - // ,[]) - - const { loading, response } = useAxios< - T[] - // ServiceFunction - >({ + const { loading, response } = useAxios({ service: service, defaultResponse: defaultResponses.array }) diff --git a/tests/unit/containers/my-resources/AddResourceWithInput.spec.jsx b/tests/unit/containers/my-resources/AddResourceWithInput.spec.jsx index 77467a2ae..56fda8f77 100644 --- a/tests/unit/containers/my-resources/AddResourceWithInput.spec.jsx +++ b/tests/unit/containers/my-resources/AddResourceWithInput.spec.jsx @@ -13,7 +13,8 @@ const props = { btnText: 'myResourcesPage.quizzes.newQuizBtn', fetchData: fetchDataMock, link: '#', - searchRef: { current: text } + searchRef: { current: text }, + selectedItems: [] } describe('AddResourceWithInput test', () => { From 52905a113fd2e56e0056087bac8603624dc3ee09 Mon Sep 17 00:00:00 2001 From: Mav-Ivan <110425368+Mav-Ivan@users.noreply.github.com> Date: Tue, 17 Oct 2023 16:43:05 +0300 Subject: [PATCH 6/7] fix mistakes --- src/components/filter-selector/FilterSelector.tsx | 4 ++-- .../add-resource-with-input/AddResourceWithInput.tsx | 2 +- .../my-resources/categories-container/CategoriesContainer.tsx | 3 +-- 3 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/filter-selector/FilterSelector.tsx b/src/components/filter-selector/FilterSelector.tsx index 9176319bd..bbd97e784 100644 --- a/src/components/filter-selector/FilterSelector.tsx +++ b/src/components/filter-selector/FilterSelector.tsx @@ -72,7 +72,7 @@ const FilterSelector = ({ } const { loading, response } = useAxios({ - service: service, + service, defaultResponse: defaultResponses.array }) @@ -86,7 +86,7 @@ const FilterSelector = ({ [response, inputValue, valueField] ) - const menuItems: JSX.Element[] = filteredItems.map((item: T) => { + const menuItems: JSX.Element[] = filteredItems.map((item) => { const field = String(valueField ? item[valueField] : item) return ( diff --git a/src/containers/my-resources/add-resource-with-input/AddResourceWithInput.tsx b/src/containers/my-resources/add-resource-with-input/AddResourceWithInput.tsx index 53310de81..42d42e6e2 100644 --- a/src/containers/my-resources/add-resource-with-input/AddResourceWithInput.tsx +++ b/src/containers/my-resources/add-resource-with-input/AddResourceWithInput.tsx @@ -63,7 +63,7 @@ const AddResourceWithInput: FC = ({ } const filterProps = { - title: t('myResourcesPage.questions.category'), + title: t('myResourcesPage.categories.category'), service: ResourceService.getResourcesCategoriesNames, selectedItems: selectedItems, setSelectedItems: setItems, diff --git a/src/containers/my-resources/categories-container/CategoriesContainer.tsx b/src/containers/my-resources/categories-container/CategoriesContainer.tsx index 795a10106..14b531cef 100644 --- a/src/containers/my-resources/categories-container/CategoriesContainer.tsx +++ b/src/containers/my-resources/categories-container/CategoriesContainer.tsx @@ -39,7 +39,6 @@ const CategoriesContainer = () => { const { page, handleChangePage } = usePagination() const { setAlert } = useSnackBarContext() const [selectedItemId, setSelectedItemId] = useState('') - const hideCategories = true const { sort } = sortOptions const itemsPerPage = getScreenBasedLimit(breakpoints, itemsLoadLimit) @@ -120,7 +119,7 @@ const CategoriesContainer = () => { {loading ? ( From 7206a3454f800e8f9db752634ac201fd74c7f547 Mon Sep 17 00:00:00 2001 From: Mav-Ivan <110425368+Mav-Ivan@users.noreply.github.com> Date: Tue, 17 Oct 2023 16:51:30 +0300 Subject: [PATCH 7/7] fix more --- src/components/filter-selector/FilterSelector.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/filter-selector/FilterSelector.tsx b/src/components/filter-selector/FilterSelector.tsx index bbd97e784..e5ccabd7e 100644 --- a/src/components/filter-selector/FilterSelector.tsx +++ b/src/components/filter-selector/FilterSelector.tsx @@ -78,7 +78,7 @@ const FilterSelector = ({ const filteredItems = useMemo( () => - response.filter((item: T) => + response.filter((item) => String(valueField ? item[valueField] : item) .toLowerCase() .includes(inputValue.toLowerCase()) @@ -86,7 +86,7 @@ const FilterSelector = ({ [response, inputValue, valueField] ) - const menuItems: JSX.Element[] = filteredItems.map((item) => { + const menuItems = filteredItems.map((item) => { const field = String(valueField ? item[valueField] : item) return (