vendredi 28 juin 2019

Unit testing angular with RXJS observable inside NgOninit

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