angular - 单元测试 Angular Observables

标签 angular jasmine primeng

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

该函数的定义如下:

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 但因为我是单元测试世界的新手,我发现很难设置这些东西。

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

编辑:-

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

以下是 ConfirmationService 的声明和Confirmation在 PrimeNG 库中找到的类。

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

最佳答案

我可能会让模拟保留 acceptreject 函数的引用。然后在测试中您可以调用它们来检查它们是否发出正确的 bool 值。类似的东西

class MockConfirmationService {
  accept: Function;
  reject: Function;

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

然后在您的测试中,只需调用 accept 来测试是否发出 true,并调用 reject 来测试 false 被发出。

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 - 单元测试 Angular Observables,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40592637/

相关文章:

angularjs - 运行 karma/jasmine 测试时出现 TypeError : Object #<Object> has no method 'apply' Error: Argument 'fn' is not a function, 获取对象

javascript - 如何在 Protractor 中单击同一个按钮超过 50 次?

css - 如何修复 PrimeNG 下拉样式问题?

angular - Primeng 数据表 rowTrackBy

javascript - 类型 'transition' 上不存在属性 'Selection<BaseType, {}, null, undefined>'

javascript - 如何观察 Angular 2 中元素大小何时发生变化

javascript - TypeError : ctx. onCreditChange 不是一个函数 Angular

javascript - Jasmine - 在串联的所有 block 之前运行

html - Angular : Cannot locate two p-col-6 side by side in PrimeNG FlexGrid

angular - 错误 : Multiple components match node with tagname app-contact