कोणीय 2 आरसी 4: यूनिट टेस्ट घटक जिसमें निर्भरता इंजेक्शन एक सेवा है जिसका अपना

Question

है क्योंकि कोणीय टीम लगातार कोणीय 2 आरसी संस्करणों में सामान को अपग्रेड/बहिष्कृत कर रही है, मुझे इस समस्या का सामना करना पड़ा।

मेरे पास एक घटक है जिसमें निर्भरता इंजेक्शन (डीआई) है, जो वास्तव में एक सेवा है (इस मामले में उपयोगकर्ता सेवा)। इस प्रयोक्ता सेवा के पाठ्यक्रम में स्वयं के कुछ डीआई हैं। कोणीय 2 के नवीनतम आरसी 4 में अपडेट करने के बाद मुझे एहसास हुआ कि मैं अब भी इसी तरह के परीक्षण नहीं बना सकता।

इसलिए दस्तावेज़ यहां कुछ सापेक्ष उल्लेख नहीं कर रहे हैं, यह मेरा कोड है (इस प्रश्न के लिए सरलीकृत)।

मेरे घटक:

import { Component } from '@angular/core'; 
import { MdButton } from '@angular2-material/button'; 
import { 
    MdIcon, 
    MdIconRegistry 
} from '@angular2-material/icon'; 
import { UserService } from '../../services/index'; 

@Component({ 
    moduleId: module.id, 
    selector: 'logout-button', 
    templateUrl: 'logout-button.component.html', 
    styleUrls: ['logout-button.component.css'], 
    providers: [MdIconRegistry, UserService], 
    directives: [MdButton, MdIcon] 
}) 
export class LogoutButtonComponent { 

    constructor(public userService: UserService) {} 

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

} 

घटक के डि, UserService जो के रूप में आप देख सकते हैं कुछ डीआई (रूटर, AuthHttp & HTTP) है:

import { Injectable } from '@angular/core'; 
import { 
    Http, 
    Headers 
} from '@angular/http'; 
import { 
    AuthHttp, 
    JwtHelper 
} from 'angular2-jwt'; 
import { Router } from '@angular/router'; 
import { UMS } from '../common/index'; 

@Injectable() 
export class UserService { 

    constructor(
    private router: Router, 
    private authHttp: AuthHttp, 
    private http: Http) { 

     this.router = router; 
     this.authHttp = authHttp; 
     this.http = http; 
    } 

    /** 
    * Logs out user 
    */ 
    public logout() { 
     this.authHttp.get(UMS.url + UMS.apis.logout) 
     .subscribe(
     data => this.logoutSuccess(), 
     err => this.logoutSuccess() 
    ); 
    } 

} 

और यहाँ परीक्षण है घटक के लिए:

import { By }   from '@angular/platform-browser'; 
import { DebugElement } from '@angular/core'; 

import { 
    beforeEach, 
    beforeEachProviders, 
    describe, 
    expect, 
    it, 
    inject, 
    fakeAsync, 
    TestComponentBuilder 
} from '@angular/core/testing'; 

import { AuthHttp } from 'angular2-jwt'; 
import { Router } from '@angular/router'; 
import { Http } from '@angular/http'; 
import { LogoutButtonComponent } from './logout-button.component'; 
import { UserService } from '../../services/index'; 

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



    beforeEachProviders(() => [ 
    LogoutButtonComponent, 
    UserService 
    ]); 

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

}); 

अभी के लिए (इसे) के बारे में चिंता न करें।

जैसा कि आप देख सकते हैं मैं; ​​beforeEachProviders पर संबंधित प्रदाताओं को जोड़ रहा हूं।

Error: No provider for Router! (LogoutButtonComponent -> UserService -> Router)

कौन सा उम्मीद है मान लें:

इस मामले में मैं जब मैं परीक्षण चलाने में कोई त्रुटि हो रही है।

