具有依賴項的依賴項組件的單元測試，出了什麼問題？

我有煩人的錯誤，可能是我無法解決的錯誤。我有一個簡單的組件，它實際上只是我的web應用程序中的一個頂級欄元素。具有依賴項的依賴項組件的單元測試，出了什麼問題？

這個組件，你可以看到只有一個依賴關係中，UserService並使用它很簡單：

import { Component, OnInit } from '@angular/core'; 
import { MdButton } from '@angular2-material/button'; 
import { MdIcon , MdIconRegistry} from '@angular2-material/icon'; 
import { UserService } from '../services/index'; 
import { RouteConfig, ROUTER_DIRECTIVES, Router, ROUTER_PROVIDERS 
    } from '@angular/router-deprecated'; 


@Component({ 
    moduleId: module.id, 
    selector: 'top-bar', 
    templateUrl: 'top-bar.component.html', 
    styleUrls: ['top-bar.component.css'], 
    providers: [MdIconRegistry, UserService, ROUTER_PROVIDERS], 
    directives: [MdButton, MdIcon, ROUTER_DIRECTIVES] 
}) 
export class TopBarComponent implements OnInit { 

    constructor(private userService: UserService) { 
    this.userService = userService; 
    } 

    ngOnInit() { 
    } 

    /** 
    * Call UserService and logout() method 
    */ 
    logout() { 
    this.userService.logout(); 
    } 

}

由於這項服務也有一定的依賴性（路由器等），我不得不在beforeEachProviders爲他們提供方法，你可以看到：

import { 
    beforeEach, 
    beforeEachProviders, 
    describe, 
    expect, 
    it, 
    inject, 
} from '@angular/core/testing'; 
import { TopBarComponent } from './top-bar.component'; 
import { 
    Router, RootRouter, RouteRegistry, ROUTER_PRIMARY_COMPONENT 
} from '@angular/router-deprecated'; 
import { provide } from '@angular/core'; 
import { SpyLocation } from '@angular/common/testing'; 
import { UserService } from '../services/index'; 

describe('Component: TopBar',() => { 

    beforeEachProviders(() => [ 
     RouteRegistry, 
     provide(Location, { useClass: SpyLocation }), 
     provide(ROUTER_PRIMARY_COMPONENT, { useValue: TopBarComponent }), 
     provide(Router, { useClass: RootRouter }), 
     UserService, 
     TopBarComponent 
    ]); 

    it('should inject the component', inject([TopBarComponent], 
     (component: TopBarComponent) => { 
    expect(component).toBeTruthy(); 
    })); 

});

當我運行測試，雖然我得到這個錯誤信息：

Chrome 51.0.2704 (Mac OS X 10.11.5) Component: TopBar should inject the component FAILED Error: No provider for Location! (TopBarComponent -> UserService -> Router -> Location) Error: DI Exception[......]

第一個所有，你可以看到位置提供商提供。和中學，爲什麼我的測試需要提供（或注入）使用到測試組件服務的依賴關係？

例如，如果從上述測試中刪除路由器，即使我的組件不使用路由器我會因爲使用的服務而得到一個錯誤。那麼不應該在組件中收到同樣的錯誤，而且在測試中不會收到相同的錯誤？

更新 - CODE &錯誤消息CHANGE

我已經設法通過改變我的規格能源部這一站收到此錯誤：

import { 
    beforeEach, 
    describe, 
    expect, 
    it, 
} from '@angular/core/testing'; 
import { TopBarComponent } from './top-bar.component'; 
import { UserService } from '../services/index'; 
import { 
    Router 
} from '@angular/router-deprecated'; 
import { Http } from '@angular/http'; 
import { AuthHttp } from 'angular2-jwt'; 

describe('Component: TopBar',() => { 

    let router: any = Router; 
    let authHttp: any = AuthHttp; 
    let http: any = Http; 
    let component: TopBarComponent; 
    let service: UserService = new UserService(router, authHttp, http); 

    beforeEach(() => { 
     component = new TopBarComponent(service); 
    }); 

    it('logout function should work ',() => { 
    let logout = component.logout; 
    logout(); 
    expect(localStorage.getItem('token')).toBe(null); 
    }); 

});

但是知道我在從收到此錯誤我的組件：

TypeError: Cannot read property 'userService' of undefined

提到的錯誤是在這個函數上：

logout() { 
    this.userService.logout(); 
}

我的組件但這只是在測試。在應用程序中它正常工作。在我的測試中，該函數由於某種原因無法到達構造函數的參數。

種堆在這裏的......

來源

2016-07-11 Vassilis Pits

嘗試創建服務的內部beforeEach使用TestBed.get（UserService）的對象。此代碼將自動解析依賴關係並創建該對象以供使用。

刪除'= new UserService（router，authHttp，http）;' from'let service：UserService = new UserService（router，authHttp，http）;'

來源

2018-03-01 05:44:47 Ashish

具有依賴項的依賴項組件的單元測試，出了什麼問題？

回答

相關問題