ਤੁਸੀ Angular components ਅਤੇ services ਦੀ ਜਾਂਚ ਕਿਵੇਂ ਕਰਦੇ ਹੋ?

Question

Accepted Answer

Angular ਇਕ ਪੂਰੀ ਜਾਂਚ ਸੈਟਅਪ ਭੇਜਦਾ ਹੈ (ਡਿਫਾਲਟ ਰੂਪ ਵਿੱਚ Jasmine + Karma, ਹਾਲਾਂਕਿ ਬਹੁਤ ਸਾਰੀ ਟੀਮਾਂ Jest ਦੀ ਵਰਤੋਂ ਕਰਦੀਆਂ ਹਨ)। ਇਹ **`TestBed`** ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਇਕ ਜਾਂਚ ਮਾਡਿਊਲ ਨੂੰ ਸੰਰਚਨਾ ਕਰਨ ਅਤੇ components/services ਨੂੰ ਉਹਨਾਂ ਦੀ dependencies ਦੇ ਨਾਲ ਸ਼ੁਰੂ ਕਰਨ ਲਈ — DI ਦੀ ਲਾਭ ਲੈ ਕੇ mocks ਨੂੰ ਪ੍ਰਵਾਹ ਕਰਨ ਲਈ।

## Service ਦੀ ਜਾਂਚ (ਸਭ ਤੋਂ ਸਰਲ)

```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 ਦੀ ਪੁਸ਼ਟੀ ਕਰਨ ਅਤੇ ਇਕ ਵਾਸਤਵਿਕ ਸਰਵਰ ਨੂੰ ਹਿੱਟ ਕੀਤੇ ਬਿਨਾਂ fake responses ਪ੍ਰਦਾਨ ਕਰਨ ਦਿੰਦੇ ਹਨ।

## 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` component instance **ਅਤੇ** ਇਸ ਦੇ rendered DOM ਤੱਕ ਪਹੁੰਚ ਦਿੰਦਾ ਹੈ; ਤੁਹਾਨੂੰ interactions ਤੋਂ ਬਾਅਦ change detection ਚਲਾਉਣ ਲਈ `fixture.detectChanges()` ਨੂੰ ਕਾਲ ਕਰਨਾ ਪਵੇਗਾ।

## DI ਰਾਹੀਂ dependencies ਦਾ Mocking

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

Angular ਦਾ DI mocking ਨੂੰ ਤੁੱਛ ਬਣਾ ਦਿੰਦਾ ਹੈ — ਕਿਸੇ ਵੀ dependency ਲਈ ਇਕ fake ਲਾਗੂਕਾਰ ਫਰਾਹਮ ਕਰੋ।

## 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 timing ਨੂੰ deterministically ਨਿਯੰਤ੍ਰਿਤ ਕਰਦੇ ਹਨ।

## ਜਾਂਚ ਦੇ ਪੱਧਰ

```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 ਆਰਕੀਟੈਕਚਰ ਇਸ ਨੂੰ ਖਾਸ ਤੌਰ ਤੇ ਜਾਂਚਯੋਗ ਬਣਾ ਦਿੰਦਾ ਹੈ — ਤੁਸੀ ਕਿਸੇ ਵੀ dependency ਲਈ mocks ਨੂੰ ਪ੍ਰਵਾਹ ਕਰਦੇ ਹੋ।

`TestBed` (configure + inject), `ComponentFixture` (instance + DOM + `detectChanges`), HTTP ਲਈ `HttpClientTestingModule`, ਅਤੇ async helpers (`fakeAsync`/`tick`) ਨੂੰ ਜਾਣਨਾ ਭਰੋਸੇਮੰਦ ਯੂਨਿਟ ਅਤੇ integration ਜਾਂਚ ਲਿਖਣਾ ਕਵਰ ਕਰਦਾ ਹੈ — ਵੱਡੀ, ਲੰਬੀ-ਰਹਿ ਵਾਲੀ enterprise apps ਲਈ ਜ਼ਰੂਰੀ ਜਿਸ ਲਈ Angular ਬਣਾਇਆ ਗਿਆ ਹੈ।