एंगुलर 2

Question

में सेवा कॉल को जासूसी कैसे करें एरि लेर्नर एनजी-बुक 2 पर मिले कोड उदाहरण के बाद, और कोणीय 2 बीटा 7 का उपयोग करके, मैं एक सेवा में असफल होने के लिए नकली और जासूसी करने की कोशिश कर रहा हूं।

इस सेवा का उपयोग मुख्य घटक है:

उपयोगकर्ता के 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); 
     } 
    ); 
    } 
} 

और यह सेवा ही है।

उपयोगकर्ता:

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()); 
    } 
} 

आदेश UserListComponent का परीक्षण करने में, मैं UserService नकली और निम्नलिखित कोड का उपयोग कर अपने विधि कॉल getAllUser जासूसी करने के लिए कोशिश कर रहा हूँ -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: 'ryan@gmail.com' 
    }]); 

    return tcb 
     .overrideProviders(UserListComponent, [provide(UserService, {useValue: spyUserService})]) 
     .createAsync(UserListComponent) 
     .then((fixture: ComponentFixture) => { 
     fixture.detectChanges(); 
     expect(spyUserService.getAllUsers).toHaveBeenCalled(); 
     }); 
    })); 

}); 

कर्म का उपयोग करते समय परीक्षण चलाने के लिए मैं निम्नलिखित कंसोल त्रुटि हो रही है:

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 

किसी को पता है क्यों यह त्रुटि फेंक दिया जा रहा है या उचित तरीके से नकली और एक कोणीय 2 परीक्षण इकाई के लिए एक सेवा जासूसी करने के लिए घटक?

Answer 1

मैं एक अलग दृष्टिकोण लेने के लिए और खुद को इंजेक्षन का उपयोग बजाय डि के माध्यम से सेवा उदाहरण की पकड़ पाने के लिए।

fixture = TestBed.createComponent(TestComponent); 
    component = fixture.componentInstance; 
    const mockService = fixture.debugElement.injector.get(MyService); 

Answer 2

मैं समाधान पाया

test.entry.ts

import {setBaseTestProviders} from 'angular2/testing'; 

import { 
    TEST_BROWSER_PLATFORM_PROVIDERS, 
    TEST_BROWSER_APPLICATION_PROVIDERS 
} from 'angular2/platform/testing/browser'; 

setBaseTestProviders(TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS); 

import './user-list.component.spec'; 

उपयोगकर्ता के list.component.spec.ts

import { 
    describe, 
    expect, 
    it, 
    tick, 
    inject, 
    fakeAsync, 
    TestComponentBuilder, 
    ComponentFixture, 
    beforeEachProviders 
} from 'angular2/testing'; 

import {UserListComponent} from './user-list.component'; 
import {MockUserService} from './user.service.mock'; 

describe('When loading the UserListComponent',() => { 

    let mockUserService: MockUserService; 

    beforeEachProviders(() => { 
    mockUserService = new MockUserService(); 
    return [mockUserService.getProvider()]; 
    }); 

    it('should call the getAllUsers method from the UserService', 
    inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => { 
     spyOn(mockUserService, 'getAllUsers'); 

     tcb 
     .createAsync(UserListComponent) 
     .then((fixture: ComponentFixture) => { 
      tick(); 
      fixture.detectChanges(); 
      expect(mockUserService.getAllUsers).toHaveBeenCalled(); 
     }); 
    })) 
); 

    it('should show one mocked user', 
    inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => { 
     mockUserService.setResponse([{ 
     username: 'ryan', 
     email: 'ryan@gmail.com' 
     }]); 

     tcb 
     .createAsync(UserListComponent) 
     .then((fixture: ComponentFixture) => { 
      tick(); 
      fixture.detectChanges(); 
      let compiled = fixture.debugElement.nativeElement; 
      expect(compiled.querySelector('div:nth-child(1) .username')).toHaveText('Username: ryan'); 
      expect(compiled.querySelector('div:nth-child(1) .email')).toHaveText('Email: ryan@gmail.com'); 
     }); 
    })) 
); 

}); 

उपयोगकर्ता। service.mock.ts

import {provide, Provider} from 'angular2/core'; 
import {UserService} from './user.service'; 
import * as Rx from 'rxjs/Rx'; 

export class MockUserService { 

    public fakeResponse: any = null; 

