角度測驗：盡管函式被明確呼叫，但測驗失敗

我正在測驗一個組件，但我無法弄清楚測驗失敗的原因。console.log()清楚地顯示了被呼叫的函式。我認為這與subscribe()通話有關，但我不確定如何更正我的測驗：

我的組件：

async deleteDocument( document : IMergedDocument ) {
  const key = document.fileKey;
  const className = document.className

  const confirm = await this.modalCtrl.create({
    component: AwakenModal,
    componentProps: {
      title: `Are you sure you want to delete ${document.name}?`,
      subtitle: 'Deletions are irreversible.',
      type: 'confirm',
      urgent: true
    },
    cssClass: 'small-modal'
  })

  await confirm.present()
  const data = await confirm.onDidDismiss()

  if (data?.data === 'yes') {
    if (className === 'ClientDoc') {
      this.s3.deleteFromS3(key).then(() => {

        // What I am testing.  I see this in console
        this.clientDocService.destroy(document.id).subscribe(d => console.log('doc', d))
      })
        .catch(err => this.global.handleResponse(`Error: ${err}`))
    } else if (className === 'SignedDocument') {
      this.clientDocService.unlinkSignedDocument(document).subscribe(
        () => this.global.handleResponse('Successfully unlinked the document from this profile', false, 'success'),
        err => this.global.handleResponse(err.error, true)
      )
    }
  }
}

我的測驗：

describe('DocumentsPage', () => {
  let component: DocumentsPage;
  let fixture: ComponentFixture<DocumentsPage>;
  const mockS3Service = jasmine.createSpyObj('S3_Service', ['getBucketContents', 'deleteFromS3'])
  const mockModalController = jasmine.createSpyObj('ModalController', ['create'])
  const mockClientDocService = jasmine.createSpyObj('ClientDocService',
    ['destroy', 'setDocuments', 'createClientDocIfMissing', 'addToDocuments', 'addToAWSDocs', 'fetchClientAndSignedDocuments', 'setMergedDocuments']
  )

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ DocumentsPage ],
      imports: [HttpClientTestingModule,],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
      providers: [
        { provide: S3_Service, useValue: mockS3Service },
        { provide: ModalController, useValue: mockModalController },
        ExternalDocumentsService,
        { provide: ClientDocService, useValue: mockClientDocService },
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    mockClientDocService.mergedDocuments$ = of([])
    fixture = TestBed.createComponent(DocumentsPage);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  describe('deleteDocument', () => {
    it('should call clientDocService.destroy when a ClientDoc', async() => {
      const doc = {
        id: 1,
        className: 'ClientDoc',
        canBeViewed: true
      }

      const modalSpy = jasmine.createSpyObj('Modal', ['present', 'onDidDismiss'])
      mockModalController.create.and.callFake(() => modalSpy)
      modalSpy.onDidDismiss.and.returnValue({data: 'yes'})
      mockS3Service.deleteFromS3.and.returnValue(new Promise<void>(res => res()))

      mockClientDocService.destroy.and.returnValue(of(doc))

      component.deleteDocument(doc).then(d => console.log("res", d))
      await fixture.whenStable()

      expect(mockClientDocService.destroy).toHaveBeenCalledTimes(1)
    })
  })
})

我覺得這是個jasmine問題，但我不確定如何更正測驗

uj5u.com熱心網友回復：

首先你沒有awaitbefore component.deleteDocumentcall。

其次，deleteDocument是 async 但它不等待 this.clientDocService.destroyor this.clientDocService.unlinkSignedDocument。

混合 async/await 和 observables 的方式非常混亂。我建議為一種方法選擇一個或另一個，例如使用 promises/async/await：

 const data = await this.clientDocService.destroy(document.id);
 console.log('doc', data);
 // return {result: 'destroyed', data} -- u generally want to return smth

或可觀察的

// deleteDocument will return Observable
return from(confirm.onDidDismiss()).pipe(switchMap(() => {
   ...
   return this.clientDocService.destroy(document.id);
}))

標籤：有角度的茉莉花

上一篇：帶陣列的NgRx

下一篇：Angular14mat-checkbox不可點擊