CODEWITHSUNDEEP
angularangular5bluebirdstubspy
Shamoon
Shamoon

Reputation: 43619

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

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.

Upvotes: 9

Views: 445

Answers (1)

Jay Shukla
Jay Shukla

Reputation: 5826

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

Upvotes: 2

Related Questions