Что такое TestBed?

TestBed — это мощный инструмент, предоставляемый фреймворком Angular для тестирования компонентов, директив, сервисов и других частей вашего Angular-приложения. Он упрощает и стандартизирует процесс создания тестов, позволяя настроить ваши зависимости и изолировать код, который вы хотите протестировать.

Зачем нужен TestBed?

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

Как использовать TestBed

Давайте рассмотрим пример, чтобы понять, как пользоваться TestBed.

Простой компонент

Предположим, у нас есть простой компонент HelloComponent:

import {Component} from '@angular/core';

@Component({
    selector: 'app-hello',
    template: '<h1>{{title}}</h1>'
})
export class HelloComponent {
    title = 'Привет, мир!';
}

Создание тестов с использованием TestBed

Теперь создадим тест для этого компонента с использованием TestBed:

import {TestBed, ComponentFixture} from '@angular/core/testing';
import {HelloComponent} from './hello.component';

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

    beforeEach(async () => {
        await TestBed.configureTestingModule({
            declarations: [HelloComponent]
        })
            .compileComponents();
    });

    beforeEach(() => {
        fixture = TestBed.createComponent(HelloComponent);
        component = fixture.componentInstance;
        fixture.detectChanges(); // Изменения вручную, чтобы обновить шаблон
    });

    it('должен создать компонент', () => {
        expect(component).toBeTruthy();
    });

    it('должен иметь корректный заголовок', () => {
        expect(component.title).toEqual('Привет, мир!');
    });

    it('должен отображать заголовок в шаблоне', () => {
        const compiled = fixture.nativeElement as HTMLElement;
        expect(compiled.querySelector('h1')?.textContent).toContain('Привет, мир!');
    });
});

Пояснение кода

Заключение

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