Vue with Test Driven Development

Build a sign up form in the Vue with test driven development course, adding username, email, and password inputs with labels, a sign up button, and robust testing strategies.

Explore form interactions in vue by enabling the sign up button when passwords match, implement tests with testing library user-event, and compare composition API and options API approaches.

Learn to apply scoped styling in Vue components, manage style granularity with scoped blocks, and enhance the signup form using Bootstrap utilities, cards, and responsive layout.

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 implement and test a sign up success response in a Vue app, displaying backend messages and conditionally showing a Bootstrap alert via composition and options API.

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.

Explore handling sign-up failures in a Vue app with test-driven development, showing a generic error alert on network failure, managing API progress and spinner states.

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.

Develop and test a new account activation page in a Vue app, handling activation tokens via a dynamic route at /activation/:token and ensuring tests pass.

Learn to read route params and trigger activation requests in a Vue app using router and tokens, and compare composition API watchEffect with options API watch to handle URL changes.

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.

Builds a password reset request page in a Vue with test driven development project, covering routing, translations, email validation, api post to reset endpoint, and ui feedback with a spinner.

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.

Add next and previous page navigation to the user list, with translations and conditional button rendering, and ensure tests confirm correct button behavior across pages.

Fetches user data on page open via api v1 users, shows a profile card with user’s name, displays a spinner, and handles non-existing user with a user not found error.

Implement the user page by making API requests on mount, using id from the URL, and triggering requests on route changes while displaying errors, a spinner, and a profile card.

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.

Practice deleting a user from the profile page with a browser confirmation, handle api delete requests, show a spinner, support multiple languages, and navigate home on success while logging out.