Примеры тестирования компонент¶

Компонент с вызовом асинхронного метода¶

Практически в каждом приложении имеются компоненты, которые зависимы от сервисов, которые хранят асинхронные методы, инициирующие HTTP-запросы к удаленному серверу и возвращающие определенные данные.

Поскольку основное назначение unit-тестов проверка не работоспособности API, а результата преобразования и (или) отображения полученных данных, то вызовы этих методов и их данных эмулируются через константы или Spy объекты.

info-message.component.ts

@Component({
    selector: 'info-message',
    template: `
        <h1>Attention!</h1>

        <p>{{ appService.message }}</p>
    `,
})
export class InfoMessageComponent {
    constructor(public appService: AppService) {}
}

info-message.component.spec.ts

describe('InfoMessageComponent', () => {
    let fixture: ComponentFixture<InfoMessageComponent>;

    beforeEach(() => {
        const appServiceStub = {
            message: 'Out of service',
        };

        TestBed.configureTestingModule({
            declarations: [InfoMessageComponent],
            providers: [
                {
                    provide: AppService,
                    useValue: appServiceStub,
                },
            ],
        });

        fixture = TestBed.createComponent(
            InfoMessageComponent
        );
    });

    it('should get message from AppService stub', () => {
        fixture.detectChanges();
        const infoMessageEl: HTMLElement =
            fixture.debugElement.nativeElement;
        const p = infoMessageEl.querySelector('p');
        expect(p.textContent).toContain('Out of service');
    });
});

Не используйте реальные сервисы в тестах компонентов. Их внедрение может оказаться крайне сложным, или вообще невозможным, поскольку в сервисах могут быть проверки, которые пройдут только в реально работающем приложении.

В приведенном примере Angular тестирования константа appService предоставляет все необходимые данные и методы для их преобразования подобно тому, как это делает реальный сервис.

Для эмуляции асинхронных методов сервисов лучше подойдут Spy объекты.

app.service.ts

@Injectable({ providedIn: 'root' })
export class AppService {
    constructor(private http: HttpClient) {}

    getData(): Observable<any> {
        return this.http.get('/api/data');
    }
}

app.service.spec.ts

describe('InfoMessageComponent', () => {
    let fixture: ComponentFixture<InfoMessageComponent>;
    let appService;

    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [InfoMessageComponent],
            providers: [AppService],
        });

        fixture = TestBed.createComponent(
            InfoMessageComponent
        );
        appService = jasmine.createSpyObj('AppService', {
            getData: 'Out of service',
        });
    });

    it('should get message from AppService getData()', () => {
        const comp = fixture.componentInstance;
        comp.message = appService.getData();
        expect(comp.message).toBe('Out of service');
    });
});

Объект Spy позволяет эмулировать обращение к асинхронному методу (название). Но сам тест выполняется синхронно, внутри него не выполняется никаких асинхронных действий.

При использовании в тестах Angular компонентов сервисов следует помнить, что Angular имеет иерархическое построение injector-ов. Так, если сервис был определен на уровне компонента, то при тестировании он должен быть взят не из корневого injector-а, а из injector-а самого компонента.

appService = fixture.debugElement.injector.get(AppService);

Но если сервис определен именно в модуле, т. е. находится в корневом injector-е, то можно использовать более простой в восприятии способ получения сервиса с использованием TestBed.get().

appService = TestBed.get(AppService);

Для асинхронности теста используйте функцию fakeAsync() библиотеки @angular/core/testing.

describe('InfoMessageComponent', () => {
    let fixture: ComponentFixture<InfoMessageComponent>;
    let appService;

    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [InfoMessageComponent],
            providers: [AppService],
        });

        fixture = TestBed.createComponent(
            InfoMessageComponent
        );
        appService = jasmine.createSpyObj('AppService', {
            getData: 'Out of service',
        });
    });

    it('should get message from AppService getData()', fakeAsync(() => {
        const comp = fixture.componentInstance;

        setTimeout(
            () => (comp.message = appService.getData()),
            180
        );

        tick(180);

        expect(comp.message).toBe('Out of service');
    }));
});

Важным здесь является функция tick(), без которой использование fakeAsync() было бы бессмысленным. В качестве аргумента она принимает количество миллисекунд, на которое выполнение теста приостановиться. Так, в примере дальнейшие операции в тесте зависимы от вызова асинхронного метода (название), который выполняется за 180 миллисекунд.

Но данный подход не подойдет, если вы не знаете точное время исполнения метода. Самый простой пример — обращение к удаленному API, где время исполнения зависит от множества неконтролируемых факторов: стабильность соединения, пропускная способность канала, нагрузка на сервер и т. д. Здесь необходимо использовать функцию async().

