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.

Wrap inputs in a form and submit by pressing enter, then prevent the default submit behavior with event.preventDefault to send only a post request to api v1 users.

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.

Discover how to prevent multiple submissions in a Vue app by disabling the submit button during ongoing requests with an API progress flag, using a test-first approach.

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.

Develop robust unit tests for the sign-up flow by mocking axios post, asserting spinner display, handling success, network errors, and single-request behavior with beforeEach.

Enhance form error visuals by applying Bootstrap's is-invalid and invalid-feedback styles to input and helper text, and verify behavior with tests that conditionally apply classes based on errors.

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.

Add language support on front end and back end, send accept-language header using i18n locale, and test sign-up requests for TR and EN.

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.

Add a new activation page with a dynamic url to demonstrate how the page opens when the url includes dynamic parts.

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.

Track api responses with a single status (loading, success, fail) to control spinner and error or success messages during activation, as demonstrated by tests.

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.

Use axios interceptors to automatically attach accept language headers from the i18n locale via a centralized http module, reducing header repetition across API calls, with unit tests validating the interceptor.

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.

Learn to build a paginated user list in Vue with a backend API, fetch and display users using page and size parameters, and test the user list component.

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.

Demonstrates how v-for in Vue 4 can reuse component instances, causing stale internal state; use a unique key (user id) to force proper re-render and reset selection state.

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.

Implement a login page in Vue with test-driven development, featuring a login API call, email and password form, translations, robust error handling, and routing tests.

Connect the login and password reset pages with a forgot password link and test-driven navigation. Update the password set flow to navigate back to login on success, validating end-to-end behavior.

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.