2017-02-12 8 views
5

के साथ कोणीय 2 परीक्षण घटक के साथ त्रुटि इस परीक्षण उपयोगिता TestBed को सरल उदाहरण के साथ कोणीय -2 में सीखने की कोशिश कर रही है और मेरा पहला अवरोधक मारा है। गूगल या तो खोज मिलता-जुलता कोई उदाहरण उपज नहीं था,टेस्टबेड

तो

, मैं एक बहुत ही बुनियादी घटक header के रूप में नीचे है -

import { TestBed } from '@angular/core/testing'; 
import { HeaderComponent } from './header.component'; 

describe('HeaderComponent Test',() => { 
    let component: HeaderComponent; 

    beforeEach(() => { 
     TestBed.configureTestingModule({ 
      declarations: [HeaderComponent] 
     }); 

     const fixture = TestBed.createComponent(HeaderComponent); 
     component = fixture.componentInstance; 
    }); 

    it('should have the component defined',() => { 
     expect(component).toBeDefined(); 
    }); 

    it('should initialize the title to test',() => { 
     expect(component.title).toBe('test'); 
    }); 
}); 
-

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

@Component({ 
    selector: 'header', 
    template: '' 
}) 
export class HeaderComponent{ 
    public title: string; 

    constructor(testparam: string){ 
     this.title = 'test'; 
    } 
} 

और फिर नीचे के रूप में अपनी कल्पना है

कर्म परीक्षण चलाने फेंक रहा है - Error: No provider for String! in karma.entry.js

karma.entry.js मूल रूप से सिर्फ टेस्टबेड के लिए परीक्षण env विन्यास स्थापित कर रही है और फिर मेरी कल्पना फ़ोल्डर में प्रत्येक परीक्षा के माध्यम से चला जाता है, नीचे मेरी karma.entry.js

require('core-js/es6'); 
require('core-js/es7/reflect'); 

require('es6-shim'); 
require('reflect-metadata'); 
require('zone.js/dist/zone'); 
require('zone.js/dist/long-stack-trace-zone'); 
require('zone.js/dist/proxy'); 
require('zone.js/dist/sync-test'); 
require('zone.js/dist/jasmine-patch'); 
require('zone.js/dist/async-test'); 
require('zone.js/dist/fake-async-test'); 
require('rxjs/Rx'); 

const browserTesting = require('@angular/platform-browser-dynamic/testing'); 
const coreTesting = require('@angular/core/testing'); 

coreTesting.TestBed.initTestEnvironment(
    browserTesting.BrowserDynamicTestingModule, 
    browserTesting.platformBrowserDynamicTesting() 
); 

const context = require.context('../src', true, /\.spec\.ts$/); 

context.keys().forEach(context); 

Error.stackTraceLimit = Infinity; 
jasmine.DEFAULT_TIMEOUT_INTERVAL = 2000; 

है अगर मैं निर्माता से पैरामीटर को निकालने घटक वर्ग के, परीक्षण पास हो जाते हैं, इसलिए मैं सोच रहा हूं कि मुझे कुछ पूर्व-कॉन्फ़िगरेशन याद आ रही है जो TestBed.createComponent(HeaderComponent) को स्ट्रिंग प्रकार पैरामीटर के साथ घटक के कन्स्ट्रक्टर को ठीक से संकलित नहीं करने का कारण बनती है।

कोई सुराग जो मुझे याद आ रही है?


अद्यतन:

अगर यह किसी को भी मदद करता है - @ mrkosima के उत्तर के आधार पर, मेरे अद्यतन घटक वर्ग अब नीचे की तरह दिखता है और इकाई परीक्षण सब अच्छा अब पारित :)

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

export let TITLE_TOKEN = new OpaqueToken('title token'); 

@Component({ 
    selector: 'header', 
    template: '', 
    providers: [{ provide: TITLE_TOKEN, useValue: 'test' }] 
}) 
export class HeaderComponent{ 
    public title: string; 

    constructor(@Inject(TITLE_TOKEN) titleParam: string){ 
     this.title = titleParam; 
    } 
} 

उत्तर

4

आप सही हैं कि निर्माता के तर्क में समस्या का मूल कारण।

घटक तत्काल Injector के दौरान कन्स्ट्रक्टर में सूचीबद्ध सभी निर्भरताओं को हल करने का प्रयास कर रहा है। Injector प्रदाताओं में टाइप करके निर्भरता को देखता है। डि यहाँ के बारे में अधिक: https://angular.io/docs/ts/latest/guide/dependency-injection.html

इसका मतलब है कि अगर घटक constructor(authService: AuthService) { } है, Injector प्रदाताओं में AuthService टोकन की तलाश में।

आपके मामले में वही - आपका घटक String पर निर्भर करता है। लेकिन String टोकन के साथ कोई प्रदाता नहीं है।

असल में, आदिम प्रकार को निर्भरता के रूप में सूचीबद्ध करने की गलती है।

इस OpaqueToken के बजाय

मॉड्यूल प्रदाताओं

providers: [{ provide: TITLE_TOKEN, useValue: 'title value' }] 

घटक में इंजेक्षन टोकन से में

export let TITLE_TOKEN = new OpaqueToken('title token'); 

कॉन्फ़िगर टोकन इस्तेमाल किया जाना चाहिए:

constructor(@Inject(TITLE_TOKEN) title: string) { 
    this.title = title; 
} 

आदिम इंजेक्शन लगाने का सही उपयोग है कि ।

अधिक यहाँ विवरण: https://angular.io/docs/ts/latest/guide/dependency-injection.html#!#opaquetoken

पुनश्च: अपने घटक परीक्षण करने के लिए TITLE_TOKEN परीक्षण मॉड्यूल के लिए जोड़ा जाना चाहिए:

import {TITLE_TOKEN} from ... 
TestBed.configureTestingModule({ 
     providers: [ { provide: TITLE_TOKEN, useValue: 'test' } ] 
}); 

और से परीक्षण घटक बना सकते हैं और title'test' के रूप में की उम्मीद है।

+0

ठीक है, तो यह कोणीय डी ढांचा है कि टेस्टबैड घटक वर्ग को तुरंत चालू करने के लिए उपयोग करता है, जिसके कारण घटक के कन्स्ट्रक्टर में सीधे चीजों की प्रकार या इंटरफेस को इंजेक्ट करना संभव नहीं है, और 'ओपेक टोकन' रैपर की आवश्यकता होती है। इससे पहले जब मैंने डी पढ़ा, मैंने इस भाग को आलस्य से बाहर छोड़ दिया :) और यह मुद्दा था। Thnx @mrkosima, मुझे लगता है कि यह डी पैटर्न समझ में आता है क्योंकि अब टाइपस्क्रिप्ट के साथ हम ज्यादातर ओओपीएस पैटर्न का उपयोग करेंगे और ज्यादातर घटक कन्स्ट्रक्टरों को कक्षा-प्रकार या कोणीय सेवाओं को पारित करेंगे, धन्यवाद। – kkap

संबंधित मुद्दे