Tests angulaires - un tuyau observable n'est pas une fonction

Question

Je veux écrire un test unitaire pour une méthode de téléchargement de photos. Mais j'obtiens le message Failed: this.task.snapshotChanges(...).pipe is not a function TypeError: this.task.snapshotChanges(...).pipe is not a function Erreur.

Pour simplifier cette question, j'ai regroupé tout le code dans une seule méthode :

Composant

  public startUpload(event: FileList) {
    const file: File = event.item(0);
    const pathRef = `users/${this.uid}`;

    this.task = this.service.uploadPhoto(pathRef, file);
    this.fileRef = this.service.getFileReference(pathRef);
    this.percentage = this.task.percentageChanges();
    this.snapshot = this.task.snapshotChanges();
    this.task.snapshotChanges().pipe(last(), switchMap(() => // it fails here - need to propperly mock this
    this.fileRef.getDownloadURL()))
      .subscribe(url => this.service.updatePhoto(url));
  }

Composant.spec

  it('should upload file', async(() => {
    const supportedFile = new File([''], 'filename.png', {type: 'image/', lastModified: 2233});
    const fileList = {
      item: () => {
        return supportedFile;
      }
    };
    const spy = (<jasmine.Spy>serviceStub.uploadPhoto).and.returnValue({
      percentageChanges: () => of(null),
      snapshotChanges: () => {
        return {
          getDownloadURL() {
            return of(null);
          }
        };
      }
    });

    component.startUpload(<any>fileList);

    expect(spy).toHaveBeenCalledWith(`users/${component.uid}`, supportedFile);
  }));

Answer 1

La solution pour que le test unitaire fonctionne a été d'ajouter cette ligne : (<jasmine.Spy>service.getFileReference).and.returnValue({ getDownloadURL: () => of(null) });

Answer 2

D'après ce que j'ai compris, cette erreur est due au fait que this.task.snapshotChanges(...) renvoie un Object dans l'espion. Au lieu de cela, il doit renvoyer un Observable .

const spy = (<jasmine.Spy>serviceStub.uploadPhoto).and.returnValue({
  percentageChanges: () => of(null),
  snapshotChanges: () => {
    return of({
      getDownloadURL() {
        return of(null);
      }
    })
  }

}) ;

También, getDownloadURL: () => of(null) doit également renvoyer un Observable.