Make it easy.

Куликов Никита

Frontend-разработчик

Упрощаем написание тестов в Angular

@kulikovv_n

Немного обо мне

4 года во фронтенде

Немного обо мне

4 года во фронтенде�

4 года в провайдерах инфраструктуры

Немного обо мне

4 года во фронтенде�

4 года в провайдерах инфраструктуры�

2 года в Selectel

Немного обо мне

Занимаюсь интерфейсами сервисов хранения данных в Облаке Selectel

4 года во фронтенде, 2 из них в Selectel

Немного обо мне

Занимаюсь интерфейсами сервисов хранения данных в Облаке Selectel

4 года во фронтенде, 2 из них в Selectel

Не люблю, когда код ломается в неожиданных местах

О компании

Selectel

Более 40 готовых инфраструктурных решений

Выделенные серверы готовых

и произвольных конфигураций

​

Облачные серверы �с моментальным запуском

​

Серверы с GPU

​

Экспериментальное железо

Серверы и вычисления

Облачные базы данных

​

Объектное хранилище

​

Файловое хранилище

​

Managed Kubernetes �и Container Registry

Облачная платформа

Сеть доставки контента (CDN)

​

Балансировщики нагрузки

​

Selectel Connect и сети L3 VPN

​

Облачный DNS

Организация сети

Публичное облако

​

Частное облако

​

Удаленные рабочие столы (VDI)

Облако на базе VMware

ML-платформа

​

Платформа обработки данных

​

Data Science & Analytical

Virtual Machine

ML и обработка данных

Аттестованный сегмент ЦОД

​

Соответствие 152-ФЗ

​

Защита от DDoS и WAF

Безопасность

Единая панель управления �и система биллинга

Документация к API �и база знаний

Базовая защита от DDoS �по умолчанию

Техническая �поддержка 24/7

Система управления ролями (IAM)

Немного про

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

• Все приложение состоит из модулей�
• Дают информацию для компиляции приложения

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

• Все приложение состоит из модулей�
• Дают информацию для компиляции приложения
• В них объявляются и импортируются другие Angular-сущности

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

• Все приложение состоит из модулей�
• Дают информацию для компиляции приложения
• В них объявляются и импортируются другие Angular-сущности
• Легкая и быстрая замена зависимостей во время тестирования

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

Все приложение состоит из модулей

• Реализовано Dependency Injection�
• Внедрение через конструктор

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

Все приложение состоит из модулей

• Реализовано Dependency Injection�
• Внедрение через конструктор
• Информация о зависимостях берется из декораторов или модулей

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

Все приложение состоит из модулей

Реализовано Dependency Injection

• Готовый инструментарий

​

• Jasmine и Karma - для написания и запуска тестов

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

Все приложение состоит из модулей

Реализовано Dependency Injection

• Готовый инструментарий

​

• Jasmine и Karma – для написания и запуска тестов
• TestBed – абстракция для unit-тестирования

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

Все приложение состоит из модулей

Реализовано Dependency Injection

• Готовый инструментарий

​

• Jasmine и Karma – для написания и запуска тестов
• TestBed – абстракция для unit-тестирования

Protractor – фреймворк для e2e тестирования от команды Angular

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

Все приложение состоит из модулей

Реализовано Dependency Injection

• Готовый инструментарий

​

• Jasmine и Karma – для написания и запуска тестов
• TestBed – абстракция для unit-тестирования

TestBed

TestBed

Управление конфигурацией

TestBed

Доступ к DOM-дереву тестируемого компонента

Управление конфигурацией

TestBed

Доступ к DOM-дереву тестируемого компонента

Управление конфигурацией

Доступ к инжектору зависимостей для работы с ними в тестовом runtime

TestBed не идеален

Конфигурация тестового набора

Постоянно растущая конфигурация тестового модуля

Постоянно растущая конфигурация тестового модуля

Захламление файла с тестами излишними декларациями моков

Высокий порог входа в API

​

Много ручной работы из-за недостатков API

​

​

Решаем все проблемы

Как решаем?

Вынести конфигурацию зависимостей в отдельные модули

Как решаем?

Вынести конфигурацию зависимостей в отдельные модули

Написать свои хелперы для повторяющихся участков

Как решаем?

Вынести конфигурацию зависимостей в отдельные модули

Написать свои хелперы для повторяющихся участков

Использовать сторонние библиотеки

< 1 МБ в несжатом виде

< 1 МБ в несжатом виде

≈ 100K загрузок в неделю

< 1 МБ в несжатом виде

≈ 100K загрузок в неделю

Активно поддерживается коммьюнити

DOM Testing Library

Spectator позволяет

• Упростить конфигурацию TestBed

​

• За счет фабрик, скрывающих boilerplate TestBed

Spectator позволяет

Упростить конфигурацию TestBed

• Сделать API взаимодействия с тестовым окружением проще

​

• Путем объединения и декорирования TestBed API в одном объекте, создаваемого фабрикой

Spectator позволяет

Упростить конфигурацию TestBed

Сделать API взаимодействия с тестовым окружением проще

• Устранить недостатки работы с DOM

​

• За счет применения DOM Testing Library

Что Spectator не решил

ng-mocks

ng-mocks

API для мока любых Angular-сущностей

ng-mocks

ng-mocks

ng-mocks

API для мока любых Angular-сущностей

Гибкая настройка заменяемых зависимостей

ng-mocks

ng-mocks

ng-mocks

ng-mocks

API для мока любых Angular-сущностей

Гибкая настройка заменяемых зависимостей

Глобальная настройка заменяемых зависимостей

Теперь мы можем

Теперь мы можем

Гибко управлять конфигурацией тестового набора – Spectator & ng-mocks

Теперь мы можем

Гибко управлять конфигурацией тестового набора – Spectator & ng-mocks

Использовать мощное и прозрачное API доступа к тестируемому компоненту – Spectator & DOM Testing Library

Теперь мы можем

Гибко управлять конфигурацией тестового набора – Spectator & ng-mocks

Использовать мощное и прозрачное API доступа к тестируемому компоненту – Spectator & DOM Testing Library

Управлять подменой зависимостей – ng-mocks

Остались вопросы?�Обращайтесь!

Куликов Никита

Frontend-разработчик

@kulikovv_n

selectel.ru��selectel

selectel

​