如何在服务中对事件发射器进行单元测试答案

【问题标题】：How to unit test Event Emitter in service如何在服务中对事件发射器进行单元测试
【发布时间】：2021-07-08 09:03:39
【问题描述】：

我有一个名为 EmitterService 的服务，如下所示。

import { Injectable, EventEmitter } from '@angular/core';

@Injectable()
export class EmitterService {
    public helpDisplayEmitter: EventEmitter<string> = new EventEmitter();

我已经将该服务注入到构造函数中的一个组件中。我有一个名为 getHelpDisplay() 的方法，我将值发送到发射器。

export class MainPageComponent implements OnInit, OnChanges {
constructor(public emitter: EmitterService) { }

 getHelpDisplay(helpItem: any) {
    this.helpValue = helpItem;
    this.emitter.helpDisplayEmitter.emit(this.helpValue);
  }
}

我想为这个特定的发射器编写一个单元测试用例，但我遇到了错误，请帮助我。

规范文件。

describe('MainpageComponent', () => {
  let component: MainPageComponent;
  let fixture: ComponentFixture<MainPageComponent>;
  let mainpage, element, de;
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [],
      providers: [MainPageComponent, EmitterService]
    });
  });

it('should emit false via createCustomer$ from breadCrumbService', inject([EmitterService], (service: EmitterService) => {    
    fixture = TestBed.createComponent(MainPageComponent);
    mainpage = fixture.componentInstance;

    mainpage.getHelpDisplay("helpItem");
    expect(service.helpDisplayEmitter.emit).toHaveBeenCalledWith("helpItem");
  }));

我收到以下错误...

Error: <toHaveBeenCalledWith> : Expected a spy, but got Function.
        Usage: expect(<spyObj>).toHaveBeenCalledWith(...arguments)
        Error: <toHaveBeenCalledWith> : Expected a spy, but got Function.
        Usage: expect(<spyObj>).toHaveBeenCalledWith(...arguments)
            at <Jasmine>
            at UserContext.<anonymous> (src/app/mainpage/main-page.component.spec.ts:54:45)
            at TestBedRender3.execute (node_modules/@angular/core/__ivy_ngcc__/fesm2015/testing.js:1953:1)
            at UserContext.<anonymous> (node_modules/@angular/core/__ivy_ngcc__/fesm2015/testing.js:2629:1)
            at ZoneDelegate.invoke (node_modules/zone.js/dist/zone-evergreen.js:364:1)
            at ProxyZoneSpec.push.QpwO.ProxyZoneSpec.onInvoke (node_modules/zone.js/dist/zone-testing.js:292:1)
            at ZoneDelegate.invoke (node_modules/zone.js/dist/zone-evergreen.js:363:1)
            at Zone.run (node_modules/zone.js/dist/zone-evergreen.js:123:1)
Chrome Headless 91.0.4472.124 (Windows 10): Executed 1 of 584 (1 FAILED) (0 secs / 0.559 secs)
Chrome Headless 91.0.4472.124 (Windows 10) MainpageComponent should emit false via createCustomer$ from breadCrumbService FAILED

【问题讨论】：

标签： angular typescript unit-testing karma-jasmine

【解决方案1】：

你没有监视service.helpDisplayEmitter.emit() 方法。使用spyOn 将间谍安装到现有对象上。

例如

main-page.component.ts:

import { Component } from '@angular/core';
import { EmitterService } from './emitter.service';

@Component({})
export class MainPageComponent {
  helpValue;
  constructor(public emitter: EmitterService) {}

  getHelpDisplay(helpItem: any) {
    this.helpValue = helpItem;
    this.emitter.helpDisplayEmitter.emit(this.helpValue);
  }
}

emitter.service.ts:

import { Injectable, EventEmitter } from '@angular/core';

@Injectable()
export class EmitterService {
  public helpDisplayEmitter: EventEmitter<string> = new EventEmitter();
}

main-page.component.test.ts:

import { ComponentFixture, TestBed, inject } from '@angular/core/testing';
import { EmitterService } from './emitter.service';
import { MainPageComponent } from './main-page.component';

fdescribe('MainpageComponent', () => {
  let component: MainPageComponent;
  let fixture: ComponentFixture<MainPageComponent>;
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [MainPageComponent],
      providers: [EmitterService],
    }).compileComponents();
  });

  it('should emit false via createCustomer$ from breadCrumbService', inject(
    [EmitterService],
    (service: EmitterService) => {
      spyOn(service.helpDisplayEmitter, 'emit');
      fixture = TestBed.createComponent(MainPageComponent);
      component = fixture.componentInstance;
      component.getHelpDisplay('helpItem');
      expect(service.helpDisplayEmitter.emit).toHaveBeenCalledWith('helpItem');
    }
  ));
});

软件包版本：

"@angular/core": "~11.0.3",
"@angular/cli": "~11.0.3",

【讨论】：