Giới thiệu về unit testing trong Angular

Khi phát triển một ứng dụng sử dụng bất kỳ một ngôn ngữ lập trình nào, việc đảm bảo code của chúng ta viết ra đúng như những gì chúng ta muốn là điều rất quan trọng dù đoạn code đó có sai business logic đi nữa. Để làm được điều này, chúng ta phải có unit test cho code của mình. Trong bài viết này, mình sẽ giới thiệu với các bạn về unit testing trong Angular để các bạn hiểu rõ hơn về cách chúng ta sẽ viết unit test trong Angular như thế nào!

Đầu tiên, mình sẽ tạo mới một Angular project để làm ví dụ:

Giới thiệu về unit testing trong Angular

Mặc định, khi các bạn tạo Angular project sử dụng Angular CLI, 2 công cụ dùng để viết và chạy unit test trong Angular là Jasmine và Karma sẽ được include, cấu hình và một ví dụ về viết unit test sử dụng 2 công cụ này cũng được include trong tập tin app.component.spec.ts ở thư mục src/app.

Nói nôm na thì Jasmine là một framework với nhiều function giúp chúng ta có thể dễ dàng viết unit test trong Angular còn Karma là một công cụ giúp chúng ta có thể chạy được unit test. Chúng ta cũng có thể xem report, code coverage sử dụng công cụ Karma này.

Công cụ Jasmine chỉ để cho chúng ta viết unit test thôi nên các bạn sẽ không cần cấu hình gì cả, với Karma thì khác. Chúng ta phải cấu hình để nó có thể chạy, output report, hiển thị code coverage cho chúng ta. Mặc định khi tạo Angular project, các bạn sẽ thấy tập tin cấu hình của Karma karma.conf.js ở thư mục home của project với nội dung như sau:

Tập tin cấu hình này của Karma sẽ định nghĩa framework mà chúng ta sẽ sử dụng để viết unit test sử dụng thuộc tính “frameworks”, các thư viện cần thiết để Karma có thể làm các công việc mà chúng ta muốn như report, code coverage,… được định nghĩa trong thuộc tính “plugins”. Mặc định thì để chạy unit test, Karma sẽ sử dụng Chrome browser với karma-chrome-launcher và Karma có một chế độ chạy gọi là autoWatch, có nghĩa nếu có bất kỳ thay đối nào trong code của chúng ta, Karma sẽ tự động detect và chạy lại test. Các bạn có thể thay đổi các thông tin cấu hình mặc định này nếu muốn.

Một điểm nữa mà các bạn cần để ý là ở đây chúng ta có tập tin test.ts trong thư mục src đóng vai trò là tập tin đầu tiên Angular sẽ chạy khi chúng ta chạy test với câu lệnh ‘ng test”. Nội dung của tập tin này như sau:

Như các bạn thấy, một đối tượng tên là TestBed sẽ được Angular khởi tạo trong tập tin test.ts, đây là đối tượng sẽ giúp chúng ta tạo mới và cấu hình Component mà chúng ta cần test. Ngoài ra, cũng trong tập tin test.ts này, chúng ta cũng sẽ thấy một đoạn code sẽ giúp Angular detect được các tập tin chứa chữ spec, đây là những tập tin sẽ định nghĩa unit test trong Angular đó các bạn!

OK, trên đây là những thông tin cơ bản mà các bạn cần biết để bắt đầu viết unit test trong Angular. Bây giờ chúng ta sẽ xem xét nội dung của tập tin app.component.spec.ts trong thư mục src/app để hiểu cách viết unit test các bạn nhé!
Nội dung của tập tin này như sau:

Ở đây, chúng ta sẽ sử dụng function describe() của Jasmine để bắt đầu viết unit test cho Component của mình. Function này để tạo mới một nhóm các test cases (có thể gọi là một nhóm các specs) hay còn có thể gọi là test suite, cho Component của các bạn. Tham số của function này gồm mô tả về test suite và định nghĩa của chúng như sau:

Chúng ta có nhiều spec trong test suite, nếu mỗi một spec chúng ta phải đi cấu hình cho Component thì rất tốn công. Các bạn có thể sử dụng function beforeEach() để làm việc này. Để mỗi lần chạy một spec, Angular sẽ gọi function beforeEach() trước để cấu hình cho Component, sau đó trong mỗi spec, chúng ta chỉ việc tạo mới Component và sử dụng các Jasmine function để hiện thực code cho unit test mà thôi.

Trong ví dụ của mình thì nội dung của function beforeEach() đơn giản vì ứng dụng của chúng ta đơn giản. Đối với các ứng dụng lớn, các bạn sẽ cần phải làm nhiều hơn thế, vì có thể Component của các bạn sử dụng rất nhiều các Component khác hoặc nhiều thứ khác nữa.

Trong mỗi spec, các bạn sẽ cần tạo mới Component và tuỳ theo mục đích cần test là gì thì chúng ta sẽ sử dụng các function của Jasmine để hiện thực nó. Chúng ta sẽ sử dụng function expect() của Jasmine và các function trong interface Matchers namespace jasmine để làm assertion:

Giới thiệu về unit testing trong Angular

Để đảm bảo chất lượng code, hãy cố gắng cover hết tất cả các cases trong code của Component bằng unit testing các bạn nhé!

Chia sẽ bài viết này ...Share on Facebook
Facebook
0Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin

Add Comment