Angular2 - Mocking up Angular2-Toaster für Jasmine Unit-Tests

Question

Mehr die Frage Verallgemeinern - Wie und externe Bibliothek in Angular2 verwendet, um Mock-up

In meiner Anwendung i Angular2-toaster für Popup-Nachrichten verwenden. Um Schreibeinheit Testsuite (Jasmin) zu einem der Komponente, habe ich versucht, den Toaster Reaktion mit folgendem Code zu verspotten,

@Component({ 
selector: 'test-component', 
template: '<toaster-container [toasterconfig]="toasterconfig"></toaster-container>', 
}) 
export class TestComponent { 
    toasterService: ToasterService; 

constructor(toasterService: ToasterService) { 
    this.toasterService = toasterService; 
} 

public toasterconfig: ToasterConfig = new ToasterConfig({ showCloseButton: true, tapToDismiss: false, timeout: 0, toastContainerId: 1 }); 
public toasterconfig2: ToasterConfig = new ToasterConfig({ showCloseButton: true, tapToDismiss: false, timeout: 0, toastContainerId: 2 }); 
} 

Und

declarations: [RouterLinkStubDirective, TestComponent], 

Aber am Ende mit Fehlern in Erklärungen hinzugefügt

Error: Error in ./ToasterContainerComponent class ToasterContainerComponent - inline template:1:34 caused by: undefined is not an object (evaluating 'klass.trim') in config/k 
ma-test-shim.js (line 19495) 
    _toggleClass@webpack:///~/@angular/common/bundles/common.umd.js:1280:0 <- config/karma-test-shim.js:43944:27 
    webpack:///~/@angular/common/bundles/common.umd.js:1257:56 <- config/karma-test-shim.js:43921:84 
    forEachAddedItem@webpack:///~/@angular/core/bundles/core.umd.js:3391:0 <- config/karma-test-shim.js:13459:20 
    _applyIterableChanges@webpack:///~/@angular/common/bundles/common.umd.js:1257:0 <- config/karma-test-shim.js:43921:38 
    ngDoCheck@webpack:///~/@angular/common/bundles/common.umd.js:1231:0 <- config/karma-test-shim.js:43895:48 
    detectChangesInInputProps 
    detectChangesInternal 
    detectChanges@webpack:///~/@angular/core/bundles/core.umd.js:9305:0 <- config/karma-test-shim.js:19373:40 
    detectChanges@webpack:///~/@angular/core/bundles/core.umd.js:9410:0 <- config/karma-test-shim.js:19478:53 
    detectViewChildrenChanges@webpack:///~/@angular/core/bundles/core.umd.js:9331:0 <- config/karma-test-shim.js:19399:37 
    detectChangesInternal 
    detectChanges@webpack:///~/@angular/core/bundles/core.umd.js:9305:0 <- config/karma-test-shim.js:19373:40 
    detectChanges@webpack:///~/@angular/core/bundles/core.umd.js:9410:0 <- config/karma-test-shim.js:19478:53 
    detectViewChildrenChanges@webpack:///~/@angular/core/bundles/core.umd.js:9331:0 <- config/karma-test-shim.js:19399:37 
    detectChangesInternal 
    detectChanges@webpack:///~/@angular/core/bundles/core.umd.js:9305:0 <- config/karma-test-shim.js:19373:40 
    detectChanges@webpack:///~/@angular/core/bundles/core.umd.js:9410:0 <- config/karma-test-shim.js:19478:53 
    detectChanges@webpack:///~/@angular/core/bundles/core.umd.js:7398:0 <- config/karma-test-shim.js:17466:38 
    _tick@webpack:///~/@angular/core/bundles/core-testing.umd.js:194:0 <- config/karma-test-shim.js:9213:50 
    webpack:///~/@angular/core/bundles/core-testing.umd.js:208:45 <- config/karma-test-shim.js:9227:59 
    invoke@webpack:///~/zone.js/dist/zone.js:232:0 <- config/karma-test-shim.js:6715:32 
    onInvoke@webpack:///~/zone.js/dist/proxy.js:79:0 <- config/karma-test-shim.js:8344:46 
    invoke@webpack:///~/zone.js/dist/zone.js:231:0 <- config/karma-test-shim.js:6714:41 
    onInvoke@webpack:///~/@angular/core/bundles/core.umd.js:6206:0 <- config/karma-test-shim.js:16274:48 
    invoke@webpack:///~/zone.js/dist/zone.js:231:0 <- config/karma-test-shim.js:6714:41 
    run@webpack:///~/zone.js/dist/zone.js:114:0 <- config/karma-test-shim.js:6597:50 
    run@webpack:///~/@angular/core/bundles/core.umd.js:6096:46 <- config/karma-test-shim.js:16164:70 
    detectChanges@webpack:///~/@angular/core/bundles/core-testing.umd.js:208:0 <- config/karma-test-shim.js:9227:33 
    webpack:///src/app/common/sample-search-widget/sample-search-widget-component.spec.ts:113:29 <- config/karma-test-shim.js:51370:31 
    execute@webpack:///~/@angular/core/bundles/core-testing.umd.js:823:0 <- config/karma-test-shim.js:9842:29 
    webpack:///~/@angular/core/bundles/core-testing.umd.js:910:32 <- config/karma-test-shim.js:9929:57 
    invoke@webpack:///~/zone.js/dist/zone.js:232:0 <- config/karma-test-shim.js:6715:32 
    onInvoke@webpack:///~/zone.js/dist/proxy.js:79:0 <- config/karma-test-shim.js:8344:46 
    invoke@webpack:///~/zone.js/dist/zone.js:231:0 <- config/karma-test-shim.js:6714:41 
    run@webpack:///~/zone.js/dist/zone.js:114:0 <- config/karma-test-shim.js:6597:50 
    webpack:///~/zone.js/dist/jasmine-patch.js:102:0 <- config/karma-test-shim.js:8550:38 
    webpack:///~/@angular/core/bundles/core-testing.umd.js:91:0 <- config/karma-test-shim.js:9110:36 
    invoke@webpack:///~/zone.js/dist/zone.js:232:0 <- config/karma-test-shim.js:6715:32 
    onInvoke@webpack:///~/zone.js/dist/async-test.js:49:0 <- config/karma-test-shim.js:8642:46 
    onInvoke@webpack:///~/zone.js/dist/proxy.js:76:0 <- config/karma-test-shim.js:8341:48 
    invoke@webpack:///~/zone.js/dist/zone.js:231:0 <- config/karma-test-shim.js:6714:41 
    run@webpack:///~/zone.js/dist/zone.js:114:0 <- config/karma-test-shim.js:6597:50 
    webpack:///~/@angular/core/bundles/core-testing.umd.js:86:0 <- config/karma-test-shim.js:9105:33 
    webpack:///~/zone.js/dist/async-test.js:38:0 <- config/karma-test-shim.js:8631:47 
    invokeTask@webpack:///~/zone.js/dist/zone.js:265:0 <- config/karma-test-shim.js:6748:41 
    runTask@webpack:///~/zone.js/dist/zone.js:154:0 <- config/karma-test-shim.js:6637:58 
    invoke@webpack:///~/zone.js/dist/zone.js:335:0 <- config/karma-test-shim.js:6818:41 
    webpack:///~/zone.js/dist/zone.js:970:0 <- config/karma-test-shim.js:7453:31 

    x Update trimmed value to model on blur of sample name 
     Chrome 55.0.2883 (Windows 7 0.0.0) 
    Error: Error in ./ToasterContainerComponent class ToasterContainerComponent - inline template:1:34 caused by: Cannot read property 'trim' of undefined 
    TypeError: Cannot read property 'trim' of undefined 
     at NgClass._toggleClass (webpack:///~/@angular/common/bundles/common.umd.js:1280:0 <- config/karma-test-shim.js:43944:27) 
     at webpack:///~/@angular/common/bundles/common.umd.js:1257:56 <- config/karma-test-shim.js:43921:72 
     at DefaultIterableDiffer.forEachAddedItem (webpack:///~/@angular/core/bundles/core.umd.js:3391:0 <- config/karma-test-shim.js:13459:18) 
     at NgClass._applyIterableChanges (webpack:///~/@angular/common/bundles/common.umd.js:1257:0 <- config/karma-test-shim.js:43921:22) 
     at NgClass.ngDoCheck (webpack:///~/@angular/common/bundles/common.umd.js:1231:0 <- config/karma-test-shim.js:43895:27) 
     at Wrapper_NgClass.detectChangesInInputProps (/CommonModule/NgClass/wrapper.ngfactory.js:38:18) 
     at _View_ToasterContainerComponent0.detectChangesInternal (/ToasterModule/ToasterContainerComponent/component.ngfactory.js:69:21) 
     at _View_ToasterContainerComponent0.AppView.detectChanges (webpack:///~/@angular/core/bundles/core.umd.js:9305:0 <- config/karma-test-shim.js:19373:19) 
     at _View_ToasterContainerComponent0.DebugAppView.detectChanges (webpack:///~/@angular/core/bundles/core.umd.js:9410:0 <- config/karma-test-shim.js:19478:49) 
     at _View_SampleSearchWidgetComponent0.AppView.detectViewChildrenChanges (webpack:///~/@angular/core/bundles/core.umd.js:9331:0 <- config/karma-test-shim.js:19399:24) 
     at _View_SampleSearchWidgetComponent0.detectChangesInternal (/DynamicTestModule/SampleSearchWidgetComponent/component.ngfactory.js:596:8) 
     at _View_SampleSearchWidgetComponent0.AppView.detectChanges (webpack:///~/@angular/core/bundles/core.umd.js:9305:0 <- config/karma-test-shim.js:19373:19) 
     at _View_SampleSearchWidgetComponent0.DebugAppView.detectChanges (webpack:///~/@angular/core/bundles/core.umd.js:9410:0 <- config/karma-test-shim.js:19478:49) 
     at _View_SampleSearchWidgetComponent_Host0.AppView.detectViewChildrenChanges (webpack:///~/@angular/core/bundles/core.umd.js:9331:0 <- config/karma-test-shim.js:19399:24) 
     at _View_SampleSearchWidgetComponent_Host0.detectChangesInternal (/DynamicTestModule/SampleSearchWidgetComponent/host.ngfactory.js:45:8) 
     at _View_SampleSearchWidgetComponent_Host0.AppView.detectChanges (webpack:///~/@angular/core/bundles/core.umd.js:9305:0 <- config/karma-test-shim.js:19373:19) 
     at _View_SampleSearchWidgetComponent_Host0.DebugAppView.detectChanges (webpack:///~/@angular/core/bundles/core.umd.js:9410:0 <- config/karma-test-shim.js:19478:49) 

Ich bin nicht sicher, dem richtigen Weg zu folgen! ,

Jede Hilfe wird

Vielen Dank im Voraus geschätzt werden.

Answer 1

Dies war ein Fehler in der Bibliothek selbst (siehe https://github.com/Stabzs/Angular2-Toaster/issues/111) aufgrund eines fehlenden elvis-Operators in der Vorlage.

Wenn die titleClass- oder messageClass-Eigenschaften null waren und die Angular-Laufzeit versucht hat, eine der beiden Eigenschaften zu trimmen, wird der obige Fehler ausgelöst.

Dies ist derzeit in den Versionen 4.0.0 und höher der Bibliothek behoben.