Главная страница / Блог / Тестовые задания / Тестовое задание #3. Структура страницы

Тестовое задание #3. Структура страницы

Это тестовое задание рассчитано на начинающих frontend разработчиков. Целью задания является демонстрация того, как использование фреймворка может упростить процесс разработки веб-приложения, в частности, благодаря Component Based Architecture (CBA).

Все мы видели страницы, на которых есть хедер, футер, возможно сайдбар и непосредственно тело страницы. В то же время, в приложении могут быть  страницы без дополнительных элементов, например страница печати. Это подталкивает нас к тому, что должен быть способ создания структуры страницы из небольших, автономных модулей, каждый из которых может быть использован неоднократно и в разных местах приложения. Об этом собственно и гласит CBA.

Следовать принципам CBA без использования фреймворка можно, но хлопотно. Именно поэтому, выполнение тестового задания предусмотрено с использованием любого современного фреймворка, например, Angular, React, Vue.js. Основным заданием будет разработка набора компонентов для создания различных конфигураций страниц веб-приложения.

Требования

  • Создать следующие компоненты:
    • Хедер (header)
    • Футер (footer)
  • Каждый компонент должен быть разработан с учетом принципов переиспользования и расширяемости.
  • Создать страницу “Dashboard”с использованием компонентов header и footer.
  • Создать страницу для печати “Print” без использования компонентов header и footer.
  • Проверить возможность легкого изменения содержимого хедера и футера без изменения других частей приложения. В хедер можно добавить навигацию, а в футер блок “Контакты”
  • Испытать возможность расширения функциональности компонентов без изменения их основного кода. В хедер можно добавить кнопку Logout

Опционально – компоненты должны быть стилизованы и адаптивны для различных устройств.

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

Для проверки своей работы используйте следующие тестовые сценарии.

  • Проверьте отображения компонентов страницы «Dashboard»  согласно требованиям. Должен быть хедер и футер.
  • Проверьте отображения компонентов страницы «Print»  согласно требованиям. Только тело страницы без хедера и футера.
  • Убедится в возможности легкого изменения содержимого компонентов без изменения других частей приложения.
Russian
Прокрутить вверх