Ưu đãi trong tuần: Nhập mã UD50 giảm 50k cho đơn từ 300k!
Trang chủ
Menu

Vue with Test Driven Development

Vue với Phát triển Hướng Kiểm thử (TDD)

Vue với Phát triển Hướng Kiểm thử (TDD)

Học Vue 3 bằng cách áp dụng phát triển hướng kiểm thử (sử dụng vitest, testing-library/vue)

4.4
(271 đánh giá)
2,396 học viên
Giảng viên
Basar Buyukkahraman
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
50.000đ 489.000đ -90%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
27.5 giờ video
164 bài giảng
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 30/05/2026

Bạn sẽ học được gì

Xây dựng ứng dụng với Vue 3
Xây dựng ứng dụng có hỗ trợ đa ngôn ngữ (i18n)
Học cả Composition API và Options API
Xây dựng ứng dụng có định tuyến phía máy khách bằng vue router
Triển khai quản lý trạng thái toàn cục với pinia
Thực hành Phát triển Hướng Kiểm thử trong một dự án hoàn chỉnh từ đầu đến cuối
Tìm hiểu test runner vitest và cách cấu trúc các module kiểm thử
Cách mock các phụ thuộc bên ngoài khi kiểm thử
Trải nghiệm cảm giác tự tin khi tái cấu trúc ứng dụng nhờ Phát triển Hướng Kiểm thử
Kiểm thử trong Vue

Yêu cầu

Yêu cầu có kinh nghiệm với javascript

Đối tượng phù hợp

Dành cho lập trình viên muốn học Vue 3
Dành cho lập trình viên muốn xem Phát triển Hướng Kiểm thử trong thực tế

Nội dung khóa học

