
Import bootstrap from node_modules and override its styles with a custom assets/styles.css and variables.scss to customize primary color, focus states, and border radius.
Refactor tests by extracting a setup helper that returns user and elements, and manage the server lifecycle to reduce repetition and boost test reliability.
Learn to handle sign up failures in a Vue app using test-driven development by simulating network errors, showing backend messages, and restoring the submit button and spinner.
This lecture reveals a hidden test issue caused by retained i18n state, and demonstrates refactoring test setup to reset locale and consolidate render logic for better isolation.
Extracts the signup API call into a dedicated api.js module that posts the user body to API v1 users with an accept-language header from the i18n locale, simplifying signup.
Handle activation API responses by showing progress during requests and displaying backend messages on success or failure, including a generic error for network issues, echoing the signup page practice.
Acquire skills to handle locale and accept-language headers in signup and activation flows, using patch requests and i18n to drive tests in a Vue app, token handling, and api options.
Extract a reusable app button component to replace repeated code, with is-disabled and api-progress props, variant options, a spinner, and a text slot, demonstrated on the signup page.
Introduce a Pinia auth store to track login state. Hide login and sign up links, show my profile, and route to user pages upon login, with changes validated by tests.
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.