How can I get my Angular5 spyOn to work as expected?

Question

My test is not detecting changes. Here is my component:

  toggleUploadModal() {
    const modalRef = this.ngbModal.open(UploadFilesComponent, { size: 'lg', backdrop: 'static' });
    modalRef.componentInstance.DeliverableTransaction = this.transactionDetails;
    modalRef.result.then((res) => {
      if (res.status === 'success') {
        this.deliverableTransactionService.updateDeliverableTransaction(this.route.snapshot.params.id, {
          submissionStatus: 'In Process'
        })
      }
      setTimeout(() => {
        this.uploadStatus = {};
      }, 5000);
    })
  }

My test has:

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [TransactionFileViewer, NgxPermissionsAllowStubDirective],
      providers: [...],
      imports: [...],
      schemas: [
        NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA
      ],
    })
      .compileComponents();
    fixture = TestBed.createComponent(TransactionFileViewer);
    downloadService = TestBed.get(DownloadService);
    component = fixture.componentInstance;
    fixture.detectChanges();
    submissionFileService = TestBed.get(SubmissionFileService);
    deliverableDefinitionService = TestBed.get(DeliverableDefinitionService);
    service = TestBed.get(DeliverableDefinitionDetailViewService);
    deliverableTransactionService = TestBed.get(DeliverableTransactionService);
    modalService = TestBed.get(NgbModal);
    flashMessagesService = TestBed.get(FlashMessagesService);
  }));
  fit('should update the submissionStatus upon file upload', () => {
    spyOn(modalService, 'open').and.returnValue({
      componentInstance: {},
      result: Promise.resolve({
        uploadedFileCount: 5,
        status: 'success'
      })
    });
    spyOn(deliverableTransactionService, 'updateDeliverableTransaction').and.returnValue(true);

    component.toggleUploadModal();
    expect(deliverableTransactionService.updateDeliverableTransaction).toHaveBeenCalledWith(1, {
      submissionStatus: 'In Process'
    });
  })

However, the updateDeliverableTransaction never is called in the test. What am I doing wrong? I assume I need to somehow bind the scope to the result, but I'm unsure how. I'm using bluebird if it matters.

Answer 1

updateDeliverableTransaction method will not call because it's in success callback of modal. You need to add fixture.detectChanges() after your method call.

Try this

fit('should update the submissionStatus upon file upload', () => {
    spyOn(modalService, 'open').and.returnValue({
      componentInstance: {},
      result: Promise.resolve({
        uploadedFileCount: 5,
        status: 'success'
      })
    });
    spyOn(deliverableTransactionService, 'updateDeliverableTransaction').and.returnValue(true);

    component.toggleUploadModal();
    fixture.detectChanges();
    expect(deliverableTransactionService.updateDeliverableTransaction).toHaveBeenCalledWith(1, {
      submissionStatus: 'In Process'
    });
  })