Тестируем Angular приложение. Часть 2. Тестирование сервиса

В прошлой статье, я описывал как тестировать компонент. Теперь же коснемся вопроса тестирования сервиса.

Вступление

В данном примере будем использовать так же, инструменты идущие из «коробки», такие как Karma и Jasmine.

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

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

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

import { Component, OnInit } from '@angular/core'; import { CommentsService } from '../shared/comments.service';  @Component({   selector: 'app-comments',   templateUrl: './comments.component.html',   styleUrls: ['./comments.component.scss'] }) export class CommentsComponent implements OnInit {   comments: any[] = [];      constructor(private service: CommentsService) {}    ngOnInit(): void {     this.service.getComments().subscribe(c => {       this.comments = c;     });   }      add(text: string) {     const comment = {text};     this.service.create(comment).subscribe( c => {       this.comments.push(c);     }, err => this.message = err);   } }

Наш компонент «инжектирует» в конструктор, сервис CommentService а также создает переменную comments которая является массивом в который будут помещаться все наши комментарии. При инициализации компонента, в шаге ngOnInit вызывается из сервиса, метод getComments, на результат которого мы подписывается и кладем в comments, результат вызова.
Так же присутствует метод add, который принимает в себя текст комментария и вызывает внутри себя метод create из сервиса, с помощью которого создает новый комментарий и передает его в массив comments.

Рассмотрим сервис CommentsService который лежит в папке shared:

import { Injectable } from '@angular/core'; import {HttpClient} from '@angular/common/http'; import { Observable } from 'rxjs';  @Injectable({   providedIn: 'root' }) export class CommentsService {    constructor(private http: HttpClient) {}    create(comment: any): Observable<any> {     return this.http.post(``, comment);   }    getComments(): Observable<any[]> {     return this.http.get<any[]>(``);   } }

Сервис принимает в конструктор, HttpClient и имеет два метода create и getComments которые отправляют POST и GET запросы. Запросы имеют пустое поле url так как по сути являются «моковыми» и наше тестирование не выходит за рамки классов.

Создание spec файла

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

import { CommentsComponent } from './comments.component'; import { CommentsService } from '../shared/comments.service';  describe('CommentsComponent', () => {   let component: CommentsComponent;   let service: CommentsService;  });

Тут мы экспортировали наш тестируемый компонент CommentsComponent и сервис CommentsService, необходимый для работы нашего компонента. Также добавили обертку describe для нашего тестового набора и также объявили переменные component и service для инициализации компонента и сервиса в тестах.

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

Отчет пустой, так как мы еще не добавили ни одного теста. Приступим к их написанию.

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

Открываем наш файл comments.component.spec.ts и добавляем конструкцию beforeEach в которой пропишем инициализацию нашего сервиса и компонента, при каждом запуске теста, что создаст изолированность для наших тестов. Также сервису необходимо передавать HttpClient так как он принимает его в качестве параметра. Так как нам не нужно делать физические http-запросы (мы тестируем только код, а не api), мы сделаем «шпиона» для HttpClient, с помощью метода createSpyObj в Jasmine, и передадим его сервису.

import { CommentsComponent } from './comments.component'; import { CommentsService } from '../shared/comments.service';  describe('CommentsComponent', () => {   let component: CommentsComponent;   let service: CommentsService;      beforeEach(() => {     const spyHttp = jasmine.createSpyObj('HttpClient', { post: of({}), get: of({}) })     service = new CommentsService(spyHttp);     component = new CommentsComponent(service);   });    });

Далее через конструкцию it добавим тест на то что наш в нашем компоненте вызывается метод getComments в момент его инициализации (ngOnInit):

import { CommentsService } from '../shared/comments.service'; import { of, EMPTY } from 'rxjs' import { CommentsComponent } from './comments.component';  describe('CommentsComponent', () => {   let component: CommentsComponent;   let service: CommentsService;    beforeEach(() => {     const spyHttp = jasmine.createSpyObj('HttpClient', { post: of({}), get: of({}) })     service = new CommentsService(spyHttp);     component = new CommentsComponent(service);   });    it('should call getComments when ngOnInit', () => {     const spy = spyOn(service, 'getComments').and.callFake(() => {     return EMPTY;   });    component.ngOnInit();   expect(spy).toHaveBeenCalled();   }); });

