Angular Academy · Lekcja

TestBed i elementy testowe komponentów

Konfigurować i tworzyć komponenty w testach

TestBed i elementy testowe komponentów to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Angular Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Angular Academy zawiera 4 lekcji w sumie.

Dlaczego istnieje TestBed

Komponenty Angulara zależą od mechanizmów frameworka: wstrzykiwania zależności, wykrywania zmian i kompilatora szablonów. Aby testować je w izolacji, potrzebne jest niewielkie środowisko Angulara. TestBed to podstawowe narzędzie Angulara do testowania, które tworzy takie środowisko dla każdego testu.

Konfiguruje tymczasowy NgModule, kompiluje komponent i udostępnia uchwyt umożliwiający interakcję z nim.

configureTestingModule

TestBed.configureTestingModule() deklaruje elementy potrzebne w teście: testowany komponent, jego dostawców oraz wszelkie importy. W przypadku komponentów standalone należy umieścić sam komponent w imports.

import { TestBed } from '@angular/core/testing';
import { CounterComponent } from './counter.component';

beforeEach(() => {
  TestBed.configureTestingModule({
    imports: [CounterComponent],
  });
});

Tworzenie elementu fixture komponentu

TestBed.createComponent(CounterComponent) zwraca obiekt ComponentFixture. Fixture jest pilotem zdalnego sterowania: opakowuje instancję komponentu, jego natywny element DOM oraz mechanizm wykrywania zmian.

import { ComponentFixture, TestBed } from '@angular/core/testing';

let fixture: ComponentFixture<CounterComponent>;

beforeEach(() => {
  fixture = TestBed.createComponent(CounterComponent);
});

Uzyskiwanie dostępu do instancji komponentu

fixture.componentInstance to rzeczywista instancja klasy. Można bezpośrednio wywoływać jej metody i odczytywać właściwości, tak jak w zwykłym TypeScript.

it('creates the component', () => {
  const fixture = TestBed.createComponent(CounterComponent);
  const component = fixture.componentInstance;
  expect(component).toBeTruthy();
  expect(component.count).toBe(0);
});

detectChanges uruchamia renderowanie

Nowo utworzony fixture nie został jeszcze wyrenderowany. Należy wywołać fixture.detectChanges(), aby uruchomić wykrywanie zmian i metodę ngOnInit, wiążąc dane z DOM-em.

it('renders initial value', () => {
  const fixture = TestBed.createComponent(CounterComponent);
  fixture.detectChanges(); // now bindings are applied
  const el = fixture.nativeElement as HTMLElement;
  expect(el.textContent).toContain('0');
});

nativeElement a debugElement

fixture.nativeElement to surowy węzeł DOM (element HTMLElement). fixture.debugElement to bogatszy wrapper Angulara, który pozwala wyszukiwać elementy według dyrektywy, odczytywać wstrzyknięte usługi i analizować wiązania.

const native = fixture.nativeElement;       // HTMLElement
const debug = fixture.debugElement;         // DebugElement
console.log(debug.componentInstance === fixture.componentInstance); // true

Dostawcy w module testowym

Jeśli komponent wstrzykuje usługi, należy dostarczyć je za pomocą providers. Można użyć rzeczywistych usług albo ich testowych zamienników. W tym przypadku w prostym przykładzie dostarczamy rzeczywistą usługę.

TestBed.configureTestingModule({
  imports: [CounterComponent],
  providers: [
    { provide: LoggerService, useValue: { log: () => {} } },
  ],
});

compileComponents dla zewnętrznych szablonów

W przypadku korzystania z nietreściowych wartości templateUrl/styleUrls bez konfiguracji testów Angular CLI szablony muszą być kompilowane asynchronicznie. Należy wywołać await TestBed.compileComponents(). W Angular CLI zwykle odbywa się to automatycznie.

beforeEach(async () => {
  await TestBed.configureTestingModule({
    imports: [ProfileComponent],
  }).compileComponents();
});

Kompletny minimalny test

Wszystko razem: skonfiguruj, utwórz, wykryj zmiany i sprawdź wynik. To standardowy schemat niemal każdego testu komponentu Angulara.

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

  beforeEach(() => {
    TestBed.configureTestingModule({ imports: [CounterComponent] });
    fixture = TestBed.createComponent(CounterComponent);
    fixture.detectChanges();
  });

  it('starts at zero', () => {
    expect(fixture.componentInstance.count).toBe(0);
  });
});

TestBed.inject dla usług

Aby pobrać skonfigurowanego dostawcę, należy użyć TestBed.inject(Token). Jest to współczesny zamiennik przestarzałego TestBed.get().

const logger = TestBed.inject(LoggerService);
expect(logger).toBeDefined();

Resetowanie między testami

TestBed automatycznie resetuje swój moduł przed każdym testem, dzięki czemu dostawcy i stan komponentu nie przenikają między testami. Dlatego konfigurację należy umieszczać wewnątrz beforeEach, a nie wykonywać jej jednorazowo globalnie.

Szybkie sprawdzenie

Sprawdź, co dzieje się bezpośrednio po createComponent.

Podsumowanie

Poznano podstawy testowania: TestBed.configureTestingModule() tworzy środowisko, createComponent() zwraca ComponentFixture, a detectChanges() renderuje komponent. Należy używać componentInstance do pracy z klasą, nativeElement/debugElement do pracy z DOM-em oraz TestBed.inject() do pobierania usług.

Często zadawane pytania

Czy lekcja „TestBed i elementy testowe komponentów” jest bezpłatna?

Tak — pełny tekst „TestBed i elementy testowe komponentów” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Angular Academy, przejdź na CoddyKit PRO. Kurs Angular Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „TestBed i elementy testowe komponentów”?

Konfigurować i tworzyć komponenty w testach Ćwiczysz Angular Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Angular Academy?

Nie wymagamy żadnego doświadczenia. Angular Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „TestBed i elementy testowe komponentów”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Angular Academy?

Tak. Każda lekcja Angular Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

TestBed i elementy testowe komponentów
Testowanie inputów, outputów i DOM
Mockowanie serwisów i zależności
Testowanie signals i kodu asynchronicznego

← Powrót do Angular Academy