Сразу скажу, что я не любитель Angular1, angular-way и иже с ними, потому как ребята из Angular таких делов наворотили, что иногда диву даешься. Тем не менее, их новое детище выглядит многообещающе. Да, Америку не открыли, но создали нечто, способное конкурировать с популярными современными фреймворками (React + Redux, Aurelia, и т.д.).
Есть и плюсы, и минусы, о которых уже написаны статьи и даже книги, но суть поста в другом.
RC5 вышел всего неделю назад и «порадовал» разработчиков многими изменениями, которые, возможно, и помогают в работе и упрощают жизнь, но заставят серьёзно попотеть над переписыванием уже написанного кода.
Удивлению моему не было предела, когда я узнал, что, выпустив новую версию в rc5, ребята забыли обновить раздел с Тестированием, в котором полезной информации и так «кот наплакал».
Поскольку найти интересующую меня информацию пока не удалось, пришлось разобраться. Надеюсь, информация поможет тем, кто страдает прямо сейчас над тем, что переходит с rc4 на rc5 и его, с такой любовью написанные, тесты — лежат. Здесь не будет ни конфигураций, ни огромных кусков кода и информация рассчитана на тех, кто уже знает азы Angular2.
Прикинем базовую структуру приложения:
— app
— app.component.ts
— app.module.ts
— main.ts
— components
— table.component.ts
— services
— post.service.ts
— models
— post.model.ts
— test
— post.service.mock.ts
— table.component.spec.ts
— post.model.spec.ts
— post.service.spec.ts
Здесь и дальше я буду использовать примеры на TypeScript, потому что код, написанный на нем, как по мне, выглядит слегка живее и интереснее. В примере будет описано приложение, которое создает таблицу и отрисовывает её. Просто и понятно, чтобы нагляднее обьяснить, как теперь писать тесты.
app.component — это первый компонент, который будет загружен, после инициализации приложения.
// Angular import { Component } from '@angular/core'; // Services import {PostService} from './app/services/post.service'; import {Post} from './app/models/post.model'; @Component({ selector: 'app', template: ` <div *ngIf="isDataLoaded"> <table-component [post]="post"></table-component> </div> ` }) export class AppComponent { public isDataLoaded: boolean = false; public post: Post; constructor(public postService: PostService) {} ngOnInit(): void { this.postService.getPost().subscribe((post: any) => { this.post = new Post(post); this.isDataLoaded = true; }); } }
app.module — нововведение в rc5, хранит в себе все зависимости модуля. В нашем случае, провайдит PostService и TableComponent.
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { HttpModule } from '@angular/http'; // Components import { AppComponent } from './app/app.component'; import {TableComponent} from './app/components/table/table.component'; // Services import {PostService} from './app/services/post.service'; @NgModule({ declarations: [ AppComponent TableComponent ], imports: [ BrowserModule, HttpModule ], providers: [ PostService ], bootstrap: [AppComponent] }) export class AppModule {}
main — точка входа в приложение, которую использует Webpack, SystemJS, и т.д.
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; platformBrowserDynamic().bootstrapModule(AppModule);
table.component — компонента, которую хотим отрисовать.
// Angular import {Component, Input} from '@angular/core'; @Component({ selector: 'table-component', template: `<table> <thead> <tr> <th>Post Title</th> <th>Post Author</th> </tr> </thead> <tbody> <tr> <td>{{ post.title}}</td> <td>{{ post.author}}</td> </tr> </tbody> </table>` }) export class TableComponent { @Input() public post: any; }
post.service — Injectable сервис, который делает АПИ запросы и вытягивает пост
import {Injectable} from '@angular/core'; import {Observable} from 'rxjs/Rx'; import {Post} from './app/models/post.model'; import { Http } from '@angular/http'; @Injectable() export class PostService { constructor(http: Http) {} public getPost(): any { // Используем абстрактный АПИ - будь то Facebook или Google return this.http.get(AbstractAPI.url) .map((res: any) => res.json()) } }
post.model — класс поста, в который мы обернем голый JSON.
export class Post { public title: number; public author: string; constructor(post: any) { this.title = post.title; this.author = post.author; } }
Наше приложение готово и работает, но как же это все тестировать?
Я, в целом, фанат TDD, по-этому сначала пишу тесты, а потом — код, и для меня очень важно делать это, как можно проще и быстрее.
Я для тестов использую Karma + Jasmine и примеры будут строиться на основе этих инструментов.
Изменения, коснувшееся всех типов тестов( моделей, сервисов, компонент) — убрали {it, describe} из angular/core/testing. Теперь они deprecated и тянуться из фреймворка( в моем случае из Karma).
Также изменилась и загрузка стандартных модулей для тестов:
Было:
import {setBaseTestProviders} from '@angular/core/testing'; import { TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS, TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS } from '@angular/platform-browser-dynamic/testing'; setBaseTestProviders( TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS, TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS );
Стало:
import {TestBed} from '@angular/core/testing'; import {BrowserDynamicTestingModule, platformBrowserDynamicTesting} from '@angular/platform-browser-dynamic/testing'; TestBed.initTestEnvironment( BrowserDynamicTestingModule, platformBrowserDynamicTesting() );
Теперь, на любой чих, надо создавать тестовые @NgModule:
Пример с формами:
Было:
import {disableDeprecatedForms, provideForms} from @angular/forms; bootstrap(App, [ disableDeprecatedForms(), provideForms() ]);
Стало:
import {DeprecatedFormsModule, FormsModule, ReactiveFormsModule} from @angular/common; @NgModule({ declarations: [MyComponent], imports: [BrowserModule, DeprecatedFormsModule], boostrap: [MyComponent], }) export class MyAppModule{}
Было еще несколько изменений, но детальнее прочитать можно в будущем посте от Angular.
Начнем с простых тестов:
post.model.spec — тут все просто, тянем реальную модель и тестируем свойства.
import {Post} from './../app/models/post.model'; let testPost = {title: 'TestPost', author: 'Admin'} describe('Post', () => { it('checks Post properties', () => { var post = new Post(testPost); expect(post instanceof Post).toBe(true); expect(post.title).toBe("testPost"); expect(post.author).toBe("Admin"); }); });
Продолжим с сервисами, где все немного сложнее, но в целом концепция не поменялась.
post.service.spec — напишем тесты и для сервиса, который дёргает API:
import { inject, fakeAsync, TestBed, tick } from '@angular/core/testing'; import {MockBackend} from '@angular/http/testing'; import { Http, ConnectionBackend, BaseRequestOptions, Response, ResponseOptions } from '@angular/http'; import {PostService} from './../app/services/post.service'; describe('PostService', () => { beforeEach(() => { // Сделаем все нужные тестовые сервисы TestBed.configureTestingModule({ providers: [ PostService, BaseRequestOptions, MockBackend, { provide: Http, useFactory: (backend: ConnectionBackend, defaultOptions: BaseRequestOptions) => { return new Http(backend, defaultOptions); }, deps: [MockBackend, BaseRequestOptions]} ], imports: [ HttpModule ] }); }); describe('getPost methods', () => { it('is existing and returning post', // Заинстанциируем все необходимые сервисы inject([PostService, MockBackend], fakeAsync((ps: postService, be: MockBackend) => { var res; // Эмулируем соединения с сервером backend.connections.subscribe(c => { expect(c.request.url).toBe(AbstractAPI.url); let response = new ResponseOptions({body: '{"title": "TestPost", "author": "Admin"}'}); c.mockRespond(new Response(response)); }); ps.getPost().subscribe((_post: any) => { res = _post; }); // Функция подождет, пока выполнится запрос tick(); expect(res.title).toBe('TestPost'); expect(res.author).toBe('Admin'); })) ); }); });
Осталось, собственно, самое сложное — написать тесты для самого компонента. Именно этого типа тестов и коснулись наибольшие изменения.
Перед тем, как обьяснить в деталях, что изменилось — хотел бы создать MockPostService, на который буду ссылаться.
post.service.mock — здесь мы будем перезаписывать реальные методы сервиса, чтобы он не делал запросы, а просто возвращал тестовые данные.
import {PostService} from './../app/services/post.service'; import {Observable} from 'rxjs'; export class MockPostService extends PostService { constructor() { // Унаследуемся от реального сервиса super(); } // Перезапишет реальный метод сервиса на копию, чтобы не делать ненужных запросов getPost() { // Поскольку Http использует Observable, нам необходимо сделать тестовый Observable обьект. return Observable.of({title: 'TestPost', author: 'Admin'}); } }
Ранее тест для компонента выглядел так:
import { inject, addProviders } from '@angular/core/testing'; import {TableComponent} from './../app/components/table/table.component'; // Стандартный билдер компонентов от Ангулар. Позволяет создавать тестовые данные компонентов и перезаписывать свойства компонентов import {TestComponentBuilder} from '@angular/core/testing'; @Component({ selector : 'test-cmp', template : '<table-component [post]="postMock"></table-component>' }) class TestCmpWrapper { public postMock = new Post({'title': 'TestPost', 'author': 'Admin'}); } describe("TableComponent", () => { it('render table', inject([TestComponentBuilder], (tcb) => { return tcb.overrideProviders(TableComponent) .createAsync(TableComponent) // В fixture храниться все информация об отрисованном компоненте. Если в компоненте отрисованы другие компоненты, они будут доступны fixture.debugElement.children. .then((fixture) => { let componentInstance = fixture.componentInstance; let nativeElement = jQuery(fixture.nativeElement); componentInstance.post = new Post({title: 'TestPost', author: 'Admin'}); fixture.detectChanges(); let firstTable = nativeElement.find('table'); expect(firstTable.find('tr td:nth-child(1)').text()).toBe('TestPost'); expect(firstTable.find('tr td:nth-child(2)').text()).toBe('Admin'); }); })); });
Стало:
import {Component} from '@angular/core'; // TestComponentBuilder заменили на TestBed, и расширили несколькими методами. import {TestBed, async} from '@angular/core/testing'; import {Post} from './../app/models/post.model'; import {TableComponent} from './../app/components/table/table.component'; // Services import {PostService} from './../app/services/post.service'; import {MockPostService} from './post.service.mock' // Создаем тестовый компонент и передаем созданные тестовые данные. @Component({ selector : 'test-cmp', template : '<table-component [post]="postMock"></table-component>' }) class TestCmpWrapper { public postMock = new Post({'title': 'TestPost', 'author': 'Admin'}); } describe("TableComponent", () => { // Нововведение - Необходимо создать тестовый модуль, чтобы в нем создать все зависимости. beforeEach(() => { TestBed.configureTestingModule({ declarations: [ TestCmpWrapper, TableComponent ], providers: [ {provide: PostService, useClass: MockPostService ] }); }); describe('check rendering', () => { it('if component is rendered', async(() => { // Убрали методы createAsync() на compoleComponents() + createComponent(). Первый - компилит все компоненты, которые присутствуют TestCmpWrapper, второй - создает тестовый компонент. Остальное - не тронули. TestBed.compileComponents().then(() => { let fixture = TestBed.createComponent(TestCmpWrapper); let componentInstance = fixture.componentInstance; let nativeElement = jQuery(fixture.nativeElement); componentInstance.post = new Post({title: 'TestPost', author: 'Admin'}); fixture.detectChanges(); let firstTable = nativeElement.find('table'); expect(firstTable.find('tr td:nth-child(1)').text()).toBe('TestPost'); expect(firstTable.find('tr td:nth-child(2)').text()).toBe('Admin'); }); })); }); });
Внимательно читайте комментарии в самом коде — там есть небольшие разьяснения.
Комментарии — приветствуются и даже необходимы!
Да прибудет с нами Сила, потому что уже не знаю, чего ожидать от этих ребят, если они в RC так «балуются».
