Angular Academy · leksjon

TestBed og komponent-fixtures

Konfigurer og opprett komponenter i tester.

Leksjon 1 av 413 trinn

TestBed og komponent-fixtures er en gratis leksjon i Angular Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Angular Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Angular Academy inneholder totalt 4 leksjoner.

Hvorfor TestBed finnes

Angular-komponenter er avhengige av rammeverket: avhengighetsinjisering, endringsdeteksjon og mal- kompilatoren. For å teste dem isolert trenger De et lite Angular-miljø. TestBed er Angulars primære testverktøy og bygger dette miljøet for hver test.

Det konfigurerer en midlertidig NgModule, kompilerer komponenten og gir Dem et håndtak for å samhandle med den.

configureTestingModule

TestBed.configureTestingModule() deklarerer hva testen trenger: komponenten som testes, providerne og eventuelle importer. For frittstående komponenter plasserer De selve komponenten i imports.

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

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

Opprette en komponentfixture

TestBed.createComponent(CounterComponent) returnerer en ComponentFixture. Fixturen er fjernkontrollen Deres: Den pakker inn komponentinstansen, det opprinnelige DOM-elementet og mekanismen for endringsdeteksjon.

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

let fixture: ComponentFixture<CounterComponent>;

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

Få tilgang til komponentinstansen

fixture.componentInstance er den faktiske klasseinstansen. De kan kalle metodene og lese egenskapene direkte, akkurat som i vanlig TypeScript.

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

detectChanges utløser gjengivelse

En nyopprettet fixture er IKKE gjengitt ennå. Kall fixture.detectChanges() for å kjøre endringsdeteksjon og komponentens ngOnInit, slik at data bindes til DOM-en.

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 kontra debugElement

fixture.nativeElement er den rå DOM-noden (et HTMLElement). fixture.debugElement er Angulars mer omfattende omslag, som lar Dem spørre etter direktiver, lese injiserte tjenester og inspisere bindinger.

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

Providerne i testmodulen

Hvis komponenten injiserer tjenester, må De angi dem via providers. De kan bruke virkelige tjenester eller testdobler. Her angir vi en virkelig tjeneste for et enkelt tilfelle.

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

compileComponents for eksterne maler

Når De bruker ikke-innebygde templateUrl/styleUrls uten Angular CLI-testoppsett, må malene kompileres asynkront. Kall await TestBed.compileComponents(). Med CLI er dette vanligvis automatisk.

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

En komplett minimal test

Slik settes alt sammen: konfigurer, opprett, oppdag, bekreft. Dette er den kanoniske formen for nesten alle Angular-komponenttester.

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 for tjenester

Bruk TestBed.inject(Token) for å hente en konfigurert provider. Dette er den moderne erstatningen for den foreldede TestBed.get().

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

Tilbakestille mellom tester

TestBed tilbakestiller automatisk modulen før hver test, slik at providere og komponenttilstand ikke lekker mellom testene. Derfor konfigurerer De i beforeEach i stedet for én gang globalt.

Hurtigsjekk

Test hva som skjer rett etter createComponent.

Besvar den i den interaktive leksjonen

Oppsummering

De lærte det grunnleggende om testing: TestBed.configureTestingModule() bygger miljøet, createComponent() returnerer en ComponentFixture, og detectChanges() gjengir den. Bruk componentInstance for klassen, nativeElement/debugElement for DOM-en og TestBed.inject() for tjenester.

Gratis å komme i gang

Lær deg HTML med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 38
Leksjoner: 144

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «TestBed og komponent-fixtures» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Angular Academy, inkludert «TestBed og komponent-fixtures», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Angular Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «TestBed og komponent-fixtures»?

Konfigurer og opprett komponenter i tester. Du øver på Angular Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Angular Academy?

Ingen tidligere erfaring er nødvendig. Angular Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.

Hvor lang tid tar leksjonen «TestBed og komponent-fixtures»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Angular Academy-leksjonen?

Ja. Alle Angular Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til Angular Academy