Описание проектов

E-shop-1 и E-shop-2 - два React приложения интернет-магазина для изучения frontend тестирования. Проекты развернуты как статические сайты и работают исключительно на стороне клиента.

Архитектура системы

┌─────────────────────────────────┐
│         Frontend Only           │
│                                 │
│ - React SPA приложение          │
│ - Vite сборка                   │  
│ - Tailwind CSS стили            │
│ - LocalStorage для корзины      │
│ - Минифицированный JS код       │
│ - Статические данные товаров    │
└─────────────────────────────────┘

Расположение: /public/shop-1/ и /public/shop-2/

---

Анализ реального функционала

Общая структура товара (из JS кода):

{
  id: number,
  name: string,           // "Название товара"
  rating: number,         // 1-5 звезд
  description: string,    // описание товара
  price: number,          // текущая цена в рублях
  originalPrice: number,  // старая цена для расчета скидки
  sale: number,          // процент скидки
  capacity: number,      // количество в наличии (0 = нет в наличии)
  storeStatus: boolean   // статус доставки
}

Функциональность корзины:

• Хранение: localStorage с ключом "shopdata"
• Действия:
  • "Добавить в корзину" (если capacity > 0)
  • "Удалить из корзины"
• Отображение: "В наличии: X шт" / "Нет в наличии"

UI элементы:

• Header: Логотип + "Интернет-магазин" + иконки пользователя
• Карточки товаров: изображение, название, рейтинг, описание, цена
• Цены: зеленая цена со скидкой + зачеркнутая старая цена + "-%"
• Кнопки: "Добавить в корзину" / "Удалить из корзины"
• Доставка: блок "Доставка" с иконкой (если storeStatus = true)

---

E-shop-1 vs E-shop-2 (различия в коде)

E-shop-1 (/public/shop-1/)

Файлы: index.html + assets/index-BkGjSHEH.js + assets/index-BpZAXjae.css

Функциональность (из анализа кода):

• Базовый интернет-магазин
• Список товаров в сетке
• Добавление в корзину через localStorage
• Отображение рейтингов (X / 5 звезд)
• Система скидок (зеленая цена + зачеркнутая)
• Статус "В наличии" / "Нет в наличии"

E-shop-2 (/public/shop-2/)

Файлы: index.html + assets/index-DDKlwFmR.js + assets/index-BpZAXjae.css

Дополнительная функциональность (из анализа кода):

• Расширенная корзина товаров
• Более сложная логика обработки товаров
• Дополнительные UI компоненты
• Улучшенная работа с состоянием

---

Области для тестирования

1. Функциональное тестирование

Управление товарами:

• ✅ Отображение карточек товаров
• ✅ Корректность данных: название, цена, рейтинг, описание
• ✅ Расчет скидки: (originalPrice - price) / originalPrice * 100
• ✅ Статус наличия: capacity > 0 → "В наличии", capacity = 0 → "Нет в наличии"

Корзина:

• ✅ Добавление товара в корзину (кнопка активна только при capacity > 0)
• ✅ Удаление товара из корзины
• ✅ Сохранение состояния корзины в localStorage
• ✅ Переключение кнопок "Добавить" ↔ "Удалить"

LocalStorage:

• ✅ Корректное сохранение данных корзины
• ✅ Восстановление корзины при перезагрузке страницы
• ✅ Формат данных в localStorage.getItem("shopdata")

2. UI/UX тестирование

Отображение элементов:

• ✅ Корректность макета карточек товаров
• ✅ Изображения товаров (placeholder или реальные)
• ✅ Цветовая схема: зеленые цены, зачеркнутые старые цены
• ✅ Бейджы скидок: "-X%" на зеленом фоне
• ✅ Иконки: звезды рейтинга, доставка

Адаптивность:

• ✅ Отображение на разных разрешениях экрана
• ✅ Responsive дизайн с Tailwind CSS
• ✅ Читаемость текста и размеры кнопок

Состояния кнопок:

• ✅ Активная кнопка "Добавить в корзину" (черная)
• ✅ Неактивная кнопка при capacity = 0 (серая, disabled)
• ✅ Кнопка "Удалить из корзины" (белая с красной границей)

3. Негативное тестирование

Граничные случаи:

• ⚠️ Товар с capacity = 0 (кнопка должна быть неактивной)
• ⚠️ Товары с отсутствующими полями (name, price, description)
• ⚠️ Некорректные цены (отрицательные, нулевые)
• ⚠️ Повреждение localStorage данных

Безопасность:

• ⚠️ XSS через названия товаров
• ⚠️ Манипуляции с localStorage через DevTools
• ⚠️ Переполнение корзины

4. Интеграционное тестирование

Взаимодействие компонентов:

• ✅ Синхронизация состояния корзины между компонентами
• ✅ Обновление кнопок при изменении корзины
• ✅ Корректная работа фильтров и поиска (если есть)

---

Тестовые сценарии

Основной happy path:

1. Открыть магазин
2. Найти товар с capacity > 0
3. Нажать "Добавить в корзину"
4. Убедиться, что кнопка изменилась на "Удалить из корзины"
5. Перезагрузить страницу
6. Убедиться, что товар остался в корзине

Негативные сценарии:

1. Попытка добавить товар с capacity = 0
2. Манипуляция с localStorage
3. Массовое добавление товаров
4. Работа с несколькими вкладками одновременно

Проверка валидации:

1. Корректность расчета скидок
2. Отображение "В наличии" vs "Нет в наличии"
3. Обработка missing/null данных

---

Известные ограничения

• Только frontend: Нет серверной логики, API, базы данных
• Статические данные: Товары захардкожены в минифицированном JS
• LocalStorage: Данные корзины хранятся только локально
• Минифицированный код: Сложность отладки из-за сжатого JS
• Нет форм оформления: Только управление корзиной
• Placeholder изображения: Возможно отсутствие реальных картинок товаров