Angular Web Framework Testing & Debugging 5 — Questions and Answers
Question 1: What Angular source map setting enables breakpoints in original TypeScript files when debugging in Chrome DevTools?
- sourceMap: true in angular.json build options (Correct answer)
- enableDebug: true in tsconfig.json
- devtool: 'inline-source-map' in webpack.config.js
- preserveSourceMap: true in tsconfig.app.json
Correct 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.
Question 2: Which RxJS testing utility provides a controlled, scriptable observable for testing complex async sequences?
- TestScheduler (Correct answer)
- Subject
- ReplaySubject
- AsyncObservable
Correct 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.
Question 3: In Angular, what does the Augury Chrome extension help you do during debugging?
- Visualize the component tree, router state, and injector dependencies at runtime (Correct answer)
- Run unit tests directly in the browser
- Profile memory allocations per component
- Replay recorded user sessions for debugging
Correct 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.
Question 4: When a test fails with 'ExpressionChangedAfterItHasBeenCheckedError', what is the typical root cause?
- A binding is updated after Angular has completed change detection for that cycle (Correct answer)
- An Observable emits more values than expected
- A component's ngOnInit is called twice
- A spy is returning undefined unexpectedly
Correct 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.
Question 5: What is the significance of `waitForAsync()` (formerly `async()`) in Angular testing when dealing with `ngOnInit` that contains Promises?
- It ensures the test waits for all Promises initiated in the component to resolve before assertions run (Correct answer)
- It prevents change detection from running until manually triggered
- It automatically retries failed assertions up to 5 times
- It runs the test in a separate Web Worker thread
Correct 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.
Question 6: Which Angular CLI command generates a new spec file alongside a component without creating a new component?
- ng generate component myComp --skip-tests=false (spec is generated by default) (Correct answer)
- ng generate spec myComp
- ng test --create myComp
- ng add spec --target=myComp
Correct 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.
Question 7: In Angular testing, what is a 'shallow' component test and why would you use it?
- A test that renders only the component under test without fully rendering child components, using CUSTOM_ELEMENTS_SCHEMA or stubs (Correct answer)
- A test that only checks the component's TypeScript class without rendering any template
- A test that uses a lightweight Karma configuration with fewer plugins
- A test that mocks all HTTP calls automatically
Correct 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.
Angular Web Framework Testing & Debugging 5
What Angular source map setting enables breakpoints in original TypeScript files when debugging in Chrome DevTools?