Merge pull request #279 from Arquisoft/tests/webapp/add

Tests/webapp/add
Arquisoft · Apr 24, 2024 · daa2b1d · daa2b1d
2 parents 6740f0e + 50f03af
commit daa2b1d
Show file tree

Hide file tree

Showing 4 changed files with 394 additions and 305 deletions.
diff --git a/webapp/src/components/dashboard/DashboardButton.jsx b/webapp/src/components/dashboard/DashboardButton.jsx
@@ -1,62 +1,62 @@
-import React from "react";
-import PropTypes from 'prop-types';
-import { Button, Box } from "@chakra-ui/react";
-import { FaKiwiBird, FaRandom, FaPalette } from "react-icons/fa";
-import { TbWorld } from "react-icons/tb";
-import { IoIosFootball, IoLogoGameControllerB } from "react-icons/io";
-
-const DashboardButton = ({ label, selectedButton, onClick, iconName }) => {
-  const isSelected = label === selectedButton;
-  let icon = null;
-
-  switch (iconName) {
-    case "FaKiwiBird":
-      icon = <FaKiwiBird style={{ marginBottom: '0.5em', marginRight: '0.25em', fontSize: '1.8em' }} />;
-      break;
-    case "IoIosFootball":
-      icon = <IoIosFootball style={{ marginBottom: '0.5em', marginRight: '0.25em', fontSize: '1.8em' }} />;
-      break;
-    case "FaGlobeAmericas":
-      icon = <TbWorld style={{ marginBottom: '0.5em', marginRight: '0.25em', fontSize: '1.8em' }} />;
-      break;
-    case "IoLogoGameControllerB":
-      icon = <IoLogoGameControllerB style={{ marginBottom: '0.5em', marginRight: '0.25em', fontSize: '1.8em' }} />;
-      break;
-    case "FaPalette":
-      icon = <FaPalette style={{ marginBottom: '0.5em', marginRight: '0.25em', fontSize: '1.8em' }} />;
-      break;
-    case "FaRandom":
-      icon = <FaRandom style={{ marginBottom: '0.5em', marginRight: '0.25em', fontSize: '1.8em' }} />;
-      break;
-    default:
-      break;
-  }
-
-  return (
-    <Button
-      colorScheme={"green"}
-      variant={isSelected ? "solid" : "ghost"}
-      textAlign="center"
-      m="1em"
-      display="flex"
-      flexDirection="column"
-      alignItems="center"
-      size="lg"
-      height="4rem"
-      maxW={{ base: "100%", md: "calc(100% / 3 - 2em)" }}
-      onClick={() => onClick(label)}
-    >
-      {icon}
-      <Box>{label}</Box>
-    </Button>
-  );
-};
-
-DashboardButton.propTypes = {
-  label: PropTypes.string.isRequired,
-  selectedButton: PropTypes.string.isRequired,
-  onClick: PropTypes.func.isRequired,
-  iconName: PropTypes.string.isRequired
-};
-
+import React from "react";
+import PropTypes from 'prop-types';
+import { Button, Box } from "@chakra-ui/react";
+import { FaKiwiBird, FaRandom, FaPalette } from "react-icons/fa";
+import { TbWorld } from "react-icons/tb";
+import { IoIosFootball, IoLogoGameControllerB } from "react-icons/io";
+
+const DashboardButton = ({ label, selectedButton, onClick, iconName }) => {
+  const isSelected = label === selectedButton;
+  let icon = null;
+
+  switch (iconName) {
+    case "FaKiwiBird":
+      icon = <FaKiwiBird data-testid={"FaKiwiBird"} style={{ marginBottom: '0.5em', marginRight: '0.25em', fontSize: '1.8em' }} />;
+      break;
+    case "IoIosFootball":
+      icon = <IoIosFootball data-testid={"IoIosFootball"} style={{ marginBottom: '0.5em', marginRight: '0.25em', fontSize: '1.8em' }} />;
+      break;
+    case "FaGlobeAmericas":
+      icon = <TbWorld data-testid={"FaGlobeAmericas"} style={{ marginBottom: '0.5em', marginRight: '0.25em', fontSize: '1.8em' }} />;
+      break;
+    case "IoLogoGameControllerB":
+      icon = <IoLogoGameControllerB data-testid={"IoLogoGameControllerB"} style={{ marginBottom: '0.5em', marginRight: '0.25em', fontSize: '1.8em' }} />;
+      break;
+    case "FaPalette":
+      icon = <FaPalette data-testid={"FaPalette"} style={{ marginBottom: '0.5em', marginRight: '0.25em', fontSize: '1.8em' }} />;
+      break;
+    case "FaRandom":
+      icon = <FaRandom data-testid={"FaRandom"} style={{ marginBottom: '0.5em', marginRight: '0.25em', fontSize: '1.8em' }} />;
+      break;
+    default:
+      break;
+  }
+
+  return (
+    <Button
+      colorScheme={"green"}
+      variant={isSelected ? "solid" : "ghost"}
+      textAlign="center"
+      m="1em"
+      display="flex"
+      flexDirection="column"
+      alignItems="center"
+      size="lg"
+      height="4rem"
+      maxW={{ base: "100%", md: "calc(100% / 3 - 2em)" }}
+      onClick={() => onClick(label)}
+    >
+      {icon}
+      <Box>{label}</Box>
+    </Button>
+  );
+};
+
+DashboardButton.propTypes = {
+  label: PropTypes.string.isRequired,
+  selectedButton: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired,
+  iconName: PropTypes.string.isRequired
+};
+
 export default DashboardButton;
diff --git a/webapp/src/pages/Game.jsx b/webapp/src/pages/Game.jsx
@@ -56,7 +56,6 @@ export default function Game() {
             if (error.response.status === HttpStatusCode.Conflict) {
                 throw error;
             } else {
-                console.error("Error fetching question:", error);
                 navigate("/dashboard");
             }
         }
@@ -150,7 +149,6 @@ export default function Game() {
                     navigate("/dashboard");
                 }
             } catch (error) {
-                console.error("Error initializing game:", error);
                 navigate("/dashboard");
             }
         };
@@ -198,7 +196,7 @@ export default function Game() {
             {
                 (!loading && hasImage) && <Flex maxH={"40vh"} 
                                             maxW={"40vw"} justify={"center"}>
-                <Image src={question.image} alt={t("game.image")}></Image>
+                <Image src={question.image} data-testid={"image"} alt={t("game.image")}></Image>
                 </Flex>
             }
             <Box bg="white" p={"4 0.5"} borderRadius="md" boxShadow="md" mt={4} mb={4} w={["80%", "60%"]} shadow="2xl" rounded="1rem" alignItems="center">

diff --git a/webapp/src/tests/DashboardButton.test.js b/webapp/src/tests/DashboardButton.test.js
@@ -0,0 +1,25 @@
+import each from "jest-each";
+import {act, fireEvent, render, screen, waitFor} from "@testing-library/react";
+import DashboardButton from "../components/dashboard/DashboardButton";
+
+
+describe("Dashboard Button", () => {
+
+    each(["FaKiwiBird", "IoIosFootball", "FaGlobeAmericas",
+        "IoLogoGameControllerB", "FaPalette",
+        "FaRandom"]).test("the proper icon renderized", async (iconName) => {
+            const props = {
+                "label": "label",
+                "selectedButton": "label",
+                "onClick": () => {},
+                "iconName": iconName
+            };
+
+            render(<DashboardButton {...props} />);
+
+            await waitFor( async () => {
+                expect(await screen.findByTestId(iconName)).toBeEnabled();
+            });
+    });
+
+});