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

Question

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.