如何在 Angular 6 Jasmine 测试中正确配置 Mock Auth 服务？

Question

I am trying to create a mock AuthService in my Angular 6 Jasmine component test. I can't seem to quite get it configured to "sign in" and use my MockAuthService correctly.

What sort of configurations am I missing/do I have wrong? How can I properly inject my service into my test?

Here is the error I'm receiving:

TypeError: Cannot read property 'userContext' of null

And the place in my .ts file where it is occurring:

this.authService.getCurrentUsers(this.authService.userSession.userContext.id, this.authService.userSession.authToken)
      .subscribe(data => { ...

Here is my entire test file:

import { FormsModule } from '@angular/forms';
import { RouterTestingModule } from '@angular/router/testing';
import { HttpClientModule } from '@angular/common/http';
import { DeviceComponent } from './device.component';
import { NavigationComponent } from '../navigation/navigation.component';
import { SensorPageChartComponent } from '../sensor-page-chart/sensor-page-chart.component';
import { AuthService } from '../../services/auth.service'

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

  class MockAuthService {
    isLoggedIn = true;
    userSession = {
      authToken: "27turtles",
      userContext: {
        admin: true,
        companyHid: undefined,
        email: "turtle@place.io",
        id: 1,
        login: "turtle@place.io",
        name: "Turtle User",
        roleHids: undefined,
        status: "ACTIVE"
      },
      currentAplication: {
        canonicalName: "Terrapinarium",
        description: "Terrapinarium Desc",
        email: "turtle@place.io",
        enabled: true,
        firstName: "Turtle",
        id: 1,
        lastName: "User",
        name: "Terrapinarium"
      }
    } 
  };

  let service: MockAuthService;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [DeviceComponent, NavigationComponent, SensorPageChartComponent],
      imports: [FormsModule, RouterTestingModule, HttpClientModule],
      providers: [{ provide: AuthService, useValue: MockAuthService }]
    })
    .compileComponents();
    service = TestBed.get(MockAuthService)

  }));

  beforeEach(() => {
    // service = TestBed.get(MockAuthService);
    alert(service)
    fixture = TestBed.createComponent(DeviceComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    // service = TestBed.get(MockAuthService);
    expect(component).toBeTruthy();
  });
});

Thank you!

Answer 1

Your'e creating a Mock class and in providers your'e using useValue . It should be useClass instead

providers: [{ provide: AuthService, useClass: MockAuthService }]

You would also need to add getCurrentUsers() function in Mock Auth service and as currentUsers returns an observable you'll need to make it fake return an observable

 let mockAuthService = TestBed.get(AuthService) //get your actual auth service

then in you need to make it return an observable

spyOn(mockAuthService, 'getCurrentUsers').and.returnValue(of({// value goes here})