Playlist

В данном проекте я реализовал роутинг в React-приложении с помощью библиотеки React-Router, написал Unit-тесты для каждого компонента, используя React-Testing-Library. В качестве сборщика используется vite.

Описание функционала приложения

Как только Вы откроете приложение, Вы увидите главную страницу (MainPage). Вы можете переходить на другие страницы выбрав в навигационном меню либо 'Пользователи' (UsersPage), либо 'Плэйлисты' (PlaylistsPage), на которых будет представлен список пользователей и плэйлистов соответственно. При переходе вы можете увидеть изменения в поисковой строке браузера (Роутинг). Также на страницах 'Пользователи' и 'Плэйлисты' есть поля для фильтрации. При введении в поля каких либо символов Вы сможете наблюдать также изменения поисковых параметров в поисковой строке. При клике на какого-либо пользователя (или плэйлиста) вас перенесет на страницу с информацией о пользователе (о плэйлисте). При этом вы также сможете наблюдать изменения в поисковой строке, добавится id пользователя, представляющий собой динамический путь.

Описание работы тестов

Также в данном приложении есть Unit-тесты для каждой страницы в приложении, они расположены в папочке tests.

Тесты для страницы MainPage

Чтобы выполнить данное тестирование надо в терминале прописать:

npm test src/pages/MainPage/tests/MainPage.test.tsx

Здесь будет выполняться Snapshot-тестирование и в папочке tests появится папочка 'snapshots' и в ней будет фаил 'MainPage.test.tsx.snap', в котором вы можете увидеть, как будет выглядеть данный компонент в момент тестирования по HTML.

Тесты для страницы PlaylistsPage

Чтобы выполнить данное тестирование надо в терминале прописать:

npm test src/pages/PlaylistsPage/tests/PlaylistPage.test.tsx

Здесь единственный тест, проверяющий правильность вызова setSearchParam с теми данными, которые вводятся в input

Тесты для страницы UsersPage

Чтобы выполнить данное тестирование надо в терминале прописать:

npm test src/pages/UsersPage/tests/UsersPage.test.tsx

Здесь единственный аналогичный тест с тестом страницы PlaylistsPage

Тесты для страницы UserInfoPage

Чтобы выполнить данное тестирование надо в терминале прописать:

npm test src/pages/UserInfoPage/tests/UserInfoPage.test.tsx

Здесь два теста, которые проверяют:

1. Отображение соответствующего текста при несуществующем UserId;
2. Отображение данных о User при передаче существующего userId

Тесты для страницы PlaylistInfoPage

Чтобы выполнить данное тестирование надо в терминале прописать:

npm test src/pages/PlaylistInfoPage/tests/PlaylistInfoPage.test.tsx

Здесь два аналогичных теста с тестом страницы UserInfoPage

Запуск приложения

Для того, чтобы запустить приложение надо:

1. Открыть проект и запустить терминал
2. Установить необходимые зависимости, для этого в терминале надо прописать:

npm install

3. Запустить приложение, для этого в терминале надо прописать:

npm run dev

4. После запустка в терминале появится строка с ссылкой по которой надо перейти:

[1] ➜ Local: http://localhost:5173/