单元测试 Angular Observables [英] Unit Testing Angular Observables

问题描述

我是测试领域的新手，我刚刚开始为现有的 Angular 2 代码编写单元测试.我有一个函数 confirmDelete 它返回 Obserable<boolean> 并在内部使用 PrimeNG 的 ConfirmationService 来获取用户对弹出窗口的反馈.

I am new to testing world and I have just started writing unit tests for an existing Angular 2 code. I have a function confirmDelete which returns Obserable<boolean> and internally uses ConfirmationService of PrimeNG to get user's feedback on a popup.

函数定义如下:

confirmDelete(): Observable<boolean> {
    let confirmObservable = Observable.create((observer: Observer<boolean>) => {            
        this.confirmationService.confirm({
            header: 'Delete Confirmation',
            message: 'Do you really want to delete this record?',
            accept: () => {
                observer.next(true);
                observer.complete();            
            },
            reject: () => {
                observer.next(false);
                observer.complete();
            }
        });

    });

    return confirmObservable;

}

我想为这段代码编写一个单元测试.我计划为 ConfirmationService 编写一个存根，但因为我是单元测试领域的新手，我发现设置这些东西很困难.

I want to write a unit test for this piece of code. I planned to write a Stub for the ConfirmationService but because I am new to unit testing world, I am finding it difficult to set up the things.

我的问题是在这种特殊情况下编写单元测试的正确方法是什么.

My question is what is the correct approach to write a unit test in this particular scenario.

-

我尝试了@peeskillet 提出的解决方案，但随后我开始收到 ConfirmationService 和 MockConfirmationService 之间的类型不匹配错误.

I tried solution proposed by @peeskillet but then I started getting type mismatch error between ConfirmationService and MockConfirmationService.

以下是 PrimeNG 库中的 ConfirmationService 和 Confirmation 类的声明.

Below are the declarations of ConfirmationService and Confirmation classes found in the PrimeNG library.

export interface Confirmation {
    message: string;
    icon?: string;
    header?: string;
    accept?: Function;
    reject?: Function;
    acceptVisible?: boolean;
    rejectVisible?: boolean;
    acceptEvent?: EventEmitter<any>;
    rejectEvent?: EventEmitter<any>;
}
export declare class ConfirmationService {
    private requireConfirmationSource;
    private acceptConfirmationSource;
    requireConfirmation$: Observable<Confirmation>;
    accept: Observable<Confirmation>;
    confirm(confirmation: Confirmation): this;
    onAccept(): void;
}

推荐答案

我可能会让模拟保持对 accept 和 reject 函数的引用.然后在测试中，您可以调用它们来检查它们是否发出正确的布尔值.类似的东西

I would probably make the mock hold on to the references of the accept and reject functions. Then in the test you can call them to check that they emit the correct boolean value. Something like

class MockConfirmationService {
  accept: Function;
  reject: Function;

  confirm(config: any) {
    this.accept = config.accept;
    this.reject = config.reject;
  }
}

然后在您的测试中，只需调用 accept 来测试发出 true，然后调用 reject 来测试 false 被发出.

Then in your test just call the accept to test that true is emitted, and call reject to test that false is emitted.

describe('serivce: ModalService', () => {

  let modalService: ModalService;
  let confirmService: MockConfirmationService;

  beforeEach(() => {
    confirmService = new MockConfirmationService();
    TestBed.configureTestingModule({
      providers: [
        ModalService,
        { provide: ConfirmationService, useValue: confirmService }
      ]
    });

    modalService = TestBed.get(ModalService);
  });

  it('should return true when accepted', async(() => {
    modalService.confirmDelete().subscribe(result => {
      expect(result).toBe(true);
      console.log('accepted test complete');
    });
    confirmService.accept();
  }));

  it('should return false when rejected', async(() => {
    modalService.confirmDelete().subscribe(result => {
      expect(result).toBe(false);
      console.log('rejected test complete');
    });
    confirmService.reject();
  }));
});

这篇关于单元测试 Angular Observables的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！