Bạn test các component và service trong Angular như thế nào?

Question

IT Interview Practice · Accepted Answer

Angular cung cấp sẵn một thiết lập test đầy đủ (Jasmine + Karma theo mặc định, dù nhiều team dùng Jest). Nó cung cấp **`TestBed`** để cấu hình một testing module và khởi tạo các component/service cùng các phụ thuộc của chúng — tận dụng DI để inject các mock.

## Test một service (đơn giản nhất)

```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"); // khẳng định request đã được thực hiện
    req.flush([{ id: 1 }, { id: 2 }]);             // cung cấp một response giả
  });
});
```

`HttpClientTestingModule` + `HttpTestingController` cho phép bạn khẳng định các request và cung cấp các response giả mà không cần gọi tới một server thật.

## Test một 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(); // kích hoạt change detection ban đầu
  });

it("increments on click", () => {
    const button = fixture.nativeElement.querySelector("button");
    button.click();
    fixture.detectChanges();                     // cập nhật view
    expect(component.count).toBe(1);
    expect(button.textContent).toContain("1");   // khẳng định DOM đã render
  });
});
```

`ComponentFixture` cho truy cập tới instance của component **và** DOM đã render của nó; bạn phải gọi `fixture.detectChanges()` để chạy change detection sau các tương tác.

## Mock các phụ thuộc qua DI

```ts
TestBed.configureTestingModule({
  providers: [{ provide: AuthService, useValue: mockAuthService }], // inject một cái giả
});
```

DI của Angular khiến việc mock trở nên đơn giản — provide một cách triển khai giả cho bất kỳ phụ thuộc nào.

## Test bất đồng bộ

```ts
it("loads async", fakeAsync(() => {
  component.load();
  tick();                  // mô phỏng thời gian trôi qua / flush các microtask
  fixture.detectChanges();
  expect(component.data).toBeDefined();
}));
```

`fakeAsync`/`tick` (hoặc `waitForAsync`) kiểm soát thời gian async một cách xác định.

## Các cấp độ test

```text
Unit:        service, pipe, logic component cô lập (nhanh, nhiều nhất)
Integration: component + template + các component con qua TestBed
E2E:         toàn bộ luồng người dùng (Cypress, Playwright) — tách khỏi unit test
```

## Tại sao điều này quan trọng

Test là một mối quan tâm hạng nhất trong Angular, và kiến trúc DI của nó khiến nó đặc biệt dễ test — bạn inject các mock cho bất kỳ phụ thuộc nào.

Biết `TestBed` (cấu hình + inject), `ComponentFixture` (instance + DOM + `detectChanges`), `HttpClientTestingModule` cho HTTP, và các helper async (`fakeAsync`/`tick`) bao quát việc viết các unit test và integration test đáng tin cậy — thiết yếu cho các ứng dụng doanh nghiệp lớn, tồn tại lâu dài mà Angular được xây dựng cho.

Test một service (đơn giản nhất)

Test một component

Mock các phụ thuộc qua DI

Test bất đồng bộ

Các cấp độ test

Tại sao điều này quan trọng

Câu hỏi liên quan