Angular2 - 模拟Angular2烤面包机进行茉莉花单元测试

时间：2016-12-26 09:45:11

标签： angular jasmine karma-jasmine angular2-testing angular2-toaster

更多概括问题 - 如何模拟Angular2中使用的外部库

在我的应用程序中，我使用Angular2-toaster作为弹出消息。为了将单元测试套件（Jasmine）写入其中一个组件，我尝试使用以下代码模拟烤面包机响应，

@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 });
}

并在声明中添加

declarations: [RouterLinkStubDirective, TestComponent],

但最终会出现错误

    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)

我不确定是否遵循正确的方法！ ，

任何帮助将不胜感激

提前致谢。

1 个答案:

答案 0 :(得分：0)

由于模板中缺少elvis运算符，这是库本身的缺陷（请参阅https://github.com/Stabzs/Angular2-Toaster/issues/111）。

如果titleClass或messageClass属性为null并且Angular运行时试图修剪任一属性，则会抛出上述错误。

目前在库4.0.0及更高版本中已修复此问题。

相关问题
最新问题