[英]Angular 7 testing with inheritance and global injector
我正在Angular 7中啟動一個新項目,並且有一個基本組件來集中我的一些全局變量和服務。 由於項目可能會變得很大,因此我選擇這種方法來避免在每個組件的開頭以及在super()調用時大量導入。 為此,我實現了此處描述的方法,其中一個外部類存儲要在基礎組件中使用的依賴注入器。 如所討論的在這里 ,修改必須作出遵循角7(噴射器曾在中的AppModule被初始化)。 (請參閱下面的punker)
這對於運行項目效果很好,當我嘗試運行單元測試(使用業力茉莉花)時出現問題。 由於AppInjector在模塊中初始化,因此測試運行不會對其進行初始化。 然后,由於我的基本組件嘗試調用注入器的函數,因此它中斷了。
如果有人通過修改測試結構或AppInjector本身對此有任何解決方案,將不勝感激。
這是一個涉及所有代碼的插件。 該示例是一個使用priming toast模塊的全局通知組件,以及在基本組件中的全局通知服務。 (我無法使插入器正常工作,出現某種MIME類型錯誤,但是代碼全存在)
https://next.plnkr.co/edit/7v5nB8cORWsnpPAL?預覽
當我運行ng test時,這是我得到的錯誤:
Chrome 71.0.3578 (Windows 10.0.0) AppComponent should create the app FAILED
TypeError: Cannot read property 'get' of undefined
at NotificationsComponent.BaseComponent (http://localhost:9876/src/app/components/base.component.ts?:22:50)
at new NotificationsComponent (http://localhost:9876/src/app/components/utils/notifications/notifications.component.ts?:17:13)
at createClass (http://localhost:9876/node_modules/@angular/core/fesm5/core.js?:20716:1)
at createDirectiveInstance (http://localhost:9876/node_modules/@angular/core/fesm5/core.js?:20595:1)
at createViewNodes (http://localhost:9876/node_modules/@angular/core/fesm5/core.js?:21821:1)
at callViewAction (http://localhost:9876/node_modules/@angular/core/fesm5/core.js?:22137:1)
at execComponentViewsAction (http://localhost:9876/node_modules/@angular/core/fesm5/core.js?:22056:1)
at createViewNodes (http://localhost:9876/node_modules/@angular/core/fesm5/core.js?:21849:1)
at createRootView (http://localhost:9876/node_modules/@angular/core/fesm5/core.js?:21735:1)
at callWithDebugContext (http://localhost:9876/node_modules/@angular/core/fesm5/core.js?:22767:1)
Error: Uncaught (in promise): TypeError: Cannot read property 'get' of undefined
at resolvePromise (http://localhost:9876/node_modules/zone.js/dist/zone.js?:831:1)
at http://localhost:9876/node_modules/zone.js/dist/zone.js?:896:1
at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:9876/node_modules/zone.js/dist/zone.js?:423:1)
at AsyncTestZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.AsyncTestZoneSpec.onInvokeTask (http://localhost:9876/node_modules/zone.js/dist/zone-testing.js?:698:1)
at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvokeTask (http://localhost:9876/node_modules/zone.js/dist/zone-testing.js?:317:1)
at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:9876/node_modules/zone.js/dist/zone.js?:422:1)
at Zone../node_modules/zone.js/dist/zone.js.Zone.runTask (http://localhost:9876/node_modules/zone.js/dist/zone.js?:195:1)
at drainMicroTaskQueue (http://localhost:9876/node_modules/zone.js/dist/zone.js?:601:1)
Expected undefined to be truthy.
at UserContext.<anonymous> (http://localhost:9876/src/app/app.component.spec.ts?:35:21)
at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/node_modules/zone.js/dist/zone.js?:391:1)
at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke (http://localhost:9876/node_modules/zone.js/dist/zone-testing.js?:289:1)
在測試中,您可以從TestBed
獲得注射器。 因此,您可以像其他所有beforeEach
一樣在AppInjector
中初始化AppInjector
。 只需在createComponent
調用之前執行此操作即可,使其准備就緒。
這是從您的Plunker示例中更改的代碼:
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
RouterTestingModule,
ToastModule
],
declarations: [
AppComponent,
NotificationsComponent
]
}).compileComponents().then(() => {
AppInjector.setInjector(TestBed.get(Injector));
fixture = TestBed.createComponent(AppComponent);
app = fixture.debugElement.componentInstance;
});
}));
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.