Тестирование наблюдаемых зависимых шаблонов внутри ngOnInit - PullRequest
Новая
       7

Тестирование наблюдаемых зависимых шаблонов внутри ngOnInit

0 голосов
/ 31 октября 2018

Я продолжаю сталкиваться с этим сценарием тестирования, где мои ngOnInit настраивают подписки, которые что-то инициируют. Но тестирует ошибку Failed: You provided 'undefined' where a stream was expected

ngOnInit() {
    this.form = this.fb.group({
        search: this.fb.control(null),
        location: this.fb.control(null)
    });

    // test that valueChanges works
    this.form.valueChanges.pipe(
        debounceTime(500),
        switchMap((form) => {
            // test that url params are set
            this.queryParams['search'] = form.search;
            return this.updateUrl('/search');
        })
    ).subscribe((ret) => { 
        // how to test this: expect(updateUrl).toHaveBeenCalled();
        updateUrl();
    });
}

public updateUrl(url: string) {
    return this.router.navigate([url], { queryParams: this.queryParams, queryParamsHandling: 'merge' });
}

Итак, как мы можем это проверить

  • form.valueСмены работ
  • Параметры URL были установлены
  • updateUrl (); вызывается каждый раз
  • что навигация была вызвана с '/ search'

Я пробовал много вещей, и нет смысла шпионить за valueChanges, потому что большая часть кода, который я хочу протестировать, находится внутри карты переключателей. но вот что у меня сейчас: 

const router = {
    navigate: jasmine.createSpy('navigate')
};

providers: [
    { provide: Router, useValue: router }
]

it('update URL when the search input get a value', async(() => {
    updateUrl = spyOn(component, 'updateUrl').and.callThrough();
    fixture.detectChanges();
    const input = fixture.nativeElement.querySelector('[formcontrolname=search]');
    input.value = testTerms.search;
    input.dispatchEvent(new Event('input'));
    fixture.detectChanges();
    fixture.whenStable().then(() => {
        expect(updateUrl).toHaveBeenCalled();
        expect(router.navigate).toHaveBeenCalledWith(['/search']);
    });
}));
...