Testen Sie eine Methode, die abonniert ist, um eine beobachtbare - Winkel-2

Ich möchte zum testen eine Methode innerhalb einer Eckigen 2-Komponente abonniert ist, um eine beobachtbare, der zurückgegeben wird, von einer Methode in einem Dienst. Hier ist der code für die service-Methode in der Zusammenfassung: 

public create(user: User): Observable<any> {
  return this.http.post(this._api.create,
    JSON.stringify(user), {
      headers: this.apiConfig.getApiHeaders()
    }).map((res: Response) => res.json());
  }

Es ist einfach zu unit-testen Sie diese Methode, denn es gibt eine observable, so kann ich nur abonnieren. Aber ich möchte testen Sie die Methode in der Komponente, die bereits abonniert haben zu diesem: 

public onSubmit(user: User): void {
  this._authentication.create(user).subscribe((token) => {
    localStorage.setItem('token', token);
    this.router.navigate(['/Home']);
  });
}

Heres meine Skillung so weit, aber wenn ich versuche, spyOn "localStorage".setItem es kommt wieder als nicht genannt zu werden. Mein Verständnis ist, es ist wahrscheinlich überprüfen, um zu sehen, ob es genannt worden, bevor es tatsächlich genannt worden.

it('Should login a user and on success store a token in localStorage',
  injectAsync([TestComponentBuilder], (tcb) => {
    return tcb.createAsync(Login).then((fixture) => {
      let instance = fixture.debugElement.componentInstance;
      localStorage.clear();
      spyOn(localStorage, 'setItem');
      instance.onSubmit({userId: '[email protected]', password: 'password', siteName: 'sample'});
      expect(localStorage.setItem).toHaveBeenCalled();
    });
  })
);

Frage ich mich, ob ich müssen zu verspotten, aus der diese._authentication.create-Methode, um wieder eine neue observable, die mit einem mock-Antwort in es?

Nach mehr Forschung ein paar Artikel angezeigt, die ich tun müssen, um mock-out-service und eine Rückkehr zu Beobachten.der (), der synchron ausgeführt, das problem zu lösen, krank, kopieren Sie den code unten. Dies ist jedoch immer noch nicht funktioniert, habe ich schon fast den ganzen Tag, ich nicht das Gefühl, diese sollten so schwer sein, jede Hilfe zu schätzen. 

class MockAuthentication extends Authentication {
  public create(user: Object): Observable<any> {
    return Observable.of({'test': 'test'});
  }
}
InformationsquelleAutor HomeBrew | 2016-02-26
  1. 3

    Ok also es ist mir genommen, die meisten des Tages, aber ich schließlich knackte es. Anstelle der Verwendung der injectAsync und TestComponentBuilder einrichten, die Skillung muss ich nur verwenden, Spritzen und injizieren Sie die Komponente genau, wie Sie einen Dienst tun. Dies scheint in Ordnung, da brauche ich nicht zu testen, nichts in der Ansicht Ereignisse.

    Heres das endgültige Skillung, die funktioniert: 

    it('Should set token in localStorage, set the new user, 
and navigate to home page on succesful login', 
  inject([Login], (login) => {
    login.router.config([ { path: '/', name: 'Home', component: Home }]);
    spyOn(localStorage, 'setItem');
    spyOn(login._currentUser, 'set');
    spyOn(login.router, 'navigate');
    login.onSubmit({ userId: '[email protected]', password: 'password', siteName: 'sample' });
    expect(localStorage.setItem).toHaveBeenCalledWith('token', 'newToken');
    expect(login._currentUser.set).toHaveBeenCalledWith({ 'test': 'one' });
    expect(login.router.navigate).toHaveBeenCalledWith(['/Home']);
}));

    Hoffnung, dies könnte helfen, jemand in der Zukunft.

    InformationsquelleAutor HomeBrew
  2. 1

    Ich denke, Sie wollen zu injizieren, ein mock Router Instanz der Komponente und dann nach navigate(['/Home']) genannt wurde, auf dem mock Router Sie überprüfen, ob localStorage.setItem(...) genannt wurde.

    • Es fühlt sich an wie der check passieren würde, bevor Sie etwas genannt, weil der abonnieren aber ich bin neu auf Observablen. Auch wir verwendet, um Sie nur spyOn ("localStorage", 'setItem') im Winkel 1, aber ich habe eine harte Zeit, herauszufinden, wie das gleiche zu tun, mit Winkel-2.
    • Mein bad sieht aus wie Sie immer noch mit spyOn das gleiche, mein problem war ich konnte nicht herausfinden, wo Sie brauchen, um zu importieren "spyOn" aus, aber es scheint, Sie gerade zu haben. Aber es scheint meine Aussage über die Prüfung geschieht, bevor noch läuft wahr. Ich aktualisiert meine Frage, gehören die spec.
    InformationsquelleAutor Günter Zöchbauer
  3. -1

    Siehe meine Kernaussage hier.

    Grundsätzlich können Sie mehrere Dinge tun hier. Zuerst von allen, stub Ihre http-Aufruf (ich vermute aus a service) mit einem einfachen beobachtbare Reaktion des Tokens (oder andere Antwort), die Sie wollen.

    service.stub.ts

    export class MyStub {
  public create(user: User): Observable<User> {
    return Observable.of('insert test token here');
  }
//other stubbed methods ...
}

    Und dann in Ihrem test:

    myComp.spec.ts

    let comp: MyComponent;
let fixture: ComponentFixture<MyComponent>;
let sst: ServiceStub;
describe('MyComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [MyComponent],
      schemas: [NO_ERRORS_SCHEMA]
    }).overrideComponent(OnboardFacilityNewComponent, {
      set: {
        providers: [
          { provide: MyService, useClass: ServiceStub },
        ]
      }
    })
    .compileComponents()
      .then(() => {
        fixture = TestBed.createComponent(MyComponent);
        comp = fixture.componentInstance;
        st = fixture.debugElement.injector.get(MyService);
      });
  }));
  it('should submit new onboardFacility', fakeAsync(() => {
    const sst = spyOn(sst, 'create').and.returnValue(
      Observable.of('some token here')
    );
    comp.onSubmit(testUser);
    fixture.detectChanges();
    expect(comp.token).toEqual('some token here');
    expect(spy.calls.any()).toEqual(true);
  }));
});

    Hier können Sie einfach ersetzen die tatsächlichen Daten mit test-Daten zu testen, das Verhalten der Tests, sondern dann Ihre testbed, Ihre Leistungen, localStorage etc. Offensichtlich ist der test den ich hier schrieb, meint Sie, speichert das zurückgegebene token von Ihrem Dienst in der Komponente, sondern dann localStorage (obwohl es einen Weg, das zu tun), aber ich bin einfach nur zu zeigen, das Konzept eher dann Ihren speziellen Anwendungsfall.

    In Ihren Fall müssen Sie auch die stub-router, die Sie lernen können, wie zu tun hier.

    • Das macht keinen Sinn.. Warum rufst du spyOn in einem service-mock? Wenn es verspottet, es ist auch wieder ein Schein-Wert haben, brauchen nicht zurückzukehren, ein weiteres mock-Wert mit dem returnValue Jasmin-Funktion.
    • denn Sie bestimmen, ob die Funktion, die Logik fordert, die Abhängigkeit. Der Spion ist optional.
    InformationsquelleAutor Chris Pawlukiewicz
Schreibe einen Kommentar