Як в Angular протестувати функцію з forwardRef

Angular це популярний JavaScript фреймворк, який використовують багато веб-розробників, поряд з React і Vue. При створенні додатків на ньому (як і будь-якому іншому) дуже важливо покривати код юніт тестами. У багатьох командах розробників є стандарт за мінімальним відсотком покриття коду тестами.

Розглянемо гіпотетичну ситуацію, коли може знадобитися покрити тестами функцію-аргумент для forwardRef при імплементації інтерфейсу ControlValueAccessor. Припустимо, що ви фріланс веб-розробник, пишете на Angular і потрапили на проект в компанію або команду, де є дуже жорсткий мінімальний стандарт з тестів у 90%..

Ви маєте дуже простий компонент, який імплементує інтерфейс ControlValueAccessor. У декораторі компонента має бути приблизно такий рядок:

providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NameOfTheComponent) }]

Клас цього компонента настільки простий, що містить лише кілька методів. Іншими словами, ви не зможете досягти 90% покриття за функціями якщо не покриєте ще ту, що передається в forwardRef.

Щоб покриття по функціях охоплював і forwardRef, потрібно лише інжектувати провайдер NG_VALUE_ACCESSOR у ваші тести. Це можна зробити, наприклад:

beforeEach(() => {
    fixture = TestBed.createComponent(NameOfTheComponent);
    component = fixture.componentInstance;
    fixture.debugElement.injector.get(NG_VALUE_ACCESSOR);
    fixture.detectChanges();
});

У цьому випадку code coverage за функціями в тестах відразу позеленіють, але слід зазначити, що такий код навряд чи щось тестує, його корисність виключно штучна, щоб допомогти вам формально подолати мінімальний поріг.