info-message.component.ts

constructor(public appService: AppService){}

message: string = '';

ngOnInit(){
    this.appService.getData().subscribe(message => this.message = message);
}

info-message.component.spec.ts

describe('InfoMessageComponent', () => {
    let fixture: ComponentFixture<InfoMessageComponent>;

    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [InfoMessageComponent],
            providers: [AppService],
        });

        fixture = TestBed.createComponent(
            InfoMessageComponent
        );
    });

    it('should get message from AppService getData()', async(() => {
        const comp = fixture.componentInstance;
        fixture.detectChanges(); //Вызов ngOnInit()

        fixture.whenStable().then(() => {
            expect(comp.message).toBe('Out of service');
        });
    }));
});

async() запускает тест в специальной среде исполнения. Но главное здесь — метод whenSable(), возвращающий объект Promise, который выполнится после того, как очередь задач JavaScript станет пустой, т. е. будут исполнены все асинхронные и синхронные действия. Здесь отпадает необходимость в знании точного времени исполнения.

Взаимодействие компонентов¶

Когда вы передаете данные из одного компонента в другой через @Output() свойство, вам понадобится в тесте получить доступ к двум компонентам одновременно. Пример тестирования для такого случая.

parent.component.ts

@Component({
    selector: 'parent-component',
    template: `
        <child-component
            (message)="setMessage($event)"
        ></child-component>
    `,
})
export class ParentComponent {
    message: string = '';

    constructor() {}

    setMessage(text): void {
        this.message = text;
    }
}

child.component.ts

@Component({
    selector: 'child-component',
    template: `
        <div class="child">
            <button (click)="sendMessage()">
                Send message
            </button>
        </div>
    `,
})
export class ChildComponent {
    @Output() message: EventEmitter<any> = new EventEmitter<
        any
    >();

    constructor() {}

    sendMessage(): void {
        this.message.emit('Child message');
    }
}

parent.component.spec.ts

describe('ParentComponent', () => {
    let fixture: ComponentFixture<ParentComponent>;
    let parentComp: ParentComponent;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [ParentComponent, ChildComponent],
        })
            .compileComponents()
            .then(() => {
                fixture = TestBed.createComponent(
                    ParentComponent
                );
                parentComp = fixture.componentInstance;
            });
    }));

    it('should get message from ChildComponent', () => {
        const childEl: HTMLElement = fixture.debugElement.nativeElement.query(
            '.child'
        );
        childEl.click();

        expect(parentComp.message).toBe('Child message');
    });
});

Основное внимание здесь нужно сосредоточить на блоке beforeEach(). При конфигурации модуля TestingModule в части providers необходимо указать все компоненты, к которым происходит обращение в процессе тестирования. При этом явно создается именно экземпляр класса того компонента, который является родительским ко всем другим.

Доступ к дочерним компонентам осуществляется с помощью селекторов, применяемых относительно свойства nativeElement объекта debugElement с использованием функции querySelector(). В качестве селектора следует использовать id-атрибуты или классы, которые однозначно идентифицируют нужный компонент. Метод detectChanges() вызывается для привязки переданных значений в HTML-шаблоне.

Задать значения свойств дочернего компонента без явного создания экземпляра класса не получится.

Организация кода¶

Даже при тестировании небольшого компонента часто приходится производить много манипуляций с его свойствами или осуществлять выборку HTML-элементов по селекторам в пределах шаблона.

Поэтому для упрощения Angular тестирования и концентрации в одном месте методов, реализующих наиболее часто используемый функционал, общепринято создавать вспомогательный класс Page.

page.class.ts

class Page {
    get links() {
        return this.queryAll<HTMLElement>('a');
    }

    get inputs() {
        return this.query<HTMLInputElement>('input');
    }

    fixture: ComponentFixture<TestComponent>;

    constructor(fixture: ComponentFixture<TestComponent>) {
        this.fixture = fixture.componentInstance;
    }

    private query<T>(selector: string): T {
        return this.fixture.nativeElement.querySelector(
            selector
        );
    }

    private queryAll<T>(selector: string): T[] {
        return this.fixture.nativeElement.querySelectorAll(
            selector
        );
    }
}

При написании сценариев тестирования экземпляр класса Page создается в блоке beforeEach().

import { Page } from './page.ts';

beforeEach(async(() => {
    TestBed.configureTestingModule({
        declarations: [TestComponent],
    })
        .compileComponents()
        .then(() => {
            fixture = TestBed.createComponent(
                TestComponent
            );
            page = new Page(fixture);
        });
}));

Примеры тестирования компонент¶

Компонент с вызовом асинхронного метода¶

Взаимодействие компонентов¶

Организация кода¶

Комментарии