Test Case is not pass with angular sdk with api

[piyush2311]

I am writing unit test code for member login and signup API in angular 5 but I am not able to do as well please provide a solution for that how can I do a unit test with angular 5 with loopback-sdk-builder

login.component.spec.ts

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { LoginComponent } from '../app/login/login.component';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { MemberApi } from '../app/shared/sdk/services';
import { HttpModule } from '@angular/http';
describe('LoginComponent', () => {
  let component: LoginComponent;
  let fixture: ComponentFixture<LoginComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [FormsModule, BrowserModule, HttpModule],
      declarations: [ LoginComponent ],
      providers: [MemberApi]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(LoginComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

login.component.ts

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
import { LoopBackConfig, BASE_URL, API_VERSION } from '../shared/sdk';
import { Member, AccessToken } from '../shared/sdk/models';
import { GrowlerService, GrowlerMessageType } from '../core/growler/growler.service';
import { MemberApi } from '../shared/sdk/services';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
  private addUser: Member = new Member();
  isLogin = false;

  /**
   * constructor for depandancy injection
   * @param memberApi
   * @param router
   * @param dataService
   */
  constructor(private memberApi: MemberApi,
              private router: Router,
              private growler: GrowlerService,
              private dataService: DataService) {
    LoopBackConfig.setBaseURL(BASE_URL);
    LoopBackConfig.setApiVersion(API_VERSION);
      if (this.memberApi.isAuthenticated()) {
        router.navigate(['dashboard']);
      }
  }

  /**
   * onload function
   */
  ngOnInit() {
    /*this.dataService.getDemoList().subscribe((data) => {
      console.log(data);
    });*/
  }

  /**
   * login user in portal
   */
  private login(): void {
    this.memberApi.login(this.addUser, {}).subscribe((data) => this.router.navigate(['/dashboard']),
      (err) => this.growler.growl(err.message, GrowlerMessageType.Danger));
  }

[jerowe]

I get an error when testing too.

TypeError: Cannot read property 'handleError' of null
TypeError: Cannot read property 'handleError' of null
    at CatchSubscriber.eval [as selector] (./src/sdk/services/core/base.service.ts?:165:257)
    at CatchSubscriber.error (./node_modules/rxjs/_esm5/internal/operators/catchError.js?:40:31)
    at MapSubscriber.Subscriber._error (./node_modules/rxjs/_esm5/internal/Subscriber.js?:93:26)
    at MapSubscriber.Subscriber.error (./node_modules/rxjs/_esm5/internal/Subscriber.js?:71:18)
    at FilterSubscriber.Subscriber._error (./node_modules/rxjs/_esm5/internal/Subscriber.js?:93:26)
    at FilterSubscriber.Subscriber.error (./node_modules/rxjs/_esm5/internal/Subscriber.js?:71:18)
    at MergeMapSubscriber._tryNext (./node_modules/rxjs/_esm5/internal/operators/mergeMap.js?:74:30)
    at MergeMapSubscriber._next (./node_modules/rxjs/_esm5/internal/operators/mergeMap.js?:61:18)
    at MergeMapSubscriber.Subscriber.next (./node_modules/rxjs/_esm5/internal/Subscriber.js?:65:18)
    at Observable.eval [as _subscribe] (./node_modules/rxjs/_esm5/internal/observable/scalar.js?:8:20)

Process finished with exit code 0

Test looks like this:

describe('SearchFormExpScreenComponent', () => {
  let component: SearchFormExpScreenComponent;
  let fixture: ComponentFixture<SearchFormExpScreenComponent>;

  beforeEach(async(() => {

    TestBed.configureTestingModule({
      imports: [FormsModule],
      declarations: [SearchFormExpScreenComponent],
      providers: [ExpScreenApi, ExpScreenUploadWorkflowApi, HttpClient,
        HttpHandler, SocketConnection, SocketDriver, SDKModels, LoopBackAuth, InternalStorage],
    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(SearchFormExpScreenComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
}

I have the most recent versions of the SDK Builder, angular and karma installed.

[jerowe]

I'm still fairly new to angular. Anyone have any experience mocking these api calls they'd like to share? ;-)

[jerowe]

Its a possible bug in the error class. This:

export class ErrorHandler {
  public handleError(errorResponse: HttpErrorResponse): Observable<never> {
    return throwError(errorResponse.error.error || 'Server error');
  }
}

Should be:

export class ErrorHandler {
  public handleError(errorResponse: HttpErrorResponse): Observable<never> {
      return throwError(errorResponse.error || 'Server error');
  }
}