无法以角度运行 toast 消息的单元测试用例答案

【问题标题】：Unable to run unit test case for toast message in angular无法以角度运行 toast 消息的单元测试用例
【发布时间】：2018-10-23 08:59:22
【问题描述】：

您好，我正在以 Angular 5 开发 Web 应用程序。我正在使用 toast 消息来显示消息。我正在使用来自https://www.npmjs.com/package/angular2-toaster 的吐司消息。实施是正确的并且工作正常。我在编写单元测试用例时遇到问题。下面是我在组件中的实现。我在组件中添加了下面的代码行。

import { ToasterModule, ToasterService } from 'angular2-toaster';

我在构造函数中添加了以下代码。

private toasterService: ToasterService

我正在显示如下 Toast 消息。

this.toasterService.pop('success', 'Args Title', 'Args Body');

我在 HTML 文件中添加了以下代码。

<toaster-container></toaster-container>

此实现工作正常。我正在编写单元测试用例，如下所示。

describe('Component: TenantEditorComponent', () => {

  beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [
                HttpClientModule,
                RouterTestingModule,
                TranslateModule.forRoot({
                    loader: {
                        provide: TranslateLoader,
                        useClass: TranslateLanguageLoader
                    }
                }),
                NgxDatatableModule,
                FormsModule,
                UiSwitchModule,
                TooltipModule.forRoot(),
                ModalModule.forRoot(),
                ToasterModule
            ],
  providers: [   ToasterService ]
        }).compileComponents();
fixture = TestBed.createComponent(TenantEditorComponent);
        component = fixture.componentInstance;
        submitEl = fixture.debugElement;
        fixture.detectChanges();
    }));

这给了我错误

没有 Toaster 容器被初始化来接收 toast。

我在下面添加了截图。

有人可以帮我解决这个问题吗？任何帮助，将不胜感激。谢谢

【问题讨论】：

你为什么不嘲笑什么？有什么特别的原因吗？
嗨，我需要模拟 ToasterService 吗？
不仅如此，还有任何未在您的组件中使用的东西。你不应该有HttpClientModule、TooltipModule、ToasterModule，以及任何不包含在 HTML 中的东西（我想例如 UiSwitchModule 是一个像 <ui-switch> 这样的 HTML 标签，在这些情况下你可能会离开它)。
好的那我现在怎么写呢？
那会很长，我建议您开始阅读the documentation，因为它可能对您的帮助比我们以往任何时候都多！

标签： angular angular5 angular-toastr

【解决方案1】：

为检查烤面包机服务创建间谍。

     describe('Component: TenantEditorComponent', () => {
      let toasterServiceSpy: jasmine.Spy;

 const toasterSetvices = jasmine.createSpyObj('toasterSetvices', ['pop']);
     toasterServiceSpy = toasterSetvices.pop.and.returnValue(of(''));

      beforeEach(async(() => {
            TestBed.configureTestingModule({
                imports: [
                    HttpClientModule,
                    RouterTestingModule,
                    TranslateModule.forRoot({
                        loader: {
                            provide: TranslateLoader,
                            useClass: TranslateLanguageLoader
                        }
                    }),
                    NgxDatatableModule,
                    FormsModule,
                    UiSwitchModule,
                    TooltipModule.forRoot(),
                    ModalModule.forRoot(),
                    ToasterModule
                ],
      providers: [    {provide: ToasterService, useValue: toasterSetvices } ]
            }).compileComponents();

    fixture = TestBed.createComponent(TenantEditorComponent);
            component = fixture.componentInstance;
            submitEl = fixture.debugElement;
            fixture.detectChanges();
        }));

   it('Hit the Login Button', () => {
    const fixtureInstance = TestBed.createComponent<LoginComponent> 
     (LoginComponent);
    const toasterServiceInstance = 
    fixtureInstance.componentInstance.toasterService;
    fixtureInstance.detectChanges();
    component.submit();
    expect(toasterServiceSpy.calls.any()).toBe(true);

  });

【讨论】：