Тестируем Angular приложение. Часть 1. Тестирование компонента (+ EventEmitter)

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

Вступление

По умолчанию, Angular предлагает средства для тестирования приложенния, такие как Karma, Jasmine, Protractor. В данной статье будем использовать связку из коробки Karma + Jasmine. Karma это так называемый тест раннер который позволяет нам настраивать то на каких устройствах или браузерах будут запускатся тесты и какие тестовые фреймворки и плагины, будут участвовать в тестах. Jasmine это BDD фрейворк для тестирования javascript кода.

Начальное приложение

Имеем обычное стартовое приложение my-app для примера с созданным компонентом Hello (в моем примере, ни app и hello компоненты не имеют предсоздаваемого автоматически файла .spec.ts). В корне нашего приложения имеется так же предсозданный файл karma.conf.js (создается автоматически при генерации приложения через Angular CLI). В нем находится конфиг нашего тест раннера. Подробно его разбирать в рамках статьи не будем. В кратце только скажу что здесь задаются настройки того, в каком браузере будет запускатся окно тест раннера (по умолчанию стоит Chrome), какие плагины подключать, и на каком порту запускать тест раннер (по умолчанию порт 9876). В src/app лежит наш тестируемый компонент Hello, который выглядит следующим образом:

import { Component, OnInit, Output, EventEmitter } from '@angular/core';  @Component({   selector: 'app-hello',   templateUrl: './hello.component.html',   styleUrls: ['./hello.component.scss'] }) export class HelloComponent implements OnInit {    @Output() colorEmitter = new EventEmitter<string>();    color: string = '';   //countries = [];    constructor() { }    ngOnInit(): void {   }    sayHello(name: any) {     return `Hello ${name}`;   }      giveLangCode() {     return ['ru', 'en', 'ua'];   }    setColor() {     this.color = 'Black';     this.colorEmitter.emit(this.color);   } }

Компонент простой и состоит из нескольких методов, первый sayHello принимает имя и возвращает строковое значение приветствия, второй giveLangCode возвращает массив значений. Третий метод setColor присваивает значение цвета переменной и «эмиттит» его значение.

Создание spec файла и запуск Karma

С компонентом определились, теперь создадим файл hello.spec.ts в папке с компонентом и добавим в него следующее содержимое:

import { HelloComponent } from "./hello.component"  describe('HelloComponent', () => {    let hello: HelloComponent;    });

Тут мы экпортировали наш тестируемый компонент Hello и добавили функцию обертку describe для нашего тестового набора а также объявили переменную hello для инициализации нашего компонента.

Теперь запустим Karma командой ng test. Откроется окно браузера с открытым тест раннером на порте 9876.

Так как сами тесты мы еще не добавили то и отчета об их прохождении, в окне не будет. Осталяем запущенным тест раннер и приступаем к написанию тестов.

Добавление тестов

Возвращаемся в наш файл hello.spec.ts и через конструкцию beforeEach добавляем инициализацию компонента для каждого теста (это создаст изолированность наших тестов друг от друга).

import { HelloComponent } from "./hello.component"  describe('HelloComponent', () => {    let hello: HelloComponent;    beforeEach(() => {     hello = new HelloComponent();   });    });

Затем через конструкцию it добавлем тест нашего первого метода sayHello

import { HelloComponent } from "./hello.component"  describe('HelloComponent', () => {    let hello: HelloComponent;    beforeEach(() => {     hello = new HelloComponent();   });    it('should say hello Tom', () => {     expect(hello.sayHello('Tom')).toBe('Hello Tom');   });  });

Тут все просто, тест вызывает метод sayHello и передает тестовое значение в качестве аргумента, затем проверяет что в ответе приходит то что должен возвращать метод.

Проверям окно тест раннера и наш тест должен появится в отчете с успешным статусом.

Теперь напишем второй тест для метода giveLangCode в котором проверим содержание всех трех значений возращаемого массива.

import { HelloComponent } from "./hello.component"  describe('HelloComponent', () => {    let hello: HelloComponent;    beforeEach(() => {     hello = new HelloComponent();   });    it('should say hello Tom', () => {     expect(hello.sayHello('Tom')).toBe('Hello Tom');   });    it('should country codes is ru en ua', () => {     const countries = hello.giveLangCode();     expect(countries).toContain('ru');     expect(countries).toContain('en');     expect(countries).toContain('ua');   });  });

Проверяем окно тест раннера и видим что второй тест тоже успешно пройден.

Дополнительно можно добавить еще проверки для переменных компонента которые объявляются вначале,такие как проверка значения и типа (toEqual, toBeInstanceOf). Более подробно можно почитать в документации к Jasmine.

Тест EventEmitter’a (бонус)

У нас остался не покрыт тестами, метод setColor. Сам метод просто задает значение переменной color, затем обращается к colorEmitter и передает родительским компонентам, значение переменной color. Напишем тест который проверит что действительно значение переменной передается «наверх» родителям.

import { HelloComponent } from "./hello.component"  describe('HelloComponent', () => {    let hello: HelloComponent;    beforeEach(() => {     hello = new HelloComponent();   });    it('should say hello Tom', () => {     expect(hello.sayHello('Tom')).toBe('Hello Tom');   });    it('should country codes is ru en ua', () => {     const countries = hello.giveLangCode();     expect(countries).toContain('ru');     expect(countries).toContain('en');     expect(countries).toContain('ua');   });    it('should color event is Black', () => {     let result = '';     hello.colorEmitter.subscribe(v => result = v);     hello.setColor();     expect(result).toBe('Black')   }); });

Тут тест вызывает наш эмиттер и подписывается на его значение, которое помещается в переменную result (объявили ее в начале теста, как пустую строку). Затем тест, вызывает метод setColor и проверяет что наш результат(result) изменился c пустой строки на то которое присваивается внутри метода setColor (в нашем случае ‘Black’).

Проверяем наш тест раннер и видим что наш тест прошел успешно. Таким образом видим что наш colorEmitter работает корректно.

Заключение

В этой статье мы расмотрели варианты тестирования компонента с методами, возвращающими различные типы данных и протестировали EventEmitter. В следующей части, займемся тестированием сервисов и форм.