Angular · Theory

Testing

Theory

37/43

Testing

Unit test a component with TestBed. Configure declarations/imports, create fixture, detectChanges, query the native element. Expect ‘Fail’ text when marks are 20.

HttpClientTestingModule (or provideHttpClientTesting) mocks HTTP. Don’t hit a real server in unit tests. Trap: only writing e2e and skipping TestBed.

Exam tip

TestBed fixture + one assertion on Fail.

Example

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

@Component({
  selector: "app-root",
  template: `
    <h1>{{ title }}</h1>
    <button (click)="toggle()">Toggle</button>
    <p *ngIf="open">Panel open</p>
  `,
})
export class AppComponent {
  title = "Angular practice";
  open = true;
  toggle() {
    this.open = !this.open;
  }
}

Testing: toggle open. Say whether the panel is on screen after one click.

Short notes

DefTestBed + detectChanges + expect text.
RuleMock HTTP. Don’t hit live APIs.
ExStudentCard shows Fail.

Angular · Theory

Testing

← All stacks

Theory

37/43

Testing

Unit test a component with TestBed. Configure declarations/imports, create fixture, detectChanges, query the native element. Expect ‘Fail’ text when marks are 20.

HttpClientTestingModule (or provideHttpClientTesting) mocks HTTP. Don’t hit a real server in unit tests. Trap: only writing e2e and skipping TestBed.

Exam tip

TestBed fixture + one assertion on Fail.

Example

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

@Component({
  selector: "app-root",
  template: `
    <h1>{{ title }}</h1>
    <button (click)="toggle()">Toggle</button>
    <p *ngIf="open">Panel open</p>
  `,
})
export class AppComponent {
  title = "Angular practice";
  open = true;
  toggle() {
    this.open = !this.open;
  }
}

Testing: toggle open. Say whether the panel is on screen after one click.

Short notes

DefTestBed + detectChanges + expect text.
RuleMock HTTP. Don’t hit live APIs.
ExStudentCard shows Fail.

Testing

Example

Short notes

Questions

Testing

Example

Short notes

Questions