帶有Jasmine / Karma的組件中帶有訂閱的單元測試

Question

帶有Jasmine / Karma的組件中帶有訂閱的單元測試

我嘗試使用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();               
    });      
  }));