Angular Web Framework Testing & Debugging 5

Question 1

What Angular source map setting enables breakpoints in original TypeScript files when debugging in Chrome DevTools?

Accepted Answer

sourceMap: true in angular.json build options

Answer

Setting sourceMap: true in the build options of angular.json generates .map files that map compiled JavaScript back to original TypeScript, enabling TypeScript-level breakpoints.

Question 2

Which RxJS testing utility provides a controlled, scriptable observable for testing complex async sequences?

Accepted Answer

TestScheduler

Answer

RxJS TestScheduler lets you write marble tests that define the timing of emitted values and errors, making time-based observable logic fully deterministic.

Question 3

In Angular, what does the Augury Chrome extension help you do during debugging?

Accepted Answer

Visualize the component tree, router state, and injector dependencies at runtime

Answer

Augury provides a DevTools panel that displays the live Angular component tree, inputs/outputs, router outlet state, and the dependency injector graph.

Question 4

When a test fails with 'ExpressionChangedAfterItHasBeenCheckedError', what is the typical root cause?

Accepted Answer

A binding is updated after Angular has completed change detection for that cycle

Answer

This error occurs in development mode when Angular detects that a bound value changed between the initial change detection pass and its verification pass.

Question 5

What is the significance of `waitForAsync()` (formerly `async()`) in Angular testing when dealing with `ngOnInit` that contains Promises?

Accepted Answer

It ensures the test waits for all Promises initiated in the component to resolve before assertions run

Answer

waitForAsync() wraps the test in a special zone that tracks pending Promises, so the test framework waits for them to settle before evaluating expectations.

Angular Web Framework Practice Test

Angular Web Framework Practice Test

Angular Web Framework Testing & Debugging 5