Angular with Test Driven Development

Begin implementing the signup page in Angular using the CLI to generate a sign-up component, wire it into the module, and verify the header sign up with Jasmine/Karma.

Explore test-driven development in Angular by implementing interactive form controls that enable a signup button only when password and password repeat match, using event binding, change detection, and component state.

Develop a Jasmine unit test for the signup form that fills username, email, and password, clicks submit, mocks window.fetch, and asserts the JSON body contains the correct credentials.

Apply jest to mock fetch in a sign-up component test, fill username, email, and password, click the sign-up button, and spy on fetch calls to validate the request payload.

Use angular's built-in http client to replace fetch, injecting HttpClient in the component to post to api/users with a body containing username, email, and password.

Master how to mock api requests in tests with msw, using mock service worker and rest handlers to create predictable http client tests in Angular.

Configure a proxy with a proxy conf json and update the start script so the Angular development server routes API requests to the backend, avoiding host in code.

Explore jest-based tests for a signup form, setting up setupForm, counting API calls with a mock service worker, and validating a disabled button and spinner during progress.

Explore test driven development in Angular by implementing jest tests for sign up flow, including async UI updates, activation messages, and form visibility using find by and get by queries.

Learn to create reusable Angular alert and button components as shared building blocks, using inputs and content projection, and integrate dynamic text and API progress states in signup.

Refactor the sign up flow in Angular by creating a root-provided user service to handle HTTP requests, moving data access from the component to a dedicated service.

Apply a template-driven form in Angular using the forms module and ngModel for two-way binding, wiring user inputs to component properties and sending data to the backend.

Switch from template-driven to reactive forms by importing the reactive forms module, replacing text fields with form controls in a form group, binding via formControlName, and updating tests.

Implement client-side validations in the sign-up component by translating karma tests to jest tests, rendering the component, querying messages, and using user events to verify required and minimum length errors.

Apply bootstrap validation styling to form inputs in Angular using ng class and class binding to show invalid state and display error messages dynamically.

Validate email, username, and password fields using dynamic, parametric tests that loop over a data array of field, input value, and expected error messages.

Learn to implement required validation for email and password inputs in an Angular test-driven development approach, expanding the existing username validation to ensure non-empty fields.

Add required validation for email and password in an Angular form, wiring validators array, email form control, and password form control, with error messages and is-invalid styling.

Implement cross-field validation in an Angular signup form with a custom validator that compares password and password repeat, wiring it to the form group and showing a password mismatch error.

Implement cross-field validation with Jest tests by filling the form, testing password and repeat password, and validating a password mismatch error, then confirm all tests pass.

Implement asynchronous email validation in angular using a unique email validator, inject a user service, call the backend to verify email availability, and display 'email in use' errors.

Explore async validation in Angular with test driven development by applying jest tests to simulate API endpoints and validate unique email checks.

Learn how to handle backend validation in Angular with test driven development, displaying server-side errors like email already in use and reflecting them in the form UI.

Leverage mock service worker to simulate backend validation errors in an Angular sign-up flow. Override rest post handlers and reset them to ensure isolation when handling email in use.

Modify the button enable logic in Angular with test-driven development to enable the signup submit button only when all fields—username, email, password, and password repeat—are valid.

Handle sign up validation errors and spinner behavior on the submit button, update API progress in error cases, and ensure the button re-enables after backend validation issues are resolved.

Learn to implement client-side routing in Angular with the built-in router, configuring a dedicated router module and routes for sign up and home, then render components via a router outlet.

Explore client-side routing in Angular by testing the app component with router testing module, navigating to home and sign-up pages, and validating elements with data test IDs.

Learn to implement Jest tests for client-side routing in an angular app, testing home and sign-up pages with the angular testing library, navigation, modules, and test setup.

Add two new pages to the Angular app—login and a dynamic user page—where the URL path after /user renders the corresponding user page, as practice for the course project.

Implement a navigation bar with router links, test anchors and navigation flows, ensuring state persists across pages and avoid full app reloads.

Add jest tests for the nav bar in angular with tdd, validating home, sign up, and login links via role queries and user events to ensure proper navigation.

Build a Bootstrap-styled Angular navbar with left home and right signup login, using a shared nav component, router links, and an accessible brand image.

Develop a dynamic account activation flow in Angular with test driven development, adding sign-up, a token-based activation page, router integration, and tests to verify navigation.

Activate user accounts by reading the activation token from the URL via activated route, subscribing to route params to obtain the id, and sending the token to the backend.

Learn how to work with observables in Angular: subscribe to data streams, publish values, and manage next, error, and complete using pipe, map, and take.

Add and test account activation flow with an activation API call, using activated route params and the http client testing module; display success or failure alerts based on response.

Test the activation component’s api call to the backend using mock service worker in angular, with msw rest post handler for the activation endpoint. Validate success and failure messages.

Learn to show a progress indicator during an asynchronous activation request in Angular by adding a spinner controlled by in-progress status, updating tests, and validating user interface feedback.

Demonstrates test driven development in angular by validating a progress indicator spinner during activation API calls and its removal after activation failure with jest tests.

Develop a paginated user list in Angular using test-driven development, loading users from a backend endpoint and displaying them on the home page with Bootstrap styling.

Angular with test driven development, implement next and previous page navigation, handle page parameters, conditionally show buttons, and refactor to a single load data function.

Explore implementing and testing next and previous page navigation in an Angular app using Jest, including user interface rendering, api call synchronization, and test helper for pagination tests.

Style next and previous buttons with bootstrap card footers, apply outline secondary styles, and display a centered spinner during API calls, hiding navigation while loading.

Add a Jest test to verify the spinner appears during the API call and disappears once the user list loads, ensuring correct async behavior in Angular.

Learn to add a clickable user list that navigates to a dynamic user page using Angular routing or programmatic navigation, and test flow with fake async and HTTP testing controller.

Create Jest tests that navigate to a user's page by clicking the username in the user list. Simulate the API call to fetch users and verify the user page opens.

Build a user page in Angular with test-driven development, fetch user data from the backend, show a loading spinner, and display a profile card with a default image and username.

practice building a login form with email and password inputs, a header, and a disabled-to-enabled submit button, then handle backend errors with a spinner and error message.

Angular with test driven development, the lecture shows adding Jest tests for the login page, importing the forms module, wiring the login component, and validating authentication flows.

Implement template-driven validation for login fields, enforcing email and password requirements and showing errors, and tie the login button to validity via view child form controls.

Learn how Jest tests validate a sign up component in Angular with test driven development. Cover email format, required fields, form setup, rendering, and button enablement based on validity.

Develop and validate authentication UI with jest tests by simulating user input on email and password fields, ensuring the authentication failure message clears when inputs change.

Learn to implement the authentication success route by redirecting from login to the home page after login, using the app component routing, a setup form with credentials, and router testing.

Write a Jest routing test that verifies a successful login redirects to the home page, and add a rest post handler returning 200 with id and username for authentication.

Learn to implement a login state in an Angular app by building an authentication service, updating the navigation bar to hide login and signup, and adding a profile link.

Improve jest tests for the logged-in layout in angular, simplify setup, verify login and sign-up links disappear after login, and ensure my profile navigation and user page render.

Persist login state across reloads by storing authentication data in local storage and initializing the app from storage. Practice building and testing this flow with controlled setup and cleanup.

Practice testing local storage in Angular with Jest by clearing storage after each test, storing login state, and validating the logged-in layout and my profile link.

Demonstrate Jest tests for the logout feature by checking logout link visibility before and after login, performing logout, clearing storage, and validating backend logout requests with a mock service worker.