Angular Challenges #19 Input / Output Testing

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

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

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

• 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 ?

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

• 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