如何在服務中對事件發射器進行單元測試

Question

我有一個名為 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

Answer 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",