તમે 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` તમને requests ને নিশ્চિત કરવા અને વાસ્તવિક સર્વર પર હિટ કર્યા વિના નકલી પ્રતિક્રિયાઓ સરবરાહ કરવા દેય છે.

## 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 timing નિર્ણાયક રીતે નિયંત્રિત કરો.

## 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` (configure + inject), `ComponentFixture` (instance + DOM + `detectChanges`), HTTP માટે `HttpClientTestingModule`, અને async helpers (`fakeAsync`/`tick`) જાણવું વિશ્વસનીય એકમ અને એકીકરણ પરીક્ષણો લખવાને આવરણ આપે છે — મોટા, લાંબા સમય સુધી ચાલતી એન્ટરપ્રાઇઝ એપ્લિકેશનો માટે આવશ્યક જેના માટે Angular બનાવવામાં આવ્યું છે.