Question

我正在尝试教自己如何使用Angular进行编码，但我遇到了问题。我正在为自己创建一个应用程序，并且刚刚实现了“角度材质对话框”。我把它放在包装服务中，一切似乎都很好。因此，在一个组件中，我调用Wrapper Service来引发一个像这样的模式...

public assignInstrument(instrument: any): void {
    this.modalDialogWrapperService.openAssignmentWindow({
        product: 'instrument',
        type: instrument.type,
        serial: instrument.serial,
        id: instrument.id
  });
}

服务方法如下所示，请注意，我在模态窗口中传递了我希望引发的组件的名称

openAssignmentWindow(instrument) {
    const dialogRef = this.dialog.open(ChangeAssignmentComponent, {
        data: instrument,
        width: '693px',
        height: '498px'
        });
    dialogRef.afterClosed().subscribe(() => {});
    });
}

一切正常！但是，作为一名优秀的开发人员，我应该编写单元测试...因此，要测试我的组件，我需要进行以下测试（我已经包括了如何模拟服务和其他一些代码来给测试文件留下印象）

let modalDialogWrapperServiceSpy: jasmine.SpyObj<ModalDialogWrapperService>;
    const mockModalDialogWrapperService = jasmine.createSpyObj('ModalDialogWrapperService', ['openAssignmentWindow']);
    mockModalDialogWrapperService.openAssignmentWindow.and.returnValue({});

TestBed.configureTestingModule({
    imports: [...],
    declarations: [...],
    providers: [{
      provide: ModalDialogWrapperService,
      useValue: mockModalDialogWrapperService
    }]
}).compileComponents();

beforeEach(() => {
    fixture = TestBed.createComponent(InstrumentsPageComponent);
    modalDialogWrapperServiceSpy = TestBed.get(ModalDialogWrapperService);
    component = fixture.componentInstance;
    fixture.detectChanges();
 })

describe('assignInstrument', () => {
  it('should call the Modal Dialog Service', () => {
    component.assignInstrument({});
    expect(modalDialogWrapperServiceSpy.openAssignmentWindow).toHaveBeenCalledTimes(1);
  });
});

此测试失败！出现错误“错误：找不到ChangeAssignmentComponent的组件工厂。您是否将其添加到@ NgModule.entryComponents”-这似乎很奇怪，因为在我的app.module文件中，我在entryComponents和声明数组中声明了“ ChangeAssignmentComponent”？我很困惑-有人知道我会做错什么吗？

Answer 1

Testintg对此表示怀疑。

更严重的是，让我回答你。

在Angular中，组件由模块处理。当您使用“材质”对话框和“小吃”时，实际上使用的是CDK的一项功能，称为Portal。这使您可以动态创建组件。

但是，这样做时，必须将它们添加到模块的entryComponents中。您是在模块中完成的，因此您也应该在测试中进行。

语法是

TestBed
  .configureTestingModule(...)
  .overrideModule(BrowserDynamicTestingModule, { set: { entryComponents: [YourComponent] } });

Answer 2

如果有人在努力寻找BrowserDynamicTestingModule，请改用BrowserModule。

   TestBed
  .configureTestingModule(...)
  .overrideModule(BrowserModule, { set: { entryComponents: [YourComponent] } });

Answer 3

应该在两个地方完成此操作。...输入组件以及声明（在配置测试模块时）......

  TestBed
  .configureTestingModule({
              declarations: [YourComponent],
   })
  .overrideModule(BrowserDynamicTestingModule, { set: { entryComponents: [YourComponent] } });

角单元测试错误：找不到组件的组件工厂。您是否将其添加到@ NgModule.entryComponents

3 个答案: