Unit Testing in Angular

Explore the Task Manager app as the foundation for unit testing in Angular, illustrating how adding tasks and marking them complete updates the UI, styles, and task list.

Set up your Angular testing project by cloning from GitHub or creating a new app in VS Code, then run ng test and explore describe, beforeEach, and it.

Explore the spec.ts testing file structure in Angular unit testing with Jasmine and Karma, covering include patterns, dot spec ts files, and testing components and services.

Learn how to write unit tests for an Angular service using Jasmine describe and it blocks, test methods like add, subtract, and divide, and ensure proper service instantiation and coverage.

Demonstrates unit testing in Angular by validating subtraction, division, and error handling, including division by zero, and shows using fdescribe and beforeEach for reliable tests.

See how beforeEach in Jasmine creates a new math service before each test, eliminating repeated setup, and allows add and subtract to be tested across cases.

Master Jasmine lifecycle hooks in Angular unit tests—after each, before all, and after all—while validating a math service’s add, subtract, and divide methods.

Learn how code coverage measures what your unit tests cover in an Angular app. Generate a detailed report, identify untested code, and improve reliability and maintainability.

Explore the Angular app's code structure, including task form, list, and item components, and see how models, services, and inputs/outputs connect to render and manage tasks.

Explore component testing of the task item component in Angular using TestBed, async, and await to initialize, test input/output, and verify the toggle completion emits the task id.

Learn how to test an Angular component's @Input() by mocking a task object, assigning it to the component, triggering changes, and asserting the input is received correctly.

Learn to test an Angular @Output() event by spying on the toggle emitter with Jasmine's spyOn, using a mock task to verify the toggle completion emits the correct task id.

Explore advanced angular form testing by validating a task form component, including add task flows and async behaviors like settimeout and async/await, plus jasmine spy service interactions.

This lecture demonstrates Angular unit tests that ensure the add task button is disabled when both inputs are empty and no task is added.

This unit demonstrates testing an Angular component's ngOnInit by loading tasks through a task service observable, using a mock service and verifying task$ emits the expected mock tasks.

Learn how to create a custom highlight directive in Angular that changes an element's background color on hover using a color input, host listeners, and applying it across the app.

Demonstrate testing the highlight directive by simulating mouse enter and mouse leave to verify light blue background and return to null, using Angular test bed and fixtures.

Create a custom Angular pipe named exclamation that appends exclamation marks to text, configurable by a count, and unit test the pipe in an Angular module and component.

Learn to test the angular exclamation pipe with unit tests, validating default and count-based exclamations by writing and importing the pipe in the spec.