Тестовое задание #2. Редактирование профиля

Это тестовое задание рассчитано как для полных новичков, так и для тех, кто готовится к интервью на junior позицию.

В рамках этого тестового задания вам предстоит создать страницу редактирования профиля пользователя. Пользователь должен иметь возможность отредактировать своё имя, фамилию, аватарку, email и пароль. Хотя настоящие тестовые задания могут содержать более обширные условия, этот пример может быть включен в список заданий, которые вам могут предложить выполнить перед собеседованием.

Вы можете реализовать либо frontend, либо backend для выполнения части тестового задания, в зависимости от вашего профиля. Если вы нацелены на frontend, вы можете использовать фейковый бекенд, например, с помощью пакета json-server, и сфокусироваться исключительно на клиентской части. В случае, если вы ориентированы на backend, вы можете разработать только API и проверить его работу с помощью Postman.

Чтобы выполнить задание целиком, требуется разработать как frontend, так и backend части приложения, которые будут взаимодействовать друг с другом через API. Фронтенд будет отправлять запросы на получение и изменение данных пользователя, в то время как бэкенд обрабатывает эти запросы, проводит проверку данных, взаимодействует с базой данных и возвращает соответствующие ответы.

Так как тестовое задание рассчитано на начальный уровень, подтверждение email адреса при его изменении делать не нужно. То есть email адрес выступает в роли имени пользователя.

Требования к frontend части

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

• Страница редактирования профиля:
  • Страница должна иметь форму с полями для ввода данных пользователя. При открытии страницы, поля формы предварительно заполнены известными данными о пользователе
  • На странице должна отображаться миниатюра аватара пользователя, также должна быть возможность загрузить новую аватарку. При загрузке новой картинки необходимо дать пользователю возможность обрезать ее. Требования для валидации изображения описаны в соответствующей главе, ниже.
  • Для изменения пароля необходимо подтверждение (второе поле и пароли из обоих должны совпадать). Пароль в поле видно только в случае нажатие на иконку глаза.
  • Email адрес должен иметь валидный формат.
  • При успешном редактировании данных на экране появляется подтверждающее сообщение.
  • При неудачном редактировании данных на экране появляется сообщение об ошибке.
• Необходимо написать unit-тесты для компонентов, осуществляющих валидацию данных.

Требования к backend части

• Бэкенд должен быть реализован на любом современном языке программирования (например, Node.js, Python, Java).
• Необходимо использовать безопасные методы хеширования паролей.
• Бэкенд должен взаимодействовать с базой данных для сохранения и чтения данных о пользователях. Выбор конкретной базы данных остается на ваше усмотрение, как вариант — используйте SQLite.
• Реализация эндпоинтов:
  • Реализовать эндпоинты для получения и редактирования данных пользователя, которые будут обрабатывать запросы от фронтенда и взаимодействовать с базой данных.
  • Перед редактированием, провалидировать переданные данные. Электронная почта должна быть уникальной, новый пароль должен отличаться от текущего. Требования для валидации изображения описаны в соответствующей главе, ниже.
  • Аватарка пользователя должна сохраняться в папке на сервере, а путь к ней  в БД.
• Бэкенд должен обеспечивать обработку возможных ошибок при работе с базой данных или при обработке запросов от фронтенда, возвращая соответствующие HTTP статусы и сообщения об ошибках.
• Необходимо написать unit-тесты для функций, обрабатывающих запросы на редактирование пользовательских данных.

Требования по валидации изображения

Размер файла до 1мб, разрешение 200×200 пикселей. Рекомендуется принимать изображения в форматах JPEG, PNG или GIF.

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

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

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

1. Отображение данных пользователя при загрузке страницы:
   1. Поля формы должны быть предварительно заполнены известными данными о пользователе.
2. Отображение миниатюры аватара и возможность загрузить новую аватарку:
   1. На странице должна быть миниатюра текущего аватара пользователя.
   2. Пользователь должен иметь возможность загрузить новую аватарку.
3. Обрезка загруженной аватарки:
   1. При загрузке новой картинки пользователю должна предоставляться возможность обрезать ее.
4. Подтверждение при изменении пароля:
   1. Должно быть поле для ввода нового пароля и второе поле для его подтверждения.
   2. Пароли в обоих полях должны совпадать для успешного подтверждения.
5. Скрытие пароля:
   1. Пользователь должен иметь возможность скрыть или показать пароль в поле ввода.
6. Валидация email адреса:
   1. Email адрес, введенный пользователем, должен соответствовать валидному формату.
7. Отображение подтверждающего сообщения при успешном редактировании данных:
   1. При успешном редактировании данных должно появиться сообщение, подтверждающее успешное выполнение операции.
8. Отображение сообщения об ошибке при неудачном редактировании данных:
   1. При неудачной попытке редактирования данных должно появиться сообщение об ошибке, информирующее пользователя о проблеме.

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

• Получение данных пользователя:
  • Проверка успешного получения данных пользователя из базы данных.
  • Проверка возврата правильных данных при запросе конкретного пользователя.
  • Проверка обработки запроса на несуществующего пользователя.
• Редактирование данных пользователя:
  • Проверка успешного обновления данных пользователя в базе данных.
  • Проверка корректной валидации переданных данных перед обновлением.
  • Проверка обработки запроса на обновление данных для несуществующего пользователя.
• Валидация данных перед редактированием:
  • Проверка валидации уникальности электронной почты пользователя.
  • Проверка валидации нового пароля, чтобы он отличался от текущего.
• Сохранение аватара пользователя:
  • Валидация изображения согласно требованиям.
  • Проверка успешного сохранения загруженной аватарки на сервере.
  • Проверка корректного пути к сохраненной аватарке в базе данных.
• Обработка ошибок:
  • Проверка обработки ошибок при работе с базой данных.
  • Проверка возврата соответствующих HTTP статусов и сообщений об ошибках при возникновении проблем при обработке запросов от фронтенда.