आप Angular घटकों और सेवाओं का परीक्षण कैसे करते हैं?

Question

Accepted Answer

Angular एक पूर्ण परीक्षण सेटअप प्रदान करता है (डिफ़ॉल्ट रूप से Jasmine + Karma, हालांकि कई टीमें Jest का उपयोग करती हैं)। यह **`TestBed`** प्रदान करता है एक परीक्षण मॉड्यूल को कॉन्फ़िगर करने और उनकी निर्भरताओं के साथ घटकों/सेवाओं को तत्काल करने के लिए — नकली को इंजेक्ट करने के लिए DI का लाभ उठाते हुए।

## Testing a service (simplest)

```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` आपको अनुरोधों का दावा करने और एक वास्तविक सर्वर को मारे बिना नकली प्रतिक्रियाएं प्रदान करने देते हैं।

## Testing a component

```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()` को कॉल करना होगा।

## Mocking dependencies via DI

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

Angular का DI मजाकिया बनाता है — किसी भी निर्भरता के लिए एक नकली कार्यान्वयन प्रदान करें।

## Async testing

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

`fakeAsync`/`tick` (या `waitForAsync`) async समय को नियंत्रित करते हैं।

## Testing levels

```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 आर्किटेक्चर इसे विशेष रूप से परीक्षण योग्य बनाती है — आप किसी भी निर्भरता के लिए नकली को इंजेक्ट करते हैं।

`TestBed` (कॉन्फ़िगर + इंजेक्ट), `ComponentFixture` (उदाहरण + DOM + `detectChanges`), HTTP के लिए `HttpClientTestingModule`, और async सहायकों (`fakeAsync`/`tick`) को जानना विश्वसनीय यूनिट और एकीकरण परीक्षण लिखने को शामिल करता है — बड़ी, लंबे समय तक चलने वाली एंटरप्राइज़ एप्लिकेशन के लिए आवश्यक जिसके लिए Angular बनाया गया था।