<p align='center'>
  <img src='./logo/angular-challenge.png' height="150px"/>
</p>

<p align='center' style='font-weight:bold'>Collection of Angular TESTING challenges</p>

<br>

## Intro

This project has been created with two purposes:

- The first purpose is to assist you in becoming better at Testing using **Testing Library** and **Cypress Component Testing**. 💪
- The second purpose is to share best practices and different implementations of the same problem to gain diverse perspectives. 📖

Thanks to all these challenges, you will learn how to create **Integration Tests** to test your UI. The goal is to test your component/application as a black box, just as an end user or developer would do.

> **Learning by reading is good but learning by doing is better.**

## Testing Challenges

> Click the following badges to join your next challenge.
>
> <img src="https://img.shields.io/badge/Easy--green" alt="Easy challenge"/>
> <img src="https://img.shields.io/badge/Intermediate--orange" alt="Easy challenge"/>
> <img src="https://img.shields.io/badge/Advanced--red" alt="Easy challenge"/>

</br>
<img src="https://img.shields.io/badge/Testing--gray" alt="testing"/>

<span style="display:flex;gap: 5px"><a href="./apps/testing-router-outlet/README.md"><img src="https://img.shields.io/badge/17-Router Testing-orange" alt="router outlet Testing"/></a>Testing a small application with a router</span>
<span style="display:flex;gap: 5px"><a href="./apps/testing-nested/README.md"><img src="https://img.shields.io/badge/18-Nested Comp Testing-orange" alt="nested component Testing"/></a> Testing a parent component with Child components</span>
<span style="display:flex;gap: 5px"><a href="./apps/testing-input-output/README.md"><img src="https://img.shields.io/badge/19-Input Output Testing-orange" alt="input output Testing"/></a>Testing a presentational component by setting Inputs and listening to the Outputs</span>
<span style="display:flex;gap: 5px"><a href="./apps/testing-modal/README.md"><img src="https://img.shields.io/badge/20-Modal Testing-orange" alt="modal Testing"/></a>Testing a modal</span>
<span style="display:flex;gap: 5px"><a href="./apps/testing-harness/README.md"><img src="https://img.shields.io/badge/23-Harness Testing-green" alt="harness Testing"/></a>Testing using Component Harnesses</span>
<span style="display:flex;gap: 5px"><a href="./apps/create-harness/README.md"><img src="https://img.shields.io/badge/24-Create Harness-orange" alt="Create harness"/></a>Creating a custom Component Harness and Testing your application by using this harness</span>
<span style="display:flex;gap: 5px"><a href="./apps/testing-checkbox/README.md"><img src="https://img.shields.io/badge/28-Checkbox Testing-green" alt="Test a simple checkbox"/></a>Testing a very simple checkbox</span>
<span style="display:flex;gap: 5px"><a href="./apps/testing-todos-list/README.md"><img src="https://img.shields.io/badge/29-Real application Testing-red" alt="Test a real application"/></a>Testing a real-life application by creating test double on Http request and handling all asynchronous part</span>
