Tестовое задание библиотека Toast

Содержание

• Техническое задание
• Используемые технологии
• Структура проекта
• Тестирование
• Как начать
• Полезные ссылки

Техническое задание

Необходимо реализовать Toast библиотеку Javascript, для представления не блокирующих уведомлений . Цель состоит в том, чтобы создать базовую библиотеку, которую можно настраивать и расширять.

Необходимый функционал:

• Показать уведомление.
• Возможность устанавливать положению уведомления.
• Возможность устанавливать тип уведомления (уведомления об успехе, ошибке, оповещение и т.д.).
• Возможность устанавливать длительность показа уведомления.
• Возможность задавать заголовок и описание уведомления.
• Возможность устанавливать отступы уведомления.
• Возможность изменять цвет типа уведомлений.
• Возможность изменять анимацию появления и исчезновения.

Дополнительный функционал:

• Возможность "смахивать" уведомления в сторону для быстрого закрытия.
• Показ до 3 уведомлений одновременно.

Пример графического представления:

Ссылка на макет: Макет "Toast". Также его можно найти в папке doc c расширением .xd для программы Adobe XD.

Также проект предполагает:

• Разделить библиотеку на два основных компонента: представления и логики. Для реализации логики приложения необходимо использовать порождающий паттерн программирования "Одиночка", который гарантирует, что у класса есть только один экземпляр, и предоставляет к нему глобальную точку доступа (см. подробнее паттерн Одиночка). При помощи паттерна создать сервисный класс, в котором вы будете задавать конфигурацию и вызывать уведомление. Для реализация представления необходимо использовать react portals.

• Настроить конфигурации babel, eslint.

• Подключить и настроить бандлер Rollup для сборки проекта в библиотеку.

• Подключить и настроить Strorybook для проверки работоспособности вашей библиотеки.

• Обработку ошибок через паттерн Error Boundaries

• Проверку типов в React компонентах, передаваемых параметров и подобных объектов.

• Использование алиасов для импортирования файлов.

Используемые технологии

Для react

• node.js - программная платформа, основанная на движке V8 (транслирующем JavaScript в машинный код).
• babel - транспайлер, преобразующий код из одного стандарта в другой.
• eslint - линтер для JavaScript кода.
• yarn - менеджер пакетов.
• rollup - сборщик ES-модулей.
• stortbook - инструмент, используемый для разработки компонентов пользовательского интерфейса в изоляции.
• react - JavaScript-библиотека для создания пользовательских интерфейсов.
• prop-types - набор валидаторов, которые могут быть использованы для проверки получаемых данных.
• styled-components - система стилизации react компонентов.
• cypress — e2e тестирование для веб приложений.

Для react native

Will be soon...

Структура проекта

Структура проекта должна быть реализована в том же стиле, что и в первом тестовом задании (см. Структура проекта).

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

Реализовать e2e тестирование c полным покрытием функционала приложения:

• Сервис для конфигурации Toast-компонента.
• Графическое (компонент модуля и т.д.)

Как начать

Эта инструкция поможет вам сделать копию проекта и запустить его на вашей локальной машине для разработки и тестирования.

React/ReactNative

Установка

Для того чтобы получить шаблон проекта, необходимо сделать следующее:

1. Зарегистрировать аккаунт в github.
2. Получить доступ к репозиторию с шаблоном.
3. Импортировать шаблон в свой репозиторий.
4. Склонировать репозиторий на свою локальную машину.

Полезные ссылки

React

Rollup

Storybook

Eslint

Babel

Тестирование Cypress

Тестирование Detox

Styled-components