    public getAllUsers(): Rx.Observable<any> { 
    let subject = new Rx.ReplaySubject() 
    subject.next(this.fakeResponse); 
    return subject; 
    } 

    public setResponse(response: any): void { 
    this.fakeResponse = response; 
    } 

    public getProvider(): Provider { 
    return provide(UserService, {useValue: this}); 
    } 
} 

Answer 3

के लिए:

import { 
    describe, 
    expect, 
    it, 
    tick, 
    inject, 
    fakeAsync, 
    TestComponentBuilder, 
    ComponentFixture, 
    addProviders 
} from 'angular2/testing'; 

import { Component, provide } from '@angular/core'; 

import {UserListComponent} from './user-list.component'; 

import {UserService} from './user.service'; 
import {MockUserService} from './user.service.mock'; 

describe('When loading the UserListComponent',() => { 

    beforeEach(() => addProviders([ 
     {provide: UserService, useClass: MockUserService} 
    ])); 

    it('should call the getAllUsers method from the UserService', 
    inject([TestComponentBuilder, UserService], fakeAsync((tcb: TestComponentBuilder, mockUserService: UserService) => { 
     spyOn(mockUserService, 'getAllUsers'); 

     tcb 
     .createAsync(UserListComponent) 
     .then((fixture: ComponentFixture) => { 
      tick(); 
      fixture.detectChanges(); 
      expect(mockUserService.getAllUsers).toHaveBeenCalled(); 
     }); 
    })) 
); 

    it('should show one mocked user', 
    inject([TestComponentBuilder, UserService], fakeAsync((tcb: TestComponentBuilder, mockUserService: UserService) => { 
     mockUserService.setResponse([{ 
     username: 'ryan', 
     email: 'ryan@gmail.com' 
     }]); 

     tcb 
     .createAsync(UserListComponent) 
     .then((fixture: ComponentFixture) => { 
      tick(); 
      fixture.detectChanges(); 
      let compiled = fixture.debugElement.nativeElement; 
      expect(compiled.querySelector('div:nth-child(1) .username')).toHaveText('Username: ryan'); 
      expect(compiled.querySelector('div:nth-child(1) .email')).toHaveText('Email: ryan@gmail.com'); 
     }); 
    })) 
); 

}); 

कोणीय 4

नवीनतम docs घटक के इंजेक्टर का उपयोग कर एक सेवा की पकड़ होने का अधिक सरल तरीके के लिए संपादित करें: तो अपने परीक्षण की तरह लग रहे हैं कोणीय 2 में परीक्षण करने के लिए सभी नए लोग (यहां मेरे जैसा ही)

createSpy या SpyOn तरीके यदि आपके पास जैस्मीन स्थापित करने के लिए सही टाइपिंग हैं तो केवल 'उपलब्ध' हैं। अन्यथा यह आपको एक टाइपस्क्रिप्ट त्रुटि फेंक देगा।

अपने typings.json फ़ाइल चेक इन और यदि मौजूद नहीं, चलाने इस

typings --save --global रजिस्ट्री स्थापित: डीटी/चमेली

Answer 4

अन्य समाधान मेरे लिए तो मैं काम नहीं किया debugElement से injector के साथ सेवा इंजेक्शन दी गई।

import { TestBed, 
     async } from '@angular/core/testing'; 

@injectable() 
class MyService { 
    public method() {} 
} 

let MyMockedService = { 
    method:() => {} 
} 

@Component({ 
    template: '' 
}) 
class MyComponent { 
    constructor(private myService: MyService) {;} 
    public method() { 
    this.myService.method(); 
    } 
} 

describe('Test',() => { 
    beforeEach(async(() => { 
    TestBed 
     .configureTestingModule({ 
     imports: [ 
      CommonModule 
     ], 
     declarations: [ 
      MyComponent 
     ], 
      providers: [ 
      { provide: MyService, useValue: MyMockedService} 
     ] 
     }) 
     .compileComponents() 
     .then(() => { 
     fixture = TestBed.createComponent(MyComponent); 
     myComponent = fixture.componentInstance; 
     }); 
    })); 
    it('should spy on service',() => { 
    let myMockedService = fixture.debugElement.injector.get(MyMockedService); 
    spyOn(myMockedService, 'method'); 
    myComponent.method(); 
    expect(myMockedService.method); 
    }); 
})