Unit Testing trong Angular

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class GithubApiService {
  apiUrl = 'https://api.github.com/users/codegym-vn';

  constructor(private httpClient: HttpClient) { }

  fetchUser() {
    return this.httpClient.get(this.apiUrl);
  }
}

Phương thức fetchUser có nhiệm vụ lấy thông tin của codegym-vn từ API của Github qua đường link https://api.github.com/users/codegym-vn.

Bước 3: Bổ sung mã test case vào github-api.service.spec.ts

import { TestBed } from '@angular/core/testing';

import { GithubApiService } from './github-api.service';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';

fdescribe('GithubApiService', () => {
  let httpMock: HttpTestingController; // (1)

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule]
    });
    httpMock = TestBed.get(HttpTestingController);
  });

  it('should fetch user from Github API', () => {
    const service: GithubApiService = TestBed.get(GithubApiService);
    
    // (2)
    service.fetchUser().subscribe( res => {
      expect(res['login']).toEqual('codegym-vn'); // (3)
    });

    const req = httpMock.expectOne(service.apiUrl); // (4)
    expect(req.request.method).toBe('GET');
    httpMock.verify(); // (5)
  });
});

Ở đoạn mã trên, chúng ta sử dụng HttpTestingController để xác minh các HTTP request. (1)

Sau khi thực thi phương thức fetchUser() (2), chúng ta kiểm tra kết quả API trả về với giá trị mong đợi qua mã lệnh expect(res['login']).toEqual('codegym-vn'); (3)

Đồng thời, chúng ta có thể kiểm chứng service đã tạo một HTTP request với method ‘GET’ tới đường link được lưu trong thuộc tính apiUrl . (4)

Cuối cùng, httpMock.verify() (5) giúp xác minh rằng không còn request nào được tạo ra sau khi thực thi các đoạn mã mà chưa kiểm chứng.

Mô phỏng service khi test component

Khi component phụ thuộc vào một service, và service này lại phụ thuộc vào một thành phần bên ngoài như API hoặc dịch vụ bên thứ ba,… chúng ta có thể giả lập các service này bằng cách tạo đối tượng mô phỏng.

Tiếp tục từ ví dụ ở mục Unit test cho service sử dụng HttpClient trên, chúng ta tạo component hiển thị các thông tin lấy từ GitHub API qua GithubApiService .

Bước 1: Tạo mới một component có tên là Repo từ Angular/CLI với lệnh sau:

ng g c repo

Cấu trúc thư mục của component Repo được tạo như sau:

src/
-- app/
-- -- repo/
-- -- -- repo.component.css
-- -- -- repo.component.html
-- -- -- repo.component.spec.ts
-- -- -- repo.component.ts

...

export class RepoComponent {
  user: any;

  constructor(private githubApiService: GithubApiService) { }

  fetchGithubUser() {
    this.githubApiService.fetchUser().subscribe( res => {
      this.user = res;
    });
  }
}

<p *ngIf="user">{{ user.login }}</p>

<button (click)="fetchGithubUser()">Fetch Github User</button>

...

fdescribe('RepoComponent', () => {
  let component: RepoComponent;
  let fixture: ComponentFixture<RepoComponent>;

  // (1)
  const mockGithubApiService = {
    fetchUser: () => of({ login: 'codegym-vn' }) // (2)
  };

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ RepoComponent ],
      
      // (3)
      providers: [{
        provide: GithubApiService,
        useValue: mockGithubApiService
      }],
      imports: [HttpClientTestingModule]
    })
    .compileComponents();
  }));
	
  ...
  
  it('should display GitHub repository name after click button', () => {
    // Arrange
    const debugElement = fixture.debugElement;
    const expected = 'codegym-vn';

    // Act
    const buttonElement = debugElement.query(By.css('button'));
    buttonElement.triggerEventHandler('click', null);
    fixture.detectChanges();

    // Assert
    const pElement = debugElement.query(By.css('p'));
    const actual = pElement.nativeElement.innerText;
    expect(actual).toEqual(expected);
  });
});