+
X
{children}
diff --git a/src/components/search-panel/search-panel.test.tsx b/src/components/search-panel/search-panel.test.tsx
index a9ce170..c65ada2 100644
--- a/src/components/search-panel/search-panel.test.tsx
+++ b/src/components/search-panel/search-panel.test.tsx
@@ -1,17 +1,28 @@
import { fireEvent, render, screen } from '@testing-library/react';
import SearchPanel from './search-panel';
+import * as reduxHooks from 'react-redux';
+
+jest.mock('react-redux');
+const mockedUseSelector = jest.spyOn(reduxHooks, 'useSelector');
+
describe('test SearchPanel component', () => {
- const onChange = jest.fn();
test('should contains input', () => {
- render(
);
+ render(
);
expect(screen.getByRole('search-input')).toBeInTheDocument();
});
test('value of input changes by user', () => {
- render(
);
+ render(
);
const input = screen.getByRole('search-input') as HTMLInputElement;
fireEvent.change(input, { target: { value: 'some text for test' } });
expect(input.value).toBe('some text for test');
});
+
+ test('should contains input value from store', () => {
+ mockedUseSelector.mockReturnValue('hello');
+ render(
);
+ const input = screen.getByRole('search-input') as HTMLInputElement;
+ expect(input.value).toBe('hello');
+ });
});
diff --git a/src/components/search-panel/search-panel.tsx b/src/components/search-panel/search-panel.tsx
index b23ac70..2946c35 100644
--- a/src/components/search-panel/search-panel.tsx
+++ b/src/components/search-panel/search-panel.tsx
@@ -1,32 +1,22 @@
-import React, { ChangeEvent, KeyboardEvent, useState, useEffect, useRef } from 'react';
+import React, { ChangeEvent, KeyboardEvent, useRef } from 'react';
+import { useAppSelector, useAppDispatch } from './../../hook';
+import { updateSearchValue } from '../../store/searchSlice';
import './search-panel.scss';
-type SearchPanelProps = {
- updateSearchValue: (searchValue: string) => void;
-};
-
-const SearchPanel = ({ updateSearchValue }: SearchPanelProps) => {
- const initSearchValue: string = localStorage.getItem('searchValue') || '';
- const [searchValue, setSearchValue] = useState(initSearchValue);
+const SearchPanel: React.FC = () => {
+ const searchValue = useAppSelector((state) => state.searchReducer.searchValue);
+ const dispatch = useAppDispatch();
const searchRef = useRef
(searchValue);
- useEffect(() => {
- //like componentWillUnmount
- return function saveToLS() {
- localStorage.setItem('searchValue', searchRef.current);
- };
- }, []);
-
const onSearchChange = (e: ChangeEvent): void => {
const newSearchValue = e.target.value.trimStart();
- setSearchValue(newSearchValue);
searchRef.current = newSearchValue;
};
const handleKeyDown = (e: KeyboardEvent): void => {
if (e.key === 'Enter') {
- updateSearchValue(searchValue);
+ dispatch(updateSearchValue(searchRef.current));
}
};
@@ -37,7 +27,7 @@ const SearchPanel = ({ updateSearchValue }: SearchPanelProps) => {
type='text'
className='search-panel search-input btn--border'
placeholder={searchText}
- value={searchValue}
+ defaultValue={searchValue}
onChange={(e) => onSearchChange(e)}
onKeyDown={handleKeyDown}
role='search-input'
diff --git a/src/hook.ts b/src/hook.ts
new file mode 100644
index 0000000..8c4ab48
--- /dev/null
+++ b/src/hook.ts
@@ -0,0 +1,5 @@
+import { useSelector, useDispatch, TypedUseSelectorHook } from 'react-redux';
+import type { RootState, AppDispatch } from './store';
+
+export const useAppDispatch = () => useDispatch();
+export const useAppSelector: TypedUseSelectorHook = useSelector;
diff --git a/src/index.tsx b/src/index.tsx
index 6832360..267eed8 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,6 +1,8 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import store from './store';
import './index.scss';
import App from './components/app';
@@ -8,8 +10,10 @@ import App from './components/app';
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
-
-
-
+
+
+
+
+
);
diff --git a/src/mocks/handlers.tsx b/src/mocks/handlers.tsx
index 5d589a7..f710af3 100644
--- a/src/mocks/handlers.tsx
+++ b/src/mocks/handlers.tsx
@@ -1,5 +1,5 @@
import { rest } from 'msw';
-import { dataMovie } from '../data/dataMovie';
+import { dataMovie } from '../testData/dataMovie';
export const handlers = [
rest.post('/login', (req, res, ctx) => {
diff --git a/src/pages/formPage/formPage.test.tsx b/src/pages/formPage/formPage.test.tsx
index be79cac..e88558a 100644
--- a/src/pages/formPage/formPage.test.tsx
+++ b/src/pages/formPage/formPage.test.tsx
@@ -2,20 +2,35 @@ import { render, screen } from '@testing-library/react';
import FormPage from './formPage';
+import * as reduxHooks from 'react-redux';
+import { testCardsForm } from '../../testData/testCardsForm';
+jest.mock('react-redux');
+const mockedUseSelector = jest.spyOn(reduxHooks, 'useSelector');
+
describe('test FormPage component', () => {
- test('renders FormPage', () => {
+ test('renders FormPage with empty state for CardFormList', () => {
+ mockedUseSelector.mockReturnValue([]);
render();
expect(screen.getByRole('form-page')).toBeInTheDocument();
});
test('renders Form on FormPage', () => {
+ mockedUseSelector.mockReturnValue([]);
render();
expect(screen.getByText(/Add feedback/i)).toBeInTheDocument();
expect(screen.getByRole('form')).toBeInTheDocument();
});
- test('render CardFormList on FormPage', () => {
+ test('render CardFormList on FormPage with empty state for CardFormList', () => {
+ mockedUseSelector.mockReturnValue([]);
+ render();
+ expect(screen.getByTestId('card-form-list')).toBeInTheDocument();
+ });
+
+ test('render CardFormList on FormPage with data testCardsForm', () => {
+ mockedUseSelector.mockReturnValue(testCardsForm);
render();
expect(screen.getByTestId('card-form-list')).toBeInTheDocument();
+ expect(screen.getAllByRole('card-form').length).toBe(testCardsForm.length);
});
});
diff --git a/src/pages/formPage/formPage.tsx b/src/pages/formPage/formPage.tsx
index 6139756..e3023be 100644
--- a/src/pages/formPage/formPage.tsx
+++ b/src/pages/formPage/formPage.tsx
@@ -1,46 +1,16 @@
-import React, { FC, useState } from 'react';
+import React, { FC } from 'react';
import './formPage.scss';
import Form from '../../components/form';
-import { ICardForm } from '../../components/cardForm/cardForm';
-import CardFormList from '../../components/cardForm-list';
+import CardFormList from '../../components/form/cardForm-list';
const FormPage: FC = () => {
- let cardId = 1;
- const [cardsForm, setCardsForm] = useState([]);
-
- const addCardForm = (card: ICardForm): void => {
- const newCard = createCard(card);
-
- setCardsForm((prevCardsForm) => {
- const newArr = [...prevCardsForm];
- newArr.push(newCard);
-
- return newArr;
- });
- };
-
- const createCard = (cardData: ICardForm) => {
- const { userName, gender, birthday, country, isConsentPersonalData, feedbackText, imageSrc } = cardData;
-
- return {
- userName: userName,
- gender: gender,
- birthday: birthday,
- country: country,
- isConsentPersonalData,
- feedbackText,
- imageSrc,
- id: cardId++,
- };
- };
-
return (
Form page
-
-
+
+
);
};
diff --git a/src/pages/homePage/home-page.test.tsx b/src/pages/homePage/home-page.test.tsx
index dc91e79..bdf4fa6 100644
--- a/src/pages/homePage/home-page.test.tsx
+++ b/src/pages/homePage/home-page.test.tsx
@@ -1,45 +1,50 @@
import React from 'react';
import { screen, render } from '@testing-library/react';
-import { server } from './../../mocks/server';
-import { rest } from 'msw';
-
import HomePage from './homePage';
-import DetailInfo from '../../components/detailInfo';
-import { dataMovie } from '../../data/dataMovie';
+import DetailInfo from '../../components/modal/detailInfo';
+import { dataMovie } from '../../testData/dataMovie';
+
+import * as reduxHooks from 'react-redux';
+jest.mock('react-redux');
+const mockedUseSelector = jest.spyOn(reduxHooks, 'useSelector');
+const mockedUseDispatch = jest.spyOn(reduxHooks, 'useDispatch');
+
+import { initialState } from '../../store/moviesSlice';
describe('test HomePage component', () => {
- test('it renders', () => {
+ test('it renders with empty list movies', () => {
+ mockedUseSelector.mockReturnValue(initialState);
+ const dispatch = jest.fn();
+ mockedUseDispatch.mockReturnValue(dispatch);
+
render();
expect(screen.getByRole('home-page')).toBeInTheDocument();
});
test('show spinner component', async () => {
+ const dispatch = jest.fn();
+ mockedUseDispatch.mockReturnValue(dispatch);
+ mockedUseSelector.mockReturnValue(initialState);
+
const { findByTestId } = render();
expect(await findByTestId('spinner')).toBeInTheDocument();
});
- test('render cards from mocks API ', async () => {
- render();
- const expectedLength = 3; //length arrMovies in mock API in mocks/server.tsx
- const movies = await screen.findAllByRole('card-item');
- expect(movies).toHaveLength(expectedLength);
- });
-
- test('render error ', async () => {
- server.use(
- rest.get('https://api.themoviedb.org/3/trending/movie/week', (req, res, ctx) => {
- return res(ctx.status(500));
- })
- );
- render();
- const error = await screen.findByTestId('error-indicator');
- expect(error).toBeInTheDocument();
- });
-
test('render detail-info on Home Page ', async () => {
+ mockedUseSelector.mockReturnValue(dataMovie);
+
render();
const item = screen.getByTestId('detail-info');
expect(item).toBeInTheDocument();
});
+
+ test('dispatch actions called ', async () => {
+ mockedUseSelector.mockReturnValue(initialState);
+ const dispatch = jest.fn();
+ mockedUseDispatch.mockReturnValue(dispatch);
+
+ render();
+ expect(dispatch).toHaveBeenCalled();
+ });
});
diff --git a/src/pages/homePage/homePage.tsx b/src/pages/homePage/homePage.tsx
index 0f79631..a481182 100644
--- a/src/pages/homePage/homePage.tsx
+++ b/src/pages/homePage/homePage.tsx
@@ -1,90 +1,56 @@
-import React, { FC, useEffect, useState } from 'react';
+import React, { FC, useEffect } from 'react';
import './homePage.scss';
-import { IMovie } from '../../components/types';
import CardList from '../../components/cards-list';
import SearchPanel from '../../components/search-panel';
-import { getMovieById, getMoviesBySearch, getTrendingMovies } from '../../services/movies-services';
import Spinner from '../../components/spinner';
import ErrorIndicator from '../../components/errorIndicator';
import Modal from '../../components/modal';
-import DetailInfo from '../../components/detailInfo';
+import DetailInfo from '../../components/modal/detailInfo';
-const HomePage: FC = () => {
- const initSearchValue: string = localStorage.getItem('searchValue') || '';
- const [searchValue, setSearchValue] = useState(initSearchValue);
- const [trendingMovies, setTrendingMovies] = useState([]);
- const [movies, setMovies] = useState([]);
- const [loading, setLoading] = useState(true);
- const [error, setError] = useState(false);
- const [isModalOpen, setIsModalOpen] = useState(false);
- const [detailInfo, setDetailInfo] = useState(null);
- const [movieId, setMovieId] = useState(null);
+import { useAppDispatch, useAppSelector } from '../../hook';
+import { fetchTrendingMovies, fetchMoviesBySearch, fetchMovieById } from './../../store/moviesSlice';
- const onError = () => {
- setError(true);
- setLoading(false);
- };
+const HomePage: FC = () => {
+ const dispatch = useAppDispatch();
+ const searchValue = useAppSelector((state) => state.searchReducer.searchValue);
+ const { movies, trendingMovies, movieId, movieById, isModalOpen, loading, error } = useAppSelector(
+ (state) => state.moviesReducer
+ );
useEffect(() => {
- getTrendingMovies('week')
- .then((trendingMovies) => {
- setTrendingMovies(trendingMovies);
- setLoading(false);
- })
- .catch(onError);
- }, []);
+ dispatch(fetchTrendingMovies('week'));
+ }, [dispatch]);
useEffect(() => {
if (searchValue !== '') {
- getMoviesBySearch(searchValue)
- .then((movies) => {
- setMovies(movies);
- setLoading(false);
- })
- .catch(onError);
+ dispatch(fetchMoviesBySearch(searchValue));
}
- }, [searchValue]);
-
- const updateSearchValue = (newValue: string) => {
- setSearchValue(newValue);
- };
-
- function showDetailInfo(id: number) {
- setLoading(true);
- setMovieId(id);
- }
+ }, [dispatch, searchValue]);
useEffect(() => {
- if (isModalOpen && movieId) {
- getMovieById(movieId)
- .then((movie) => {
- setDetailInfo(movie);
- setLoading(false);
- })
- .catch(onError);
+ if (movieId) {
+ dispatch(fetchMovieById(movieId));
}
- }, [movieId, isModalOpen]);
+ }, [dispatch, movieId]);
const hasData = !(loading || error);
const errorMessage = error ? : null;
const spinner = loading ? : null;
const searchedMovies = searchValue !== '' ? movies : trendingMovies;
- const content = hasData ? (
-
- ) : null;
+ const content = hasData ? : null;
return (
HomePage
-
+
{spinner}
{errorMessage}
{content}
{isModalOpen && hasData && (
-
-
+
+
)}
diff --git a/src/services/api.test.tsx b/src/services/api.test.tsx
index 968910f..7bdaaf8 100644
--- a/src/services/api.test.tsx
+++ b/src/services/api.test.tsx
@@ -1,4 +1,4 @@
-import { getMovieById, getMoviesBySearch, getTrendingMovies } from './movies-services';
+import { getMovieById, getMoviesBySearch, getTrendingMovies, getResource } from './movies-services';
describe('test API component with mws', () => {
it('receives all requested data from Api "https://api.themoviedb.org/3/trending/movie/week" ', async () => {
@@ -23,4 +23,10 @@ describe('test API component with mws', () => {
const data = await getMoviesBySearch('avatar');
expect(data).toHaveLength(expectedLength);
});
+
+ it('should', async () => {
+ const testURL = '/movie/550';
+ const data = await getResource(testURL);
+ expect(data).toBeTruthy();
+ });
});
diff --git a/src/services/movies-services.tsx b/src/services/movies-services.tsx
index 4681415..155d458 100644
--- a/src/services/movies-services.tsx
+++ b/src/services/movies-services.tsx
@@ -5,7 +5,7 @@ const _apiKey = '75b017a3a227731c05610048a94948e5';
export const _baseImagePath = 'image.tmdb.org/t/p/w300';
const _lang = 'en-US';
-const getResource = async (url: string) => {
+export const getResource = async (url: string) => {
const res = await fetch(`${_apiBase}${url}?api_key=${_apiKey}`);
//handle all answers, except 200 ok
diff --git a/src/store/formSlice.ts b/src/store/formSlice.ts
new file mode 100644
index 0000000..d1f9a15
--- /dev/null
+++ b/src/store/formSlice.ts
@@ -0,0 +1,24 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { ICardForm } from '../components/form/cardForm/cardForm';
+
+type formState = {
+ cardsForm: ICardForm[];
+};
+
+const initialState: formState = {
+ cardsForm: [],
+};
+
+const formSlice = createSlice({
+ name: 'form',
+ initialState,
+ reducers: {
+ addCardForm(state, action: PayloadAction) {
+ state.cardsForm = [...state.cardsForm, action.payload];
+ },
+ },
+});
+
+export const { addCardForm } = formSlice.actions;
+
+export default formSlice.reducer;
diff --git a/src/store/index.ts b/src/store/index.ts
new file mode 100644
index 0000000..9eacfab
--- /dev/null
+++ b/src/store/index.ts
@@ -0,0 +1,17 @@
+import { configureStore } from '@reduxjs/toolkit';
+import searchReducer from './searchSlice';
+import moviesReducer from './moviesSlice';
+import formReducer from './formSlice';
+
+const store = configureStore({
+ reducer: {
+ searchReducer: searchReducer,
+ moviesReducer: moviesReducer,
+ formReducer: formReducer,
+ },
+});
+
+export default store;
+
+export type RootState = ReturnType;
+export type AppDispatch = typeof store.dispatch;
diff --git a/src/store/moviesSlice.ts b/src/store/moviesSlice.ts
new file mode 100644
index 0000000..31c3d71
--- /dev/null
+++ b/src/store/moviesSlice.ts
@@ -0,0 +1,121 @@
+import { createSlice, PayloadAction, createAsyncThunk, AnyAction } from '@reduxjs/toolkit';
+import { IMovie } from '../components/types';
+import { getMovieById, getMoviesBySearch, getTrendingMovies } from '../services/movies-services';
+
+type timeByTrendingMovies = 'week' | 'day';
+
+export const fetchTrendingMovies = createAsyncThunk(
+ 'movies/fetchTrendingMovies',
+ async function (time, { rejectWithValue }) {
+ try {
+ const trendingMovies = await getTrendingMovies(time);
+ return trendingMovies;
+ } catch (err) {
+ console.log('error in fetchTrendingMovies: ', (err as Error).message);
+ return rejectWithValue('fetchTrendingMovies do not work!');
+ }
+ }
+);
+
+export const fetchMoviesBySearch = createAsyncThunk(
+ 'movies/fetchMoviesBySearch',
+ async function (searchValue, { rejectWithValue }) {
+ try {
+ const movies = await getMoviesBySearch(searchValue);
+ return movies;
+ } catch (err) {
+ console.log('error in fetchMoviesBySearch: ', (err as Error).message);
+ return rejectWithValue('fetchMoviesBySearch do not work!');
+ }
+ }
+);
+
+export const fetchMovieById = createAsyncThunk(
+ 'movies/fetchMovieById',
+ async function (movie_id, { rejectWithValue }) {
+ try {
+ const movieById = await getMovieById(movie_id);
+ return movieById;
+ } catch (err) {
+ console.log('error in fetchMovieById: ', (err as Error).message);
+ return rejectWithValue('fetchMovieById do not work!');
+ }
+ }
+);
+
+export type moviesState = {
+ movies: IMovie[];
+ trendingMovies: IMovie[];
+ movieId: number | null;
+ movieById: IMovie | null;
+ isModalOpen: boolean;
+ loading: boolean;
+ error: string | null;
+};
+
+export const initialState: moviesState = {
+ movies: [],
+ trendingMovies: [],
+ movieId: null,
+ movieById: null,
+ isModalOpen: false,
+ loading: true,
+ error: null,
+};
+
+const moviesSlice = createSlice({
+ name: 'movies',
+ initialState,
+ reducers: {
+ updateMovieId(state, action: PayloadAction) {
+ state.movieId = action.payload;
+ },
+ toggleModal(state) {
+ state.isModalOpen = !state.isModalOpen;
+ },
+ },
+ extraReducers: (builder) => {
+ builder
+ .addCase(fetchTrendingMovies.pending, (state) => {
+ state.loading = true;
+ state.error = null;
+ })
+ .addCase(fetchTrendingMovies.fulfilled, (state, action) => {
+ state.trendingMovies = action.payload;
+ state.loading = false;
+ state.error = null;
+ })
+ .addCase(fetchMoviesBySearch.pending, (state) => {
+ state.loading = true;
+ state.error = null;
+ })
+ .addCase(fetchMoviesBySearch.fulfilled, (state, action) => {
+ state.movies = action.payload;
+ state.loading = false;
+ state.error = null;
+ })
+ .addCase(fetchMovieById.pending, (state) => {
+ state.loading = true;
+ state.error = null;
+ })
+ .addCase(fetchMovieById.fulfilled, (state, action) => {
+ state.movieById = action.payload;
+ state.loading = false;
+ state.error = null;
+ })
+ .addMatcher(isError, (state, action: PayloadAction) => {
+ state.error = action.payload;
+ state.loading = false;
+ state.isModalOpen = false;
+ console.log(state.error);
+ });
+ },
+});
+
+function isError(action: AnyAction) {
+ return action.type.endsWith('rejected');
+}
+
+export const { updateMovieId, toggleModal } = moviesSlice.actions;
+
+export default moviesSlice.reducer;
diff --git a/src/store/searchSlice.ts b/src/store/searchSlice.ts
new file mode 100644
index 0000000..d478b8f
--- /dev/null
+++ b/src/store/searchSlice.ts
@@ -0,0 +1,23 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+type searchState = {
+ searchValue: string;
+};
+
+const initialState: searchState = {
+ searchValue: '',
+};
+
+const searchSlice = createSlice({
+ name: 'search',
+ initialState,
+ reducers: {
+ updateSearchValue(state, action: PayloadAction) {
+ state.searchValue = action.payload;
+ },
+ },
+});
+
+export const { updateSearchValue } = searchSlice.actions;
+
+export default searchSlice.reducer;
diff --git a/src/store/tests/extraReducers.test.tsx b/src/store/tests/extraReducers.test.tsx
new file mode 100644
index 0000000..8ef555e
--- /dev/null
+++ b/src/store/tests/extraReducers.test.tsx
@@ -0,0 +1,60 @@
+import moviesReducer, { initialState, fetchTrendingMovies, fetchMoviesBySearch, fetchMovieById } from '../moviesSlice';
+import { dataMovie } from '../../testData/dataMovie';
+
+describe('test extraReducers', () => {
+ const mockData = [dataMovie];
+
+ it('should change status with "fetchTrendingMovies.pending" action', () => {
+ const state = moviesReducer(initialState, fetchTrendingMovies.pending('', 'week'));
+ expect(state.loading).toBe(true);
+ expect(state.error).toBeNull();
+ });
+
+ it('should fetch trendingMovies with "fetchTrendingMovies.fulfilled" action', () => {
+ const action = { type: fetchTrendingMovies.fulfilled.type, payload: mockData };
+ const state = moviesReducer(initialState, action);
+ expect(state.loading).toBe(false);
+ expect(state.error).toBeNull();
+ expect(state.trendingMovies).toBe(mockData);
+ });
+
+ it('should change status with "fetchMoviesBySearch.pending" action', () => {
+ const action = { type: fetchMoviesBySearch.pending.type };
+ const state = moviesReducer(initialState, action);
+ expect(state.loading).toBe(true);
+ expect(state.error).toBeNull();
+ });
+
+ it('should fetch movies with "fetchMoviesBySearch.fulfilled" action', () => {
+ const action = { type: fetchMoviesBySearch.fulfilled.type, payload: mockData };
+ const state = moviesReducer(initialState, action);
+ expect(state.loading).toBe(false);
+ expect(state.error).toBeNull();
+ expect(state.movies).toBe(mockData);
+ });
+
+ it('should return status with "fetchMovieById.pending" action', () => {
+ const action = { type: fetchMovieById.pending.type };
+ const state = moviesReducer(initialState, action);
+ expect(state.loading).toBe(true);
+ expect(state.error).toBeNull();
+ expect(state.movieById).toBeNull();
+ });
+
+ it('should fetch movieById with "fetchMovieById.fulfilled" action', () => {
+ const action = { type: fetchMovieById.fulfilled.type, payload: dataMovie };
+ const state = moviesReducer(initialState, action);
+ expect(state.loading).toBe(false);
+ expect(state.error).toBeNull();
+ expect(state.movieById).toBe(dataMovie);
+ expect(state.movieById?.title).toBe('Fight Club');
+ });
+
+ it('should update state.error with "fetchMovieById.rejected" action', () => {
+ const action = { type: fetchMovieById.rejected.type, payload: 'Server Error' };
+ const state = moviesReducer(initialState, action);
+ expect(state.loading).toBe(false);
+ expect(state.movieById).toBeNull();
+ expect(state.error).toBe('Server Error');
+ });
+});
diff --git a/src/store/tests/formSlice.test.tsx b/src/store/tests/formSlice.test.tsx
new file mode 100644
index 0000000..ffe06dd
--- /dev/null
+++ b/src/store/tests/formSlice.test.tsx
@@ -0,0 +1,21 @@
+import { testCardForm } from '../../testData/testCardForm';
+import formReducer, { addCardForm } from '../formSlice';
+
+const initialState = {
+ cardsForm: [],
+};
+
+describe('test formSlice', () => {
+ it('should return default state when passed an empty action', () => {
+ const result = formReducer(undefined, { type: '' });
+ expect(result).toEqual(initialState);
+ });
+
+ it('should add new cardForm with "addCardForm" action', () => {
+ const action = { type: addCardForm.type, payload: testCardForm };
+
+ const result = formReducer(initialState, action);
+ expect(result.cardsForm.length).toBe(1);
+ expect(result.cardsForm[0].userName).toBe('Anna Sh');
+ });
+});
diff --git a/src/store/tests/moviesSlice.test.tsx b/src/store/tests/moviesSlice.test.tsx
new file mode 100644
index 0000000..c707238
--- /dev/null
+++ b/src/store/tests/moviesSlice.test.tsx
@@ -0,0 +1,22 @@
+import moviesReducer, { updateMovieId, initialState, toggleModal } from '../moviesSlice';
+
+describe('test moviesSlice', () => {
+ it('should return default state when passed an empty action', () => {
+ const result = moviesReducer(undefined, { type: '' });
+ expect(result).toEqual(initialState);
+ });
+
+ it('should add movieId with "updateMovieId" action', () => {
+ const action = { type: updateMovieId.type, payload: 355 };
+
+ const result = moviesReducer(initialState, action);
+ expect(result.movieId).toBe(355);
+ });
+
+ it('should toggle status isModalOpen with "toggleModal" action', () => {
+ const action = { type: toggleModal.type };
+
+ const result = moviesReducer(initialState, action);
+ expect(result.isModalOpen).toBe(true);
+ });
+});
diff --git a/src/store/tests/searchSlice.test.tsx b/src/store/tests/searchSlice.test.tsx
new file mode 100644
index 0000000..caf257b
--- /dev/null
+++ b/src/store/tests/searchSlice.test.tsx
@@ -0,0 +1,19 @@
+import searchReducer, { updateSearchValue } from '../searchSlice';
+
+const initialState = {
+ searchValue: '',
+};
+
+describe('test searchSlice', () => {
+ it('should return default state when passed an empty action', () => {
+ const result = searchReducer(undefined, { type: '' });
+ expect(result).toEqual(initialState);
+ });
+
+ it('should add new search value with "updateSearchValue" action', () => {
+ const action = { type: updateSearchValue.type, payload: 'test value' };
+
+ const result = searchReducer(initialState, action);
+ expect(result.searchValue).toBe('test value');
+ });
+});
diff --git a/src/data/dataMovie.ts b/src/testData/dataMovie.ts
similarity index 100%
rename from src/data/dataMovie.ts
rename to src/testData/dataMovie.ts
diff --git a/src/data/dataProduct.ts b/src/testData/dataProduct.ts
similarity index 100%
rename from src/data/dataProduct.ts
rename to src/testData/dataProduct.ts
diff --git a/src/data/dataProducts.ts b/src/testData/dataProducts.ts
similarity index 100%
rename from src/data/dataProducts.ts
rename to src/testData/dataProducts.ts
diff --git a/src/testData/testCardForm.ts b/src/testData/testCardForm.ts
index 36f1695..abe4081 100644
--- a/src/testData/testCardForm.ts
+++ b/src/testData/testCardForm.ts
@@ -1,7 +1,7 @@
-import { ICardForm } from '../components/cardForm/cardForm';
+import { ICardForm } from '../components/form/cardForm/cardForm';
export const testCardForm: ICardForm = {
- id: 100,
+ id: '100',
userName: 'Anna Sh',
gender: 'female',
birthday: '27.10.1983',
diff --git a/src/testData/testCardsForm.ts b/src/testData/testCardsForm.ts
index 9be3cf5..711723c 100644
--- a/src/testData/testCardsForm.ts
+++ b/src/testData/testCardsForm.ts
@@ -1,8 +1,8 @@
-import { ICardForm } from '../components/cardForm/cardForm';
+import { ICardForm } from '../components/form/cardForm/cardForm';
export const testCardsForm: ICardForm[] = [
{
- id: 101,
+ id: '101',
userName: 'Ivan Bobrov',
gender: 'male',
birthday: '21.02.1980',
@@ -12,7 +12,7 @@ export const testCardsForm: ICardForm[] = [
imageSrc: 'https://i.dummyjson.com/data/products/25/thumbnail.jpg',
},
{
- id: 102,
+ id: '102',
userName: 'ALen Koch',
gender: 'female',
birthday: '21.02.1990',
@@ -22,7 +22,7 @@ export const testCardsForm: ICardForm[] = [
imageSrc: 'https://i.dummyjson.com/data/products/25/thumbnail.jpg',
},
{
- id: 103,
+ id: '103',
userName: 'Anna Sh',
gender: 'female',
birthday: '21.02.2222',