Testing & Debugging Flashcards
7 cards from real Angular Web Framework practice questions. Tap to flip, then mark Knew It or Still Learning — missed cards come back until you master them.
Read the first 7 Testing & Debugging flashcards as text
What Angular source map setting enables breakpoints in original TypeScript files when debugging in Chrome DevTools?
Answer: sourceMap: true in angular.json build options
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.
Which RxJS testing utility provides a controlled, scriptable observable for testing complex async sequences?
Answer: TestScheduler
RxJS TestScheduler lets you write marble tests that define the timing of emitted values and errors, making time-based observable logic fully deterministic.
In Angular, what does the Augury Chrome extension help you do during debugging?
Answer: Visualize the component tree, router state, and injector dependencies at runtime
Augury provides a DevTools panel that displays the live Angular component tree, inputs/outputs, router outlet state, and the dependency injector graph.
When a test fails with 'ExpressionChangedAfterItHasBeenCheckedError', what is the typical root cause?
Answer: A binding is updated after Angular has completed change detection for that cycle
This error occurs in development mode when Angular detects that a bound value changed between the initial change detection pass and its verification pass.
What is the significance of `waitForAsync()` (formerly `async()`) in Angular testing when dealing with `ngOnInit` that contains Promises?
Answer: It ensures the test waits for all Promises initiated in the component to resolve before assertions run
waitForAsync() wraps the test in a special zone that tracks pending Promises, so the test framework waits for them to settle before evaluating expectations.
Which Angular CLI command generates a new spec file alongside a component without creating a new component?
Answer: ng generate component myComp --skip-tests=false (spec is generated by default)
By default, ng generate component creates a .spec.ts file; using --skip-tests=true omits it, so to ensure spec generation omit the skip flag.
In Angular testing, what is a 'shallow' component test and why would you use it?
Answer: A test that renders only the component under test without fully rendering child components, using CUSTOM_ELEMENTS_SCHEMA or stubs
Shallow testing isolates the component under test by replacing child components with stubs or ignoring unknown elements, reducing test setup complexity and coupling.