javascript - Angular 2单元测试抛出错误 'subscribe'不是未定义的成员

Question

我正在 Angular 2 应用中进行 Jasmine 单元测试。

it('cancel object passed to the cancellation service is in the expected format for a cancel contract transaction', () => {
    var cancelReason = new models.CancelReason();
    cancelReason.cancelReasonCode = '165';
    cancelReason.cancelReasonDescription = 'Because I said so';

    component.subscriptionCancelReasons = [];
    component.subscriptionCancelReasons.push(cancelReason);

    component.cancellationsModel = new models.CancellationsModel();
    component.cancellationsModel.groupNumber = 'xxxxxx';
    component.cancellationsModel.billingUnit = 'xxxx';
    component.cancellationsModel.memberId = 'xxxxxxxxx';
    component.cancellationsModel.cancellationDate = '01/01/2020';
    component.cancellationsModel.cancellationReason = '165';

    component.cancellationsModel.cancelContract = true;

    spyOn(cancelService, 'cancel');
    component.cancel(); // initiate the cancel

    expect(cancelService.cancel).toHaveBeenCalledWith({
        memberKey: '000',
        groupNumber: 'xxxxxx',
        billingUnit: 'xxxx',
        certificateNumber: 'xxxxxxxxx',
        effectiveDate: '01/01/2020',
        cancelReason: '165'
    });
});

这会引发错误:

TypeError: Unable to get property 'subscribe' of undefined or null reference

这是我的 cancelService.cancel 函数:

cancel(cancelObject: any): any {
    this.log('cancel', 'cancelObject: ' + JSON.stringify(cancelObject));

    var contractsUrl = environment.contractsServiceUrl + '/contracts/cancel';

    return this._http.put(contractsUrl, cancelObject)
        .map(response => this.extractCancelResponse(response))
        .catch(this.handleError);
}

这是我用于实际取消调用的 Controller /组件:

private executeCancel(transactionType:string, cancelObject: any) {
    this.log('executeCancel', 'executing the cancel transaction...');

    this.cancelService.cancel(cancelObject)
        .subscribe(response => {
            this.parseCancellationResponse(transactionType, response, cancelObject, true);
        }, error => {
            this.parseCancellationResponse(transactionType, error, cancelObject, false);
        });
}

我在这个规范文件中有许多其他测试效果很好，这是我尝试编写的第一个测试来验证发送到我的服务的数据。

这个实现有什么问题吗？如果运行应用程序时订阅已正常工作，为什么单元测试会失败？我不一定关心服务是否成功调用，我只是想确保取消函数[在取消服务中]接收到的对象符合预期。

编辑(响应user8019820的回答):

抱歉，我应该包含两个 beforeEach 函数:

let component: ContractCancellationsComponent;
let fixture: ComponentFixture<ContractCancellationsComponent>;
let cancelService: CancelService;

beforeEach(async(() => {
    TestBed.configureTestingModule({
        imports: [
            HttpModule,
            FormsModule,
            RouterTestingModule
        ],
        providers: [
            AppDataService,
            ErrorService,
            CancelService,
            ContractsService
        ],
        declarations: [
            ContractCancellationsComponent,
            WmHeaderComponent,
            WmErrorListComponent,
            WmStatusMessageComponent,
            WmSpinnerComponent,
            WmTimeoffsetPipe
        ]
    }).compileComponents();
}));

beforeEach(() => {
    fixture = TestBed.createComponent(ContractCancellationsComponent);
    component = fixture.componentInstance;
    cancelService = fixture.debugElement.injector.get(CancelService);
    fixture.detectChanges();
});

Answer 1

如果在测试中使用服务，则必须在 testBed 的提供者中声明它，然后在 beforeEach() 函数中实例化它