Angular Web Framework Angular Professional Development 5 — Questions and Answers
Question 1: Which Angular testing utility is used to create a testing module environment for unit testing a component?
- ComponentFixture
- TestBed (Correct answer)
- DebugElement
- SpyOn
Correct answer: TestBed
`TestBed.configureTestingModule()` sets up a miniature Angular module for testing, configuring declarations, imports, and providers.
Question 2: In Angular, what is the difference between `fakeAsync` and `async` test utilities?
- `fakeAsync` uses real timers; `async` uses fake timers
- `fakeAsync` uses fake timers controllable with `tick()`; `async` awaits real promises (Correct answer)
- `fakeAsync` only works with Observables; `async` works with Promises
- `fakeAsync` requires Zone.js; `async` removes Zone.js dependency
Correct answer: `fakeAsync` uses fake timers controllable with `tick()`; `async` awaits real promises
`fakeAsync` replaces the browser timer with a simulated clock you advance via `tick()`, while `async` waits for actual asynchronous operations to complete.
Question 3: What does the `RouterTestingHarness` utility (Angular 15+) simplify in component tests?
- Mocking all router guards automatically
- Navigating to a route and retrieving the rendered component without a real browser (Correct answer)
- Generating router configuration from component metadata
- Injecting ActivatedRoute snapshot data into specs
Correct answer: Navigating to a route and retrieving the rendered component without a real browser
`RouterTestingHarness` provides a simple API to navigate to routes in tests and access the routed component, eliminating manual router setup boilerplate.
Question 4: In an Angular monorepo with Nx, what is a `buildable` library's main benefit over a regular Nx library?
- It can be deployed independently as a microservice
- It generates its own compilable output, enabling incremental builds and build caching (Correct answer)
- It automatically publishes to npm on every CI run
- It bundles all dependencies into a single self-contained file
Correct answer: It generates its own compilable output, enabling incremental builds and build caching
A buildable Nx library compiles to its own `dist` output, allowing the build cache to skip recompiling it when nothing has changed.
Question 5: Which Angular animation state transition syntax triggers an animation whenever an element enters the DOM?
- :enter
- void => *
- * => void
- Both ':enter' and 'void => *' are equivalent (Correct answer)
Correct answer: Both ':enter' and 'void => *' are equivalent
`:enter` is an alias for `void => *`, both representing the state transition when an element is inserted into the DOM.
Question 6: What is the recommended approach for sharing state between sibling Angular components that are not in a parent-child relationship?
- Use @ViewChild to access the sibling's properties directly
- Emit events upward and pass data back down via Input bindings through the common parent
- Use a shared service with a BehaviorSubject or Signal to hold state (Correct answer)
- Rely on local storage for cross-component communication
Correct answer: Use a shared service with a BehaviorSubject or Signal to hold state
A singleton service holding a `BehaviorSubject` or `Signal` is the idiomatic Angular pattern for sharing reactive state across unrelated components.
Question 7: Which lifecycle hook should you use to clean up subscriptions and avoid memory leaks when a component is removed from the DOM?
- ngOnChanges
- ngAfterViewInit
- ngOnDestroy (Correct answer)
- ngDoCheck
Correct answer: ngOnDestroy
`ngOnDestroy` is called just before Angular destroys the component, making it the correct place to call `unsubscribe()` or complete subjects.
Angular Web Framework Angular Professional Development 5
Which Angular testing utility is used to create a testing module environment for unit testing a component?