4 совета по написанию модульных тестов Angular, зайдите и посмотрите!

Идеи тестирования:

• 1. Если модульное тестирование возможно, попробуйте отдать приоритет модульному тестированию.
• 2. Если модульное тестирование невозможно, тестируйте через слой упаковки. Например, инкапсулируя тест в компонент, но он слабее. интеграционное тестирование
• 3. Интеграционное тестирование
• 4. E2E-тестирование

Сложность теста также постепенно увеличивается, и тем больше времени он занимает. Если вы хотите упростить тестирование, то во время разработки вам следует сознательно прояснять свои идеи и писать простой и эффективный код~.

Стек технологий тестирования, используемый в этой статье: Angular12 + Jasmine. Хотя синтаксис других технологий тестирования отличается, общая идея схожа. [Рекомендация по соответствующему учебному пособию: «Угловое учебное пособие»]

Советы: определение тестового примера Jasmine, какие методы вы можете найти здесь, щелкните компонент в моем

модульном тесте

, по умолчанию используется экземпляр тестируемого объекта, созданный Angular, используя следующий синтаксис

beforeEach(() => { 
  приспособление = TestBed.createComponent(BannerComponent); 
  компонент = приспособление.comComponentInstance; 
  fixment.detectChanges(); 
});

Проверка функции

1. Вызов функции без возвращаемого значения

function test(index:number,fn:Function){
 если (фн) {
     ФН (индекс);
 }
}

Как проверить?

Пример счетчика: Непосредственное тестирование возвращаемого значения undefined

const res = компонент.test(1,() => {}));
  ожидаем(res).tobeUndefined();

Рекомендуемая практика:

# Используйте Jasmine
 it('при вызове теста должны быть получены правильные данные',() =>{
     константный параметр = {
       фн: () => {}
    }
   шпионон(параметр,'fn')
   компонент.тест(1,param.fn);
   ожидать(param.fn).toHaveBeenCalled();
 })

Инструкция по структуре HostListener тестирует

инструкции по структуре. Часто используемые слова — скрытие, отображение и циклы for для отображения

кода

 @Directive({ селектор: '[ImageURlError]' })
класс экспорта ImageUrlErrorDirective реализует OnChanges {
  конструктор (частный el: ElementRef) {}
  
  @HostListener('ошибка')
  публичная ошибка() { 
      this.el.nativeElement.style.display = 'нет';
  } 
}

Как проверить?

Идея теста:

• изображение не запускается до тех пор, пока не произойдет ошибка при загрузке изображения. Затем найдите способ вызвать ошибку.
• Команда обычно прикрепляется к элементу изображения компонента, просто используйте errorEvent в разделе dispath

#1. Добавьте пользовательский компонент и добавьте пользовательскую директиву @Component({.
  шаблон: `<div>
    <image src="https://xxx.ss.png" ImageURlError></image>
  </div>`
})
класс TestHostComponent {

}

#2. Создайте экземпляр представления пользовательского компонента и отправьте errorEvent.
beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
        декларации: [
            ТестХостКомпонент,
            ИзображениеURlError
        ]
    });
}));

beforeEach(() => { 
 приспособление = TestBed.createComponent(TestHostComponent); 
 компонент = приспособление.comComponentInstance; 
 fixment.detectChanges();
});
  
it('должны быть разрешены только числа', () => {
    const event = new ErrorEvent('error', {} как угодно);
    const image = fixment.debugElement.query(By.directive(ImageURlError));
    image.nativeElement.dispatchEvent(event); //Просто отправьте событие, и в это время будет выполнен метод error()});

Используйте модификаторы public, Private и protected

в angular, spec. .ts имеет доступ; но частные, защищенные модификации не допускаются;

постучите по доске

• , если вы планируете проводить модульное тестирование и тестировать каждый метод, тогда используйте общедоступный подход соответствующим образом --- Сложность *
• Если вы не планируете тестировать каждый метод, затем вы можете пройти Организацию данных, вызвать вход и передать

теста

. Запуск события щелчка может включать в себя прямой вызов js или имитацию мыши для запуска события щелчка.

#xx.comComponent.ts
@Компонент({
 selecotr: 'список-героев панели'
})
класс DashBoardHeroComponent {
    публичные карточки = [{
        нажмите: () => {
            .....
        }
    }]
}
#html
<dashboard-hero-list [cards]="cards" class="card">
</dashboard-hero-list>`

Как проверить?

Идея тестирования:

• протестируйте компонент напрямую, не используйте
• коллекцию объектов, содержащих события кликов, возвращаемые хостом, и вызывайте click один за другим, чтобы улучшить покрытие кода

(«при ​​вызове click должны быть получены правильные данные», () => {
    константные карты = компонент.карты;
    карты?.forEach(card => {
        если(карта.клик){
            card.click(новое событие('клик'));
        }
    });
    ожидать(карты?.длина).toBe(1);
});

Другие идеи для ссылок на клики:

Идея 1:

• используйте TestHostComponent, чтобы обернуть компонент, который необходимо протестировать
• , а затем используйте fixment.nativeElement.querySelector('.card'), чтобы найти элемент click, привязанный к компоненту
• ; триггер диспетчеризации, вот и все.

Идея 2:

• протестируйте компонент напрямую, без использования Host

• , а затем используйте fixment.nativeElement.querySelector('.card'), чтобы найти связанный элемент щелчка;

• используйте ignoreEventHandler('click');