Что такое тестовые оболочки компонентов?
Тестовые оболочки компонентов (Component Test Harnesses) — это специальный инструмент, который облегчает процессы тестирования компонентов в Angular. Они предоставляют унифицированный API для взаимодействия с компонентами, делая тестирование легче, более читаемым и поддерживаемым.
Почему используют тестовые оболочки?
- Упрощение тестирования: Тестовые оболочки скрывают сложность взаимодействия с компонентами и DOM, предоставляя простой и чистый интерфейс.
- Повышение читаемости кода тестов: Тесты с использованием оболочек выглядят чище и проще для понимания, поскольку они абстрагируют детали реализации.
- Устойчивость к изменениям: Если изменится реализация компонента, тестовые оболочки позволяют минимизировать изменения в тестах.
Как создавать тестовые оболочки?
Для создания тестовой оболочки необходимо создать класс, который будет содержать методы для взаимодействия с компонентом. Например, рассмотрим компонент MyButton и его оболочку.
Пример компонента
// my-button.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-my-button',
template: `<button (click)="handleClick()">{{ label }}</button>`,
})
export class MyButtonComponent {
label = 'Click me';
handleClick() {
console.log('Button clicked!');
}
}
Пример тестовой оболочки
// my-button.harness.ts
import { ComponentHarness } from '@angular/cdk/testing';
import { MyButtonComponent } from './my-button.component';
export class MyButtonHarness extends ComponentHarness {
static hostSelector = 'app-my-button';
async getLabelText() {
return (await this.locatorFor('button')()).text();
}
async clickButton() {
return (await this.locatorFor('button')()).click();
}
}
Пример использования оболочки в тесте
// my-button.component.spec.ts
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MyButtonComponent } from './my-button.component';
import { MyButtonHarness } from './my-button.harness';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
describe('MyButtonComponent', () => {
let fixture: ComponentFixture<MyButtonComponent>;
let harness: MyButtonHarness;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [MyButtonComponent],
}).compileComponents();
fixture = TestBed.createComponent(MyButtonComponent);
const loader = TestbedHarnessEnvironment.loader(fixture);
harness = await loader.getHarness(MyButtonHarness);
});
it('должен отображать текст кнопки', async () => {
expect(await harness.getLabelText()).toBe('Click me');
});
it('должен вызывать обработчик клика', async () => {
const consoleSpy = spyOn(console, 'log');
await harness.clickButton();
expect(consoleSpy).toHaveBeenCalledWith('Button clicked!');
});
});
Заключение
Тестовые оболочки компонентов — это мощный инструмент для упрощения тестирования компонентов Angular. Они помогают разработчикам сосредоточиться на логике тестов, а не на реализациях компонентов. Применение оболочек делает тесты более эффективными и понятными.