Тестовое задание на Angular. Введение.
В данном цикле статей рассмотрим написание тестового задания на Angular с использованием лучших практик. Будут рассмотрены основные нюансы при разработке приложения, а также сделаны акценты на ключевые моменты, на которые обычно смотрят ревьюеры.
В качестве тестового задания возьмем следующее:
“Разработать небольшое приложение, где пользователю показывается карта; на домах расставлены точки (пины). При клике на пин, нужно отобразить информацию о доме. Должен быть функционал добавления пина с соответствующей информацией, а также необходимо реализовать удаления пина. Данные хранить в localStorage.”
Прочитав тестовое задание можно прийти к выводу, что задача представляет собой реализацию части функционала Airbnb или Booking.
Исходя из тестового задания, будет реализована небольшую часть гиганта бронирования жилья — Airbnb. В качестве UI будет использоваться клиентская часть Airbnb, а админ панель реализована с помощью стандартных компонентов Angular Material.
Для выполнения задания, необходимо:
- Создать клиентский интерфейс, где можно просматривать доступные варианты жилья, а также при клике на понравившейся вариант, нужно отображать полную информацию об объекте.
- Приложение должно реализовывать как минимум два экрана: мобильная версия и версия для PC.
- Для редактирования вариантов нужно реализовать “микро” админ панель, которая позволит добавлять и удалять варианты, которые должны храниться в localStorage.
- Все компоненты, сервисы и другие части приложения (pipe’ы, directive’ы, canActive’ы, …) должны иметь unit тесты. Важно отметить, что обязательно должна тестироваться связка JS + HTML, где в данном случае подразумевается тестирование логики в шаблонах, при изменении данных в Angular компоненте.
С технической стороны, в проекте должны быть:
- Механизмы по работе с данными, в частности реализация Redux с помощью любой из реализаций в Angular;
- Современные средства тестирования, в частности использования Jest или Karma;
- Настроены современные средства проверки и рефакторинга кода (eslint и prettier);
- Использован git репозиторий, в котором бы хранилась вся история разработки приложения.
Оглавление
- Настройка базового приложения
- Настройка базовых стилей и Angular Material
- Настройка локализации
- Настройка Unit тестирования с помощью Jest
- Создание основного лейаута
- Добавление библиотек для упрощения тестирования
- Создание модулей и компонентов
- Создание базовых интерфейсов
- Создание и управление localStorage’ем
- Установка redux и создание root store
- Создание логгера
- Использование localStorage
- Использование Ngrx State
- Работа с данными из State
- Создание lazy страницы
- Добавление google maps
- Создание State для бронирования варианта
- Создание UI kit для приложения
- Создание страницы бронирования
- Создание страницы апартаментов
- Работа с формами
- Навигация в приложении
- Создание admin лейаута
- Создание страницы в админ панели
- Тестирование сервисов
- Тестирование компонентов
- Заключение
Все тестовое задание было разделено на несколько независимых модулей, где была представлена реализация частей приложения.
Первые четыре статьи (Настройка базового приложения, Настройка базовых стилей и Angular Material, Настройка локализации, Настройка Unit тестирования с помощью Jest) посвящены настройке базового окружения и настройки приложения для комфортной работы.
Статьи с 5 по 8 (Создание основного лейаута, Добавление библиотек для упрощения тестирования, Создание модулей и компонентов, Создание базовых интерфейсов) вводят читателя в основы разработки приложения на Angular. Создается базовый лейаут и закладывается структура приложения.
Статья 9 (Создание и управление localStorage’ем) знакомит читателя с созданием сервисов в Angular и объясняет основные нюансы.
Статья 10 (Установка redux и создание root store) приводит пример подключения Redux в Angular, а статья 13 и 14 (Использование Ngrx State, Работа с данными из State) показывает как его использовать.
Статья 16 (Добавление google maps) показывает как использовать “внешнее” API при работе с Angular.
Статьи с 17 по 20 (Создание State для бронирования варианта, Создание UI kit для приложения, Создание страницы бронирования, Создание страницы апартаментов) показывают на практике создание сложных компонентов, где много верстки и сервисов для реализации бизнес логики.
Статья 21 (Работа с формами) знакомит читателя с формами в Angular, где приводится пример реализации формы с использованием Angular Forms.
Статья 22 (Навигация в приложении) рассматривает концепт унификации навигации в Angular.
Статьи 23 и 24 (Создание admin лейаута, Создание страницы в админ панели) посвящены созданию админ панели и управлению сущностями.
Последние две статьи 25 и 26 (Тестирование сервисов, Тестирование компонентов) посвящены тестированию в Angular, где рассматриваются базовые механики тестирования.
В заключении будет краткий обзор проделанной работы.
Ссылки
Следующая статья — Настройка базового приложения.
Все исходники на github/fafnur/barinb.
Группа в Medium: https://medium.com/fafnur
Группа в Vkontakte: https://vk.com/fafnur
Группа в Facebook: https://www.facebook.com/groups/fafnur/
Telegram канал: https://t.me/f_a_f_n_u_r
Twitter: https://twitter.com/Fafnur1
LinkedIn: https://www.linkedin.com/in/fafnur
