Порядок трудоустройства

• Вы отправили резюме или с вами связался наш HR.

• Получили ссылку на этот репозиторий.

  === Вы здесь ===

• Ознакомились с заданием и решили тестовую задачу, в течение недели получили обратную связь от HR.

• if всё 200, то пришли на очное собеседование, в течение недели получили обратную связь от HR.

• Вы на испытательном сроке от 1 до 2 месяцев. Тут мы смотрим на вас, а вы — на нас :)

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

1. Нельзя использовать готовые CLI или фреймворки типа Bootstrap, кроме раздела «Тестирование». Библиотеки для запросов и работы с localstorage разрешены.
2. Структура приложения:
   1. build — папка с готовой сборкой:
      1. index.html — файл с разметкой и обработчиками;
      2. index.js — набор скриптов для работы приложения;
      3. index.css — стили для работы приложения.
   2. src — папка с исходниками файлов:
      1. styles — папка/файлы со стилями;
      2. js — папка/файлы js;
      3. image — папка/изображения для страницы.
   3. webpack.config.js — конфигурация webpack 4 / 5.
   4. babel.gulp.js — конфигурация gulp(при необходимости).
   5. package.json — набор зависимостей приложения.
   6. .eslintrc — правила для линтера JS исходников.
   7. .stylelintrc — правила для линтера SCSS исходников.
   8. .prettier — правила форматирования кода.
3. Результат нужно разместить в публичном репозитории Gitlab / Github.
4. Предоставить ссылку HR-рекрутеру на публичный репозиторий.
5. Если есть вопросы, их нужно задать, до начала выполнения задания.
6. На выполнение задания отводится максимум 3 дня(24 часа).

Описание работы приложения Vue

Макет доступен по ссылке.

1. При загрузке приложения, пользователь попадает на «Шаг 1».
   1. Выполняется запрос с fake-базе(можно использовать любую базу/библиотеку), которая отдает коллекцию из N объектов АТС.
   2. Получаем коллекцию и выводим список АТС.
   3. Кнопка перехода на следующий шаг заблокирована.
2. Пользователь может выбрать только одну из АТС. Пункт "У меня нет АТС", считается отдельным пунктом.
   1. Выбранная АТС подсвечивается при помощи CSS стиля.
   2. Приложение должно запомнить выбор пользователя.
   3. Кнопка перехода на следующий шаг становится активна.
3. Пользователь нажимает на кнопку «Перейти к следующему шагу»:
   1. Отправляется ajax типа POST к fake-базе и получает всегда положительный(200) ответ .
   2. Пользователь попадает на «Шаг 2».
4. На «Шаг 2» пользователь выводит результат fake-ответа из пункта 3.1.
   1. В шапке изменяется текущий номер шага и заголовок.
   2. Выводим fake-данные из результата ответа в пункте 3.1.
5. Пользователь может изменить модель АТС на «Шаг 2»
   1. Пользователь может вернуться на «Шаг 1» нажав на «Подходящее решение».
   2. Пользователь может сменить АТС, отправляется запрос из пункта 3.1.
   3. В случае если пользователь сменил АТС на «Шаг 2» состояние приложения должно обновить его и на «Шаг 1». Смотри пункта 2.2.

Задание на конфигурацию

1. Подготовить конфигурацию webpack, которая будет собирать JS-файлы.
2. Подготовить конфигурацию для ESlint.
3. Подготовить конфигурацию для Stylelint.
4. Подготовить конфигурацию для Prettier.

Задание на верстку

1. Верстка должна быть выполнена по BEM, плюсом будет именование(block, block__element , block--modifier).
2. На странице должны присутствовать все мета отвечающие за SEO.
3. Страница должна содержать один из шрифтов: Roboto, Open Sans, Noto Sans.
4. Стили описаны при помощи препроцессора SCSS.
5. Адаптивность на усмотрение исполнителя, для проверки знаний, как это делается.

Задание на JS

1. Создать Vue приложение (2 или 3 версия).
2. Допускается использование библиотек для реализации задачи.
3. Реализовать логику которая описана в блоке «Описание работы приложения Vue»

Задание на тестирование

1. Написать минимум один Unit-test для проверки методов в приложения. Разрешено использовать любой фреймворк для тестов.
2. Написать три E2E-test, которые будут проверять работу интерфейса:
   1. Тест 1 — проверяет наличие, минимум одной АТС в DOM.
   2. Тест 2 — проверяет, что кнопка «Перейти к следующему шагу» становится активна, если выбрана хотя бы одна АТС.
   3. Тест 3 — проверяет, что после клика на кнопку «Перейти к следующему шагу», пользователь увидел «Подходящее решение», фактическая разметка в DOM.

Что будет проверяться?

1. Работу сборки и линтеров.
2. Реализацию верстки и ее соответствие макету.
3. Как реализована логика и какие библиотеки использовались для решения задачи.
4. Навыки работы с ajax и хранение данных в рамках приложения.
5. Как реализована структура коллекции с данными.
6. Можно ли масштабировать код, например добавив еще N шагов.
7. Работу тестов.

Не хотите делать тестовое задание?

Не проблема. Уже делали задачи похожие на эту — просто покажите код :)

Ого, видимо остались вопросы?

Сколько времени отведено на решение задачи?

На задачу отведено 3 дня. Middle сделает эту задачу за 16 часов. Да, да. Мы брали middla и проверяли.

Почему такое сложное задание?

Задание не сложное, оно позволяет проверить, действительно ли вам хватает навыков до middle. Ведь оклад вы просите не маленький ?:)

Мне заплатят за него?

Нет. Почему? Это тестовое задание.

А вдруг это реальная задача и вы хотите использовать мой код?

Мы не будем использовать ваш код, а только проверим навыки. Данная задача уже решена нашими джунами и это только ее маленькая часть.