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:
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:
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.