Component testing basics in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the main goal of component testing in Angular?

To check if an Angular component works correctly by testing its template, class logic, and interaction with inputs and outputs.

beginner

Which Angular testing utility is commonly used to create a test environment for a component?

TestBed is used to configure and create a testing module that mimics an Angular module for the component under test.

intermediate

Why do we use fixture.detectChanges() in Angular component tests?

It triggers Angular's change detection to update the component's template with the latest data and state before assertions.

intermediate

How can you test an @Input property in an Angular component test?

Set the input property directly on the component instance in the test, then call fixture.detectChanges() to update the view.

intermediate

What is the purpose of mocking services in Angular component tests?

To isolate the component by replacing real services with fake ones, so tests focus only on the component's behavior without external dependencies.

Which Angular testing tool helps create a test module for a component?

A HttpClient

B Router

C NgModule

D TestBed

TestBed sets up a testing environment similar to an Angular module for the component.

What does fixture.detectChanges() do in a component test?

A Creates a new component instance

B Runs change detection to update the template

C Mocks a service

D Clears the test environment

It triggers Angular's change detection to refresh the component's view.

How do you test an @Output event in Angular component testing?

A Subscribe to the event emitter and trigger the event

B Set the @Output property directly

C Call <code>fixture.detectChanges()</code> only

D Mock the component

You subscribe to the event emitter and simulate the event to check if it emits correctly.

Why mock services in component tests?

A To isolate the component and avoid real dependencies

B To speed up the Angular compiler

C To test the service itself

D To change component styles

Mocking services isolates the component so tests focus on its logic only.

Which lifecycle hook is usually called automatically during fixture.detectChanges()?

A ngAfterViewChecked

B ngOnDestroy

C ngOnInit

D ngDoCheck

ngOnInit runs when Angular initializes the component, triggered during change detection.

Explain the steps to set up and run a basic Angular component test.

Think about how you prepare the component and check its output.

Describe how to test an Angular component's input and output properties.

Focus on how data flows in and out of the component.