तो क्रम में उन त्रुटियों मैं भी प्रदाताओं में सेवा के डीआई जोड़ रहा नहीं मिलता में:

beforeEachProviders(() => [ 
    LogoutButtonComponent, 
    Router, 
    AuthHttp, 
    Http, 
    UserService 
    ]); 

लेकिन अब मैं कर रहा हूँ, यह त्रुटि मिलती:

Error: Cannot resolve all parameters for 'Router'(?, ?, ?, ?, ?, ?, ?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'Router' is decorated with Injectable.

मैं वास्तव में यह पता लगाने की कोशिश कर रहा हूं कि क्या हो रहा है, इसलिए मुझे यहां कुछ संबंधित उत्तर मिले लेकिन सभी पुराने हैं और पुराने router-deprecated या angular2/router को कवर करते हैं लेकिन दोनों को बहिष्कृत किया गया है और इस मामले को कवर नहीं किया जा रहा है।

इस पर कुछ सहायता और शायद कुछ संसाधनों को पसंद आएगा क्योंकि मुझे राउटर के नवीनतम संस्करण से संबंधित कुछ भी नहीं मिल रहा है: "@angular/router": "3.0.0-beta.2", और RC4।

धन्यवाद

अद्यतन!

मैं ऊपर दो त्रुटियों को बाईपास करने का प्रबंधन करता हूं और अब मैं घटक तक पहुंच सकता हूं। यहाँ वर्णन कोड है:

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

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

    beforeEachProviders(() => [ 
    LogoutButtonComponent 
    ]); 

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

    it('should inject UserService',() => { 
    expect(component.userService).toBeTruthy(); 
    }); 

    it('should logout user',() => { 
    localStorage.setItem('token', 'FOO'); 
    component.logout(); 
    expect(localStorage.getItem('token')).toBeUndefined(); 
    }); 

}); 

लेकिन ऐसा लगता है कि यहां तक ​​कि डि सेवा इंजेक्शन और सुलभ है सेवा के डीआई नहीं हैं। तो अब मुझे यह त्रुटि मिलती है:

TypeError: this.authHttp.get is not a function

कोई विचार?

Answer 1

ऐसा लगता है कि आप निर्भरता लूप समस्या का सामना कर रहे थे, क्योंकि आपके उपयोगकर्तासेरिव को भी ऑथहट्प, एचटीपी इत्यादि इंजेक्ट करने की आवश्यकता है ... यदि आपको अपने घटक की जांच करने की ज़रूरत है तो यह वास्तव में परेशान होगा। मेरे रास्ते बस एक नकली UserSerivce बना सकते हैं और UserService.logout() विधि के माध्यम से उम्मीद मज़ाक उड़ाया मान, क्योंकि आप को पता है कि वास्तव में UserService में हुआ न करना पड़े, आप सभी की जरूरत सिर्फ एक वापसी मान है:

let MockUserService = { 
    logout() { 
    // return some value you need 
    } 
} 

फिर , परीक्षण सूट में:

import { provide } from '@angular/core' 

beforeEachProviders(() => [ 
    provide(UserService, {useClass: MockUserService}) 
]) 

... detail test code here 

मुझे आशा है कि यह आपके लिए काम करेगा। और यहां एक पोस्ट है जो मुझे बहुत मदद करता है: https://developers.livechatinc.com/blog/testing-angular-2-apps-dependency-injection-and-components/

Answer 2

आरसी 4 के साथ, परीक्षण में http का उपयोग करने के लिए कुछ कामकाज की आवश्यकता होती है। मेरे लिए

https://github.com/angular/angular/issues/9294

मेरी यूनिट tests.html को यह जोड़ा जा रहा है यह तय: भी इस मुद्दे (RC5 में तय किया जाना चाहिए) देखें

System.import('@angular/platform-browser/src/browser/browser_adapter').then(function(browser_adapter) { 
    browser_adapter.BrowserDomAdapter.makeCurrent(); 
})