Sing me a Song

Unit, Integration, E2E

📋 Description

This project was meant to be a place where users can recommend and view music recommendations. The more recommendations a song receives, the better ranked it will be, increasing its possibility of being recommended to other users.

In this way, a test system was created to ensure the functioning of the API provided, as well as the frontend application. Checking in a unitary way the services functions, all route integration and the user experience on the website running.

---

✅ Tests

• Creation of a new recommendation
• Upvote e downvote any recommendation
• Get the latest recommendations
• Get a recommendation
• Get a random recommendation
• Get top recommendations

---

🗺️ Routes

POST /recommendations

    - Route to create a new song recommendation
    - The inputs 'name' and 'youtubeLink' must be filled in
    - The url must bellong to the youtube (regex pattern)

    - body:
        {
            "name": "Adele - I Drink Wine",
            "youtubeLink": "https://www.youtube.com/watch?v=LwXQ7WUh-D0"
        }

POST /recommendations/:id/upvote

    - Route to upvote a recommendation
    - id: Integer and is required
    - params: 2

POST /recommendations/:id/downvote

    - Route to downvote a recommendation
    - params: 2 (id)

GET /recommendations

    - Route to get the 10 more recent recommendations
    - response:
        [
            {
                "id": 1,
                "name": "Rihanna - Love On The Brain",
                "youtubeLink": "https://www.youtube.com/watch?v=QMP-o8WXSPM",
                "score": 344
            },
            {
                "id": 2,
                "name": "Mark Ronson - Uptown Funk (Official Video) ft. Bruno Mars",
                "youtubeLink": "https://www.youtube.com/watch?v=OPf0YbXqDm0",
                "score": 430
            },
            {
                "id": 3,
                "name": "Beyoncé - Pretty Hurts",
                "youtubeLink": "https://www.youtube.com/watch?v=LXXQLa-5n5w",
                "score": 740
            },
        ]

GET /recommendations/:id

    - Route to get a specific recommendation
    - params: 1
    - response:
            {
                "id": 1,
                "name": "Rihanna - Love On The Brain",
                "youtubeLink": "https://www.youtube.com/watch?v=QMP-o8WXSPM",
                "score": 344
            },

GET /recommendations

    - Route to get the 10 more recent recommendations
    - response:
        [
            {
                "id": 1,
                "name": "Rihanna - Love On The Brain",
                "youtubeLink": "https://www.youtube.com/watch?v=QMP-o8WXSPM",
                "score": 344
            },
            {
                "id": 2,
                "name": "Mark Ronson - Uptown Funk (Official Video) ft. Bruno Mars",
                "youtubeLink": "https://www.youtube.com/watch?v=OPf0YbXqDm0",
                "score": 430
            },
            {
                "id": 3,
                "name": "Beyoncé - Pretty Hurts",
                "youtubeLink": "https://www.youtube.com/watch?v=LXXQLa-5n5w",
                "score": 740
            },
        ]

GET /recommendations/random

    - Route to get a random recommendation
    - response:
            {
                "id": 8,
                "name": "Jovem Dionisio - ACORDA PEDRINHO",
                "youtubeLink": "https://www.youtube.com/watch?v=d-tx9D4a8dc",
                "score": 253
            }

GET /recommendations/top/:amount

    - Route to get a list with ranked recommendations
    - params: 3
    - response:
        [
            {
                "id": 3,
                "name": "Beyoncé - Pretty Hurts",
                "youtubeLink": "https://www.youtube.com/watch?v=LXXQLa-5n5w",
                "score": 740
            },
            {
                "id": 2,
                "name": "Mark Ronson - Uptown Funk (Official Video) ft. Bruno Mars",
                "youtubeLink": "https://www.youtube.com/watch?v=OPf0YbXqDm0",
                "score": 430
            },
            {
                "id": 1,
                "name": "Rihanna - Love On The Brain",
                "youtubeLink": "https://www.youtube.com/watch?v=QMP-o8WXSPM",
                "score": 344
            },
        ]

$~$

🚀 Runnig this Project Locally

This project was inicialized with Create React App, so ensure you have so make sure you have the latest stable version of Node.js e npm runnig locally. You will also need to install postgres to set the database.

First of all, clone this project

    https://github.com/GabrielaTiago/Sing-me-a-Song-TESTS.git

Then, go to the project directory

    cd Sing-me-a-Song---TESTS

$~$

In the backend side

Enter the BACKEND folder

    cd BACKEND

Run the following command to install the dependencies.

    npm install

Create a .env and a .env.test file in the root of the project with the following data. The prisma command will automatically generate the database.

⚠️ Warnnig: The 'DATABASEURL' must contain _your personal postegres data to run properly.

.env

    PORT=5000
    DATABASE_URL="postgres://[YourUserName]:[YourPassword]@[YourHostname]:5432/[YourDatabaseName]";

.env.test

    PORT=5000
    DATABASE_URL="postgres://[YourUserName]:[YourPassword]@[YourHostname]:5432/[YourDatabaseName_test]";

Generates the database and generates its migrations

    npx prisma generate && npx prisma migrate dev

To start the server, run the command

    npm run start

To see all tests

    npm run test

End to end (E2E) tests

    npm run E2E

Integration tests

    npm run test:integration

Unit tests

    npm run test:unit

In the frontend side

Enter the FRONTEND folder

    cd FRONTEND

Run the following command to install the dependencies.

    npm install

Create a .env file in the root of the project with the following data.

.env

    REACT_APP_API_BASE_URL=http://localhost:5000

Then build the project

    npm run build

To start the server, run the command

    npm run start

Start the cypress

    npx cypress open

After opening cypress :

• Click on E2E Testing in cypress environment;
• Click on the option Electron

🛑 Atention: For the tests with cypress E2E to work properly, you should keep the server on the backend running, parallel to the frontend.

$~$

---

📚 Lessons Learned

• Use of tests frameworks : Jest and Cypress
• Unit tests
• Integration tests
• E2E tests
• Mock data
• Create scripts
• Create commands
• Markup language: Markdown $~$

---

💡 Acknowledgements

• Commit Patterns
• Badges for Github
• README inspiration 1
• README inspiration 2

$~$

---

👩‍🦱 Author

• Gabriela Tiago is a fullstack web development student at Driven Education. Walking the path of knowledge in search of improving her technical skills and softskills, so she can improve the work she develops.

🔝 Back to top