如何在 Jasmine 測試中模擬 Angular 訂閱

Question

在向服務添加一些訂閱后，我正在嘗試修復單元測試（我對 Jasmine 不是特別熟悉）。 我收到一個錯誤，說它們是未定義的。 我不確定如何正確包含訂閱。

我的組件（比這更多，但為了清楚起見，我已經縮短了）：

export class AppComponent implements OnInit, AfterViewInit {
  isSignedIn = false;
  isLoggedIn = false;
  signedInSubscription: Subscription;
  loggedInSubscription: Subscription;

  constructor(
    private authenticationService: AuthenticationService,
    private router: Router,
    private http403Tester: Http403TestService,
  ) {
    this.isLoggedIn = authenticationService.isLoggedIn;
    this.isSignedIn = authenticationService.isSignedIn;
    this.setEnvironment();
  }

  async ngOnInit() {
    // line 69 below, this is where the error is
    this.signedInSubscription = this.authenticationService.observableIsSignedIn.subscribe(item => {
      this.isSignedIn = item;
    });
    this.loggedInSubscription = this.authenticationService.observableIsLoggedIn.subscribe(item => {
      this.isLoggedIn = item;
    });
  }  
}

服務：

export class AuthenticationService {
  constructor() {
    this.observableIsSignedIn = new BehaviorSubject<boolean>(this.isSignedIn);
    this.observableIsLoggedIn = new BehaviorSubject<boolean>(this.isLoggedIn);
  }

  isSignedIn: boolean = null;
  isLoggedIn: boolean = null;
  observableIsSignedIn: any;
  observableIsLoggedIn: any;

規格：

describe('AppComponent', () => {
  let authenticationService: any;
  let http403Tester: any;
  let router: any;
  let component: AppComponent;

beforeEach(() => {
  authenticationService = {
    isSignedIn: jasmine.createSpy(),
    isLoggedIn: jasmine.createSpy(),
    observableIsSignedIn: jasmine.createSpy(),
    observableIsLoggedIn: jasmine.createSpy(),
  };
  router = { navigateByUrl: jasmine.createSpy() };
  http403Tester = { isAuthenticated: jasmine.createSpy() };
  component = new AppComponent(authenticationService, router, http403Tester);
});

describe('ngOnInit()', () => {
  it('should navigate to /unauthorised when a 403 status code is returned', async () => {
  // Arrange
  http403Tester.isAuthenticated.and.returnValue(false);

  // Act
  await component.ngOnInit();

  // Assert
  expect(router.navigateByUrl).toHaveBeenCalledWith('/unauthorised');
});

和錯誤：

TypeError: Cannot read property 'subscribe' of undefined
at AppComponent.<anonymous> (src/app/app.component.ts:69:83)

所以我很確定 createSpy() 是模擬訂閱的不正確方法：

observableIsSignedIn: jasmine.createSpy()

但我不知道如何進行或搜索什么。 有任何想法嗎？

Answer 1

嘗試這個

 authenticationService = {
    isSignedIn: jasmine.createSpy(),
    isLoggedIn: jasmine.createSpy(),
    observableIsSignedIn: new BehaviorSubject<boolean>(undefined).asObservable(),
    observableIsLoggedIn:  new BehaviorSubject<boolean>(undefined).asObservable(),
  };

有關更多詳細信息： 在組件測試規范中模擬 BehaviourSubject

更新：

實際上，您錯過了單元測試的正確配置。 請檢查： https : //angular.io/guide/testing#component-dom-testing