Vue with Test Driven Development

Learn Vue 3 by applying test driven development (using vitest, testing-library/vue)

4.50 (222 reviews)
Udemy
platform
English
language
Web Development
category
Vue with Test Driven Development
1,928
students
27.5 hours
content
Apr 2024
last update
$69.99
regular price

What you will learn

Build application with Vue 3

Build an application with internationalization (i18n)

Learn both composition and options api

Build an application with client side routing, by using vue router

Implement global state management with pinia

Practice Test Driven Development in a complete project from beginning to the end.

Learn the test runner, vitest and understand how to structure test modules

How to mock external dependencies in testing.

Feel how the test driven development is giving confidence when refactoring your application.

Why take this course?

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 qualityreusability

  • 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.

Content

Introduction

Introduction
Methodology
Create Project
Test Environment Setup
Development Environment Tools
Project Source Code

Sign Up

Sign Up Form Layout
Interacting with Form
Making API Request
Mocking
Proxying Requests to Backend
Styling
Progress Indicator
Sign Up Success Layout
Refactor Tests

Validation

Display Validation Error
Restoring Button State
Input Component
Styling Input
Remaining Validations
Client-side Validation
Hiding Validation Errors

i18n - Internationalization

i18n Library
Changing Language
Language Selector Component
Local Validation Messages
Adding Language to API Requests
Refactor

Routing

Client-side Routing
Refactor
NavBar
Styling NavBar
Vue Router
Account Activation Page
Account Activation API Request
Spinner Component

Listing Users and User Page

UserList Component
Refactor Page Responses in Tests
Next and Previous in UserList
Link to UserPage
Default Profile Image
Key in Loop
UserList Progress Indicator
Translations
ProfileCard Component
UserPage Progress Indicator
User Not Found Case

Authentication

Login Form
Interactions
Authentication API Request
Authentication Errors
Translations
Navigation After Successful Authentication
ButtonWithProgress Component
Card Component

Client State Management

Vuex
NavBar Component
Using LocalStorage
LocalStorage Abstraction
LocalStorage Encryption
Storing Credentials

Screenshots

Vue with Test Driven Development - Screenshot_01Vue with Test Driven Development - Screenshot_02Vue with Test Driven Development - Screenshot_03Vue with Test Driven Development - Screenshot_04

Reviews

Yap
August 15, 2023
very good course, strongly recommend to all Vue Developer, because it is very detail. all other vue courses in UDEMY I also cannot get such details , because other only teach u build project, but never tell u where is the important details within. some times we learn too broad, but for specific issue, we need this course .
Emre
May 12, 2023
Genel hatlarıyla oldukça başarılı bir eğitim. Bir projede kullanılması gereken temel tüm süreçlere değinilmiş. Ancak proje de çok fazla vue tarafında geliştirmeler için vakit harcanmış. Bu kısımlar daha hızlı geçilip sadece test süreçlerine odaklanılabilirdi. Bu elbet eğtimin doğası gereği geliştirme hangi adımlardan geçiyor gösterilmek için yapılmış olabilir ama videolarınızı atlaya atlaya izledim. Bu kötülemek değil sadece tavsiye amaçlı bir geri bildirimim. Bunun dışında eğitimin amacı doğrultusunda değerlendirdiğimde kesinlikle başarılı buluyorum. Teşekkürler.
Raza
May 6, 2023
Great explanation of TDD as an approach to development as well as the concepts in each lesson. Very insightful course by a good instructor, I learned a ton!
David
December 21, 2022
Excellent course content and course topics. I have had to research some of the packages as their implementations have changed from the courseware.
CZECH
September 2, 2022
The voice sounds bored, and grammar is incorrect. But the course provides lots of useful information. And a git project is outstanding - with every lecture changes on a single commit.
Anonymized
August 1, 2022
I really appreciated how he went through examples of tests you might be *tempted* to write but are actually brittle and couple you to the implementation, and then showed how to fix them.
Dmitrii
July 6, 2022
Overall very good course, but TBH some things are outdated and required to look for solutions. Nothing that cannot be figured out, but it just takes extra time to get further... I'm probbly just comparing with other courses where it was a bit smoother to get through. Wouldn't recommend this one to a beginner.
Rafael
June 11, 2022
Pretty awesome all the subjects are well explained and he responds very quickly if any answer is asked in the Q&A box, I really do recommend this course to anyone starting to learn how to unit tests with vue
David
March 4, 2022
Fantastic course. In my opinion, REACT-TDD course is more in detail and this course is a really basic and stable for using in any Vue project. Great work!

Charts

Price

Vue with Test Driven Development - Price chart

Rating

Vue with Test Driven Development - Ratings chart

Enrollment distribution

Vue with Test Driven Development - Distribution chart
4130438
udemy ID
6/17/2021
course created date
7/12/2021
course indexed date
Bot
course submited by