Тестовое задание по курсу Advanced Frontend

Single Page Application для интернет магазина

Общие Требования

1. Стек JS/CSS - любой.
2. Страница Списка Товаров – список товаров с разбиением по категориям.
3. Страница Деталей Товара - страница с подробным описанием товара.
4. Для проверки на элементы надо добавить data-test-id, с помощью которых выполняется поиск элементов (список ниже).

Дизайн

100% совпадения с дизайном не требуется и это никак не влияет на оценку качества

Список Товаров

• логотип @MyCompany не кликабельный;
• товары в 4 категориях, количество товаров в каждой категории может быть разное;
• для каждого товара в категории выводится только фотография, название, цена и описание в 1 строчку (обрезается ... в конце);
• при клике на название товара или картинку идет переход на страницу Деталей Товара;
• заголовок Категории не кликабельный.

Детали Товара

• логотип @MyCompany кликабельный и ведет на страницу Списка Товаров
• навигация (хлебные крошки):
  • элемент All products кликабельный и ведет на Список Товаров;
  • элемент Product Name не кликабельный;
• картинка товара шириной 2/3 экрана;
• справа от картинки товара распологается блок с названием товара, ценой и рейтингом;
• под картинкой товара распологается заголовок Description и под ним полное описание товара.

API

1. Для backend API магазина нужно использовать Fake Store API:
   • /products/{id} -> информация по конкретному продукту:

     {
       "id": 1,
       "title": "Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops",
       "price": 109.95,
       "description": "Your perfect pack for everyday use and walks in the forest. Stash your laptop (up to 15 inches) in the padded sleeve, your everyday",
       "category": "men's clothing",
       "image": "https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg",
       "rating": {
         "rate": 3.9,
         "count": 120
       }
     }

   • /products -> 20 продуктов.
   • /products/categories -> 4 категории товаров.
   • /img/{name} -> картинка продукта.

Аттрибуты data-test-id

Пожалуйста, внимательно добавляйте data-test-id, так как по этим аттрибутом будет осуществляться автоматическая проверка качества вашей работы. Аттрибуты статические и не требуют подстановки динамических данных.

1. Страница Списка Товаров должна содержать следующие data-аттрибуты:
   • логотип @MyCompany - data-test-id="Shop_Logo";
   • название магазина - data-test-id="Shop_Name";
   • название категории - data-test-id="Category_Name";
   • область клика перехода на страницу товара из списка - data-test-id="List_Item".
2. Страница Детали Товара должна содержать следующие data-аттрибуты:
   • логотип @MyCompany – data-test-id="Shop_Logo";
   • название магазина - data-test-id="Shop_Name";
   • навигация (хлебные крошки):
     • ссылка All Products - data-test-id="Navigation_All_Products";
     • текст с именем товара - data-test-id="Navigation_Product_Name";
   • фотография товара - data-test-id="Product_Picture";
   • название товара - data-test-id="Product_Name";
   • цена товара - data-test-id="Product_Price";
   • рейтинг товара - data-test-id="Product_Rating";
   • текст описания товара - data-test-id="Product_Description";

Сборка

1. Сборка должна запускать по команде npm run build.
2. Резульатат сборки лежит в папке dist и имеет как минимум один файл index.html.

Запуск тестов

Для проверки используется Github Actions, шаги сборки описаны в build.yml.

Для прогона тестов приложение заворачивается в docker и запускается на localhost:8080 через docker compose.

После запускаются UI тесты в headless режиме с помощью puppeteer. Для локального запуска в бразуере нужно запусть с флагом --headless=false:

# собираем приложение
$ npm install && npm run build
$ docker compose build
# запускаем в docker (доступно по адресу http://localhost:8080)
$ docker compose up -d
# собираем тесты
$ cd tests
$ npm install
# запускаем тесты в браузере
$ node index.mjs --url=http://localhost:8080 --headless=false

Прием задания

1. Создаете Fork этого репозитория.
2. Сделайте Single Page Application для интернет магазина c 2 страницами как описано выше.
3. После успешного прохождения тестов в вашем репозитории (вкладка Actions), создаете Pull Request в основной репозиторий (Pull requests -> New pull request), в названии Pull Request указываете ваше имя, (например Романов Алексей).