Testing 'Tour of Heroes' Angular Application
By this point in the documentation, you should be familiar with:
It is now time to use this acquired knowledge to test an Angular Application.
In this demonstration is expected that you have a working 'Tour of Heroes' Application for both unit testing and end to end testing. This Angular application can be completed by following the step by step process on the Angular documentation. Navigate the Angular's Tour of Heroes Tutorial.
NOTE: While this documentation will cover Angular's own integration for unit and end to end testing, it is recommended that users refer to Cypress.io for Angular End to End testing. Likewise this documentation will replicate the end to end testing example using Cypress in the next section - End to End Testing Tour of Heroes with Cypress.io.
An otherwise a completed Tour of Heroes Application can be found within the OpenWaterFoundation github in the owf-learn-angular-test repository. This repository holds the completed code for the following testing examples:
- Completed Tour of Heroes Application
- A Simple Unit Testing Example
- A Simple End to End Testing Example
- A Tour of Heroes Application with Unit Testing
- A Tour of Heroes Application with End to End Testing
Navigate to the owf-learn-angular-test repository to find the completed code.
Once you have a properly working Tour of Heroes app, you may proceed to the following testing examples.
Unit Testing
The following unit tests were written by @oOMEOo and found originally on github. This demonstration will utilize these test to assist you in understanding unit testing. Bellow the separate code for several testing files is provided.
Once again, the full application code for unit testing can be found in the owf-learn-angular-test repository.
The first testing file we will go over is dashboard.component.spec.ts:
This file should contain the following code:
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { DashboardComponent } from './dashboard.component';
import { HeroSearchComponent } from '../hero-search/hero-search.component';
import { RouterTestingModule } from '@angular/router/testing';
import { of } from 'rxjs';
import { HEROES } from '../mock-heroes';
import { HeroService } from '../hero.service';
describe('DashboardComponent', () => {
let component: DashboardComponent;
let fixture: ComponentFixture<DashboardComponent>;
let heroService;
let getHeroesSpy;
beforeEach(async(() => {
heroService = jasmine.createSpyObj('HeroService', ['getHeroes']);
getHeroesSpy = heroService.getHeroes.and.returnValue( of(HEROES) );
TestBed.configureTestingModule({
declarations: [
DashboardComponent,
HeroSearchComponent
],
imports: [
RouterTestingModule.withRoutes([])
],
providers: [
{ provide: HeroService, useValue: heroService }
]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(DashboardComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should be created', () => {
expect(component).toBeTruthy();
});
it('should display "Top Heroes" as headline', () => {
expect(fixture.nativeElement.querySelector('h3').textContent).toEqual('Top Heroes');
});
it('should call heroService', async(() => {
expect(getHeroesSpy.calls.any()).toBe(true);
}));
it('should display 4 links', async(() => {
expect(fixture.nativeElement.querySelectorAll('a').length).toEqual(4);
}));
});
Tests for hero-search.component.spec.ts:
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { HeroSearchComponent } from './hero-search.component';
describe('HeroSearchComponent', () => {
let component: HeroSearchComponent;
let fixture: ComponentFixture<HeroSearchComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ HeroSearchComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(HeroSearchComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
Test for hero.servive.spec.ts
import { TestBed, inject } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { HeroService } from './hero.service';
import { MessageService } from './message.service';
import { Hero } from './hero';
const mockData = [
{ id: 1, name: 'Hulk' },
{ id: 2, name: 'Thor' },
{ id: 3, name: 'Iron Man' }
] as Hero[];
describe('Hero Service', () => {
let heroService;
let httpTestingController: HttpTestingController;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [
HttpClientTestingModule
],
providers: [HeroService, MessageService]
});
httpTestingController = TestBed.get(HttpTestingController);
this.mockHeroes = [...mockData];
this.mockHero = this.mockHeroes[0];
this.mockId = this.mockHero.id;
heroService = TestBed.get(HeroService);
});
afterEach(() => {
httpTestingController.verify();
});
it('should be created', () => {
expect(heroService).toBeTruthy();
});
describe('getHeroes', () => {
it('should return mock heroes', () => {
spyOn(heroService, 'handleError').and.callThrough();
spyOn(heroService, 'log').and.callThrough();
heroService.getHeroes().subscribe(
heroes => expect(heroes.length).toEqual(this.mockHeroes.length),
fail
);
// Receive GET request
const req = httpTestingController.expectOne(heroService.heroesUrl);
expect(req.request.method).toEqual('GET');
// Respond with the mock heroes
req.flush(this.mockHeroes);
//for some reason, heroService.handleError is being called. The below test doesn't work as expected.
//https://stackoverflow.com/questions/52875876/unexpected-tohavebeencalled-on-catcherror-rxjs
//expect(heroService.handleError).not.toHaveBeenCalled();
expect(heroService.log).toHaveBeenCalledTimes(1);
expect(heroService.messageService.messages[0]).toEqual('HeroService: fetched heroes');
});
it('should turn 404 into a user-friendly error', () => {
spyOn(heroService, 'handleError').and.callThrough();
spyOn(heroService, 'log').and.callThrough();
const msg = 'Deliberate 404';
heroService.getHeroes().subscribe(
heroes => expect(heroes).toEqual([]),
fail
);
const req = httpTestingController.expectOne(heroService.heroesUrl);
req.flush('Invalid request parameters', { status: 404, statusText: 'Bad Request' });
expect(heroService.handleError).toHaveBeenCalledTimes(1);
expect(heroService.log).toHaveBeenCalledTimes(1);
expect(heroService.messageService.messages[0]).toEqual(`HeroService: getHeroes failed: Http failure response for ${heroService.heroesUrl}: 404 Bad Request`);
});
});
describe('getHero', () => {
it('should return a single mock hero', () => {
spyOn(heroService, 'handleError').and.callThrough();
spyOn(heroService, 'log').and.callThrough();
heroService.getHero(this.mockHero.id).subscribe(
response => expect(response).toEqual(this.mockHero),
fail
);
// Receive GET request
const req = httpTestingController.expectOne(`${heroService.heroesUrl}/${this.mockHero.id}`);
expect(req.request.method).toEqual('GET');
// Respond with the mock heroes
req.flush(this.mockHero);
//for some reason, heroService.handleError is being called. The below test doesn't work as expected.
//https://stackoverflow.com/questions/52875876/unexpected-tohavebeencalled-on-catcherror-rxjs
//expect(heroService.handleError).not.toHaveBeenCalled();
expect(heroService.log).toHaveBeenCalledTimes(1);
expect(heroService.messageService.messages[0]).toEqual(`HeroService: fetched hero id=${this.mockHero.id}`);
});
it('should fail gracefully on error', () => {
spyOn(heroService, 'handleError').and.callThrough();
spyOn(heroService, 'log').and.callThrough();
heroService.getHero(this.mockHero.id).subscribe(
response => expect(response).toBeUndefined(),
fail
);
// Receive GET request
const req = httpTestingController.expectOne(`${heroService.heroesUrl}/${this.mockHero.id}`);
expect(req.request.method).toEqual('GET');
// Respond with the mock heroes
req.flush('Invalid request parameters', { status: 404, statusText: 'Bad Request' });
expect(heroService.handleError).toHaveBeenCalledTimes(1);
expect(heroService.log).toHaveBeenCalledTimes(1);
expect(heroService.messageService.messages[0]).toEqual(`HeroService: getHero id=${this.mockHero.id} failed: Http failure response for ${heroService.heroesUrl}/${this.mockHero.id}: 404 Bad Request`);
});
});
describe('getHeroNo404', () => {
it('should return a single mock hero', () => {
spyOn(heroService, 'handleError').and.callThrough();
spyOn(heroService, 'log').and.callThrough();
heroService.getHeroNo404(this.mockHero.id).subscribe(
//Fails: Unable to flush and recognise mockHero
response => expect(response).toEqual(this.mockHero),
fail
);
// Receive GET request
const req = httpTestingController.expectOne(`${heroService.heroesUrl}/?id=${this.mockHero.id}`);
expect(req.request.method).toEqual('GET');
// Respond with the mock heroes
req.flush(this.mockHeroes);
//for some reason, heroService.handleError is being called. The below test doesn't work as expected.
//https://stackoverflow.com/questions/52875876/unexpected-tohavebeencalled-on-catcherror-rxjs
//expect(heroService.handleError).not.toHaveBeenCalled();
expect(heroService.log).toHaveBeenCalledTimes(1);
expect(heroService.messageService.messages[0]).toEqual(`HeroService: fetched hero id=${this.mockHero.id}`);
});
it('should fail gracefully with undefined when id not found', () => {
spyOn(heroService, 'handleError').and.callThrough();
spyOn(heroService, 'log').and.callThrough();
heroService.getHeroNo404(this.mockHero.id).subscribe(
//Fails: Unable to flush and recognise mockHero
response => expect(response).toBeUndefined(),
fail
);
// Receive GET request
const req = httpTestingController.expectOne(`${heroService.heroesUrl}/?id=${this.mockHero.id}`);
expect(req.request.method).toEqual('GET');
// Flushing a object not of type array causes unexpeced behaviour?
req.flush(this.mockHero);
//for some reason, heroService.handleError is being called. The below test doesn't work as expected.
//https://stackoverflow.com/questions/52875876/unexpected-tohavebeencalled-on-catcherror-rxjs
//expect(heroService.handleError).not.toHaveBeenCalled();
expect(heroService.log).toHaveBeenCalledTimes(1);
expect(heroService.messageService.messages[0]).toEqual(`HeroService: did not find hero id=${this.mockHero.id}`);
});
it('should fail gracefully on error', () => {
spyOn(heroService, 'handleError').and.callThrough();
spyOn(heroService, 'log').and.callThrough();
const msg = 'Deliberate 404';
heroService.getHeroNo404(this.mockHero.id).subscribe(
heroes => expect(heroes).toBeUndefined(),
fail
);
const req = httpTestingController.expectOne(`${heroService.heroesUrl}/?id=${this.mockHero.id}`);
req.flush('Invalid request parameters', { status: 404, statusText: 'Bad Request' });
expect(heroService.handleError).toHaveBeenCalledTimes(1);
expect(heroService.log).toHaveBeenCalledTimes(1);
expect(heroService.messageService.messages[0]).toEqual(`HeroService: getHero id=${this.mockHero.id} failed: Http failure response for ${heroService.heroesUrl}/?id=${this.mockHero.id}: 404 Bad Request`);
});
});
describe('addHero', () => {
it('should add a single Hero', () => {
spyOn(heroService, 'handleError').and.callThrough();
spyOn(heroService, 'log').and.callThrough();
heroService.addHero(this.mockHero).subscribe(
response => expect(response).toEqual(this.mockHero),
fail
);
// Receive GET request
const req = httpTestingController.expectOne(`${heroService.heroesUrl}`);
expect(req.request.method).toEqual('POST');
// Respond with the mock heroes
req.flush(this.mockHero);
//for some reason, heroService.handleError is being called. The below test doesn't work as expected.
//https://stackoverflow.com/questions/52875876/unexpected-tohavebeencalled-on-catcherror-rxjs
//expect(heroService.handleError).not.toHaveBeenCalled();
expect(heroService.log).toHaveBeenCalledTimes(1);
expect(heroService.messageService.messages[0]).toEqual(`HeroService: added hero w/ id=${this.mockHero.id}`);
});
it('should fail gracefully on error', () => {
spyOn(heroService, 'handleError').and.callThrough();
spyOn(heroService, 'log').and.callThrough();
heroService.addHero(this.mockHero).subscribe(
response => expect(response).toBeUndefined(),
fail
);
// Receive GET request
const req = httpTestingController.expectOne(`${heroService.heroesUrl}`);
expect(req.request.method).toEqual('POST');
// Respond with the mock heroes
req.flush('Invalid request parameters', { status: 404, statusText: 'Bad Request' });
expect(heroService.handleError).toHaveBeenCalledTimes(1);
expect(heroService.log).toHaveBeenCalledTimes(1);
expect(heroService.messageService.messages[0]).toEqual(`HeroService: addHero failed: Http failure response for api/heroes: 404 Bad Request`);
});
});
describe('updateHero', () => {
it('should update hero', () => {
spyOn(heroService, 'handleError').and.callThrough();
spyOn(heroService, 'log').and.callThrough();
heroService.updateHero(this.mockHero).subscribe(
response => expect(response).toBeUndefined(),
fail
);
// Receive PUT request
const req = httpTestingController.expectOne(heroService.heroesUrl);
expect(req.request.method).toEqual('PUT');
// Respond with the updated hero
req.flush('Invalid request parameters', { status: 404, statusText: 'Bad Request' });
expect(heroService.handleError).toHaveBeenCalledTimes(1);
expect(heroService.log).toHaveBeenCalledTimes(1);
expect(heroService.messageService.messages[0]).toEqual(`HeroService: updateHero failed: Http failure response for ${heroService.heroesUrl}: 404 Bad Request`);
});
it('should fail gracefully on error', () => {
spyOn(heroService, 'handleError').and.callThrough();
spyOn(heroService, 'log').and.callThrough();
heroService.updateHero(this.mockHero).subscribe(
response => expect(response).toEqual(this.mockHero),
fail
);
// Receive PUT request
const req = httpTestingController.expectOne(heroService.heroesUrl);
expect(req.request.method).toEqual('PUT');
// Respond with the updated hero
req.flush(this.mockHero);
//for some reason, heroService.handleError is being called. The below test doesn't work as expected.
//https://stackoverflow.com/questions/52875876/unexpected-tohavebeencalled-on-catcherror-rxjs
//expect(heroService.handleError).not.toHaveBeenCalled();
expect(heroService.log).toHaveBeenCalledTimes(1);
expect(heroService.messageService.messages[0]).toEqual(`HeroService: updated hero id=${this.mockHero.id}`);
});
});
describe('deleteHero', () => {
it('should delete hero using id', () => {
spyOn(heroService, 'handleError').and.callThrough();
spyOn(heroService, 'log').and.callThrough();
heroService.deleteHero(this.mockId).subscribe(
response => expect(response).toEqual(this.mockId),
fail
);
// Receive DELETE request
const req = httpTestingController.expectOne(`${heroService.heroesUrl}/${this.mockHero.id}`);
expect(req.request.method).toEqual('DELETE');
// Respond with the updated hero
req.flush(this.mockId);
//for some reason, heroService.handleError is being called. The below test doesn't work as expected.
//https://stackoverflow.com/questions/52875876/unexpected-tohavebeencalled-on-catcherror-rxjs
//expect(heroService.handleError).not.toHaveBeenCalled();
expect(heroService.log).toHaveBeenCalledTimes(1);
expect(heroService.messageService.messages[0]).toEqual(`HeroService: deleted hero id=${this.mockHero.id}`);
});
it('should delete hero using hero object', () => {
spyOn(heroService, 'handleError').and.callThrough();
spyOn(heroService, 'log').and.callThrough();
heroService.deleteHero(this.mockHero).subscribe(
response => expect(response).toEqual(this.mockHero.id),
fail
);
// Receive DELETE request
const req = httpTestingController.expectOne(`${heroService.heroesUrl}/${this.mockHero.id}`);
expect(req.request.method).toEqual('DELETE');
// Respond with the updated hero
req.flush(this.mockHero.id);
//for some reason, heroService.handleError is being called. The below test doesn't work as expected.
//https://stackoverflow.com/questions/52875876/unexpected-tohavebeencalled-on-catcherror-rxjs
//expect(heroService.handleError).not.toHaveBeenCalled();
expect(heroService.log).toHaveBeenCalledTimes(1);
expect(heroService.messageService.messages[0]).toEqual(`HeroService: deleted hero id=${this.mockHero.id}`);
});
});
describe('searchHero', () => {
it('should find heroes matching the search criteria', () => {
const searchTerm = 'r'
spyOn(heroService, 'handleError').and.callThrough();
spyOn(heroService, 'log').and.callThrough();
heroService.searchHeroes(searchTerm).subscribe(
response => expect(response).toEqual([this.mockHeroes[1], this.mockHeroes[2]]),
fail
);
// Receive PUT request
const req = httpTestingController.expectOne(`${heroService.heroesUrl}/?name=${searchTerm}`);
expect(req.request.method).toEqual('GET');
// Respond with the updated hero
req.flush([this.mockHeroes[1], this.mockHeroes[2]]);
//for some reason, heroService.handleError is being called. The below test doesn't work as expected.
//https://stackoverflow.com/questions/52875876/unexpected-tohavebeencalled-on-catcherror-rxjs
//expect(heroService.handleError).not.toHaveBeenCalled();
expect(heroService.log).toHaveBeenCalledTimes(1);
expect(heroService.messageService.messages[0]).toEqual(`HeroService: found heroes matching "${searchTerm}"`);
});
it('should not find heroes matching the search criteria', () => {
const searchTerm = 'r'
spyOn(heroService, 'handleError').and.callThrough();
spyOn(heroService, 'log').and.callThrough();
heroService.searchHeroes(searchTerm).subscribe(
response => expect(response).toEqual([]),
fail
);
// Receive PUT request
const req = httpTestingController.expectOne(`${heroService.heroesUrl}/?name=${searchTerm}`);
expect(req.request.method).toEqual('GET');
// Respond with the updated hero
req.flush([]);
//for some reason, heroService.handleError is being called. The below test doesn't work as expected.
//https://stackoverflow.com/questions/52875876/unexpected-tohavebeencalled-on-catcherror-rxjs
//expect(heroService.handleError).not.toHaveBeenCalled();
expect(heroService.log).toHaveBeenCalledTimes(1);
expect(heroService.messageService.messages[0]).toEqual(`HeroService: found heroes matching "${searchTerm}"`);
});
it('should return an empty array when passing an empty search string', () => {
const searchTerm = '';
spyOn(heroService, 'handleError').and.callThrough();
spyOn(heroService, 'log').and.callThrough();
heroService.searchHeroes(searchTerm).subscribe(
response => expect(response).toEqual([]),
fail
);
// Receive PUT request
const req = httpTestingController.expectNone(`${heroService.heroesUrl}/?name=${searchTerm}`);
//This is the exception where handleError is not called. The execution path ends before the httpClient is called.
expect(heroService.handleError).not.toHaveBeenCalled();
expect(heroService.log).not.toHaveBeenCalled();
});
it('should fail gracefully on error', () => {
const searchTerm = 'r';
spyOn(heroService, 'log').and.callThrough();
heroService.searchHeroes(searchTerm).subscribe(
response => expect(response).toEqual([]),
fail
);
// Receive PUT request
const req = httpTestingController.expectOne(`${heroService.heroesUrl}/?name=${searchTerm}`);
expect(req.request.method).toEqual('GET');
// Respond with the updated hero
req.flush('Invalid request parameters', { status: 404, statusText: 'Bad Request' });
expect(heroService.messageService.messages[0]).toEqual(`HeroService: searchHeroes failed: Http failure response for ${heroService.heroesUrl}/?name=${searchTerm}: 404 Bad Request`);
});
});
describe('handleError', () => {
it('should handle error gracefully', () => {
spyOn(heroService, 'handleError').and.callThrough();
spyOn(heroService, 'log').and.callThrough();
spyOn(console, 'error');
heroService.getHero(this.mockHero.id).subscribe(
response => expect(response).toBeUndefined(),
fail
);
// Receive GET request
const req = httpTestingController.expectOne(`${heroService.heroesUrl}/${this.mockHero.id}`);
expect(req.request.method).toEqual('GET');
// Respond with the mock heroes
req.flush('Invalid request parameters', { status: 404, statusText: 'Bad Request' });
//The focal point of this test
expect(heroService.handleError).toHaveBeenCalledTimes(1);
expect(console.error).toHaveBeenCalledTimes(1);
expect(heroService.log).toHaveBeenCalledTimes(1);
});
});
});
Tests for heroes.component.spec.ts:
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { HeroesComponent } from './heroes.component';
import { HttpClientTestingModule } from '@angular/common/http/testing';
describe('HeroesComponent', () => {
let component: HeroesComponent;
let fixture: ComponentFixture<HeroesComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ HeroesComponent ],
imports: [RouterTestingModule.withRoutes([]), HttpClientTestingModule],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(HeroesComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should be created', () => {
expect(component).toBeTruthy();
});
});
Tests for messages.component.spec.ts:
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { HeroesComponent } from './heroes.component';
import { HttpClientTestingModule } from '@angular/common/http/testing';
describe('HeroesComponent', () => {
let component: HeroesComponent;
let fixture: ComponentFixture<HeroesComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ HeroesComponent ],
imports: [RouterTestingModule.withRoutes([]), HttpClientTestingModule],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(HeroesComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should be created', () => {
expect(component).toBeTruthy();
});
});
This test is rather simple and just tests whether the component was correctly created. This general format can be applied to any component to test the creation of components, and is a good place to start when starting out with unit testing.
Tests for message.service.ts:
import { Injectable } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class MessageService {
messages: string[] = [];
add(message: string) {
this.messages.push(message);
}
clear() {
this.messages = [];
}
}
End to End Testing
The next part of this demonstration will look at a more complex example of end to end testing. To begin this demonstration you willstill need a working Tour of Heroes application. Cheat sheets for accessing elements will also be provided to help assist you in your end 2 end tests.
For this End to End testing demonstration you will once again only need two files. app.e2e-spec.ts and app.po.ts. These files are generally auto generated when you create an Angular project, and are located in the e2e directory.
The app.po.ts file is a page object that allows ups to define our page and some functions that find certain buttons or variables.
In this example of end to end testing, functions will be written within the app.e2e-spec.ts file. Generally you will want to have these functions in the page object file to have cleaner code.
The full code for the end to end testing example can be found on github in the owf-learn-angular repository. Additionally see below for the code as well.
The code of the file app.e2e.spec.ts file should contain the following:
// This code will document and explain the specifics of the code porvided
// Angular End to End Testing : code written by Dhormale
// https://gist.github.com/dhormale/90dd6288ab1780bf0f3039c7cef386c9#file-app-e2e-spec-ts
import { browser, element, by, ElementFinder, ElementArrayFinder } from 'protractor';
import { promise } from 'selenium-webdriver';
const expectedH1 = 'Tour of Heroes';
// const expectedTitle = `${expectedH1}`;
const targetHero = { id: 15, name: 'Magneta' };
const targetHeroDashboardIndex = 3;
const nameSuffix = 'X';
const newHeroName = targetHero.name + nameSuffix;
// Hero Class
class Hero {
id: number;
name: string;
// Factory methods
// Hero from hero list <li> element.
static async fromLi(li: ElementFinder): Promise<Hero> {
let stringsFromA = await li.all(by.css('a')).getText();
let strings = stringsFromA[0].split(' ');
return { id: +strings[0], name: strings[1] };
}
// Hero id and name from the given detail element.
static async fromDetail(detail: ElementFinder): Promise<Hero> {
// Get hero id from the first <div>
let _id = await detail.all(by.css('div')).first().getText();
// Get name from the h2
let _name = await detail.element(by.css('h2')).getText();
return {
id: +_id.substr(_id.indexOf(' ') + 1),
name: _name.substr(0, _name.lastIndexOf(' '))
};
}
}
describe('Tutorial part 6', () => {
beforeAll(() => browser.get(''));
function getPageElts() {
let navElts = element.all(by.css('app-root nav a'));
return {
navElts: navElts,
appDashboardHref: navElts.get(0),
appDashboard: element(by.css('app-root app-dashboard')),
topHeroes: element.all(by.css('app-root app-dashboard > div h4')),
appHeroesHref: navElts.get(1),
appHeroes: element(by.css('app-root app-heroes')),
allHeroes: element.all(by.css('app-root app-heroes li')),
selectedHeroSubview: element(by.css('app-root app-heroes > div:last-child')),
heroDetail: element(by.css('app-root app-hero-detail > div')),
searchBox: element(by.css('#search-box')),
searchResults: element.all(by.css('.search-result li'))
};
}
describe('Initial page', () => {
it(`has title 'TourOfHeroes'`, () => {
expect(browser.getTitle()).toEqual('TourOfHeroes');
});
it(`has h1 '${expectedH1}'`, () => {
expectHeading(1, expectedH1);
});
const expectedViewNames = ['Dashboard', 'Heroes'];
it(`has views ${expectedViewNames}`, () => {
let viewNames = getPageElts().navElts.map((el: ElementFinder) => el.getText());
expect(viewNames).toEqual(expectedViewNames);
});
it('has dashboard as the active view', () => {
let page = getPageElts();
expect(page.appDashboard.isPresent()).toBeTruthy();
});
});
describe('Dashboard tests', () => {
beforeAll(() => browser.get(''));
it('has top heroes', () => {
let page = getPageElts();
expect(page.topHeroes.count()).toEqual(4);
});
it(`selects and routes to ${targetHero.name} details`, dashboardSelectTargetHero);
it(`updates hero name (${newHeroName}) in details view`, updateHeroNameInDetailView);
it(`cancels and shows ${targetHero.name} in Dashboard`, () => {
element(by.buttonText('go back')).click();
browser.waitForAngular(); // seems necessary to gets tests to pass for toh-pt6
let targetHeroElt = getPageElts().topHeroes.get(targetHeroDashboardIndex);
expect(targetHeroElt.getText()).toEqual(targetHero.name);
});
it(`selects and routes to ${targetHero.name} details`, dashboardSelectTargetHero);
it(`updates hero name (${newHeroName}) in details view`, updateHeroNameInDetailView);
it(`saves and shows ${newHeroName} in Dashboard`, () => {
element(by.buttonText('save')).click();
browser.waitForAngular(); // seems necessary to gets tests to pass for toh-pt6
let targetHeroElt = getPageElts().topHeroes.get(targetHeroDashboardIndex);
expect(targetHeroElt.getText()).toEqual(newHeroName);
});
});
describe('Heroes tests', () => {
// navigates to the page once befor all of the tests
beforeAll(() => browser.get(''));
browser.sleep(1000);
it('can switch to Heroes view', () => {
getPageElts().appHeroesHref.click();
let page = getPageElts();
expect(page.appHeroes.isPresent()).toBeTruthy();
expect(page.allHeroes.count()).toEqual(10, 'number of heroes');
});
it('can route to hero details', async () => {
getHeroLiEltById(targetHero.id).click();
let page = getPageElts();
expect(page.heroDetail.isPresent()).toBeTruthy('shows hero detail');
let hero = await Hero.fromDetail(page.heroDetail);
expect(hero.id).toEqual(targetHero.id);
expect(hero.name).toEqual(targetHero.name.toUpperCase());
});
it(`updates hero name (${newHeroName}) in details view`, updateHeroNameInDetailView);
it(`shows ${newHeroName} in Heroes list`, () => {
element(by.buttonText('save')).click();
browser.waitForAngular();
let expectedText = `${targetHero.id} ${newHeroName}`;
expect(getHeroAEltById(targetHero.id).getText()).toEqual(expectedText);
});
it(`deletes ${newHeroName} from Heroes list`, async () => {
const heroesBefore = await toHeroArray(getPageElts().allHeroes);
const li = getHeroLiEltById(targetHero.id);
li.element(by.buttonText('x')).click();
const page = getPageElts();
expect(page.appHeroes.isPresent()).toBeTruthy();
expect(page.allHeroes.count()).toEqual(9, 'number of heroes');
const heroesAfter = await toHeroArray(page.allHeroes);
// console.log(await Hero.fromLi(page.allHeroes[0]));
const expectedHeroes = heroesBefore.filter(h => h.name !== newHeroName);
expect(heroesAfter).toEqual(expectedHeroes);
// expect(page.selectedHeroSubview.isPresent()).toBeFalsy();
});
it(`adds back ${targetHero.name}`, async () => {
const newHeroName = 'Alice';
const heroesBefore = await toHeroArray(getPageElts().allHeroes);
const numHeroes = heroesBefore.length;
element(by.css('input')).sendKeys(newHeroName);
element(by.buttonText('add')).click();
let page = getPageElts();
let heroesAfter = await toHeroArray(page.allHeroes);
expect(heroesAfter.length).toEqual(numHeroes + 1, 'number of heroes');
expect(heroesAfter.slice(0, numHeroes)).toEqual(heroesBefore, 'Old heroes are still there');
const maxId = heroesBefore[heroesBefore.length - 1].id;
expect(heroesAfter[numHeroes]).toEqual({id: maxId + 1, name: newHeroName});
});
it('displays correctly styled buttons', async () => {
element.all(by.buttonText('x')).then(buttons => {
for (const button of buttons) {
// Inherited styles from styles.css
expect(button.getCssValue('font-family')).toBe('Arial');
expect(button.getCssValue('border')).toContain('none');
expect(button.getCssValue('padding')).toBe('5px 10px');
expect(button.getCssValue('border-radius')).toBe('4px');
// Styles defined in heroes.component.css
expect(button.getCssValue('left')).toBe('194px');
expect(button.getCssValue('top')).toBe('-32px');
}
});
const addButton = element(by.buttonText('add'));
// Inherited styles from styles.css
expect(addButton.getCssValue('font-family')).toBe('Arial');
expect(addButton.getCssValue('border')).toContain('none');
expect(addButton.getCssValue('padding')).toBe('5px 10px');
expect(addButton.getCssValue('border-radius')).toBe('4px');
});
});
describe('Progressive hero search', () => {
// navigate to the page once before all of the tests begin
beforeAll(() => browser.get(''));
it(`searches for 'Ma'`, async () => {
getPageElts().searchBox.sendKeys('Ma');
browser.sleep(1000);
expect(getPageElts().searchResults.count()).toBe(4);
});
it(`continues search with 'g'`, async () => {
getPageElts().searchBox.sendKeys('g');
browser.sleep(1000);
expect(getPageElts().searchResults.count()).toBe(2);
});
it(`continues search with 'e' and gets ${targetHero.name}`, async () => {
getPageElts().searchBox.sendKeys('n');
browser.sleep(1000);
let page = getPageElts();
expect(page.searchResults.count()).toBe(1);
let hero = page.searchResults.get(0);
expect(hero.getText()).toEqual(targetHero.name);
});
it(`navigates to ${targetHero.name} details view`, async () => {
let hero = getPageElts().searchResults.get(0);
expect(hero.getText()).toEqual(targetHero.name);
hero.click();
let page = getPageElts();
expect(page.heroDetail.isPresent()).toBeTruthy('shows hero detail');
let hero2 = await Hero.fromDetail(page.heroDetail);
expect(hero2.id).toEqual(targetHero.id);
expect(hero2.name).toEqual(targetHero.name.toUpperCase());
});
});
async function dashboardSelectTargetHero() {
let targetHeroElt = getPageElts().topHeroes.get(targetHeroDashboardIndex);
expect(targetHeroElt.getText()).toEqual(targetHero.name);
targetHeroElt.click();
browser.waitForAngular(); // seems necessary to gets tests to pass for toh-pt6
let page = getPageElts();
expect(page.heroDetail.isPresent()).toBeTruthy('shows hero detail');
let hero = await Hero.fromDetail(page.heroDetail);
expect(hero.id).toEqual(targetHero.id);
expect(hero.name).toEqual(targetHero.name.toUpperCase());
}
async function updateHeroNameInDetailView() {
// Assumes that the current view is the hero details view.
addToHeroName(nameSuffix);
let page = getPageElts();
let hero = await Hero.fromDetail(page.heroDetail);
expect(hero.id).toEqual(targetHero.id);
expect(hero.name).toEqual(newHeroName.toUpperCase());
}
});
function addToHeroName(text: string): promise.Promise<void> {
let input = element(by.css('input'));
return input.sendKeys(text);
}
function expectHeading(hLevel: number, expectedText: string): void {
let hTag = `h${hLevel}`;
let hText = element(by.css(hTag)).getText();
expect(hText).toEqual(expectedText, hTag);
};
function getHeroAEltById(id: number): ElementFinder {
let spanForId = element(by.cssContainingText('li span.badge', id.toString()));
return spanForId.element(by.xpath('..'));
}
function getHeroLiEltById(id: number): ElementFinder {
let spanForId = element(by.cssContainingText('li span.badge', id.toString()));
return spanForId.element(by.xpath('../..'));
}
async function toHeroArray(allHeroes: ElementArrayFinder): Promise<Hero[]> {
let promisedHeroes = await allHeroes.map(Hero.fromLi);
// The cast is necessary to get around issuing with the signature of Promise.all()
return <Promise<any>> Promise.all(promisedHeroes);
}
Running End 2 End tests
Running your E2E tests is easy. Since we are using Angular CLI, all we have to do is run the command:
ng e2e
If everything goes well, your application should open in a separate browser and test the functionality of your application. When the browser pops up it will display the message "Chrome is being controlled by automated test software".
Additionally in your terminal, you should seen output stating whether or not the following test have passed. For this demonstration all of your tests should pass.
Cheatsheet for Accessing Elements:
element(by.id('firstName'))
element(by.css('.signout'))
element(by.model('address.city'))
element(by.binding('address.city'));
element(by.input('firstName'));
element(by.input('firstName')).clear();
element(by.buttonText('Close'));
element(by.partialButtonText('Save'));
element(by.linkText('Save'));
element(by.partialLinkText('Save'));
element(by.css('img[src*='assets/img/profile.png']'));
element(by.css('.pet .cat'));
element(by.cssContainingText('.pet', 'Dog'));
allColors = element.all(by.options('c c in colors'))
Cheatsheet of typing:
element(by.id('firstName').sendKeys("John"));
sendKeyes(Key.ENTER);
sendKeys(key.TAB);
sendKeys(Key.BACK_SPACE);
element(by.id('user_name')).clear()
Cheatsheet for Collection:
var list = element.all(by.css('.items'));
var list2 = element.all(by.repeater('personhome.results'));
expect(list.get(0).getText()).toBe('First’)