如何覆蓋angular中RxJS科目的Jasmine單元測試

Question

我很新 Jasmine 單元測試用例。 我的場景可能很簡單，但我不確定如何涵蓋 class 以下的 ngInit 測試用例。有人可以幫助我嗎，

export class Component1 implements OnInit {
    details$: Observable<any>; 
    name: string; 
    error: string 

    constructor(private service1: Service1, private service2: Service2) { }

    ngOnInit() {
       this.service1.service1Subject.subscribe( info => {
            if(info['url']){
                this.details$ = this.service2.get(info['url'])
                this.details$.subscribe(
                 (info) => { this.name = info['name']}; 
                 (error) => { this.erro = error['error']}; 
                ); 
            }  
       }); 
    }
}

測試用例：

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

  beforeEach(async(() => {
   TestBed.configureTestingModule({
     declarations: [Component1],
     imports: [
       HttpClientTestingModule, CommonModule
     ],
     providers: [Service1, Service2]
   })
     .compileComponents();
   }));

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

  it('should call Get Data', () => {
      const service2: Service2 = TestBed.get(Service2);
      const spy = jest.spyOn(service2, 'get').mockImplementation(() => {
          return {
             info :  [...],
              name : ''  
          }
      });
      component.ngOnInit();
      expect(spy).toHaveBeenCalled();
  });
});

這里的問題是，我不確定如何模擬 service1, RxJS 主題。 請有人幫助我。

Answer 1

我看到您正在使用 Jest，但這里是我設置組件測試的方式，這些測試使用公開Subject的服務。

1. 為您的所有服務創建模擬
2. 在您的測試模塊中提供它們
3. 模擬實現來控制數據流

4. 執行你的斷言

   describe('Component1', () => { let component: Component1; let fixture: ComponentFixture<Component1>; //create mock service objects let service1Mock = jasmine.createSpyObj('service1', ['toString']); let service2Mock = jasmine.createSpyObj('service2', ['get']); beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [Component1], imports: [ HttpClientTestingModule, CommonModule ], providers: [ //Set up the dependency injector, but use the mocks as the implementation { provide: Service1, useValue: service1Mock }, { provide: Service2, useValue: service2Mock } ] }).compileComponents(); })); beforeEach(() => { //add an observable to your service //this will also help reset the observable between each test service1Mock.service1Subject = new Subject<any>(); }); beforeEach(() => { fixture = TestBed.createComponent(Component1); component = fixture.componentInstance; fixture.detectChanges(); }); it('should get the data', () => { //configure the mock implementation of "service2.get" to successfully return data //You can alternatively use "throw({error: 'some_error'})" to test your "error" case service2Mock.get.and.returnValue(of({name: 'some_name'})); //tell the mock to emit some data! service1Mock.service1Subject.next( {url: 'some_url'} ); //Your component subcriptions should handle the event, perform whatever test needs to do }); });

我知道 Jasmine 計划使創建具有屬性的間諜對象成為可能，但我自己實際上並沒有使用它。

順便說一句，如果您不在模板中使用details$ ，則可以完全消除該變量。

ngOnInit(){
    this.service1.service1Subject.subscribe( info => {
        if(info['url']){
            this.service2.get(info['url']).subscribe(
                (info) => { this.name = info['name']}; 
                (error) => { this.error = error['error']}; 
            ); 
        }  
    });
}

Answer 2

先模擬主題，然后將其添加到模擬服務中。

 describe('Component1', () => {
    
     let component: Component1;
     let fixture: ComponentFixture<Component1>;
     let mockSubject = new Subject<boolean>();
     mockSubject.next(true);
     let mockService = jasmine.createSpyObj(Service, ['getTheme']);
      
     beforeEach(async () => {
        await TestBed.configureTestingModule({
          declarations: [Component1],
          providers: [{ provide: Service, useValue: mockService }],
        }).compileComponents();
    
        mockService.getTheme.and.returnValue(false);

        mockService.theme$ = mockSubject; <---- assign mocked value
        
        fixture = TestBed.createComponent(Component1);
        component = fixture.componentInstance;
        fixture.detectChanges();
      });
    })