单元测试时如何模拟 Angular BehaviourSubject

Question

我想在收到BehaviourSubject更新或 state 更改时测试我的 AppComponent，所以我的目标是在我的AppComponent authService.authEvent

export class AppComponent implements OnInit, OnDestroy {
  
  user: any
  loggedIn = false
  
  constructor(
    private router: Router,
    private authService: AuthService
  ) {}

  ngOnInit(): void {
    this.authService.authEvent.subscribe((user) => {
      if (user) {
        this.setLoggedIn(user)
      } else {
        this.setLoggedOut()
      }
    });
  }

  setLoggedIn(user: any) {
    this.user = user
    this.loggedIn = true

  }

我的 AuthService 如下（authEvent BehaviourSubject是我想模拟的）：

@Injectable()
export class AuthService {

  authEvent = new BehaviorSubject<any>(null);
  user: any = {}
  
  constructor(

  ) {}


  setUser(user: any) {
    console.log('setUser');
    this.user = { ...user }
    sessionStorage.setItem('app-user', JSON.stringify(this.user))
    this.authEvent.next(this.user)
  }

而我的单元测试，我知道这不是模拟BehaviourSubject的正确方法，但我还没有找到任何好的例子来做到这一点：

import { BehaviourSubject } from 'rxjs';

export class MockAuthService {

    authEvent = new BehaviourSubject<any>();

    setUser() {
    //mock implementation
    }
}


describe('AppComponent', () => {
  let component: AppComponent;
  let fixture: ComponentFixture<AppComponent>;
  let mockAuthService;
  
  beforeEach(async(() => {

    mockAuthService = jasmine.createSpyObj(['setUser']);

    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        AppComponent
      ],
      providers: [
        { provide: AuthService, useClass: MockAuthService }
      ],
      schemas: [
        CUSTOM_ELEMENTS_SCHEMA
      ]
    }).compileComponents();

    
  }));

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

  it('should create the app', () => {
   
    const app = fixture.componentInstance;
    
    expect(app).toBeTruthy();
  });

 
  describe('ngOnInit', () => {
    it('should call setLoggedIn user if user received from authEvent', () => {
      const mockAuthService = TestBed.get(AuthService);
      const userValue = {userName: 'myUser'};
      const spy = spyOn(mockAuthService, 'authEvent').and.returnValue(of(userValue));
      const spyLoggedOut = spyOn(component, 'setLoggedIn').and.callThrough();

      fixture.detectChanges();

      expect(setLoggedIn).toHaveBeenCalled();
      
    });

  });
  
});

我将衷心感谢您的帮助！

Answer 1

您可以通过三种方式模拟服务：

1. 像你一样提供一个 Mock 实体
2. Mocking 组件中的Service实例。
3. 使用 TestBed.get() 获取服务实例并模拟该服务实例

独立地，您选择以哪种方式模拟服务，您需要将单元测试作为fakeAsync执行，因为您正在使用 Observable 哪些响应不是即时的。

1）像你一样提供一个模拟实体

import { Subject} from 'rxjs';


describe('AppComponent', () => {
  let component: AppComponent;
  let fixture: ComponentFixture<AppComponent>;
  const mySubject = new Subject();
  
  beforeEach(async(() => {

    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        AppComponent
      ],
      providers: [
        { provide: AuthService, useValue: { authEven: mySubject.asObservable()} }
      ],
      schemas: [
        CUSTOM_ELEMENTS_SCHEMA
      ]
    }).compileComponents();

    
  }));

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

  it('should create the app', () => {
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });

 
  describe('ngOnInit', () => {
    it('should call setLoggedIn user if user received from authEvent', fakeAsync(() => {
      const spyLoggedOut = spyOn(component, 'setLoggedIn');;
      const userValue = {userName: 'myUser'};
      component.ngOnInit();
      mySubject.next(userValue);
      tick();
      fixture.detectChanges();
      expect(setLoggedIn).toHaveBeenCalled();
      flush();
      
    }));

  });
  
});

2) Mocking 组件中Service的实例。

describe('AppComponent', () => {
  let component: AppComponent;
  let fixture: ComponentFixture<AppComponent>;
  
  beforeEach(async(() => {

    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        AppComponent
      ],
      providers: [
        { provide: AuthService }
      ],
      schemas: [
        CUSTOM_ELEMENTS_SCHEMA
      ]
    }).compileComponents();

    
  }));

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

  it('should create the app', () => {
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });

 
  describe('ngOnInit', () => {
    it('should call setLoggedIn user if user received from authEvent', fakeAsync(() => {
      const spyLoggedOut = spyOn(component, 'setLoggedIn');
      const userValue = {userName: 'myUser'};
      spyOn(component['authService'], 'authEvent').and.returnValue(of(userValue)); //
      component.ngOnInit();
      tick();
      fixture.detectChanges();
      expect(setLoggedIn).toHaveBeenCalled();
      flush();
      
    }));

  });
  
});

3) 使用 TestBed.get() 获取服务实例并模拟该服务实例

describe('AppComponent', () => {
  let component: AppComponent;
  let fixture: ComponentFixture<AppComponent>;
  let authService: AuthService ;
  beforeEach(async(() => {

    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        AppComponent
      ],
      providers: [
        { provide: AuthService }
      ],
      schemas: [
        CUSTOM_ELEMENTS_SCHEMA
      ]
    }).compileComponents();

    
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;
    authService = TestBed.get(AuthService);
  })

  it('should create the app', () => {
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });

 
  describe('ngOnInit', () => {
    it('should call setLoggedIn user if user received from authEvent', fakeAsync(() => {
      const spyLoggedOut = spyOn(component, 'setLoggedIn');
      const userValue = {userName: 'myUser'};
      spyOn(authService, 'authEvent').and.returnValue(of(userValue)); //
      component.ngOnInit();
      tick();
      fixture.detectChanges();
      expect(setLoggedIn).toHaveBeenCalled();
      flush();
      
    }));

  });
  
});

我更喜欢2) Mocking 组件中的服务实例。 因为它的代码更少而且更简单