Angular 在Karma中使用启动组件时出错

嘿，把我的（bk）stackerzzz干掉

我真的很喜欢你们：

我正在使用angular 2应用程序中的Priming库中的

ConfirmDialog

组件。该组件在浏览器中测试时工作正常，但由于某些原因，使用该组件会导致Karma爆炸

 Error: Error in ./ReturnFileParameterComponent class ReturnFileParameterComponent - inline template:2:4 caused by: undefined is not a constructor (evaluating 'this.documentResponsiveListener()') in C:/Users/wlaw/Desktop/ens_fits_ui/karma-shim.js (line 41475)
        ngOnDestroy@C:/Users/wlaw/Desktop/ens_fits_ui/karma-shim.js:71991:45 <- webpack:///~/primeng/components/confirmdialog/confirmdialog.js:140:0
        ngOnDestroy
        destroyInternal
        destroy@C:/Users/wlaw/Desktop/ens_fits_ui/karma-shim.js:41076:34 <- webpack:///~/@angular/core/bundles/core.umd.js:12361:0
        ...

但几乎所有测试都失败了

以下是模板文件的开始部分：

<div class="ui-grid-row" id="return-parameter-table">
    <h5>Return File Parameters</h5>
    <p-growl [value]="msgs" life="3000"></p-growl>
    <p-confirmDialog header="Confirmation" icon="fa fa-question-circle" width="425"></p-confirmDialog>
...

返回文件参数
...

---

所以基本上我不知道为什么它没有通过测试，但我在浏览器中使用它绝对没有问题。任何帮助都将不胜感激

好的，我找到了一个解决办法。似乎由

ConfirmDialogModule

模块声明的

ConfirmDialogModule

组件在处理Karma/Jasmine时存在一些问题。因此，我在规范中所做的是创建一个伪

ConfirmDialog

组件，并覆盖

ConfirmDialogModule

模块中的元数据，以查找伪组件。代码如下所示：

// Fake component class because the ConfirmDialog has issues with Karma/Jasmine
@Component({
    selector: 'p-confirmDialog',
    template: ''
})
class FakeConfirmDialogComponent {
}

describe('Return File Parameter Component Test', () => {

    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [ReturnFileParameterComponent, HtmlUserFriendlyTimePipe, Html24HourDatePipe, DayOfWeekPipe],
            providers: [
                ...
                ConfirmationService,
                ...
            ],
            imports: [
                ConfirmDialogModule,
                ...
            ]
        });
        TestBed.overrideModule(ConfirmDialogModule, {
            set: {
                declarations: [FakeConfirmDialogComponent],
                exports: [FakeConfirmDialogComponent]
            }
        })
        TestBed.compileComponents();
    });

    // All my tests here
});

---

其中的关键部分是

TestBed.overrideModule（）

方法调用，它修改

ConfirmDialogModule

模块的元数据

谢谢，这肯定有帮助。“.overrideModule…}）”结尾缺少一个分号；“这对我来说太小了，我的linter抱怨道。

// Fake component class because the ConfirmDialog has issues with Karma/Jasmine
@Component({
    selector: 'p-confirmDialog',
    template: ''
})
class FakeConfirmDialogComponent {
}

describe('Return File Parameter Component Test', () => {

    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [ReturnFileParameterComponent, HtmlUserFriendlyTimePipe, Html24HourDatePipe, DayOfWeekPipe],
            providers: [
                ...
                ConfirmationService,
                ...
            ],
            imports: [
                ConfirmDialogModule,
                ...
            ]
        });
        TestBed.overrideModule(ConfirmDialogModule, {
            set: {
                declarations: [FakeConfirmDialogComponent],
                exports: [FakeConfirmDialogComponent]
            }
        })
        TestBed.compileComponents();
    });

    // All my tests here
});