測試組件時，服務注入angular2.0

我試圖寫測試用例了業務的注入

//component.ts

組件

import { Component, OnInit } from '@angular/core'; 
import { FPService } from './shared/services/forgot-password.service'; 
import { CookieService } from 'angular2-cookie/core'; 

@Component({ 
    // moduleId: module.id, 
    selector: 'app-fp', 
    templateUrl: 'fp.component.html', 
    styleUrls: ['fp.component.css'], 
    providers: [FPService] 

}) 
export class FPComponent implements OnInit { 

    constructor(
    private cookie: CookieService, 
    private fpService: FPService 
) { } 

    ngOnInit() { 

    } 
    fnRequest(email) { 

    var oData = { "email": email }; 
    this.fpService.fnFPServie(oData) 
     .subscribe(
     data => { 
     console.log('success', data); 

     }, 
     error => { 
     console.log('error', error); 

     } 
    ); 
    } 

}

我spec.ts

import { FPComponent } from './forgot-password.component'; 


import { FPService } from './shared/services/forgot-password.service'; 
import { CookieService } from 'angular2-cookie/core'; 


class mockFPService { 
    fnFPServie(data) { 
     return {} 
    } 
} 

class mockCookieService { 
    getObject(name: string) { 
     return true; 
    } 
} 


let comp: FPComponent; 
let fixture: ComponentFixture<FPComponent>; 
describe('Component: FPComponent',() => { 
    beforeEach(() => { 
     TestBed.configureTestingModule({ 

      declarations: [FPComponent], 
      providers: [ 

       { provide: FPService, useClass: mockFPService }, 
       { provide: CookieService, useClass: mockCookieService }, 


      ] 
     }); 

     fixture = TestBed.createComponent(FPComponent); 
     comp = fixture.componentInstance; 

    }); 

    it('should have method fnRequest',() => { 
     expect(comp.fnRequest('[email protected]')).toBeTruthy; 
    }); 

    it('should sent data to fnFpService() of FpService',() => { 

     comp.fnRequest('[email protected]'); 

     ************************************************** 
     how do inject the Fpservice and call fnFPServie ? 
     ******************************************************** 


    }); 


});

這將是有益的，如果有人建議如何嘲笑注射Fpservice測試fnRequest（）函數提前

來源

2016-09-30 mounika20

由於這是不夠的，只是增加一個fnFPServie方法。呼叫者然後訂閱返回的觀察者，呼叫subscribe。您如何嘲笑這是剛剛做類似

class MockFPService { 
    error; 
    data; 
    fnFPServie(data) { 
    return this; 
    } 

    subscribe(next, err) { 
    if (next && !error) { 
     next(this.data) 
    } 
    if (err && this.error) { 
     err(this.error); 
    } 
    } 
}

在這裏，你只是返回服務本身，它有它自己的模擬subscribe方法。當某個電話的subscribe時，它們傳遞成功和錯誤回調函數，並且您只需在適當的響應中調用回調傳遞。

您還可以在測試過程中配置模擬，包括數據或錯誤。所以你可以分別測試兩個結果。

let mockFPService: MockFPService; 

beforeEach(() => { 
    mockFPService = new MockFPService(); 
    TestBed.configureTestingModule({ 
    providers: [ 
     { provide: MockFPService, useValue: mockFPService } 
    ] 
    }) 
}) 

it('..',() => { 
    mockFPService.data = 'some data'; 
}) 

it('..',() => { 
    mockFPService.error = 'some error'; 
})

來源

2016-09-30 09:53:54

測試組件時，服務注入angular2.0

回答

相關問題