Testing Nested

Angular Challenges #18 Nested Comp Testing

Built With

• Angular
• Angular CLI version 16.2.0.
• Testing Library Angular
• Jest
• Cypress

Directions

We have a small application that sends a title to a fake backend when you type inside a input. If the title is correctly typed, the request is sent otherwise you get a nice error and the request is not sent.

Thoughts

• The ChildComponent is really the parent component of many other components. To test nested components, you primarily the test the nested component's functionality in its' parent component.
• I looked at different ways of mocking the HttpService. Check useful resources.
• My solution is basically matches this Angular Testing Library Component Provider example.
• Looking at the solution, it could possibly be outdated.
• createMockWithValues seems to be a newer method - search results for it are limited.
• Code coverage is not 100% when you just test that the method has been called.
• I tested Thomas' solution and his code coverage matched mine.
• Is it a bad practice to use toHaveBeenCalledTimes(0) ?

How to Use

git clone https://github.com/jdegand/testing-nested.git

# cd into the directory
npm install

# Jest 

npm test

# Jest with Coverage

npm run test:coverage

# Cypress

npm run cypress:open

Useful Resources

• Github - angular testing library example with component provider
• snyk - jest utils createMock
• blog - angular jest testing library
• Github - source code of the blog example above
• Stack Overflow - check if an error has been written to the console
• Cypress Docs - how do I spy on console.log?
• YouTube - Spying On The Console Log Method