如何在角度服務中運行toast訊息的單元測驗用例？

我正在使用基于Angular 12的應用程式。我有一個名為notificationservice 的服務，它處理來自ngx-toastr庫的toast 訊息。

這是該服務的樣子：

export class NotificationService {
  constructor(private toastr: ToastrService) {}

  showSuccess(message: string = 'Success ', note: string = ''): void {
    this.toastr.success(message, note);
  }

  showError(message: string = 'Error ', note: string = 'Try again'): void {
    this.toastr.error(message, note, {
      timeOut: 3000,
    });
  }
}

服務方法運行良好，但是當我嘗試為它們實施測驗時，出現以下錯誤：

NotificationService should test "showSuccess" method FAILED

Error: <spyOn> : could not find an object to spy upon for success()

這些是測驗：

describe('NotificationService', () => {
  let notificationService: NotificationService,
    httpTestingController: HttpTestingController,
    toastrService: ToastrService,
    notificationServiceSpy: any;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [CommonModule, HttpClientTestingModule, ToastrModule.forRoot()],
      declarations: [],
      providers: [{ provide: ToastrService, useValue: toastrService }],
    }).compileComponents();
    notificationService = TestBed.inject(NotificationService);
    httpTestingController = TestBed.inject(HttpTestingController);
    toastrService = TestBed.inject(ToastrService);
  });

  it('should be created', () => {
    expect(notificationService).toBeTruthy();
  });

  it('should test "showSuccess" method', () => {
    spyOn(toastrService, 'success').and.callThrough();
  });

  afterEach(() => {
    httpTestingController.verify();
  });
});

任何幫助表示贊賞。謝謝！

uj5u.com熱心網友回復：

您收到該訊息是因為當您這樣做時：

providers: [{ provide: ToastrService, useValue: toastrService }],

在那個時間點，toastrService是未定義的，然后當你這樣做時spyOn(toastrService, 'success');，沒有成功的方法可以被監視，因為它toastrService是未定義的。

我會嘲笑toastrService。

進行以下更改，注意以!!.開頭的行。

describe('NotificationService', () => {
  let notificationService: NotificationService,
    httpTestingController: HttpTestingController,
    // !! change this line to this
    toastrService: jasmine.SpyObj<ToastrService>,
    notificationServiceSpy: any;

  beforeEach(async () => {
    // !! add a new spy object before each test, now toastrService is not undefined
    toastrService = jasmine.createSpyObj<ToastrService>('ToasterService', ['error', 'success']);
    await TestBed.configureTestingModule({
      imports: [CommonModule, HttpClientTestingModule, ToastrModule.forRoot()],
      declarations: [],
      providers: [
       // !! provide NotificationService to the TestBed module because it is under test
       NotificationService,
       { provide: ToastrService, useValue: toastrService }],
    }).compileComponents();
    notificationService = TestBed.inject(NotificationService);
    httpTestingController = TestBed.inject(HttpTestingController);
    // !! don't need the below line, we already have access to the spy object
    // toastrService = TestBed.inject(ToastrService);
  });

  it('should be created', () => {
    expect(notificationService).toBeTruthy();
  });

  it('should test "showSuccess" method', () => {
    // !! you should not spyOn this anymore, toastrService has methods error
    // and success now which are both spies.
    // spyOn(toastrService, 'success').and.callThrough();
    // !! call the method
    service.showSuccess('hello world', 'hello');
    expect(toastrService.success).toHaveBeenCalledWith('hello world', 'hello');
  });

  afterEach(() => {
    httpTestingController.verify();
  });
});

標籤：

上一篇：AWSCDK為物件屬性的Jest測驗提供了不正確的定義

下一篇：如何測驗更新方法？