Front-end

Задача для собеседования Front-end

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

1. Вы отправили резюме или с вами связался наш HR.
2. Получили ссылку на этот репозиторий.

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

3. Ознакомились с заданием и решили тестовые задачи, в течение недели получили обратную связь в виде issues в своём репозитории от разработчиков и итоговый ответ от HR в почте или по телефону.
4. Если всё ок, то пришли на очное собеседование, в течение недели получили обратную связь от HR.
5. Если всё ок, то вы на испытательном сроке от 1 до 2 месяцев. Тут мы смотрим на вас, а вы — на нас :)
6. PROFIT!

Тестовое задание

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

1. Написать конфигурацию webpack, которая собирает скрипт для страницы.
2. Написать конфигурацию gulp, которая собирает scss стили для страницы.
3. Подключить линтер для стилей.
4. Подключить линтер для JS.
5. Конфигурация должна содержать build и dev сборки, где build — это минифицированный код.
6. Структура файлов:
   • src — исходники всех файлов(scss — исходники стилей, js — исходники js, img — картинки\иконки\другая графика).
   • webpack.config.js — конфигурация webpack.
   • babel.gulp.js — конфигурация gulp.
   • build — результат конечного варианта, его мы и будем смотреть.
   • dev — результат для dev разработки.
   • package.json — набор зависимостей.
   • .eslintrc.json — правила для линтера JS.
   • .stylelintrc — правила для линтера CSS\SCSS.
7. Разместить результаты на Github.
8. Предоставить ссылку на репозиторий.
9. Если остались вопросы, пожалуйста, задайте их до старта выполнения задания.

Задание Вёрстка

1. Выполняем семантическую вёрстку «Шаг 1» и «Шаг 2» по методологии BEM.
2. Добавляем на страницу всё необходимое для SEO.
3. Подключаем шрифты любым удобным способом.
4. Используем препроцессор SCSS для стилей и импортов.
5. Адаптивность делать не нужно, ширина страницы фиксирована.

Ссылка на макет

Задание JS

Шаг 1

1. Создать Vue-приложение (экземпляр).
2. Создаем источник демо-данных. Можно использовать любой способ на ваше усмотрение.
3. Делаем ajax-запрос для получения списка АТС. После получения данных выводим список АТС.
4. Реализуем метод, который позволяет выбрать только один вариант из списка и запоминает его. При обновлении страницы, выводится последний выбранный вариант. При повторном клике выбор отменяется.
5. Реализуем метод, который блокирует кнопку перехода к «Перейти к следующему шагу», если АТС не выбрана.
6. Реализуем метод, который отправляет ajax-запрос с выбранной АТС, по клику на кнопку «Перейти к следующему шагу».
7. Получив демо-ответ об успехе отправки выбранной АТС, переключаемся на «Шаг 2».

Шаг 2

1. При показе представления «Шаг 2», выполняем ajax-запрос и получаем демо-ответ по выбранной АТС.
2. При смене «Модель АТС» на втором шаге выбор на «Шаг 1» та же должен обновиться.
3. Реализуем метод, который позволяет вернуться на «Шаг 1», кликнув на «Подходящие решения».

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

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

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

1. Требования, которые описаны в задании.
2. Соответствие вёрстки дизайну.
3. Как реализована логика и какие библиотеки вы использовали для решения задачи.
4. Можно ли ваш код масштабировать, например, добавив ещё один шаг.

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

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