перевод Introduction to Testing Ionic 2 Applications with TestBed

Создание автоматический тестов для вашего приложения это хороший путь улучшить качество вашего кода и защититься от ухудшения кода во время обновлений и создания нового функционала.

В Javascript окружений одним из лучших фреймворков для написания тестов является Jasmine а фреймворк для запуска тестов Karma. То же самый выбор сделан и для Ionic 2, но Angular 2 представил концепцию TestBed. Так как Ionic 2 сделан на основе Angular 2 то мы тоже можем использовать TestBed.

Базовая концепция TestBed заключается в том что вы можете использовать независимые модули, такие как @NgModule которые описываются в файле app.module.ts . Это позволяет использовать изолированные тестовые среды для компонентов которые вы тестируете. Юнит тесты фокусируются на тестирование отдельных кусков кода, а не на взаимодействие их между собой (для этого существуют другие типы тестов), так что изолированная позволяет избавиться от любых внешних зависимостей.

До того как мы пойдем дальше, взглянем на то как TestBed выглядят:

Я опишу все что здесь происходит более подробно чуть позже, но мне бы хотелось чтобы вы сейчас уже получили представления о том как выглядят TestBed.

Вам не всегда нужно использовать TestBed при создание юнит тестов, вы можете тестировать ваши провайдеры и сервисы без них. Что кстати и рекомендуется. Если вам нужно узнать больше о Jasmine и Karma можете почитать How to Unit Test an Ionic 2 Application

Я собираюсь в краткой форме рассказать о TestBed, но если вам нужно почитать об этом больше то почитайте это руководство

  • секция beforeEach будет выполнятся перед каждым из тестов. afterEach будет запущена после выполнения кадого теста.
  • Мы можем использовать configureTestingModule для настройки тестового для компонента включая imports и providers
  • Мы можем использовать createComponent для создания экземпляров компонентов для тестирования
  • Нам нужно использовать compileComponents когда нам нужно асинхронно скомпилировать такие компоненты которые имеют внешние шаблоны (это те которые загружаются через templateUrl а не через template)
  • Для последовательного выполнения кода ввиде цепочки кусков кода, после завешения compileComponents используется then()
  • Component Fixture объект в тестовом окужение используется для создания тестируемых компонентов.
  • Определений измений (Change detection) в случае использования двухстороних связий по умолчанию не включенно при TestBed. Вам нужно вызвывать fixture.detectChanges() для определения изменений в данных. Так же существует возможность настроить автоматическое определения изменений для тестов.

Вам не обязательно сейчас понимать все описание термины прямо сейчас. Рассмотрим их работу на основе примеров чуть позже.

1. Генерация нового Ionic 2 приложения

запустите следующую команду для создания нового приложения:

после завершения генерации зайдите в каталог приложения:

2. Настройка тестирования

Для использования TestBed с Ionic 2 нам надо будет пройти несколько дополнительных шагов.

2.1 Установка зависимостей

Запустите следующие команды для установки зависимостей:

2.2 Настройка Karma

Нам нужно настроить конфигурационный файл для Karma CLI

Запустить следующую команду и примете все настройки по умолчанию:

измените karma.conf.js следующим образом:

2.3 Настройка Angular CLI и настройка тестового окружения

Создайте файл следующий файл в корневой папке вашего проекта angular-cli.json:

Создайте папку внутри каталога src с названием environments.
Создайте файл src/environments/environment.prod.ts со следующим содержанием:

Создайте файл src/environment/environment.ts со следующим содержанием:

2.4 Настройка Mocks и Polyfills

Mocks файлы используются для создания фейковых, упрощенных версий реальных классов. При тестирование они используются для того что бы избежать использование каких нибудь сложных ресурсоемких классов.

Создайте файл src/mocks.ts и добавте в него следующее содержимое:

Для чего нужны Mock классы. Если для примера взять PlatformMock, то это имитация сервиса Platform обеспечиваемая Ionic. Реальный сервис Platform имеет более сложный код который и требует интеграцию с реальным мобильным устройством, а имитация только использует promise для возвращения данных. Это позволит нам тестировать код который использует Platform, при этом сохраняя его асинхронную природу вызовов.

