javascript - Angular - Testa serviceprenumeration vid submit

Hur kan jag täckningstesta en submit-åtgärd med ett subscribe-event? Jag har detta:

onSubmit() {
    this.myService.myMethod(value)
      .subscribe((result: any) => {
        console.log(result);
      },
        error => {
          console.log(error);
        },
        () => {
          console.log('completed);
        }
      );
}

test

it('should test submit',
    inject([myService, XHRBackend], (myService: any, mockBackend: any) => {
      const mockResponse = {
        error: false,
        msg: `Completed`
      };
      mockBackend.connections.subscribe((connection: any) => {
        connection.mockRespond(new Response(new ResponseOptions({
          body: JSON.stringify(mockResponse)
        })));
      });
      myService.myMethod().subscribe(() => { });
    }));

Min testtäckning visar att jag inte har testat prenumerationsraderna.

Svar #1

Det finns några få fel i komponentkoden för onSubmit. Hur kan du testa resultatet när du bara använder console.log osv. Du behöver hantera någon form av flagga och visa/dölja en spinner eller ge ett fel-/framgångsmeddelande. Då kan du testa funktionen med error och success. Till exempel:

onSubmit() {
    this.showSpinner = true;
    this.myService.myMethod(value)
      .subscribe((result: any) => {
        this.msg = 'success';
      },
        error => {
          this.msg = 'error';
        },
        () => {
          this.showSpinner = false;
        }
      );
}

i test-fil:

class MySvcMock{
  myMethod() { return of('someVal')}
}

beforeEach(async(() => {
    TestBed.configureTestingModule({
       provider: [{provide: MyService, useClass: MySvcMock}]        
    }).compileComponents();
...
...

it('should set success msg on submit',()=>{
   component.msg = '';
   component.onSubmit();
   expect(component.msg).toBe('success');
   expect(component.showSpinner).toBeFalsy();
})

it('should set error msg on submit error',()=>{
   component.msg = '';
   spyOn(component.myService,'myMethod').and.returnValue(throwError('some error msg'));
   component.onSubmit();
   expect(component.msg).toBe('error');
   expect(component.showSpinner).toBeFalsy();
})

Du kan hänvisa till min artikelserie som kan hjälpa dig att bli mer bekant med Karma.

1. Introduktion till Karma. Kolla länkarna längst ner i artikeln
2. Det här är den som kommer att hjälpa dig i detta scenario