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 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.

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.

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.

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.

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.

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.

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.

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.

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.

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 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.

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.

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.