📌 Table of Contents

• About
• Technologies
• Installation
• How to Run
• Automated Tests
  • Run tests
  • Generate reports

About

This project was made during Next Level Week event, held by Rocketseat.

Happy is a web application to find and visit orphanages nearby to make a child's day very happy!

Landing Page

Map Page

Details Page

Create new orphanage Page

💻 Technologies

This project was made using the following techologies:

• HTML5
• CSS3
• React
• Node
• TypeScript
• Cypress

⏬ Installation

Clone repository:

$ git clone https://github.com/rebecaferreira/happy.git

Install dependencies:

# Go to backend folder
$ cd backend

# Install dependencies
$ yarn install

# Go to frontend folder
$ cd frontend

# Install dependencies
$ yarn install

▶️ How to Run

Run server and client:

# Go to backend folder
$ cd backend

# Run server
$ yarn dev

# Go to frontend folder
$ cd frontend

# Run client
$ yarn start

Access application on http://localhost:3000/

🤖 Automated Tests

The test automation framework used in this project was Cypress

Cypress is a JavaScript end to end testing framework, and is most often compared to Selenium; however Cypress is both fundamentally and architecturally different. Cypress is not constrained by the same restrictions as Selenium. This enables you to write faster, easier and more reliable tests.

After you started the application, you can run the automated tests!

# Go to frontend folder
$ cd frontend

# Open Cypress
$ yarn cy:open

Run Tests ⏩

You can run your tests by using the Cypress test runner, or in headless mode.

#Headless mode
$ yarn cy:run

GIF of tests being executed:

Generate Reports 📝

The report generator used in this project was Mochawesome. All reports go to a folder called mochawesome-report inside Cypress folder.

To generate a test report, you must run a test (or tests) first. Then:

#Merge all reports in one file (index.json)
$ yarn report:merge

#Generate report html
$ yarn report:mocha

#If you want to delete all reports, run:
$ yarn report:clean