More Generalize the question - How to mock up and external library used in Angular2
In my application i am using Angular2-toaster for popup messages. In order write unit test suite(Jasmine)to one of the component, I tried to mock up the toaster response with following code,
@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 });
}
And added in declarations
declarations: [RouterLinkStubDirective, TestComponent],
But end up with errors
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)
I am not sure following the proper way ! ,
Any help will be appreciated
Thanks in advance.
This was a defect in the library itself (see https://github.com/Stabzs/Angular2-Toaster/issues/111) due to a missing elvis operator in the template.
If the titleClass or messageClass properties were null and the Angular runtime attempted to trim either property, the above error would be thrown.
This is currently fixed in versions 4.0.0 and higher of the library.