20 phần • 164 bài giảng
1 Giới thiệu
2 Phương pháp luận
3 Tạo dự án
4 Các phụ thuộc bổ sung
5 Thiết lập cuối cùng
6 Backend
7 Mã nguồn dự án
1 Biểu mẫu Đăng ký
2 Tương tác với Biểu mẫu
3 Tái cấu trúc
4 Yêu cầu API
5 ref hoặc reactive
6 Mock Service Worker (MSW)
7 Event Modifier
8 Proxy
9 Định kiểu
10 Ghi đè Kiểu
1 Vô hiệu hóa Nút
2 Tái cấu trúc Kiểm thử
3 Spinner
4 Nhiệm vụ: Phản hồi Đăng ký Thành công
5 Nhiệm vụ: Phản hồi Đăng ký Thành công - Yêu cầu
6 Phản hồi Đăng ký Thành công
7 Ẩn Biểu mẫu
8 Nhiệm vụ: Đăng ký Thất bại
9 Nhiệm vụ: Đăng ký Thất bại - Danh sách Yêu cầu
10 Đăng ký Thất bại
11 Kiểm thử Đơn vị
1 Hiển thị Lỗi Xác thực
2 Component Input
3 Kiểu Lỗi Input
4 Lặp lại Kiểm thử
5 Mật khẩu Không khớp
6 Ẩn Lỗi
1 vue-i18n
2 Sửa Kiểm thử
3 Bộ chọn Ngôn ngữ
4 Vấn đề Tiềm ẩn & Tái cấu trúc
5 Lưu trữ Ngôn ngữ trong LocalStorage
6 Ngôn ngữ trong Yêu cầu
7 Trích xuất Hàm API
1 Định tuyến Phía Máy khách
2 Thanh Điều hướng
3 Kiểu Thanh Điều hướng
4 Nhiệm vụ: Trang Kích hoạt
5 Nhiệm vụ: Trang Kích hoạt - Danh sách Yêu cầu
6 Trang Kích hoạt
7 Yêu cầu Kích hoạt
8 Sử dụng Tham số Định tuyến
9 Nhiệm vụ: Xử lý Phản hồi API
10 Nhiệm vụ: Xử lý Phản hồi API - Danh sách Yêu cầu
11 Xử lý Phản hồi API
12 Trích xuất Component Lặp lại
13 Nhiệm vụ: Ngôn ngữ trong Yêu cầu
14 Nhiệm vụ: Ngôn ngữ trong Yêu cầu - Yêu cầu
15 Ngôn ngữ trong Yêu cầu
16 Axios Interceptor
17 Kiểm thử Đơn vị
1 Nhiệm vụ: Khôi phục Tài khoản
2 Yêu cầu: Trang Yêu cầu Đặt lại Mật khẩu
3 Yêu cầu: Trang Thiết lập Đặt lại Mật khẩu
4 Trang Yêu cầu Đặt lại Mật khẩu
5 Trang Thiết lập Đặt lại Mật khẩu
6 Component Nút
1 Danh sách Người dùng
2 Sửa Trang trong Kiểm thử
3 Trang Tiếp theo & Trang trước
4 Nhiệm vụ: Spinner
5 Nhiệm vụ: Spinner - Danh sách Yêu cầu
6 Spinner
7 Hình ảnh Hồ sơ Mặc định
8 Key trong v-for
9 Component Card
1 Liên kết đến Trang Người dùng
2 Nhiệm vụ: Trang Người dùng
3 Nhiệm vụ: Trang Người dùng - Danh sách Yêu cầu
4 Trang Người dùng
5 Custom Composable
6 Cập nhật Kiểm thử Đơn vị
1 Nhiệm vụ: Trang Đăng nhập
2 Nhiệm vụ: Trang Đăng nhập - Danh sách Yêu cầu
3 Trang Đăng nhập
4 Tích hợp Đặt lại Mật khẩu
5 Định tuyến Sau khi Đăng nhập Thành công
6 Bố cục Đã Đăng nhập
7 Local Storage với Pinia
8 Đăng xuất
9 Nhiệm vụ: Xóa Người dùng
10 Nhiệm vụ: Xóa Người dùng - Danh sách Yêu cầu
11 Xóa Người dùng
1 Nhiệm vụ: Cập nhật Tên người dùng
2 Nhiệm vụ: Cập nhật Tên người dùng - Danh sách Yêu cầu
3 Cập nhật Tên người dùng
4 Tải lên Tệp
5 Hình ảnh Hồ sơ
6 Yêu cầu Tải lên Tệp
7 Xử lý Thất bại
1 Độ bao phủ Mã
2 Kết thúc
1 Giới thiệu
2 Phương pháp luận
3 Tạo dự án
4 Cảnh báo Phụ thuộc Kiểm thử
5 Thiết lập Môi trường Kiểm thử
6 Công cụ Môi trường Phát triển
7 Mã nguồn Dự án
8 Tài nguyên
1 Bố cục Biểu mẫu Đăng ký
2 Tương tác với Biểu mẫu
3 Thực hiện Yêu cầu API
4 Cập nhật Mock Service Worker
5 Mocking
6 Chuyển tiếp Yêu cầu đến Backend
7 Định kiểu
8 Chỉ báo Tiến trình
9 Bố cục Đăng ký Thành công
10 Tái cấu trúc Kiểm thử
1 Hiển thị Lỗi Xác thực
2 Khôi phục Trạng thái Nút
3 Component Input
4 Định kiểu Input
5 Các Xác thực Còn lại
6 Xác thực Phía Máy khách
7 Ẩn Lỗi Xác thực
1 Cảnh báo Phiên bản Thư viện i18n
2 Thư viện i18n
3 Thay đổi Ngôn ngữ
4 Component Bộ chọn Ngôn ngữ
5 Thông báo Xác thực Cục bộ
6 Thêm Ngôn ngữ vào Yêu cầu API
7 Tái cấu trúc
1 Định tuyến Phía Máy khách
2 Tái cấu trúc
3 Thanh Điều hướng
4 Định kiểu Thanh Điều hướng
5 Vue Router
6 Trang Kích hoạt Tài khoản
7 Yêu cầu API Kích hoạt Tài khoản
8 Component Spinner
1 Component UserList
2 Tái cấu trúc Phản hồi Trang trong Kiểm thử
3 Tiếp theo và Trước đó trong UserList
4 Liên kết đến UserPage
5 Hình ảnh Hồ sơ Mặc định
6 Key trong Vòng lặp
7 Chỉ báo Tiến trình UserList
8 Bản dịch
9 Component ProfileCard
10 Chỉ báo Tiến trình UserPage
11 Trường hợp Không tìm thấy Người dùng
1 Biểu mẫu Đăng nhập
2 Tương tác
3 Yêu cầu API Xác thực
4 Lỗi Xác thực
5 Bản dịch
6 Điều hướng Sau khi Xác thực Thành công
7 Component ButtonWithProgress
8 Component Card
1 Vuex
2 Component Thanh Điều hướng
3 Sử dụng LocalStorage
4 Trừu tượng hóa LocalStorage
5 Mã hóa LocalStorage
6 Lưu trữ Thông tin Xác thực

Giới thiệu khóa học

The frontend world is having very popular frameworks which are heavily used in most of the applications.

In this course we will be learning Vue 3 by creating a web application with it. Also we will apply test driven development (TDD) methodology from beginning to the end.

We will use one of the most popular test libraries of javascript. vitest and testing-library

while building this application, we will learn

  • both options api and composition api

  • client-side routing. we will apply our custom implementation then we will use vue-router library

  • internationalization with vue-i18n

  • global state management in a component based application by using pinia

and we will see

  • how test driven development works.

  • diff of integration and unit tests

  • how it's affecting our code quality, reusability

  • how it's giving us the confidence about refactoring our implementation

  • how to avoid implementation details while creating tests

This course is purely built on practice. Each code piece we write, will be for our actual application implementation.

In each section we will gradually build our application. We will not jump ahead and add functionality not needed for that moment. We will implement one requirement at a time. Each implementation will bring the next requirement to us.

And following this practice, will help you to get a solid foundation about overall web application requirements and how to implement one of them with Vue by following test driven development methodology.

After completing the course, you will be able to use Vue in your next project and you will experience the benefits of test driven development.

Khóa học liên quan

Khám phá thêm các khoá học cùng chủ đề

Hiển thị tất cả khoá học Frontend Development
Hiển thị tất cả khoá học Javascript
Hiển thị tất cả khoá học Vue
Hiển thị tất cả khoá học Web Development
Zalo
Tôi có thể tư vấn khoá học cho bạn 😊