Angular Web Framework Testing & Debugging 4 — Questions and Answers
Question 1: When using `async/await` in an Angular test instead of `fakeAsync`, what function must wrap the test callback?
- async() from @angular/core/testing (Correct answer)
- Promise.resolve()
- zone.run()
- TestBed.async()
Correct answer: async() from @angular/core/testing
The async() utility from @angular/core/testing patches the test zone so Angular knows to wait for all asynchronous operations before completing the test.
Question 2: What does `TestBed.overrideComponent()` allow you to do in Angular tests?
- Replace a component's metadata (template, providers, styles) after TestBed has been configured (Correct answer)
- Swap out an entire component for a stub component globally
- Override the change detection strategy for all tests
- Mock the component's constructor injection tokens
Correct answer: Replace a component's metadata (template, providers, styles) after TestBed has been configured
TestBed.overrideComponent() modifies a component's template or providers at test time without redefining the entire TestBed configuration.
Question 3: In Angular E2E testing with Cypress, what is the recommended way to interact with Angular-specific elements like mat-select?
- Trigger native DOM events and use cy.get() with accessible selectors or data-cy attributes (Correct answer)
- Use Angular's TestBed API inside Cypress commands
- Import Angular Material test harnesses into Cypress
- Use Protractor's Angular-aware waitForAngular helper
Correct answer: Trigger native DOM events and use cy.get() with accessible selectors or data-cy attributes
Cypress works at the browser DOM level, so triggering native events on accessible selectors or data-cy attributes is the reliable, Angular-agnostic approach.
Question 4: Which Angular CDK testing utility provides a unified API for interacting with Angular Material components in tests?
- Component Test Harnesses (HarnessLoader) (Correct answer)
- MaterialTestModule
- CdkTestingModule
- MatTestBed
Correct answer: Component Test Harnesses (HarnessLoader)
Angular CDK's HarnessLoader provides Component Test Harnesses — stable, semantic APIs for interacting with Material components in both unit and E2E tests.
Question 5: What error does Angular throw during testing when you forget to import a module that provides a required pipe?
- 'The pipe X could not be found' (Correct answer)
- 'NullInjectorError: No provider for X'
- 'Module X is not defined'
- 'Unknown token X in compilation'
Correct answer: 'The pipe X could not be found'
Angular throws a template parse error stating the pipe cannot be found if the module declaring it isn't imported in the TestBed configuration.
Question 6: In Angular unit tests, what does `spyOn(service, 'methodName').and.callThrough()` do?
- Wraps the real method with a spy so both the original implementation runs and calls are recorded (Correct answer)
- Replaces the method with a no-op and records invocations
- Calls the method once and then disables further calls
- Clones the method to a backup before replacing it
Correct answer: Wraps the real method with a spy so both the original implementation runs and calls are recorded
callThrough() lets the original function execute while the spy still tracks how many times it was called and with what arguments.
Question 7: What is the purpose of the `--code-coverage` flag in `ng test`?
- It generates a coverage report showing which lines and branches are exercised by tests (Correct answer)
- It enforces a minimum test pass rate before the build continues
- It runs tests in headless mode only
- It outputs a JSON file of all test results for CI parsing
Correct answer: It generates a coverage report showing which lines and branches are exercised by tests
Passing --code-coverage instructs Istanbul/NYC to instrument the source and produce an HTML/JSON coverage report under the coverage/ directory.
Angular Web Framework Testing & Debugging 4
When using `async/await` in an Angular test instead of `fakeAsync`, what function must wrap the test callback?