Tập áp dụng TDD cho dự án sử dụng VueJS

1. TDD là gì?

"Test-Driven Development” có thể được tạm hiểu là mô hình phát triển với trọng tâm hướng về việc kiểm thử. TDD được xây dựng theo hai tiêu chí: Test-First (Kiểm thử trước) và Code-Later (Code sau)

2. Các bước tiến hành TDD

• Viết 1 test cho hàm mới. Đảm bảo rằng test sẽ fail.
• Chuyển qua viết code sơ khai nhất cho hàm đó để test có thể pass.
• Tối ưu hóa đoạn code của hàm vừa viết sao cho đảm bảo test vẫn pass và tối ưu nhất cho việc lập trình kế tiếp
• Lặp lại cho các hàm khác từ bước 1

3. Công cụ cần thiết để thực hiện test JS

Cần 4 thành phần chính như sau

• Test Runners
• Testing Frameworks
• Assertion Libraries
• Testing Plugins

Trong bài viết này mình lựa chọn lần lượt các công cụ: Karma, Mocha, Chai và Sinon

1. Ý tưởng

Mình sẽ thực hiện 1 demo Counter nho nhỏ như hình dưới đây

2. Khởi tạo project

Mình sử dụng vue-cli để setup cho nhanh nhé :slight_smile:

npm install -g vue-cli
vue init webpack tdd-vue
cd tdd-vue
npm install
npm run dev

Mình bắt đầu với file src/components/HelloWorld.vue trước nhé. Làm rỗng file trước đã