In this hands-on course, you will learn to write applications using Test-Driven Development (TDD) by building a clone of the Wordle game from scratch. This course covers Vue.js 3, Composition API, Vitest, and Vue Test Utils. Key topics include the Red-Green-Refactor loop, crafting resilient tests, using test generators, working with mocks and spies, and essential refactoring techniques. It's suitable for developers at all levels, even those new to testing.
A “Wordle” on Test Driven Development in Vue.js
Additional
About the Author: Vue School
Vue School (vueschool.io) is a Greece-based Vue.js training platform founded by Alex Kyriakidis, an early Vue community member and one of the longest-running independent Vue educators. Vue School operates as both an on-demand course platform and a Vue / Nuxt consulting business, with course material that often emerges from real client engagements.
Course material covers the full Vue ecosystem: Vue 3 fundamentals through advanced Composition API patterns, Nuxt 3 production deployment, Pinia state management, Vue Router, the testing track with Vitest, TypeScript with Vue, real-time features with Pusher / WebSockets, and the broader full-stack Vue work. Vue School also publishes the popular Mastering Pinia course in collaboration with Pinia's author Eduardo San Martín Morote.
The CourseFlix listing under this source carries over 30 Vue School courses spanning that range. Material is paid; Vue School runs on per-course or membership pricing on the original platform. Courses are aimed at Vue developers from beginner through senior level building production Vue applications.
Watch Online 18 lessons
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | What is TDD and how it helps us write better software? Demo | 04:06 | |
| 2 | Different types of tests | 08:45 | |
| 3 | Preparing your environment | 10:47 | |
| 4 | Our first Red | 11:48 | |
| 5 | Refactor via extractions | 11:00 | |
| 6 | Defining the rules for Word of the day | 12:46 | |
| 7 | Tests as documentation | 13:17 | |
| 8 | Handling Player Input | 13:27 | |
| 9 | Fixing bugs and writing regression tests | 11:36 | |
| 10 | Flexible tests and the freedom to change code | 10:07 | |
| 11 | Allowing players to make multiple guesses | 09:39 | |
| 12 | Displaying all guesses | 08:46 | |
| 13 | Disabling controls when the game is over | 05:19 | |
| 14 | Let’s add a bit more styling | 04:49 | |
| 15 | Providing hints after each submission - Part 1 | 09:41 | |
| 16 | Providing hints after each submission - Part 2 | 10:51 | |
| 17 | Visual Regression Tests | 09:39 | |
| 18 | Course Conclusion | 02:22 |
Get instant access to all 17 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionCourse content
18 lessons · 2h 48m 45sShow all 18 lessons
- 1 What is TDD and how it helps us write better software? 04:06
- 2 Different types of tests 08:45
- 3 Preparing your environment 10:47
- 4 Our first Red 11:48
- 5 Refactor via extractions 11:00
- 6 Defining the rules for Word of the day 12:46
- 7 Tests as documentation 13:17
- 8 Handling Player Input 13:27
- 9 Fixing bugs and writing regression tests 11:36
- 10 Flexible tests and the freedom to change code 10:07
- 11 Allowing players to make multiple guesses 09:39
- 12 Displaying all guesses 08:46
- 13 Disabling controls when the game is over 05:19
- 14 Let’s add a bit more styling 04:49
- 15 Providing hints after each submission - Part 1 09:41
- 16 Providing hints after each submission - Part 2 10:51
- 17 Visual Regression Tests 09:39
- 18 Course Conclusion 02:22
Related courses
-
Updated 2y agoVue 3 and Laravel: Breaking a Monolith to Microservices
By: UdemyMicroservices Architecture, Vue 3, Nuxt.js, Laravel, Docker, RabbitMQ, Event Driven Microservices, Internal APIs, Redis. Learn how to create a Monolith using Vu14 hours 4 minutes 43 seconds -
Updated 2y agoFacebook Clone with Laravel, TDD, Vue & Tailwind CSS
By: UdemyBuilding modern applications requires a specialized toolbox of skills and tools. We are going to be using Facebook as an example to build a social network platf9 hours 9 minutes 44 seconds -
Updated 2y agoRobust Vue.js Forms with FormKit
By: Vue SchoolForms are the core of interactive and dynamic web pages. They accept user input and must respond to that input often in real time and in a variety of ways. Form2 hours 4 minutes 52 seconds