Angular భాగాలు మరియు సేవలను ఎలా పరీక్షిస్తారు?

Question

Accepted Answer

Angular పూర్తి పరీక్షా సెటప్‌తో వస్తుంది (డిఫాల్ట్‌గా Jasmine + Karma, అయితే చాలా టీమ్‌లు Jest ఉపయోగిస్తాయి). ఇది పరీక్షా మాడ్యూల్‌ను కాన్ఫిగర్ చేయడానికి మరియు భాగాలు/సేవలను వాటి డిపెండెన్సీలతో ఇన్‌స్టాంటియేట్ చేయడానికి **`TestBed`** ను అందిస్తుంది — DI ను ఉపయోగించి mocks ను ఇంజెక్ట్ చేయండి.

## సేవ పరీక్షించడం (సరళమైనది)

```ts
describe("UserService", () => {
  let service: UserService;
  let httpMock: HttpTestingController;

beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule], // mock HttpClient
      providers: [UserService],
    });
    service = TestBed.inject(UserService);
    httpMock = TestBed.inject(HttpTestingController);
  });

it("fetches users", () => {
    service.getUsers().subscribe(users => expect(users.length).toBe(2));
    const req = httpMock.expectOne("/api/users"); // assert the request was made
    req.flush([{ id: 1 }, { id: 2 }]);             // provide a fake response
  });
});
```

`HttpClientTestingModule` + `HttpTestingController` మీరు అభ్యర్థనలను నిర్ధారించుకోవచ్చు మరియు నిజమైన సర్వర్‌ను కొట్టకుండా నకిలీ ప్రతిస్పందనలను అందించవచ్చు.

## భాగం పరీక్షించడం

```ts
describe("CounterComponent", () => {
  let fixture: ComponentFixture<CounterComponent>;
  let component: CounterComponent;

beforeEach(() => {
    TestBed.configureTestingModule({ imports: [CounterComponent] }); // standalone
    fixture = TestBed.createComponent(CounterComponent);
    component = fixture.componentInstance;
    fixture.detectChanges(); // trigger initial change detection
  });

it("increments on click", () => {
    const button = fixture.nativeElement.querySelector("button");
    button.click();
    fixture.detectChanges();                     // update the view
    expect(component.count).toBe(1);
    expect(button.textContent).toContain("1");   // assert the rendered DOM
  });
});
```

`ComponentFixture` భాగం ఇన్‌స్టాన్స్‌కు **మరియు** దాని రెండర్ చేయబడిన DOM కు ప్రවేశం ఇస్తుంది; ఇంటరాక్షన్‌ల తర్వాత మార్పు డిటెక్షన్‌ను నడుపుటకు `fixture.detectChanges()` ను కాల్ చేయాలి.

## DI ద్వారా డిపెండెన్సీలను మాక్ చేయడం

```ts
TestBed.configureTestingModule({
  providers: [{ provide: AuthService, useValue: mockAuthService }], // inject a fake
});
```

Angular యొక్క DI mocking ను సాధారణం చేస్తుంది — ఏదైనా డిపెండెన్సీ కోసం నకిలీ అమలును అందించండి.

## Async పరీక్ష

```ts
it("loads async", fakeAsync(() => {
  component.load();
  tick();                  // simulate passage of time / flush microtasks
  fixture.detectChanges();
  expect(component.data).toBeDefined();
}));
```

`fakeAsync`/`tick` (లేదా `waitForAsync`) async సమయాన్ని నిర్ధారణీయంగా నియంత్రిస్తాయి.

## పరీక్ష స్థాయిలు

```text
Unit:        services, pipes, isolated component logic (fast, most numerous)
Integration: component + template + child components via TestBed
E2E:         full user flows (Cypress, Playwright) — separate from unit tests
```

## ఎందుకు ముఖ్యమైనది

పరీక్ష Angular లో ప్రథమ-తరగతి ఆందోళన, మరియు దాని DI ఆర్కిటెక్చర్ దీనిని పరీక్షకు చాలా సరిపోతుంది — మీరు ఏదైనా డిపెండెన్సీ కోసం mocks ను ఇంజెక్ట్ చేస్తారు.

`TestBed` (కాన్ఫిగర్ + ఇంజెక్ట్), `ComponentFixture` (ఇన్‌స్టాన్స్ + DOM + `detectChanges`), HTTP కోసం `HttpClientTestingModule` మరియు async సహాయకులు (`fakeAsync`/`tick`) యొక్క జ్ఞానం నమ్మకమైన యూనిట్ మరియు ఇంటిగ్రేషన్ పరీక్షలను రాయడాన్ని కవర్ చేస్తుంది — Angular కోసం నిర్మించిన పెద్ద, దీర్ఘకాలిక ఎంటర్‌ప్రైజ్ అనువర్తనాలకు ఎవరికైనా సమర్థవంతమైన.