组件定义:
export class NoteComponent {
constructor(elementRef: ElementRef,
renderer: Renderer,
_alertService: AlertService) {
}
ngAfterViewInit() {
//Hiding the toolbar when editable by default.
this.renderer.setElementStyle(this.elementRef.nativeElement.children[0].children[2].children[0], 'display', 'none');
}
}
测试
describe('NoteComponent (external template)', () => {
let comp: NoteComponent;
let fixture: ComponentFixture<NoteComponent>;
let de: DebugElement;
let el: HTMLElement;
let rendererMock = jasmine.createSpyObj('rendererMock', ['selectRootElement',
'createElement',
'createViewRoot',
'createText',
'setElementProperty',
'setElementAttribute',
'setText',
'setBindingDebugInfo',
'createTemplateAnchor',
'projectNodes',
'attachViewAfter',
'detachView',
'destroyView',
'listen',
'listenGlobal',
'setElementClass',
'setElementStyle',
'invokeElementMethod',
'animate']);
let rootRendererMock = {
renderComponent: () => {
return rendererMock;
}
};
beforeEach(async () => {
TestBed.configureTestingModule({
declarations: [
NoteComponent,
SafePipe], // declare the test component
providers: [AlertService,
{ provide: Renderer, useValue: rootRendererMock }]
})
.overrideComponent(NoteComponent, {
set: {
providers: [
{ provide: Renderer, useValue: rootRendererMock }
]
}
});
TestBed.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(NoteComponent);
comp = fixture.componentInstance;
});
it('note: note not on favorite page, not faved', async () => {
comp.pinnedOnFavWall = false;
fixture.detectChanges();
de = fixture.debugElement.query(By.css('.favorite'));
expect(de).toBeDefined();
});
测试通过,因为它是异步的,但我在控制台中收到此错误:
TypeError:无法读取未定义的属性“样式” 在DomRenderer.webpackJsonp ... / .. / .. / platform-browser / src / dom / dom_renderer.js.DomRenderer.setElementStyle(http://localhost:9876/_karma_webpack_/webpack:/C:/Shilpa/Work/Freelancing/ArugamBay/Code/ArugambaySite2/src/Arugambay.Web/~/@angular/platform-browser/src/dom/dom_renderer.js:395:1) 在DebugDomRenderer.webpackJsonp ... / .. / .. / core / src / debug / debug_renderer.js.DebugDomRenderer.setElementStyle(http://localhost:9876/_karma_webpack_/webpack:/C:/Shilpa/Work/Freelancing/ArugamBay/Code/ArugambaySite2/src/Arugambay.Web/~/@angular/core/src/debug/debug_renderer.js:223:1) 在NoteComponent.ngAfterViewInit(http://localhost:9876/_karma_webpack_/webpack:/C:/Shilpa/Work/Freelancing/ArugamBay/Code/ArugambaySite2/src/Arugambay.Web/Scripts/app/components/controls/Note/note.component.ts:67:23) at CompiledTemplate.proxyViewClass.View_NoteComponent_Host0.detectChangesInternal(/DynamicTestModule/NoteComponent/host.ngfactory.js:32:72) 在CompiledTemplate.proxyViewClass.webpackJsonp ... / .. / .. / core / src / linker / view.js.AppView.detectChanges(http://localhost:9876/_karma_webpack_/webpack:/C:/Shilpa/Work/Freelancing/ArugamBay/Code/ArugambaySite2/src/Arugambay.Web/~/@angular/core/src/linker/view.js:425:1) 在CompiledTemplate.proxyViewClass.webpackJsonp ... / .. / .. / core / src / linker / view.js.DebugAppView.detectChanges(http://localhost:9876/_karma_webpack_/webpack:/C:/Shilpa/Work/Freelancing/ArugamBay/Code/ArugambaySite2/src/Arugambay.Web/~/@angular/core/src/linker/view.js:620:1) 在ViewRef_.webpackJsonp ... / .. / .. / core / src / linker / view_ref.js.ViewRef_.detectChanges(http://localhost:9876/_karma_webpack_/webpack:/C:/Shilpa/Work/Freelancing/ArugamBay/Code/ArugambaySite2/src/Arugambay.Web/~/@angular/core/src/linker/view_ref.js:181:1) 在ComponentFixture._tick(http://localhost:9876/_karma_webpack_/webpack:/C:/Shilpa/Work/Freelancing/ArugamBay/Code/ArugambaySite2/src/Arugambay.Web/~/@angular/core/bundles/core-testing.umd.js:191:1) 在http://localhost:9876/_karma_webpack_/webpack:/C:/Shilpa/Work/Freelancing/ArugamBay/Code/ArugambaySite2/src/Arugambay.Web/~/@angular/core/bundles/core-testing.umd.js:205:46 在ZoneDelegate.invoke(http://localhost:9876/base/node_modules/zone.js/dist/zone.js:365:26) 在ProxyZoneSpec.webpackJsonp ... / .. / .. / .. / zone.js / dist / proxy.js.ProxyZoneSpec.onInvoke(http://localhost:9876/_karma_webpack_/webpack:/C:/Shilpa/Work/Freelancing/ArugamBay/Code/ArugambaySite2/src/Arugambay.Web/~/zone.js/dist/proxy.js:79:1) 在ZoneDelegate.invoke(http://localhost:9876/base/node_modules/zone.js/dist/zone.js:364:32) at Object.onInvoke(http://localhost:9876/_karma_webpack_/webpack:/C:/Shilpa/Work/Freelancing/ArugamBay/Code/ArugambaySite2/src/Arugambay.Web/~/@angular/core/src/zone/ng_zone.js:271:1) 在ZoneDelegate.invoke(http://localhost:9876/base/node_modules/zone.js/dist/zone.js:364:32) 在Zone.run(http://localhost:9876/base/node_modules/zone.js/dist/zone.js:125:43)
如何摆脱此错误? 即使没有模拟,我也会得到同样的错误。
PS:为简洁起见编辑了组件代码。因此,堆栈中的行号可能不匹配。