2017-08-04 149 views
1

角度單元測試是新功能。角度單元測試:如何運行基本測試

我想實現第一運行試驗,所以我開發了這個:

import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 
import { AppComponent } from './app.component'; 

describe('AppComponent',() => { 
    let component: AppComponent; 
    let fixture: ComponentFixture<AppComponent>; 

    beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
     declarations: [ AppComponent ], 
    }).compileComponents(); 
    })); 

    beforeEach(() => { 
    fixture = TestBed.createComponent(AppComponent); 
    component = fixture.componentInstance; 
    fixture.detectChanges(); 
    }); 

    it('first test',() => { 
    expect('1').toBe('1'); 
    }); 
}); 

就像你看到我的第一個測試是斷言,「1」是「1」,我不知道爲什麼我面對得到它全成的問題,因爲它引發了我這樣的錯誤:

Error: Template parse errors: Can't bind to 'min' since it isn't a known property of 'dx-progress-bar'. 
    1. If 'dx-progress-bar' is an Angular component and it has 'min' input, then verify that it is part of this module. 
    2. If 'dx-progress-bar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 
    3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" 
     width="100%" 
     [class.complete]="progressBar.value == maxValue" 
     [ERROR ->][min]="0" 
     [max]="maxValue" 
     [statusFormat]="wordProgression" "): ng:///DynamicTestModule/[email protected]:4 

這是真的,我使用DevExtreme小部件在我的應用程序組件,但我還沒有甚至試圖對它進行測試。我只是從明顯的測試案例開始。

我需要知道我該如何解決它?

建議?

回答

2

你必須包括需要編譯你的組件在你TestBed.configureTestingModule所有的東西:

// import { DevExtremeModule } from 'devextreme-angular'; 
import { DxProgressBarModule } from 'devextreme-angular/ui/progress-bar'; 


TestBed.configureTestingModule({ 
    imports: [ 
    DxProgressBarModule, 
    // or DevExtremeModule 
    ], 
    declarations: [ AppComponent ], 
}).compileComponents(); 
+0

基本上,intented什麼yurzui說的是,你需要實際重新建立一個動態模塊,以測試你的組件。原因是因爲所有東西都與依賴注入與Angular相關聯,並且您必須使用TestBed.configureTestingModule()來重新創建一個模塊,以提供組件編譯所需的最低限度要求。 如果你需要服務/管道,或者其他類似的東西,不要忘記把你的課程「存根」作爲嘲笑使用。 –

+0

@AlexBeugnet,非常感謝這些信息,因此我想知道如何存根/模擬我的服務? – firasKoubaa

+0

類似於'{提供:MyService,useClass:MyServiceMock}' – yurzui