Seguendo l'esempio di codice trovato su Ari Lerner ng-book2 e utilizzando Angular 2 beta 7, sto cercando di deridere e spiare una chiamata a un servizio senza successo.Come spiare una chiamata di servizio in Angular2
Questo è il componente principale utilizzando il servizio:
user-list.component.ts
import {Component, OnInit} from 'angular2/core';
import {UserService} from './user.service';
import {IUser} from './user.model';
@Component({
selector: 'user-list',
providers: [UserService],
template: `
<div *ngFor="#user of users" class="user">
<span class="username">Username: {{ user.username }}</span><br>
<span class="email">Email: {{ user.email }}</span>
</div>
`
})
export class UserListComponent implements OnInit {
public users: IUser[];
private userService: UserService;
constructor(userService: UserService) {
this.userService = userService;
}
ngOnInit(): void {
this.userService.getAllUsers().subscribe(
(users: IUser[]) => {
this.users = users;
},
(error: any) => {
console.log(error);
}
);
}
}
E questo è il servizio stesso.
user.service.ts
import {Injectable} from 'angular2/core';
import {Http} from 'angular2/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/Rx';
import {IUser} from './user.model';
@Injectable()
export class UserService {
private http: Http;
private baseUrl: string = 'http://jsonplaceholder.typicode.com/users';
constructor(http: Http) {
this.http = http;
}
public getAllUsers(): Observable<IUser[]> {
return this.http.get(this.baseUrl)
.map(res => res.json());
}
}
Al fine di testare la UserListComponent, sto cercando di prendere in giro il UserService e spiare la sua chiamata di metodo getAllUser utilizzando il seguente codice:
utente -list.component.spec.ts
import {
describe,
expect,
it,
injectAsync,
TestComponentBuilder,
ComponentFixture,
setBaseTestProviders,
} from 'angular2/testing';
import {SpyObject} from 'angular2/testing_internal';
import {
TEST_BROWSER_PLATFORM_PROVIDERS,
TEST_BROWSER_APPLICATION_PROVIDERS
} from 'angular2/platform/testing/browser';
import {provide} from 'angular2/core';
import {UserListComponent} from './user-list.component';
import {UserService} from './user.service';
class SpyUserService extends SpyObject {
public getAllUsers: Function;
public fakeResponse: any = null;
constructor() {
super(UserService);
this.getAllUsers = this.spy('getAllUsers').andReturn(this);
}
public subscribe(callback) {
callback(this.fakeResponse);
}
public setResponse(data: any): void {
this.fakeResponse = data;
}
}
describe('When rendering the UserListComponent and mocking the UserService',() => {
setBaseTestProviders(TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS);
it('should show one mocked user', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
let spyUserService = new SpyUserService();
spyUserService.setResponse([{
username: 'ryan',
email: '[email protected]'
}]);
return tcb
.overrideProviders(UserListComponent, [provide(UserService, {useValue: spyUserService})])
.createAsync(UserListComponent)
.then((fixture: ComponentFixture) => {
fixture.detectChanges();
expect(spyUserService.getAllUsers).toHaveBeenCalled();
});
}));
});
Quando si utilizza il karma per eseguire il test sto ottenendo il seguente errore console:
Chrome 48.0.2564 (Mac OS X 10.11.3) ERROR
Uncaught TypeError: Cannot read property 'isSlow' of null
at /Users/david/apps/sandbox/angular2-testing-cookbook/src/tests.entry.ts:19430
Do Qualcuno sa il motivo per cui viene questo errore viene gettato o il modo corretto di prendere in giro e spiare un servizio per unità di test di un angolare 2 componente?
Sapete da dove proviene 'isSlow', il codice nella domanda non lo contiene. –
Proviene dal file 'testing_internal' –