[英]Angular how to test a Subject() as an Observable
My problem is that I have no idea how to test the subscription on the component that subscribes the subject, my code goes like this:我的问题是我不知道如何在订阅主题的组件上测试订阅,我的代码是这样的:
Util service:实用服务:
private clearFlag = new Subject<boolean>();
public readonly message$ = this.clearFlag.asObservable();
getClearFlag(): Observable<boolean> {
return this.message$;
}
setClearFlag(clear: boolean) {
this.clearFlag.next(clear);
}
In the component I subscribe to that Subject in the ngOnInit method, like this:在组件中,我在 ngOnInit 方法中订阅了该主题,如下所示:
this.utilService.getClearFlag().subscribe((value) => {
this.clearFlag = value;
});
The value of this subject is given by another two components like this:该主题的价值由另外两个组件给出,如下所示:
this.utilService.setClearFlag(false);
I need to test the subscribe fragment of code but I'm not sure how, I've tried every single solution on StackOverflow and I keep getting this error:我需要测试代码的订阅片段,但我不确定如何,我已经尝试了 StackOverflow 上的每个解决方案,但不断收到此错误:
Failed: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'subscribe')
Spec file:规范文件:
describe('ContactsPageComponent', () => {
let component: ContactsPageComponent;
let fixture: ComponentFixture<ContactsPageComponent>;
let utilServiceSpy: jasmine.SpyObj<UtilService>;
let contactsHttpSpy: jasmine.SpyObj<ContactsHttpService>;
let contactServiceSpy: jasmine.SpyObj<ContactService>;
let qrSpy: jasmine.SpyObj<QrService>;
let storeService: StorageService;
// const clearFlag = new Subject<false>();
beforeEach(
waitForAsync(() => {
utilServiceSpy = jasmine.createSpyObj('UtilService', [
'getLoadingModal',
'transactionStatus',
'transactionStatusDescription',
// 'getClearFlag',
'setClearFlag',
]);
...
TestBed.configureTestingModule({
declarations: [ContactsPageComponent],
imports: [
IonicModule,
CommonModule,
HttpClientTestingModule,
YpHeaderModule,
RouterTestingModule,
BrowserAnimationsModule,
LottieModule,
],
providers: [
...
// { provide: UtilService, useValue: utilServiceSpy, clearFlag },
{ provide: UtilService, useValue: utilServiceSpy },
...
],
}).compileComponents();
fixture = TestBed.createComponent(ContactsPageComponent);
component = fixture.componentInstance;
component.clearFlag = false;
fixture.detectChanges();
const utilService = TestBed.inject(UtilService);
// spyOn(utilService,'setClearFlag').and.returnValue();
// spyOn(utilService,'setClearFlag').and.callFake(() => false);
utilServiceSpy.setClearFlag(false);
const spy = spyOn(utilService.message$, 'subscribe').and.callThrough();
// const spy = jasmine.createSpyObj(UtilService, ['getClearFlag']);
// utilServiceSpy.message$.subscribe(v => {
// expect(v).toBeDefined();
// });
// utilService.message$.subscribe(v => {
// expect(v).toBeDefined();
// });
component.ngOnInit();
expect(component.clearFlag).toBeDefined();
expect(spy).toHaveBeenCalled();
})
);
I left the commented out code on there so you can see the solutions I've tried.我将注释掉的代码留在那里,以便您可以看到我尝试过的解决方案。
Try this:尝试这个:
import { of } from 'rxjs';
....
waitForAsync(() => {
utilServiceSpy = jasmine.createSpyObj('UtilService', [
'getLoadingModal',
'transactionStatus',
'transactionStatusDescription',
// uncomment getClearFlag
'getClearFlag',
'setClearFlag',
]);
....
fixture = TestBed.createComponent(ContactsPageComponent);
component = fixture.componentInstance;
component.clearFlag = false;
// return whatever you would like here
utilServiceSpy.getClearFlag.and.returnValue(of(true));
// the first fixture.detectChanges will run ngOnInit
fixture.detectChanges();
expect(component.clearFlag).toBeTrue();
The rest looks good to me.其余的我觉得不错。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.