Angular 4: Verwenden von MockRespond mit RxJS Observables

Question

Ich habe vor kurzem eine Anwendung gebaut, die funktioniert und ich versuche, einen Test zu bauen. Mein Service holt Elemente aus einem API-Backend:

export class CatfactService { 
 

 
    constructor(private http: Http) {} 
 
    getFacts() { 
 
     const url = "http://www.catfact.info/api/v1/facts.json"; 
 
     return this.http.get(url).map(this.extractData) 
 
      .catch(this.handleError); 
 
    }

In meiner Komponente Ich bin in der Lage auf die API-Antwort zu abonnieren. Das Ergebnis des facts Variable ist die Antwort Details von der API:

ngOnInit() { 
 
    this.counter = this.start; 
 
    this.service.getFacts().subscribe((facts) => { 
 
     this.results = facts.facts; 
 
    }); 
 
}

Nun, mir einen Test für die Dienstgebäude und seltsam die abonnieren Methode das Argument erhält, aber anstatt das Argument die Antwortdaten zu sein, gibt es ein Versprechen zurück, das letztlich zu den verhöhnten Werten führt.

import { 
 
    TestBed, 
 
    inject, 
 
    fakeAsync, 
 
    tick 
 
} from '@angular/core/testing'; 
 

 
import { 
 
    CatfactService 
 
} from './catfact.service'; 
 
import { 
 
    HttpModule, 
 
    Http, 
 
    BaseRequestOptions, 
 
    XHRBackend, 
 
    ResponseOptions 
 
} from '@angular/http'; 
 
import { 
 
    MockBackend 
 
} from '@angular/http/testing'; 
 
describe('CatfactService',() => { 
 
    beforeEach(() => { 
 
     TestBed.configureTestingModule({ 
 
      imports: [HttpModule], 
 
      providers: [ 
 
       CatfactService, 
 
       MockBackend, 
 
       BaseRequestOptions, 
 
       { 
 
        provide: Http, 
 
        useFactory: (backend, options) => new Http(backend, options), 
 
        deps: [MockBackend, BaseRequestOptions] 
 
       } 
 
      ], 
 
      imports: [ 
 
       HttpModule 
 
      ] 
 
     }); 
 
    }); 
 

 
    it('should return reasonable json', inject([CatfactService, MockBackend], fakeAsync((service: CatfactService, mockBackend) => { 
 

 
     const mockResponse = { 
 
      data: [{ 
 
        id: 0, 
 
        details: 'All cats are lions' 
 
       }, 
 
       { 
 
        id: 1, 
 
        details: 'Video 1' 
 
       }, 
 
       { 
 
        id: 2, 
 
        details: 'Video 2' 
 
       }, 
 
       { 
 
        id: 3, 
 
        details: 'Video 3' 
 
       }, 
 
      ] 
 
     }; 
 

 
     mockBackend.connections.subscribe(connection => { 
 
      connection.mockRespond(new Response(JSON.stringify(mockResponse))); 
 
     }); 
 

 
     service.getFacts().subscribe((facts) => { 
 
      facts.then((facts2) => { 
 
       expect(facts2.length).toBe(4); 
 
       expect(facts2[0].details).toEqual("All cats are lions"); 
 
      }); 
 
     }); 
 

 
     tick(); 
 
    }))); 
 
});

Die Tatsache, dass Aufruf der Methode gibt die tatsächliche Antwort in der tatsächlichen Anwendung abonnieren, sondern ein Versprechen im Test, führt mich ich die Verspottung einrichten zu glauben haben die Daten in der Anwendung falsch.

ich die folgenden Versionen von Angular bin mit:

ng -v 
 
    _      _     ____ _  ___ 
 
/\ _ __ __ _ _ _| | __ _ _ __ /___| | |_ _| 
 
/△ \ | '_ \/_` | | | | |/ _` | '__| | | | | | | 
 
/___ \| | | | (_| | |_| | | (_| | |  | |___| |___ | | 
 
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_|  \____|_____|___| 
 
       |___/ 
 
@angular/cli: 1.0.2 
 
node: 7.9.0 
 
os: darwin x64 
 
@angular/common: 4.1.1 
 
@angular/compiler: 4.1.1 
 
@angular/core: 4.1.1 
 
@angular/forms: 4.1.1 
 
@angular/http: 4.1.1 
 
@angular/platform-browser: 4.1.1 
 
@angular/platform-browser-dynamic: 4.1.1 
 
@angular/router: 4.1.1 
 
@angular/cli: 1.0.2 
 
@angular/compiler-cli: 4.1.1

Das ganze Projekt ist hier auf GitHub up: https://github.com/kenmazaika/AngularTesting

Answer 1

Hier eine feste Version der Spezifikation ist. Das Hauptproblem war, dass Sie nicht die Winkel Response importieren.

  import { TestBed, inject, fakeAsync, tick } from '@angular/core/testing'; 

      import { CatfactService } from './catfact.service'; 
      import { HttpModule, Http, BaseRequestOptions, XHRBackend, ResponseOptions, Response, RequestOptions } from '@angular/http'; 
      import { MockBackend } from '@angular/http/testing'; 
      describe('CatfactService',() => { 
       beforeEach(() => { 
        TestBed.configureTestingModule({ 
         imports: [HttpModule], 
         providers: [ 
          CatfactService, 
          MockBackend, 
          BaseRequestOptions, 
          { 
           provide: Http, 
           useFactory: (backend, options) => new Http(backend, options), 
           deps: [MockBackend, BaseRequestOptions] 
          } 
         ] 
        }); 
       }); 

       it('should return reasonable json', inject([CatfactService, MockBackend], fakeAsync((service: CatfactService, mockBackend) => { 

        const mockResponse = { 
         data: [ 
          { id: 0, details: 'All cats are lions' }, 
          { id: 1, details: 'Video 1' }, 
          { id: 2, details: 'Video 2' }, 
          { id: 3, details: 'Video 3' }, 
         ] 
        }; 

        mockBackend.connections.subscribe(connection => { 
         connection.mockRespond(new Response(
          new ResponseOptions({ 
           body: [ 
            { id: 0, details: 'All cats are lions' }, 
            { id: 1, details: 'Video 1' }, 
            { id: 2, details: 'Video 2' }, 
            { id: 3, details: 'Video 3' }, 
           ] 
          }))); 
        }); 

        service.getFacts().subscribe((facts) => { 
         expect(facts.length).toBe(4); 
         expect(facts[0].details).toEqual("All cats are lions"); 
        }); 

        tick(); 
       }))); 
      });