如何模拟 Angular 服务发射器并返回订阅

Question

I have the following code in my Component, that I would like to test

  ngOnInit(): void {
    this.authService.loggedInSignal.subscribe((data) => {
      console.log(data)
      if (data) {
        this.planFeatures = this.authService.getProfileData().planFeatures;
        console.log(this.planFeatures)
      }
    });
  }

For that purpose, I mock the authService, but not sure how to test further. I would like to verify that subscription is fired and to test inside code

So far I did

describe('UpgradeSorageButtonComponent', () => {
  let component: UpgradeSorageButtonComponent;
  let fixture: ComponentFixture<UpgradeSorageButtonComponent>;
  let authService: AuthService;
  let mockAuthService = {
    loggedInSignal: {
      subscribe: {}
    },
    
    getProfileData() {return {};}
  };

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [UpgradeSorageButtonComponent],
      imports: [RouterTestingModule],
      providers: [{provide: AuthService, useValue: mockAuthService}]
    }).compileComponents();

    authService = TestBed.inject(AuthService);
  });

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

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

  fit('should attach to subscriber', fakeAsync(() => {
    spyOn(authService.loggedInSignal, 'subscribe').and.returnValue(true)
  }));
});

but getting an error that type 'boolean' is not assignable to parameter of type 'Subscription'

Can someone help with how to properly mock the service and do tests for that piece of code? Thanks

Answer 1

The first fixture.detectChanges() you call is when ngOnInit is called.

Since, ngOnInit has this.authService.loggedInSignal.subscribe , it is important that it is mocked and returning an observable value before this fixture.detectChanges() .

Follow the comments with.! for more details.

// !! I would use a spy object, it makes constructions of spies easier
let mockAuthService: jasmine.SpyObj<AuthService>;

beforeEach(async () => {
    mockAuthService = jasmine.createSpyObj<AuthService>('AuthService', ['loggedInSignal', 'getProfileData']);
    await TestBed.configureTestingModule({
      declarations: [UpgradeSorageButtonComponent],
      imports: [RouterTestingModule],
      providers: [{provide: AuthService, useValue: mockAuthService}]
    }).compileComponents();
     // !! don't need the below line
    // authService = TestBed.inject(AuthService);
  });

beforeEach(() => {
    fixture = TestBed.createComponent(UpgradeSorageButtonComponent);
    component = fixture.componentInstance;
    authService.loggedInSignal.and.returnValue(of(true));
    // !!!~ ngOnInit is called here
    fixture.detectChanges();
  });

I like using Spy Objects because it makes mocking much easier.

Check this link out on how to use Spy Objects and check this link on how to unit test in Angular as a whole. The 2nd link is really good.

Answer 2

First, remove the fixture.detectChanges(); from the beforeEach call, then call the ngOnInit in your test and -if you spied the code from the authService -, you should tick() the call to "enter" the subscription callback.

fit('should attach to subscriber', fakeAsync(() => {
    ...//Setup test (if necessary)
    spyOn(authService.loggedInSignal, 'subscribe').and.returnValue(true);
    componente.ngOnInit();
    tick();
    expect(thingInsideSubscription);
}));

Answer 3

Heres my mock router service, which has a Behaviorsubject that many components subscribe to in their OnInit hooks..... I am providing this service and have a convenience method 'emit', which is what calls next on my Behaviorsubject during testing....

class MockRouterUrlStateSvc {
  private _currentRouterUrlState$ = new BehaviorSubject<any>(null);

  get currentRouterUrlState$() {
    return this._currentRouterUrlState$.asObservable();
  }

  public emit(value: any) {
    this._currentRouterUrlState$.next(value);
  }
}

Your test can look something like the following:

class MockAuthService {
// BehaviorSubject with initial value of true
    _loggedInSignal$ = new BehaviorSubject<boolean>(true);

    get loggedInSignal() {
        return this._loggedInSignal$.asObservable();
    }

    emit(value: boolean) {
        this._loggedInSignal$.next(value);
    }

    getProfileData() {
        return {};
    }
}

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

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [UpgradeSorageButtonComponent],
      imports: [RouterTestingModule],
      providers: [{provide: AuthService, useClass: MockAuthService}]
    }).compileComponents();

    authService = TestBed.inject(AuthService);
  });

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

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

  fit('should attach to subscriber and get true value initially', () => {
    authService.loggedInsignal.subscribe((isLoggedIn) => {
        expect(isLoggedIn).toBeTrue();
    })
  });

  fit('should have emitted false value inside onInit', () => {
    authService.emit(false);
    component.ngOnInit();
    // test stuff happening inside your OnInit based on a false login
  });

  describe('Other stuff', () => {
    it('should not log you in with a false observable value', () => {
      authService.emit(false);
      tick();
      authService.isLoggedInSignal.subscribe((isLoggedIn) => {
        expect(isLoggedIn).toBeFalse();
        // other stuff to test if the user isnt logged in
    })
    })

    it('same as above with jasmine marbles', () => {
      const emissions$ = hot('-a', { a: authService.emit(false) });
      authService.isLoggedInSignal.subscribe((isLoggedIn) => {
        expect(isLoggedIn).toBeFalse();
      });
    });
  });
});