Создайте файл src/polyfills.ts и добавте следующее содержимое:

2.5 Настройка конфигурации тестов

Создайте файл src/test.ts со следующим содержимым:

Создайте файл src/tsconfig.test.json и добавте следующее содержимое:

2.6 Добавление команды test

Для того что бы мы могли запустить тестирование нам нужно создать команду запуска процесса тестирования

В файл package.json добавте в раздел scripts следующую команду:

Сейчас запустите в командной строке процесс тестирования:

Вы должны будете увидеть что то подобное:

3. Создание теста для корневого компонента

При текущей конфигурации тестирования, любые файлы которые имеют в название spec рассматриваются как тестовые файлы.

Мы собираемся создать тест для корневого компонента, для этого нам нужно создать файл с именем app.spec.ts в том же каталоге где находиться app.component.ts.

Содержимое src/app/app.spec.ts:

В describe описываем тест и так же мы даем название нашему тесту «Component: Root Component». Внутри теста мы добавили блоки beforeEach. В первом мы сконфигурировали TestBed с нужными зависимостями которые нужны компоненту. Так же мы использовали параметр async который позволяем использовать асинхронный метод compileComponents. Второй блок запуститься как только завершится TestBed конфгурация. В нем мы создаем ссылку на fixture и ссылку на компонент который мы будем тестировать сохраняя ее в переменной comp. Затем в блоке afterEach мы очищаем все переменные.

Как я заметил раньше, beforeEach будет запущен до запуска каждого теста а afterEach запуститься после запуска каждого теста, сам процесс будет следующим:

  1. Создание TestBed тестового окружения
  2. Настройка ссылок
  3. Запуск теста ‘is created’
  4. Удаления ссылок
  5. Создание TestBed тестового окружения
  6. Настройка ссылок
  7. Запуск тест ‘initialises with a root page of HomePage’
  8. Удаления ссылок

Наши два теста достаточно просты. Первый тест просто удостоверяется что fixture и comp созданы. Второй тест проверяет что наш компонент имеет переменную rootPage и что ее содержимое компонент HomePage.

Если вы запустите npm test, то увидете что то типа:

4. Создание теста для Home Page

Создайте файл src/pages/home/home.spec.ts со следующим содержимым:

В основном этой такой же тест как мы создали раньше, кроме того что мы добавили ссылки DebugElement и HTMLElement и третий тест немного более сложный чем другие.

Эта страница предоставляем возможность изменения title страницы и мы хотим протестировать это. Что бы сделать это нам нужно проверить две вещи:

  1. Определить что переменная title изменилась
  2. Что произошли изменения в DOM

Для это мы создали ссылку на DOM элемент используя CSS селектор ion-title. Изменили title функцией changeTitle, а затем вызвали detectChanges() для определения изменений. Помните что по умолчанию в тестах TestBed отключен механизм определения изменений и если вы его не запустите ваш тест никогда не завершится успешно. Затем мы проверяем полученый результат.

Если вы запустите команду npm test то должны увидеть что то типа такого:

Давайте исправим это. Измените src/pages/home/home.ts следующим образом:

Так же нам надо внести изменения в src/pages/home/home.html:

Теперь результат тестов должен быть таким:

В завершение

В этой заметки мы лишь коснулись использование TestBed для тестирования Ionic 2 приложений. Существует различные виды тестов и подходы к тестированию. О некоторых из них мы расскажем в другие наших заметках.

 

 

 

It's only fair to share...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInShare on VK

2 thoughts on “Введение в тестирование приложений Ionic 2 с помощью TestBed

  1. Привет, а вы пробовали этот пример запускать? Я читал оригинал у Джоша в блоге и тут же все делал вживую. И у меня все сломалось на шаге номер три с ошибкой «No provider for StatusBar».

    Я только начал знакомство с Ionic2 и Angular2 и не очень то понимаю, что оно от меня хочет.

Comments are closed.