Angular Web Framework Testing & Debugging 3 — Questions and Answers
Question 1: What is the role of `HttpTestingController` in Angular testing?
- It intercepts HTTP requests and allows asserting their parameters and flushing responses (Correct answer)
- It mocks the router navigation during tests
- It replaces the entire HttpClient with a no-op stub
- It validates HTTP headers on outgoing API calls
Correct answer: It intercepts HTTP requests and allows asserting their parameters and flushing responses
HttpTestingController lets tests verify that specific HTTP requests were made and manually control the responses returned to the service under test.
Question 2: In Protractor or Cypress E2E tests for Angular, what does waiting for Angular's stability mean?
- Waiting until all pending HTTP requests and asynchronous tasks in Angular's zone have completed (Correct answer)
- Waiting for the browser to reach 100% CPU idle
- Waiting for all animations to finish before taking a screenshot
- Waiting until the JavaScript bundle has fully parsed
Correct answer: Waiting until all pending HTTP requests and asynchronous tasks in Angular's zone have completed
Angular stability means Zone.js has no pending microtasks or macrotasks, ensuring the DOM is in a settled state before assertions run.
Question 3: Which Jasmine function is used to set up shared initialization code that runs before each test in a describe block?
- beforeEach() (Correct answer)
- beforeAll()
- setup()
- init()
Correct answer: beforeEach()
beforeEach() runs its callback before every it() block in its enclosing describe, making it ideal for resetting state between tests.
Question 4: What does calling `fixture.nativeElement.querySelector('.my-class')` return in a component test?
- The DOM element matching the CSS selector within the component's rendered template (Correct answer)
- An Angular DebugElement wrapper
- A promise that resolves to the element
- The component class instance
Correct answer: The DOM element matching the CSS selector within the component's rendered template
fixture.nativeElement is the real DOM element of the component's host, so querySelector returns the matching native DOM node.
Question 5: In Angular testing, what is the difference between `DebugElement.query()` and `DebugElement.queryAll()`?
- query() returns the first matching DebugElement; queryAll() returns an array of all matches (Correct answer)
- query() searches only direct children; queryAll() searches all descendants
- query() is synchronous; queryAll() returns a Promise
- query() uses CSS selectors; queryAll() uses XPath
Correct answer: query() returns the first matching DebugElement; queryAll() returns an array of all matches
query() finds the first DebugElement matching a predicate (like By.css()), while queryAll() returns every matching DebugElement in the subtree.
Question 6: Which Angular debugging tool lets you inspect a component's state directly from the browser's DevTools console?
- ng.getComponent(element) (Correct answer)
- Angular.inspect(element)
- debugComponent(element)
- window.angularDebug(element)
Correct answer: ng.getComponent(element)
ng.getComponent($0) retrieves the component instance attached to the selected DOM element, allowing direct property inspection in the console.
Question 7: What is the purpose of `jasmine.createSpyObj()` in Angular unit tests?
- It creates a mock object with multiple named spy methods in one call (Correct answer)
- It creates a full deep clone of an Angular service
- It generates type-safe stubs from TypeScript interfaces
- It registers a spy that tracks all property accesses
Correct answer: It creates a mock object with multiple named spy methods in one call
jasmine.createSpyObj('ServiceName', ['method1', 'method2']) returns an object where each listed method is already a Jasmine spy, simplifying dependency mocking.
Angular Web Framework Testing & Debugging 3
What is the role of `HttpTestingController` in Angular testing?