From 93c98671955288588e04497da02f9be846762c0d Mon Sep 17 00:00:00 2001
From: adrian <uo287621@uniovi.es>
Date: Mon, 8 Apr 2024 02:04:27 +0200
Subject: [PATCH] added rankings test and removed duplicated code

---
 users/userservice/user-service.test.js        | 34 +++----------------
 webapp/src/components/ranking/Ranking.test.js | 29 ++++++++++++++++
 .../src/components/ranking/RankingTable.jsx   |  2 +-
 3 files changed, 35 insertions(+), 30 deletions(-)
 create mode 100644 webapp/src/components/ranking/Ranking.test.js

diff --git a/users/userservice/user-service.test.js b/users/userservice/user-service.test.js
index adfc6a6..b9b68ce 100644
--- a/users/userservice/user-service.test.js
+++ b/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);
   });
 });
diff --git a/webapp/src/components/ranking/Ranking.test.js b/webapp/src/components/ranking/Ranking.test.js
new file mode 100644
index 0000000..86e5c6c
--- /dev/null
+++ b/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);
+    })
+})
\ No newline at end of file
diff --git a/webapp/src/components/ranking/RankingTable.jsx b/webapp/src/components/ranking/RankingTable.jsx
index e5a2fb0..93169bb 100644
--- a/webapp/src/components/ranking/RankingTable.jsx
+++ b/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">