I want to confirm the value of description is set inside my angular components form. Using a Jest unit test.
I've used an RXJS pipe on my videoMeta$ observable (inside my angular component) so that each time the value is passed down the pipe my form data is updated.
ngOnInit() {
this.videoMeta$.pipe(map(videoMeta => {
this.videoMetaForm = this.fb.group({
title: [videoMeta.title, [Validators.required, Validators.maxLength(100)]],
description: [''],
privacy: ['', [Validators.required]],
category: ['', [Validators.required]],
tags: [videoMeta.tags.join(', '), Validators.maxLength(200)],
});
}), takeUntil(this.destroy$)).subscribe();
}
The jest unit test is setup like so
describe('GIVEN video meta THEN description value', () => {
// Given
beforeEach(() => {
component.videoMeta = getMockSingleVideoMeta();
});
// When
beforeEach(() => {
fixture.detectChanges();
});
// Then
it('description field has value', async () => {
expect(component.videoMetaForm.controls['description'].value).toEqual('In hac habitasse platea dictumst. Etiam faucibus cursus urna. Ut tellus.');
});
});
I can get my unit test to work as expected by simply delaying the test for x amount of time so the observable has a chance to resolve.
it('description field has value', async () => {
setTimeout(() => {
expect(component.videoMetaForm.controls['description'].value).toEqual('In hac habitasse platea dictumst. Etiam faucibus cursus urna. Ut tellus.');
}, 3000);
});
This is clearly a hacky solution. Is there a best practice for testing values setup in ngOninit that take time to resolve, without needing to change my component implementation?
Aucun commentaire:
Enregistrer un commentaire