From d56b47d9d7837fb5690e32db619667388c41b61a Mon Sep 17 00:00:00 2001 From: "hani.mohammad" Date: Sun, 22 Dec 2024 04:12:12 +0300 Subject: [PATCH] testcheck4 --- src/components/Offer/Offer.tsx | 45 ++++++++++--------- src/components/routes/private-route/index.tsx | 2 +- src/components/tests/app-router.test.tsx | 8 ++++ src/shared/mocks/index.ts | 39 +++++++++++++--- src/shared/providers/with-store.tsx | 12 ++--- src/store/userselector.ts | 3 +- 6 files changed, 74 insertions(+), 35 deletions(-) diff --git a/src/components/Offer/Offer.tsx b/src/components/Offer/Offer.tsx index 7120154..c66bdda 100644 --- a/src/components/Offer/Offer.tsx +++ b/src/components/Offer/Offer.tsx @@ -3,8 +3,6 @@ import { Link, useNavigate, useParams } from 'react-router-dom'; import SendCommentForm from '../SendCommentForm/SendCommentForm'; import { ReviewList } from '../Reviews/ReviewList'; import { useAppDispatch, useAppSelector } from '../../hooks/index'; -//import { offers } from '../../mock/offers'; - import Map from '../Map/Map'; import { AppRoute, UserReview, CardCssNameList } from '../../types/types'; import { AuthorizationStatus } from '../../const.ts'; @@ -13,22 +11,25 @@ import { getAuthStatus,getUserEmail} from '../../store/userselector.ts'; import { fetchComments, fetchOffer, fetchOfferNeibourhood, logout, setIsOfferFavorite } from '../../api-actions.ts'; import classNames from 'classnames'; import { useEffect, useState } from 'react'; -export const Offer: React.FC = () => { - // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access - const { id: idOffer } = useParams(); +import { store } from '../../store/index.ts'; + + +export default function Offer () { + const { id: OfferId } = useParams(); const dispatch = useAppDispatch(); + const userEmail = useAppSelector(getUserEmail); + const authStatus = useAppSelector(getAuthStatus); const currentCity = useAppSelector((state) => state.currentCity); useEffect(()=>{ - dispatch(fetchOffer(idOffer ?? '')); - dispatch(fetchOfferNeibourhood(idOffer ?? '')); - dispatch(fetchComments(idOffer ?? '')); - },[idOffer,dispatch]); - const nearbyOffers = useAppSelector((store) => store.offerIdDetails.nearbyOffers); - const offerdetails = useAppSelector((store) => store.offerIdDetails.offer); + store.dispatch(fetchOffer(OfferId ?? '')); + store.dispatch(fetchOfferNeibourhood(OfferId ?? '')); + store.dispatch(fetchComments(OfferId ?? '')); + },[OfferId,dispatch]); + const nearbyOffers = useAppSelector((state) => state.offerIdDetails.nearbyOffers); + const offerdetails = useAppSelector((state) => state.offerIdDetails.offer); const offers = useAppSelector((state) => state.offerPage); - const comments:UserReview[] = useAppSelector((store) => store.offerIdDetails.comments); - const userEmail = useAppSelector(getUserEmail); - const authStatus = useAppSelector(getAuthStatus); + const comments:UserReview[] = useAppSelector((state) => state.offerIdDetails.comments); + const [ isFavorite, setisFavorite ] = useState(false); const navigate = useNavigate(); useEffect(() => { @@ -198,12 +199,13 @@ export const Offer: React.FC = () => {
- + {offers !== null && offers.offer !== null && offers.offer.length > 0 ? + : }
@@ -216,5 +218,4 @@ export const Offer: React.FC = () => {
); -}; -export default Offer; +} diff --git a/src/components/routes/private-route/index.tsx b/src/components/routes/private-route/index.tsx index 1897c21..9a91894 100644 --- a/src/components/routes/private-route/index.tsx +++ b/src/components/routes/private-route/index.tsx @@ -7,7 +7,7 @@ interface IPrivateRoute extends PropsWithChildren{ authState: AuthorizationStatus; } function PrivateRoute({children, authState}: IPrivateRoute) { - return authState === AuthorizationStatus.Auth ? children : ; + return authState === AuthorizationStatus.Auth || authState === AuthorizationStatus.Unknown ? children : ; } export default PrivateRoute; diff --git a/src/components/tests/app-router.test.tsx b/src/components/tests/app-router.test.tsx index 5daa302..44a7c31 100644 --- a/src/components/tests/app-router.test.tsx +++ b/src/components/tests/app-router.test.tsx @@ -10,6 +10,7 @@ import { Cities } from '../../shared/api'; import MainPage from '../MainPage/MainPage'; import Favorite from '../Favorites/Favorite'; import NotFoundPage from '../NotFoundPage/NotFoundPage'; +import Offer from '../Offer/Offer'; describe('Application Routing', () => { let mockHistory: MemoryHistory; @@ -98,4 +99,11 @@ describe('Application Routing', () => { expect(screen.getByText(/404 Not Found/i)).toBeInTheDocument(); }); + it('should render OfferPage when user navigate to "/offer/a01640c0-fed5-4d3f-99b3-deb2391269fc"', () => { + const withHistoryComponent = withHistory(, mockHistory); + const { withStoreComponent } = withStore(withHistoryComponent, makeFakeStore()); + mockHistory.push('/offer/a01640c0-fed5-4d3f-99b3-deb2391269fc'); + render(withStoreComponent); + expect(screen.getByText(/Wood and stone place/i)).toBeInTheDocument(); + }); }); diff --git a/src/shared/mocks/index.ts b/src/shared/mocks/index.ts index c0a3772..2957715 100644 --- a/src/shared/mocks/index.ts +++ b/src/shared/mocks/index.ts @@ -1,11 +1,9 @@ import { AuthorizationStatus } from '../../const'; import { CITYLIST } from '../../mock/cities'; import { emptyOffer } from '../../mock/offers'; -import { RootState } from '../lib/types'; +import { State } from '../../types/types'; -export function makeFakeStore( - initialState: Partial = {} -): RootState { +export function makeFakeStore(initialState: Partial = {}): State { return { Cities: { currentCity: CITYLIST[0], @@ -18,7 +16,38 @@ export function makeFakeStore( offerPageStatus: false, }, offerIdDetails: { - offer: emptyOffer, + offer: { + id: 'a20a52b2-efc2-4b0f-9396-4bdfbe5e9543', + title: 'Wood and stone place', + type: 'apartment', + price: 576, + images: ['https://14.design.htmlacademy.pro/static/hotel/14.jpg'], + city: { + name: 'Amsterdam', + location: { + latitude: 48.85661, + longitude: 2.351499, + zoom: 13, + }, + }, + location: { + latitude: 48.868610000000004, + longitude: 2.342499, + zoom: 16, + }, + isFavorite: false, + isPremium: false, + rating: 2.1, + description: 'dsf', + bedrooms: 1, + goods: [''], + maxAdults: 1, + host: { + name: 'Oliver Conner', + avatarUrl: 'https://url-to-image/image.png', + isPro: false, + }, + }, OfferIdDetailsPageStatus: false, nearbyOffers: [], comments: [], diff --git a/src/shared/providers/with-store.tsx b/src/shared/providers/with-store.tsx index 3153352..859e009 100644 --- a/src/shared/providers/with-store.tsx +++ b/src/shared/providers/with-store.tsx @@ -1,17 +1,17 @@ import MockAdapter from 'axios-mock-adapter'; -import { RootState } from '../lib/types'; -import { $api } from '../api'; +import { api } from '../../api-actions'; import thunk from 'redux-thunk'; import { configureMockStore } from '@jedmao/redux-mock-store'; import { Action } from '@reduxjs/toolkit'; import { AppThunkDispatch } from '../lib'; import { Provider } from 'react-redux'; import { withStoreProviderType } from './types'; +import { State } from '../../types/types'; -export function withStore(component: JSX.Element, initialState: Partial = {}): withStoreProviderType { - const mockAxiosAdapter = new MockAdapter($api); - const middleware = [thunk.withExtraArgument($api)]; - const mockStoreCreator = configureMockStore, AppThunkDispatch>(middleware); +export function withStore(component: JSX.Element, initialState: Partial = {}): withStoreProviderType { + const mockAxiosAdapter = new MockAdapter(api); + const middleware = [thunk.withExtraArgument(api)]; + const mockStoreCreator = configureMockStore, AppThunkDispatch>(middleware); const store = mockStoreCreator(initialState); return { diff --git a/src/store/userselector.ts b/src/store/userselector.ts index c312bd4..1d4cc69 100644 --- a/src/store/userselector.ts +++ b/src/store/userselector.ts @@ -1,6 +1,7 @@ import { createSelector } from '@reduxjs/toolkit'; import { AuthorizationSlice, State } from '../types/types'; -const selectAuthStatus = (state: Pick) => +export type RootState = ReturnType; +const selectAuthStatus = (state: Pick) => state.user.authorizationStatus; export const getAuthStatus = createSelector(