Блог

Главная - Вопросы по программированию - .Покрытие кода модульного тестирования nativeElement — Jasmine

.Покрытие кода модульного тестирования nativeElement — Jasmine

javascript #angular #unit-testing #jasmine #karma-jasmine

#javascript #угловой #модульное тестирование #jasmine #карма-жасмин

Вопрос:

Я пытаюсь выполнить модульное тестирование метода в моем приложении Angular. Я написал тест, который проходит и проверяет два элемента — глобальная переменная возвращает true и вызывается метод. Я не уверен, что еще я мог бы протестировать здесь, но строка все еще не покрыта.

StackBlitz

файл .ts

   clickout(event) {
    this.isActive = this.eRef.nativeElement.contains(event.target); //not covered!
  }

.html-файл

 <div (document:click)="clickout($event)" id="clickout" class="actions__container">
click me
</div>

файл .spec

 it('should call func and return true', fakeAsync(() => {
    component.isActive = true;
    fixture.detectChanges();
    spyOn(component, 'clickout');
    let btn = fixture.debugElement.nativeElement.querySelector('#clickout');
    btn.click();
    tick();
    fixture.detectChanges();
    expect(component.clickout).toHaveBeenCalled();
    expect(component.isActive).toBe(true);
}));

Как я могу усилить этот тест? Я предполагаю, что это потому, что я не хочу видеть .nativeElement , содержит ли что-то? Любая помощь приветствуется. Я создал этот пример StackBlitz с установленным jasmine.

Ответ №1:

Классная ссылка на StackBlitz, она может пригодиться.

Причина, по которой он не покрывается, заключается в том, что spyOn(component, 'clickout') избавляется от деталей реализации clickout . Как только мы отслеживаем метод, мы говорим stub this method (не вызывайте его, когда он вызывается), но мы получаем доступ к тому, был ли он вызван, с какими аргументами он был вызван и сколько раз он был вызван.

Чтобы получить лучшее из обоих миров, вы должны использовать a, чтобы не потерять детали реализации. .and.callThrough() spyOn 

 it('should call func and return true', fakeAsync(() => {
    component.isActive = true;
    fixture.detectChanges();
    // spy on the method and call its actual implementation when it is called
    spyOn(component, 'clickout').and.callThrough();
    let btn = fixture.debugElement.nativeElement.querySelector('#clickout');
    btn.click();
    tick();
    fixture.detectChanges();
    expect(component.clickout).toHaveBeenCalled();
    expect(component.isActive).toBe(true);
}));

С .and.callThrough() помощью, строка, которая не покрыта, теперь должна быть покрыта. При этом это может привести к ошибке nativeElement или contains undefined .

Метки: