Лабораторная работа №8 "Тестирование фронтенд-приложения"
1. ЦЕЛЬ РАБОТЫ
Освоение основ тестирования JavaScript кода и эффективного использования инструментов разработчика для отладки и анализа производительности веб-приложений.
2. НЕОБХОДИМЫЕ ЗНАНИЯ
Для успешного выполнения работы студент должен знать:
-
JavaScript ES6+ (функции, объекты, массивы)
-
Базовые понятия тестирования
-
React компоненты и JSX (из ЛР7)
-
HTML/CSS и структуру DOM
3. ЗАДАЧИ РАБОТЫ
-
Настроить окружение для unit-тестирования с Jest
-
Написать тесты для чистых JavaScript функций
-
Освоить основы тестирования React компонентов
-
Изучить инструменты разработчика для отладки
-
Научиться анализировать производительность с помощью Lighthouse
ПОРЯДОК ВЫПОЛНЕНИЯ РАБОТЫ
ЧАСТЬ 1: НАСТРОЙКА ОКРУЖЕНИЯ ДЛЯ ТЕСТИРОВАНИЯ
Объяснение: Jest - это фреймворк для тестирования JavaScript кода. Мы настроим его для тестирования утилит и простых компонентов.
# Перейдите в рабочую ветку git checkout main git pull origin main git checkout -b feature/frontend-testing # Установите зависимости для тестирования cd my-react-app npm install --save-dev jest @testing-library/react @testing-library/jest-dom jest-environment-jsdom # Настройте скрипты в package.json
ТРЕБОВАНИЯ К РЕАЛИЗАЦИИ ДЛЯ ВСЕХ ВАРИАНТОВ
1. Unit-тестирование (обязательно):
2. Инструменты разработчика (обязательно):
-
Console: Использование
console.table(),console.group(), логирование -
Sources: Установка breakpoints, пошаговая отладка
-
Network: Анализ запросов, оптимизация загрузки
-
Performance: Запись и анализ производительности
-
Lighthouse: Полный аудит с рекомендациями
3. Анализ покрытия (обязательно):
-
Минимум 70% покрытия для утилит
-
Минимум 60% покрытия для компонентов
-
Анализ непокрытых участков кода
4. Документация тестов:
ЧАСТЬ 2: ТЕСТИРОВАНИЕ PURE JAVASCRIPT ФУНКЦИЙ
Объяснение: Начнем с тестирования чистых функций - они проще всего тестируются и не зависят от React.
ЧАСТЬ 3: ТЕСТИРОВАНИЕ ПРОСТЫХ REACT КОМПОНЕНТОВ
Объяснение: Тестируем презентационные компоненты из ЛР7, которые не имеют состояния.
ЧАСТЬ 4: ТЕСТИРОВАНИЕ КОМПОЗИТНЫХ КОМПОНЕНТОВ
Объяснение: Тестируем компоненты, которые используют другие компоненты.
ЧАСТЬ 5: ИНСТРУМЕНТЫ РАЗРАБОТЧИКА ДЛЯ ОТЛАДКИ
Объяснение: Изучаем основные инструменты браузера для отладки приложений.
Шаг 1: Elements/Inspector Tab
-
Изучите DOM структуру вашего приложения
-
Найдите созданные React компоненты в дереве элементов
-
Измените CSS стили в реальном времени
Шаг 2: Console Tab
Шаг 3: Sources Tab
-
Установите breakpoints в вашем JavaScript коде
-
Используйте Step Over, Step Into для пошаговой отладки
-
Наблюдайте за значениями переменных в Scope
Шаг 4: Network Tab
-
Проанализируйте загрузку ресурсов
-
Найдите медленно загружающиеся файлы
-
Проверьте статусы HTTP запросов
Шаг 5: React Developer Tools
-
Установите расширение для браузера
-
Изучите вкладки Components и Profiler
-
Проверьте props и state компонентов (когда будем изучать состояние)
ЧАСТЬ 6: АНАЛИЗ ПРОИЗВОДИТЕЛЬНОСТИ С LIGHTHOUSE
Объяснение: Lighthouse - инструмент для аудита качества веб-приложений.
Шаг 1: Запуск аудита
-
Откройте вкладку Lighthouse в DevTools
-
Выберите категории: Performance, Accessibility, Best Practices, SEO
-
Запустите генерацию отчета
Шаг 2: Анализ метрик производительности
-
First Contentful Paint (FCP) - когда появляется первый контент
-
Largest Contentful Paint (LCP) - когда загружается самый большой элемент
-
Cumulative Layout Shift (CLS) - стабильность layout
Шаг 3: Рекомендации по улучшению
-
Оптимизация изображений
-
Удаление неиспользуемого CSS/JS
-
Включение кэширования
ЧАСТЬ 7: ЗАПУСК ТЕСТОВ И АНАЛИЗ РЕЗУЛЬТАТОВ
# Запуск всех тестов npm test # Запуск тестов в режиме наблюдения npm run test:watch # Запуск тестов с отчетом о покрытии npm run test:coverage
Анализ отчета о покрытии:
-
Откройте
coverage/lcov-report/index.html -
Найдите непокрытые тестами участки кода
-
Стремитесь к 70%+ покрытия для критической логики
ИНДИВИДУАЛЬНЫЕ ВАРИАНТЫ ЗАДАНИЙ - Для выбора номера варианта для бригады используется Генератор вариантов.
Общее задание для всех вариантов:
Создайте комплексную систему тестирования для вашего React-приложения. Реализуйте unit-тесты для утилит и ключевых компонентов, проанализируйте производительность с помощью инструментов разработчика и добейтесь минимум 70% покрытия кода тестами.
1 ПОДГРУППА (Варианты 1-8)
Вариант 1 - Новостной портал "NewsHub":
-
Unit-тесты для:
formatDate,truncateText, NewsCard, NewsList, NewsFilters -
Проверка: форматирование дат, обрезка текста, фильтрация новостей
-
Инструменты: Анализ загрузки изображений в Network tab, аудит доступности контента
Вариант 2 - Интернет-магазин "TechStore":
-
Unit-тесты для:
formatCurrency,calculateTotal, ProductCard, ShoppingCart, ProductFilters -
Проверка: форматирование цен, расчет итогов, фильтрация товаров
-
Инструменты: Профилирование производительности корзины, анализ размеров bundle
Вариант 3 - Задачник "TaskManager":
-
Unit-тесты для:
generateId,sortTasks, TaskItem, TaskList, FilterButtons -
Проверка: генерация ID, сортировка задач, фильтрация по статусу
-
Инструменты: Отладка событий drag-and-drop, анализ перерисовок компонентов
Вариант 4 - Блог-платформа "BlogSpace":
-
Unit-тесты для:
parseMarkdown,slugify, PostCard, AuthorInfo, TagList -
Проверка: парсинг markdown, генерация slug, отображение тегов
-
Инструменты: Анализ SEO с Lighthouse, проверка мета-тегов
Вариант 5 - Каталог фильмов "MovieCatalog":
-
Unit-тесты для:
formatDuration,calculateRating, MovieCard, GenreFilter, RatingStars -
Проверка: форматирование длительности, расчет рейтинга, фильтрация по жанрам
-
Инструменты: Анализ загрузки трейлеров, производительность слайдеров
Вариант 6 - Погодное приложение "WeatherApp":
-
Unit-тесты для:
convertTemperature,formatWindSpeed, WeatherCard, ForecastList, CitySearch -
Проверка: конвертация температур, форматирование скорости ветра, поиск городов
-
Инструменты: Анализ геолокации, производительность анимаций погоды
Вариант 7 - Социальная сеть "SocialNetwork":
-
Unit-тесты для:
formatNumber,timeAgo, PostCard, UserProfile, LikeButton -
Проверка: форматирование чисел (лайков), относительное время, взаимодействия
-
Инструменты: Профилирование бесконечного скролла, анализ утечек памяти
Вариант 8 - Образовательная платформа "EduPlatform":
-
Unit-тесты для:
calculateProgress,validateQuiz, CourseCard, ProgressBar, QuizComponent -
Проверка: расчет прогресса, валидация тестов, отображение курсов
-
Инструменты: Анализ доступности для скринридеров, производительность видеоплеера
2 ПОДГРУППА (Варианты 9-16)
Вариант 9 - Ресторанное приложение "FoodDelivery":
-
Unit-тесты для:
formatTime,calculateOrderTotal, DishCard, MenuSection, CartItem -
Проверка: форматирование времени приготовления, расчет суммы заказа, управление корзиной
-
Инструменты: Анализ производительности модальных окон, отладка форм заказа
Вариант 10 - Библиотека "DigitalLibrary":
-
Unit-тесты для:
searchBooks,filterByGenre, BookCard, SearchResults, Bookshelf -
Проверка: алгоритмы поиска, фильтрация по жанрам, управление коллекцией
-
Инструменты: Профилирование поиска по большому каталогу, анализ индексации
Вариант 11 - Фитнес-трекер "FitTrack":
-
Unit-тесты для:
calculateCalories,formatWorkoutTime, ExerciseCard, WorkoutTimer, ProgressChart -
Проверка: расчет калорий, форматирование времени тренировок, отображение прогресса
-
Инструменты: Анализ производительности таймеров, отладка Web Workers
Вариант 12 - Портфолио фотографа "PhotoGallery":
-
Unit-тесты для:
optimizeImageUrl,sortPhotos, PhotoCard, GalleryGrid, Lightbox -
Проверка: оптимизация URL изображений, сортировка фото, работа галереи
-
Инструменты: Анализ загрузки изображений, производительность лайтбокса
Вариант 13 - Путешествия "TravelPlanner":
-
Unit-тесты для:
calculateDistance,formatPrice, DestinationCard, TripBuilder, MapComponent -
Проверка: расчет расстояний, форматирование цен, построение маршрутов
-
Инструменты: Профилирование карт, анализ взаимодействия с геоданными
Вариант 14 - Музыкальный плеер "MusicStream":
-
Unit-тесты для:
formatTime,shuffleArray, TrackItem, Playlist, AudioPlayer -
Проверка: форматирование времени треков, алгоритм перемешивания, управление плейлистом
-
Инструменты: Анализ Web Audio API, производительность визуализатора
Вариант 15 - Финтех "BudgetTracker":
-
Unit-тесты для:
calculateBalance,categorizeExpense, TransactionItem, BudgetChart, ReportGenerator -
Проверка: расчет баланса, категоризация расходов, генерация отчетов
-
Инструменты: Профилирование графиков, анализ точности расчетов
Вариант 16 - Ивенты "EventManager":
-
Unit-тесты для:
formatEventDate,checkAvailability, EventCard, Calendar, RegistrationForm -
Проверка: форматирование дат событий, проверка доступности, работа календаря
-
Инструменты: Анализ производительности календаря, отладка валидации форм
КОНТРОЛЬНЫЕ ВОПРОСЫ
-
Какие виды тестирования вы применили и в чем их различия? Приведите примеры unit-тестов из вашего проекта.
-
Как Jest помогает в организации тестов? Какие функции Jest вы использовали (describe, test, expect и др.)?
-
Какие инструменты разработчика оказались наиболее полезными? Приведите пример решения конкретной проблемы с помощью DevTools.
-
Какие метрики Lighthouse важны для пользовательского опыта? Как вы можете улучшить эти метрики в своем приложении?
-
Что такое покрытие кода и почему оно важно? Какой процент покрытия вы достигли и какие участки кода остались непокрытыми?
Состояние ответа
| Номер попытки | Попытка 1. |
|---|---|
| Состояние ответа на задание | Отправлено для оценивания |
| Состояние оценивания | Не оценено |
| Оставшееся время | Ответ на задание представлен заранее - 7 дн. 11 час. |
| Последнее изменение | четверг, 7 мая 2026, 12:21 |
| Ответ в виде файла |
|
| Комментарии к ответу | Отобразить комментарии Сохранить комментарий | Отмена |