Component tests should exercise user-visible behavior and relevant framework integration. Assertions against private implementation details make refactoring harder.
Before you start
You should understand a component’s class, template and dependencies. Follow both the framework lifecycle and the ownership of each value or resource. Apply examples inside an Angular application; the surrounding application configuration and imports depend on the feature being demonstrated.
The practical goal is to reason through this situation: Enter an invalid value, submit and verify the error and prevented request. Read the walkthrough first, then try the interview exercise before opening its answer. The important part is explaining the decision and its consequences, rather than remembering a definition alone.
Step-by-step walkthrough
Step 1: State the user-visible requirement
An invalid submission should show an error and avoid the request. A loading failure should make retry possible.
Step 2: Control the dependency
Provide an asynchronous test adapter so loading, resolution and rejection can be observed deterministically.
Step 3: Exercise template integration
Enter values and activate controls through the rendered interface. Check accessible feedback rather than only private fields.
Worked scenario
Enter an invalid value, submit and verify the error and prevented request.
Start with a valid value, submit and hold the request pending. Assert loading feedback and duplicate-submit prevention. Reject the request, verify the error message and enabled retry control, then resolve the retry successfully. This sequence proves an actual state transition; component construction alone cannot reveal broken bindings or recovery behavior.
Common mistake
A test that merely instantiates the component does not verify binding, validation or accessibility.
Verify the behavior
Run the same sequence with invalid input and confirm zero adapter calls. Keep selectors tied to roles or labels where possible.
Interview exercise
Test a loading-to-error transition.
Answer and reasoning
Control the asynchronous dependency, observe loading, reject it and assert the recoverable error state and enabled retry action.
Continue learning
Compare the scenario with the Angular interview questions and test your understanding with the Angular MCQs. For terminology and implementation details, consult the reference material.