Что нужно тестировать, когда речь идет о компонентах Angular, не выходя за борт? - PullRequest
Новая
       21

Что нужно тестировать, когда речь идет о компонентах Angular, не выходя за борт?

0 голосов
/ 27 октября 2019

Я занимаюсь тестированием в Angular, меня особенно интересует понимание границ тестирования компонентов Angular.

Угловые компоненты - это комбинация кода в классе компонентов и представления в шаблоне. Также есть стилизация с помощью CSS. Я не уверен, как далеко зайти при проверке вещей. Я использую подход TDD, и мне интересно, обычно ли проверяют, что h1 содержит определенный заголовок или что label для поля ввода имеет определенный текст. Проверяем ли мы, что оно выделено жирным шрифтом, а не курсивом и имеет серый фон ??

Элементы, связанные с дизайном (определенные стили CSS, расположение и упорядочение элементов, регистр, шрифты и т. Д.)может со временем сильно измениться, и я лично редко уверен в «спецификации» этих предварительных версий до того, как получу визуальную обратную связь , увидев UI , методом проб и ошибок.

Кроме того, некоторые тесты кажутся излишними, как проверка того, что компонент создан, а не null

. Возьмем, к примеру, следующий код: 

it('should set instance correctly', () => {    
expect(contactsComponent).notBeNull();    });

и это: 

it('should have contacts if there is data', () => {
    const newContact: Contact = {
        id: 1,
        name: 'Jason Pipemaker'
    };
    const contactsList: Array<Contact> = [newContact];
    contactsComponent.contacts = contactsList;

    expect(contactsComponent.contacts.length).toBe(1);
});

и это 

it('should display name in uppercase', () => {
    const expectedPipedName = expectedHero.name.toUpperCase();
    expect(el.textContent).toContain(expectedPipedName);
});

и 

it('should render title in a h1 tag', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges(); 8
    const compiled = fixture.debugElement.nativeElement; 9
    expect(compiled.querySelector('h1').textContent)
        .toContain('Welcome to app!'); 10
}));

Может ли кто-нибудь со стажем пролить свет на эти аспекты TDD с помощью Angular? Спасибо

1 Ответ

0 голосов
/ 27 октября 2019

Для классов компонентов я стремлюсь охватить каждую Typescript функцию и путь (репортер покрытия Кармы)

Тестовое покрытие не может анализировать HTML, но мы тестируем логику template : ngIf, ngFor, ngSwitch, асинхронные привязки труб, условия, например, &&, ?:, ||

По моему опыту, статический CSS редко тестируется модульно, но вы бы проверили, применяются ли стили / классы CSS, если они обусловленына состояние компонента. См. Угловые тесты материала для значка материала, например: https://github.com/angular/components/blob/master/src/material/badge/badge.spec.ts

...