Unajaribu vipi sehemu za Angular na huduma?

Question

IT Interview Practice · Accepted Answer

Angular inakuja na usanidi kamili wa kupima (Jasmine + Karma kwa kawaida, ingawa timu nyingi hutumia Jest). Inatoa **`TestBed`** kuandaa moduli ya kupima na kuunda violezo vya sehemu/huduma na utegemezi wao — kwa kutumia DI kuingiza mock-kat.

## Kupima huduma (rahisi zaidi)

```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` kukuruhusu kushangilia ombi na kutoa majibu ya uwongo bila kusoma severi halisi.

## Kupima sehemu

```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` inatoa ufahamu wa violezo vya sehemu **na** DOM iliyoonyeshwa; lazima upigie simu `fixture.detectChanges()` kueneza ugunduzi wa mabadiliko baada ya mwingiliano.

## Kuiga utegemezi kupitia DI

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

DI ya Angular inafanya kuiga kwa trivial — toa utekelezaji wa uwongo kwa utegemezi wowote.

## Kupima kwa asinkroni

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

`fakeAsync`/`tick` (au `waitForAsync`) kudhibiti muda wa asinkroni kwa kuamua.

## Viwango vya kupima

```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
```

## Kwa nini ni muhimu

Kupima ni hamu la darasa la kwanza katika Angular, na usanifu wake wa DI unafanya iweze kuweza kupimwa — unayaingiza mock-kat kwa utegemezi wowote.

Ufahamu wa `TestBed` (andaa + ingiza), `ComponentFixture` (violezo + DOM + `detectChanges`), `HttpClientTestingModule` kwa HTTP na wasaidizi wa asinkroni (`fakeAsync`/`tick`) hufunika kuandika upimaji wa kutegemewa wa kitengo na ujumuishaji — muhimu kwa programu kubwa za biashara ndefu ambazo Angular ilijengwa kwa ajili yake.

Kupima huduma (rahisi zaidi)

Kupima sehemu

Kuiga utegemezi kupitia DI

Kupima kwa asinkroni

Viwango vya kupima

Kwa nini ni muhimu

Maswali yanayohusiana