Це тестове завдання розраховане як на повних новачків, так і на тих, хто готується до інтерв'ю на 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 частини
- Відображення даних користувача під час завантаження сторінки:
- Поля форми повинні бути попередньо заповнені відомими даними користувача.
- Відображення мініатюри аватара та можливість завантажити нову аватарку:
- На сторінці має бути мініатюра поточного аватара користувача.
- Користувач повинен мати можливість завантажити нову аватарку.
- Обрізка завантаженої аватарки:
- При завантаженні нової картинки користувачеві має бути надана можливість обрізати її.
- Підтвердження зміни пароля:
- Повинне бути поле для введення нового пароля та друге поле для його підтвердження.
- Паролі в обох полях повинні співпадати для успішного підтвердження.
- Приховування пароля:
- Користувач повинен мати можливість приховати чи показати пароль у полі введення.
- Валідація email адреси:
- Email адреса, введена користувачем, має відповідати валідному формату.
- Відображення підтверджуючого повідомлення під час успішного редагування даних:
- У разі успішного редагування даних має з'явитися повідомлення, що підтверджує успішне виконання операції.
- Відображення повідомлення про помилку під час невдалого редагування даних:
- У разі невдалої спроби редагування даних з'явиться повідомлення про помилку, що інформує користувача про проблему.
Тестові сценарії backend частини
- Отримання даних користувача:
- Перевірка успішного одержання даних користувача з бази даних.
- Перевірка повернення правильних даних за запитом конкретного користувача.
- Перевірка обробки запиту на неіснуючого користувача.
- Редагування даних користувача:
- Перевірка успішного оновлення даних користувача у базі даних.
- Перевірте коректну валідацію переданих даних перед оновленням.
- Перевірка обробки запитів на оновлення даних для неіснуючого користувача.
- Валідація даних перед редагуванням:
- Перевірка валідації унікальності електронної пошти користувача.
- Перевірте валідацію нового пароля, щоб він відрізнявся від поточного.
- Збереження аватара користувача:
- Валідація зображення відповідно до вимог.
- Перевірка успішного збереження завантаженої аватарки на сервері.
- Перевірка коректного шляху до збереженої аватари у базі даних.
- Обробка помилок:
- Перевірка обробки помилок під час роботи з базою даних.
- Перевірка повернення відповідних HTTP статусів та повідомлень про помилки у разі виникнення проблем при обробці запитів від фронтенду.