Testing Input Output

Angular Challenges #19 Input / Output Testing

Built With

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

Directions

We have a small counter application that increment or decrement a number.

The goal is to test CounterComponent with Testing library and Cypress.

Thoughts

• I tried to use componentProperties for the output test but I don't think it is possible.
• You get errors Property 'toHaveTextContent' does not exist on type 'Assertion' etc after you write cypress tests.
• Both tests still work -> seems like vscode gets confused ?

How to Use

git clone https://github.com/jdegand/testing-input-output.git

# cd into the directory
npm install

# Jest 

npm test

# Jest with Coverage

npm run test:coverage

# Cypress

npm run cypress:open

Useful Resources

• Angular Testing Library - angular testing library counter example
• YouTube - I bet you can write an Angular UNIT TEST after this video
• Stack Overflow - checking text appears inside an element using react testing library
• Stack Overflow - how do i test a jest console.log
• Stack Overflow - angular unit test that a component's output is not emitted
• Stack Overflow - how to unit test an angular output
• Stack Overflow - testing that a component method calls another method
• Github - input output spec example from angular testing library
• Blog - mocking javascript class inner functions with jest
• Cypress Docs - angular api
• Cypress Docs - angular examples