Angular கூறுகளையும் சேவைகளையும் எவ்வாறு சோதிக்கிறீர்கள்?

Question

Accepted Answer

Angular முழுமையான சோதனை அமைப்புடன் வருகிறது (முன்னிருப்பாக Jasmine + Karma, பல குழுக்கள் Jest ஐப் பயன்படுத்தினாலும்). இது சோதனை மডியூலைக் கட்டமைக்க மற்றும் சேவைகள்/கூறுகளை அவற்றின் சார்புகளுடன் உடனடியாக உருவாக்க **`TestBed`** வழங்குகிறது — mock-களை செலுத்த DI ஐ பயன்படுத்திக் கொள்ளுங்கள்.

## ஒரு சேவையை சோதிப்பது (எளிமையானது)

```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 மூலம் சார்புகளை mock செய்தல்

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

Angular இன் DI mockற்றக்கைக்கு trivial-ஐ உருவாக்குகிறது — எந்த சார்புக்கும் பொய்யான செயல்படுத்தலை வழங்கவும்.

## 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 ஆர்க்கிடெக்சர் இதை சோதனைக்கு மிகவும் பொருந்தக்கூடியதாக உருவாக்குகிறது — நீங்கள் எந்த சார்புக்கும் mock-களை செலுத்துகிறீர்கள்.

`TestBed` (கட்டமைப்பு + செலுத்துதல்), `ComponentFixture` (நிகழ்வு + DOM + `detectChanges`), HTTP க்கான `HttpClientTestingModule` மற்றும் async உதவிகள் (`fakeAsync`/`tick`) பற்றிய அறிவு நம்பகமான அலகு மற்றும் ஒருங்கிணைப்பு சோதனைகளை எழுதுவதை உள்ளடக்குகிறது — Angular கட்டப்பட்ட பெரிய, நீண்ட கால என்டারপ்রைஸ் பயன்பாடுகளுக்கு அপরிহார்যமாக உள்ளது.