在具有茉莉花/业力的组件中使用订阅进行单元测试

Question

在具有Jasmine/Karma的组件中使用订阅的单元测试

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

Component 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() {    
}
}

服务表格.服务.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();               
});      
}));