Mocking child components and directives using the ng-mocks package
Unit tests mostly revolve around testing components, directives, pipes, or services in isolation. However, what if your component depends completely on another component or directive to work properly, especially in a non-standalone application/component? In such cases, you usually provide a mock implementation for the component, but that is a lot of work. However, with the ng-mocks
package, it is super-easy. In this recipe, we’ll learn an advanced example of how to use ng-mocks
for a parent component that depends on a child component to work properly.
Getting ready
The app that we are going to work with now resides in start/apps/chapter10/ng-test-ng-mocks
inside the cloned repository:
- Open the code repository in your code editor.
- Open the terminal, navigate to the code repository directory, and run the following command to serve the project:
...npm run serve ng-test-ng-mocks