在 Jasmine/Karma 组件中使用 Subscription 进行单元测试

Question

在 Jasmine/Karma 组件中使用 Subscription 进行单元测试

我尝试使用 Subscription 测试一个组件，我正在使用它从服务中获取一些数据。我需要将模拟数据与数字“4”进行比较，如果比较给出真实值，则此测试将通过。我的问题是误解了如何正确检查它。

组件 app-callorder-form.ts

import { Component, OnInit, OnDestroy,  } from '@angular/core';
import { Subscription } from 'rxjs';
import { FormsService } from '../../services/forms.service';

@Component({
  selector: 'app-callorder-form',
  templateUrl: './callorder-form.component.html',
  styleUrls: ['./callorder-form.component.css']
})
export class CallorderFormComponent implements OnInit {

  modal_switcher: boolean = false; 
  subscription: Subscription;  

  constructor(private formsService: FormsService) {

    this.subscription = formsService.observableclicks$.subscribe((data) => {
      if (data.typeofform == 4) {
        this.modal_switcher = true;
      }      
    }); 

  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

  ngOnInit() {    
  }
}

服务表单.service.ts

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
import { ClickForm } from '../classes/click-class'

@Injectable({
  providedIn: 'root'
})
export class FormsService {

  private clicks = new Subject<ClickForm>(); 
  observableclicks$ = this.clicks.asObservable();

  constructor(private http: HttpClient) { }

  //This method obtain values from another component
  openForm(openClick: ClickForm) {
    this.clicks.next(openClick);
  }  

}

测试

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { Subscription } from 'rxjs';
import { CallorderFormComponent } from './callorder-form.component';
import { FormsService } from '../../services/forms.service';

describe('CallorderFormComponent', () => {
  let component: CallorderFormComponent;
  let fixture: ComponentFixture<CallorderFormComponent>;
  let forms: FormsService;
  let spy: jasmine.Spy;  
  let subscription: Subscription;  

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ CallorderFormComponent ],
      providers: [ FormsService ]
    })
    .compileComponents();
    forms = TestBed.get(FormsService);
  }));

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

  //Problem is here
  it('...', async(() => {
    spy = spyOn(forms.observableclicks$, 'subscribe').and.returnValue(subscription);
    fixture.detectChanges();
    fixture.whenStable().then(() => {
      expect(spy).toBe(4); 
    });
  }));

});

Answer 1

我想这是可行的方法：

  it('should have typeofform == 4', (done: DoneFn) => {
    const openClick: ClickForm = {typeofform: 4, typeofact: 'Some data'};
    forms.openForm(openClick);     
    forms.observableclicks$.subscribe((data) => {
      expect(data.typeofform).toBe(4);              
    });
    done();   
  });

更新：

  it('should have typeofform == 4', async((done: DoneFn) => {
    const openClick: ClickForm = {typeofform: 4, typeofact: 'Some data'};
    forms.openForm(openClick);     
    forms.observableclicks$.subscribe((data) => {
      expect(data.typeofform).toBe(4);
      done();               
    });      
  }));