added rankings test and removed duplicated code

users/userservice/user-service.test.js

@@ -97,43 +97,19 @@ describe('User Service', () => {
     expect(response.body);
   });
 
-  it("should show users' ranking for global stats", async () => {
+  it("should show users' ranking for <category> stats", async () => {
     const response = await request(app).get('/rankings/global');
     expect(response.status).toBe(200);
     expect(response.body);
   });
 
-  it("should show users' ranking for foods category", async () => {
-    const response = await request(app).get('/rankings/foods');
-    expect(response.status).toBe(200);
-    expect(response.body);
-  });
-
-  it("should show users' ranking for attractions category", async () => {
-    const response = await request(app).get('/rankings/tourist_attractions');
-    expect(response.status).toBe(200);
-    expect(response.body);
-  });
-
-  it("should show users' ranking for monuments category", async () => {
-    const response = await request(app).get('/rankings/monuments');
-    expect(response.status).toBe(200);
-    expect(response.body);
-  });
-
-  it("should show users' ranking for cities category", async () => {
-    const response = await request(app).get('/rankings/cities');
-    expect(response.status).toBe(200);
-    expect(response.body);
-  });
-
   it("shouldn't show users' ranking for a category that doesn't exist" , async () => {
-    const response = await request(app).get('/rankings/reyesmagos');
-    expect(response.status).toBe(400);
+    const res = await request(app).get('/rankings/reyesmagos');
+    expect(res.status).toBe(400);
   });
 
   it("shouldn't show users' ranking for an empty category" , async () => {
-    const response = await request(app).get('/rankings/');
-    expect(response.status).toBe(404);
+    const res = await request(app).get('/rankings/');
+    expect(res.status).toBe(404);
   });
 });

webapp/src/components/ranking/Ranking.test.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import RankingLayout from './RankingLayout';
+import { useState } from 'react';
+import { jest } from '@jest/globals';
+
+describe('Ranking page', () => {
+    it ('should render the global ranking when entering Rankings page', async () => {
+        render(<RankingLayout />);
+        const category = screen.getAllByText(/global/i);
+        expect(category.length).toBe(2);
+    });
+
+    it ('should render the <category> ranking when changed the useState', async () => {
+        const categoryMock = 'global';
+        const setCategoryMock = jest.fn();
+
+        React.useState = jest.fn().mockReturnValue([categoryMock, setCategoryMock])
+
+        render(<RankingLayout />);
+
+        setCategoryMock.mockImplementation(newValue => newValue('cities'));
+        const citiesButton = screen.getByRole('button', { name: /Cities/i });
+        fireEvent.click(citiesButton);
+
+        const category = screen.getAllByText(/cities/i);
+        expect(category.length).toBe(2);
+    })
+})

webapp/src/components/ranking/RankingTable.jsx

@@ -20,7 +20,7 @@ const RankingsTable = ({ filter }) => {
       }, [filter]);
 
     return (
-        <div className="flex flex-col">
+        <div data-testid='ranking-table' className="flex flex-col">
           <div className="overflow-x-auto sm:mx-6 lg:mx-8">
             <div className="py-2 inline-block min-w-full sm:px-6 lg:px-8">
               <div className="overflow-hidden">