javascript - 模拟作为参数传递给对象的回调

Question

我有一个我尝试测试的模式服务，但不幸的是我不知道我应该如何模拟回调 «ok» 和 «cancel» 作为参数传递给服务。我的单元测试通过了，但覆盖范围需要一些爱:

我的组件类:

export class TestComponent {

    constructor(private _modalService : ModalService) {}

    public show() : void {
        this._modalService.showModal(DefaultModalComponent, {
            ok: () => {
                alert("Ok have been clicked.");
                this._modalService.hide();
            },
            cancel: () => {
                alert("Cancel have been clicked.");
                this._modalService.hide();
            }
        });
    }
}

我的单元测试类是这样的:

describe("TestComponent", () => {

    let _modalService = jasmine.createSpyObj("ModalService", ["show"]);

    beforeEach(() => {
        TestBed.resetTestEnvironment();
        TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
        TestBed.configureTestingModule({
            imports: [BrowserAnimationsModule],
            schemas: [NO_ERRORS_SCHEMA],
            declarations: [TestComponent],
            providers: [{ provide: ModalService, useValue: _modalService }]
        });
     });

     let _component: any;
     let _element: any;

     beforeEach(done => {
         TestBed.compileComponents().then(() => {
             let fixture: ComponentFixture<TestComponent> = TestBed.createComponent(TestComponent);
             fixture.detectChanges();
             _component = fixture.componentInstance;
             _element = fixture.nativeElement;

             done();
         });
     });

    describe("show()", () => {
        it("should have called show method from service with parameters provided", done => {
            _component.show();

            expect(_modalService.show).toHaveBeenCalled();

            done();
        });
    });
});

Answer 1

服务可以以测试友好的方式重构:

modalOkHandler = () => { ... }

modalCancelHandler = () => { ... }

public show() : void {
    this._modalService.showModal(DefaultModalComponent, {
        ok: this.modalOkHandler,
        cancel: this.modalCancelHandler
    });
}

这样回调就可以在被调用的方法上断言:

_component.show();
expect(_modalService.show).toHaveBeenCalledWith(DefaultModalComponent, {
  ok: modalService.modalOkHandler,
  cancel: modalService.modalCancelHandler
});

替代方案不太方便。对于匿名函数，应该测试方法参数:

_component.show();
expect(_modalService.show).toHaveBeenCalledWith(DefaultModalComponent, {
  ok: jasmine.any(Function),
  cancel: jasmine.any(Function)
});

const [, { ok, cancel }] = _component.show.calls.first().args;
spyOn(window, 'alert');
expect(_modalService.hide).toHaveBeenCalledTimes(0);
ok();
expect(alert).toHaveBeenCalledWith(...);
expect(_modalService.hide).toHaveBeenCalledTimes(1);
...