Тут мы «замокали» метод getComments (т.е. следим за вызовом этого метода), с помощью метода spyOn и положили все в переменную spy. Если мы будет вызывать реальный метод getComments то мы получим ошибку так как url у нас пустой. Собственно это нам и не нужно так как мы не тестируем api в данном случае.

Установив «слежку» за методом, мы можем им управлять. Для этого мы вызываем метод callFake в который передаем колбек. Колбек должен нам вернуть какой либо observable, согласно нашему методу getComments. В данном случае нам не важно что он будет возвращать, поэтому в return ставим константу EMPTY которую импортируем из rxjs.

Затем мы обращаемся к компоненту и вызываем у него метод ngOnInit. Далее ставим ожидание того что наш spy (там наш замоканный метод getComments) был вызван, при вызове метода ngOnInit в компоненте, проверяя это с помощью метода toHaveBeenCalled.

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

Теперь добавим второй тест, который проверит что переменной comments, в компоненте, присвоились какие либо данные в момент инициализации компонента. Для этого добавим следующий код:

describe('CommentsComponent', () => {   let component: CommentsComponent;   let service: CommentsService;    beforeEach(() => {     const spyHttp = jasmine.createSpyObj('HttpClient', { post: of({}), get: of({}) })     service = new CommentsService(spyHttp);     component = new CommentsComponent(service);   });    it('should call getComments when ngOnInit', () => {     const spy = spyOn(service, 'getComments').and.callFake(() => {       return EMPTY;     });      component.ngOnInit();      expect(spy).toHaveBeenCalled();   });    it('should update comment length after ngOnInit', () => {     const testComments = [1, 2, 3, 4]     spyOn(service, 'getComments').and.returnValue(of(testComments))      component.ngOnInit();      expect(component.comments.length).toBe(testComments.length);   });  });

Во втором тесте, мы создали переменную testComments с массивом значений. Так же используем метод spyOn в который передаем getComments и добавляем метод returnValue так как теперь мы будем возвращать уже не пустой observable, а с массивом comments. Для этого добавим метод of из rxjs.

Затем аналогично обращаемся к компоненту и вызываем у него метод ngOnInit. Далее добавляем ожидание того что наша переменная comments в компоненте получила значения из testComments при инициализации компонента. Следовательно наш метод getComments отработал правильно.

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

Ну и добавим теперь тест добавления комментария.

import { CommentsService } from '../shared/comments.service'; import { of, EMPTY, throwError } from 'rxjs' import { CommentsComponent } from './comments.component';  describe('CommentsComponent', () => {   let component: CommentsComponent;   let service: CommentsService;    beforeEach(() => {     const spyHttp = jasmine.createSpyObj('HttpClient', { post: of({}), get: of({}) })     service = new CommentsService(spyHttp);     component = new CommentsComponent(service);   });    it('should call getComments when ngOnInit', () => {     const spy = spyOn(service, 'getComments').and.callFake(() => {       return EMPTY;     });      component.ngOnInit();      expect(spy).toHaveBeenCalled();   });    it('should update comment length after ngOnInit', () => {     const testComments = [1, 2, 3, 4]     spyOn(service, 'getComments').and.returnValue(of(testComments))      component.ngOnInit();      expect(component.comments.length).toBe(testComments.length);   });    it('should add new comment', () => {     const testComment = {text: 'test'}     const spy = spyOn(service, 'create').and.returnValue(of(testComment))      component.add(testComment.text)      expect(spy).toHaveBeenCalled()     expect(component.comments.includes(testComment)).toBeTruthy()   });  });

Тут мы создали переменную testComment которая содержит в себе объект нашего тестового комментария. Далее мы теперь аналогично «замокали» метод create, с помощью метода spyOn и добавили метод returnValue так как у нас здесь будет возвращаться не пустой observable а наш тестовый объект testComment, и также использовали для этого метод of из rxjs. Затем положили все это в переменную spy.

Далее вызывается метод add нашего компонента, к который передается значение ключа text нашего тестового объекта с комментарием (testObject). После проверяем ожидание того что spy (там наш замоканный метод create из сервиса) был вызван при вызове метода add в компоненте. Затем проверяем что переменная с массивом comments, в компоненте, получила наш тестовый коммент (методы includes и toBeTruthy).

Снова проверяем тест раннер и видим что тест прошел как и все остальные.

Заключение

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