https://github.com/korolev2512/intergalactic_analytics_tests
yandex shri 2025 homework
https://github.com/korolev2512/intergalactic_analytics_tests
classnames css-modules eslint jest playwright prettier react react-router react-testing-library typescript vite zustand
Last synced: 24 days ago
JSON representation
yandex shri 2025 homework
- Host: GitHub
- URL: https://github.com/korolev2512/intergalactic_analytics_tests
- Owner: KoroLev2512
- Created: 2025-06-29T15:24:06.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-06-29T15:42:49.000Z (7 months ago)
- Last Synced: 2025-06-29T16:37:47.153Z (7 months ago)
- Topics: classnames, css-modules, eslint, jest, playwright, prettier, react, react-router, react-testing-library, typescript, vite, zustand
- Language: HTML
- Homepage:
- Size: 4.63 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🚀Написание тестов для сервиса межгалактической аналитики Young Yandex 2025
Это веб-приложение для «Сервиса межгалактической аналитики». Проект разработан в рамках Школы разработки интерфейсов Яндекса 2025.
## Технологический стек (frontend)
- **Основной стек**: `React`, `TypeScript`, `Vite`
- **Управление состоянием**: `Zustand`
- **Роутинг**: `React Router`
- **Стилизация**: `CSS Modules`
- **Тестирование**: `Jest`, `React Testing Library`, `Playwright`
- **Качество кода**: `ESLint`, `Prettier`, `typescript-eslint`
- **Утилиты**: `classnames`
## Функциональность
### Главная страница (`/`)
- Загрузка CSV-файла с помощью drag-and-drop или через диалог выбора файла.
- Анализ файла с отображением прогресса.
- Сохранение результатов анализа (включая ошибки) в историю, которая хранится в `localStorage`.
- Возможность очистить текущие данные и загрузить новый файл.
### Страница генерации (`/generate`)
- Генерация новых данных
- Автоматическая загрузка сгенерированного файла
- Обработка ошибок
### Страница истории (`/history`)
- Просмотр истории загрузок в виде списка.
- Удаление отдельных записей из истории.
- Просмотр ключевых метрик (хайлайтов) в модальном окне.
- Полная очистка истории.
- Кнопка для быстрого перехода на страницу генерации.
## Тестирование
Проект включает полное покрытие тестами с использованием современных инструментов тестирования.
### Unit тесты (Jest + React Testing Library)
#### Компоненты с тестами:
**1. ClearHistoryButton** - 4 теста
- ✅ Не рендерится когда история пуста
- ✅ Рендерится когда в истории есть элементы
- ✅ Вызывает функции очистки при клике
- ✅ Применяет правильный variant для кнопки
**2. GenerateMoreButton** - 4 теста
- ✅ Рендерит кнопку с правильным текстом
- ✅ Вызывает navigate при клике
- ✅ Применяет правильный variant для кнопки
- ✅ Кнопка доступна для взаимодействия
**3. FileDisplay** - 8 тестов
- ✅ Рендерит имя файла
- ✅ Вызывает onClear при клике на кнопку очистки
- ✅ Блокирует кнопку очистки когда isProcessing=true
- ✅ Не блокирует кнопку очистки когда isProcessing=false
- ✅ Применяет правильные CSS классы для завершенного состояния
- ✅ Отображает иконку очистки
- ✅ Рендерит с длинным именем файла
- ✅ Работает с пустым именем файла
**4. FileStatus** - 8 тестов
- ✅ Отображает успешное состояние
- ✅ Отображает состояние ошибки
- ✅ Отображает иконку Smile для успешного состояния
- ✅ Отображает иконку SmileSad для состояния ошибки
- ✅ Применяет активный класс когда isActive=true
- ✅ Не применяет активный класс когда isActive=false
- ✅ Рендерит с правильной структурой для успешного состояния
- ✅ Рендерит с правильной структурой для состояния ошибки
**5. HistoryItem** - 11 тестов
- ✅ Рендерит информацию о файле
- ✅ Вызывает onClick при клике на элемент с хайлайтами
- ✅ Не вызывает onClick при клике на элемент без хайлайтов
- ✅ Вызывает onDelete при клике на кнопку удаления
- ✅ Отображает иконку файла
- ✅ Отображает иконку корзины для удаления
- ✅ Отображает статус успеха для элемента с хайлайтами
- ✅ Отображает статус ошибки для элемента без хайлайтов
- ✅ Применяет disabled класс для элемента без хайлайтов
- ✅ Отображает отформатированную дату
- ✅ Имеет правильные aria-label атрибуты
**6. HistoryModal** - 8 тестов
- ✅ Не рендерится когда модал закрыт
- ✅ Не рендерится когда нет выбранного элемента
- ✅ Не рендерится когда у элемента нет хайлайтов
- ✅ Рендерится когда модал открыт и есть выбранный элемент с хайлайтами
- ✅ Отображает хайлайты из выбранного элемента
- ✅ Вызывает convertHighlightsToArray с правильными данными
- ✅ Применяет правильные CSS классы
- ✅ Передает правильные props в HighlightCard
**7. Dropzone** - 9 тестов
- ✅ Рендерит базовую структуру
- ✅ Открывает файловый диалог при клике
- ✅ Вызывает onFileSelect для валидного CSV файла
- ✅ Обрабатывает drag and drop событие
- ✅ Показывает Loader когда файл загружен и status="processing"
- ✅ Применяет правильные CSS классы при drag
- ✅ Применяет CSS класс при ошибке валидации
- ✅ Очищает ошибку валидации при новом drag
- ✅ Не открывает файловый диалог при клике когда файл уже загружен
**8. Modal** - 11 тестов
- ✅ Рендерит содержимое когда открыт
- ✅ Не применяет backdropShown класс когда закрыт
- ✅ Вызывает onClose при клике на backdrop
- ✅ Не вызывает onClose при клике на содержимое модала
- ✅ Вызывает onClose при клике на кнопку закрытия
- ✅ Не отображает кнопку закрытия когда onClose не передан
- ✅ Отображает иконку закрытия
- ✅ Применяет правильные CSS классы когда открыт
- ✅ Рендерит сложное содержимое
- ✅ Работает без onClose функции
- ✅ Всегда рендерится в DOM через Portal
**9. UI компоненты** - 14 тестов
- **Button** - 4 теста (рендеринг, варианты, disabled состояние, className)
- **Typography** - 4 теста (рендеринг, HTML элементы, className, комбинирование props)
- **Loader** - 4 теста (базовый размер, кастомный размер, нулевой размер, отрицательный размер)
- **Upload Icon** - 6 тестов (SVG рендеринг, размеры, пропсы, path элементы)
**10. Хуки** - 2 теста
- **useDebounce** - 2 теста (debounce функциональность, очистка таймера)
**11. Утилиты** - 8 тестов
- **storage** - 4 теста (сохранение, загрузка, удаление, очистка)
- **formatDate** - 4 теста (форматирование дат, различные форматы)
**12. Store** - 6 тестов
- **analysis slice** - 3 теста (actions, reducers, state)
- **history slice** - 3 теста (actions, reducers, state)
### E2E тесты (Playwright)
#### Основные тесты:
**1. Главная страница** - 4 теста
- ✅ Отображает основные элементы главной страницы
- ✅ Навигация работает корректно
- ✅ Заголовки отображаются правильно
- ✅ Кнопки доступны для взаимодействия
**2. Загрузка файлов** - 3 теста
- ✅ Загружает CSV файл успешно
- ✅ Отображает состояние загрузки
- ✅ Обрабатывает ошибки загрузки
**3. Страница генерации** - 3 теста
- ✅ Отображает основные элементы страницы генерации
- ✅ Генерация работает корректно
- ✅ Навигация между страницами
**4. Страница истории** - 3 теста
- ✅ Отображает основные элементы страницы истории
- ✅ Отображает пустое состояние когда история пуста
- ✅ Навигация назад работает
**5. Доступность** - 2 теста
- ✅ Все элементы имеют правильные атрибуты
- ✅ Навигация с клавиатуры работает
**6. Производительность** - 2 теста
- ✅ Страницы загружаются быстро
- ✅ Анимации работают плавно
**7. Скриншоты** - 4 теста
- ✅ Главная страница
- ✅ Страница генерации
- ✅ Страница истории
- ✅ Dropzone с файлом
### Статистика тестирования
- **Unit тестов**: 81 тест
- **E2E тестов**: 43 теста
- **Общее покрытие**: 124 теста
- **Время выполнения unit тестов**: ~0.9 секунд
- **Время выполнения e2E тестов**: ~3.3 секунды
- **Успешность**: 100%
## Установка и запуск
1. Установите зависимости:
```bash
npm install
```
2. Запустите проект в режиме разработки:
```bash
npm run dev
```
## Скрипты (frontend)
- `npm run dev` - запуск в режиме разработки
- `npm run build` - сборка проекта
- `npm run lint` - проверка кода линтером
- `npm run lint:fix` - исправление ошибок линтера и форматирование кода
- `npm run format` - форматирование кода
- `npm run preview` - предпросмотр собранного проекта
### Тестирование (frontend)
- `npm test` - запуск unit тестов
- `npm run test:watch` - запуск unit тестов в режиме наблюдения
- `npm run test:coverage` - запуск unit тестов с отчетом о покрытии
- `npm run test:e2e` - запуск e2e тестов
- `npm run test:e2e:ui` - запуск e2e тестов с UI
- `npm run test:e2e:headed` - запуск e2e тестов в браузере
- `npm run test:e2e:debug` - запуск e2e тестов в режиме отладки
- `npm run test:e2e:report` - показать HTML отчет e2e тестов
- `npm run test:e2e:update-screenshots` - обновление скриншотов e2e тестов
- `npm run test:e2e:screenshots` - запуск только тестов скриншотов
- `npm run test:e2e:screenshots-update` - обновление скриншотов
## Структура проекта
Ниже представлена структура основных директорий проекта:
```
src/
├── App.tsx # Корневой компонент приложения
├── main.tsx # Точка входа
├── components/ # Переиспользуемые UI-компоненты
│ ├── ClearHistoryButton/
│ ├── Dropzone/
│ ├── FileDisplay/
│ ├── FileStatus/
│ ├── GenerateMoreButton/
│ ├── Header/
│ ├── HighlightCard/
│ ├── HighlightsSection/
│ ├── HistoryItem/
│ ├── HistoryList/
│ ├── HistoryModal/
│ └── MainLayout/
├── hooks/ # Пользовательские хуки React
├── pages/ # Компоненты страниц (роуты)
├── store/ # Логика управления состоянием (Zustand)
│ ├── analysis/ # Стор для страницы анализа
│ └── history/ # Стор для страницы истории
├── styles/ # Глобальные стили
├── types/ # Глобальные типы TypeScript
├── ui/ # Базовые UI-компоненты (кнопки, иконки и т.д.)
│ ├── Button/
│ ├── icons/
│ ├── Loader/
│ ├── Modal/
│ ├── Portal/
│ ├── SvgBase/
│ └── Typography/
├── utils/ # Вспомогательные функции
└── setupTests.ts # Настройка тестов
e2e/ # E2E тесты (Playwright)
├── accessibility.spec.ts
├── file-upload.spec.ts
├── generate.spec.ts
├── history.spec.ts
├── home.spec.ts
├── performance.spec.ts
├── screenshots.spec.ts
└── utils/
└── test-helpers.ts
```
## Технологии тестирования (frontend)
- **Jest** - фреймворк для unit тестирования
- **React Testing Library** - библиотека для тестирования React компонентов
- **Playwright** - фреймворк для e2e тестирования
- **@testing-library/user-event** - симуляция пользовательских действий
- **@testing-library/jest-dom** - дополнительные matchers для Jest
## Практики тестирования (frontend)
1. **Тестирование поведения, а не реализации**
2. **Использование семантических селекторов** (getByRole, getByText)
3. **Mock'ирование внешних зависимостей**
4. **Тестирование accessibility**
5. **Покрытие edge cases**
6. **Читаемые названия тестов на русском языке**
7. **Изоляция тестов**
8. **Использование data-testid для сложных селекторов**
### Доступные ручки (backend)
- **GET /report**
- Генерирует CSV отчет с заданными параметрами.
- Параметры запроса:
- `size` (number, обязателен): Размер отчета в ГБ
- `withErrors` (string, по умолчанию "off"): Включать ли ошибки в отчет
- `maxSpend` (string, по умолчанию "1000"): Максимальная сумма расходов
- Ответ: CSV файл с отчетом или объект с ошибкой
- **POST /aggregate**
- Агрегирует данные, полученные в виде файла (multipart/form-data).
- Параметры запроса:
- `rows` (number, обязателен): Количество строк для промежуточного агрегирования
- Тело запроса: multipart/form-data с файлом
- Ответ: JSON-стрим с результатами агрегации или объект с ошибкой
### Документация API (Swagger)
Интерактивная документация доступна по адресу: [http://localhost:3000/swagger](http://localhost:3000/swagger)
В ней можно посмотреть описание ручек, параметры и протестировать запросы прямо из браузера.