[英]debugElement return null in my angular5 test
我希望使用angular.io doc 中描述的主機組件測試 anguar5 組件。
但我的測試一直失敗,因為
TypeError: Cannot read property 'query' of null
at UserContext.<anonymous> (http://localhost:9876/base/config-webpack/spec-bundle.js:293832:39)
at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/base/config-webpack/spec-bundle.js:288418:26)
at ProxyZoneSpec../node_modules/zone.js/dist/proxy.js.ProxyZoneSpec.onInvoke (http://localhost:9876/base/config-webpack/spec-bundle.js:287920:39)
at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/base/config-webpack/spec-bundle.js:288417:32)
at Zone../node_modules/zone.js/dist/zone.js.Zone.run (http://localhost:9876/base/config-webpack/spec-bundle.js:288168:43)
at UserContext.<anonymous> (http://localhost:9876/base/config-webpack/spec-bundle.js:287799:34)
at attempt (http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:4289:46)
at ZoneQueueRunner.QueueRunner.run (http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:4217:20)
at ZoneQueueRunner.QueueRunner.execute (http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:4199:10)
at ZoneQueueRunner../node_modules/zone.js/dist/jasmine-patch.js.jasmine.QueueRunner.ZoneQueueRunner.execute (http://localhost:9876/base/config-webpack/spec-bundle.js:287827:42)
事實上,當我記錄我的 fixture.debugElement 時,它返回 null。
我的測試代碼是:
import {} from 'jasmine';
import { Component } from '@angular/core';
import { TestBed, ComponentFixture } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DropDownListComponent } from './dropDownList.component';
@Component({
template: '<dropdown-list [valuesList]="valuesList" [selectedValue]="valuesSelected" ></dropdown-list>'
})
class TestComponent {
valuesList = [{label: 'test_select', value:'test'}, {label: 'test_select2', value:'test2'}];
valuesSelected = {label: 'test_select', value:'test'};
}
describe('DropDownListComponent', () => {
let fixture, component;
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [TestComponent, DropDownListComponent]
}).compileComponents();
});
it('should display selectedValue', () => {
fixture = TestBed.createComponent(TestComponent);
component = fixture.componentInstance;
fixture.detectChanges();
console.log(fixture.isStable());
console.log(fixture);
console.log(component);
console.log(fixture.debugElement);
//const fixture = TestBed.createComponent(TestComponent);
let de = fixture.debugElement.query(By.css(".value-container"));
let el = de.nativeElement;
expect(el.textContent).toContain('test_select');
});
});
當你編寫一個測試時,你只需要測試你的組件/服務/管道/指令等,而不是它的依賴項。
從上面的代碼中,我假設DropDownListComponent
具有未在TestBed
providers
中聲明的 DI 依賴項,並且會導致問題。 無論如何,在這種情況下,它應該是一個模擬,而不是一個真正的組件。
如果你想測試DropDownListComponent
- 那么請分享它的代碼。 如果不了解它的界面,就很難猜測如何為它編寫測試。
您可以使用ng-mocks來模擬它,然后您只需要測試[valuesList]
和[selectedValue]
獲得了正確的值。
同樣要正確編譯所有組件,您需要處理compileComponents
的承諾。
describe('TestComponent', () => {
beforeEach(() => {
return TestBed.configureTestingModule({
declarations: [TestComponent, MockComponent(DropDownListComponent)],
}).compileComponents();
});
it('should display selectedValue', () => {
const fixture = MockRender(TestComponent);
const dropdown = MockHelper.findOrFail(fixture.debugElement, DropDownListComponent);
expect(dropdown.valuesList).toEqual(fixture.point.valuesList);
expect(dropdown.selectedValue).toEqual(fixture.point.valuesSelected);
});
});
利潤。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.