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

问题描述

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

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 写一个Stub，但由于我是单元测试世界的新手，我发现很难设置这些东西。

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.

以下是 ConfirmationService 和确认类。

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 和拒绝函数的引用。然后在测试中，您可以调用它们来检查它们是否发出了正确的布尔值。类似

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;
  }
}

然后在你的测试中只需拨打接受来测试是否发出 true ，并调用拒绝来测试<发出code> 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屋！