Merge pull request #99 from shammy642/test_coverage

Test coverage

frontend/package.json

@@ -26,6 +26,7 @@
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.2",
     "@vitejs/plugin-react-swc": "^3.3.2",
+    "@vitest/coverage-v8": "^2.1.3",
     "@vitest/ui": "^2.1.3",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.11.1",

frontend/src/components/AvatarSelector.jsx → frontend/src/components/AvatarDropdown.jsx

@@ -4,6 +4,7 @@ import { socket } from "../socket";
 const avatars = import.meta.glob("/src/assets/*.png", { eager: true });
 
 export function AvatarDropdown({ setAvatar, isOpen, setAvatarOpen}) {
+    //console.log("Avatar dropdown - avatars", avatars)
     const [avatarOptions, setAvatarOptions] = useState([]);
 
     useEffect(() => {
@@ -21,6 +22,7 @@ export function AvatarDropdown({ setAvatar, isOpen, setAvatarOpen}) {
         <>
         {isOpen && (
             <div
+
             id="dropdownUsers"
             className="z-10 bg-white rounded-lg shadow w-60 dark:bg-gray-700"
             >

frontend/src/components/UsernameForm.jsx

@@ -1,6 +1,6 @@
 // A form that allows a user to input tet and numbers
 import { useState } from "react";
-import { AvatarDropdown } from "./AvatarSelector";
+import { AvatarDropdown } from "./AvatarDropdown"
 
 export function UsernameForm({ input, setInput, avatar, setAvatar, error }) {
   const [avatarOpen, setAvatarOpen] = useState(false);
@@ -16,11 +16,13 @@ export function UsernameForm({ input, setInput, avatar, setAvatar, error }) {
         ></label>
         <div className="flex">
           <span
+            data-testid="select-avatar"
             className="relative inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border border-e-0 border-gray-300 rounded-s-md dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600 cursor-pointer"
             onClick={() => setAvatarOpen(!avatarOpen)} // Toggle avatar dropdown on click
           >
             {avatar ? (
               <img
+                data-testid="avatar-img"
                 className="w-8 h-8 rounded-full"
                 src={avatar}
                 alt="Selected Avatar"
@@ -73,7 +75,7 @@ export function UsernameForm({ input, setInput, avatar, setAvatar, error }) {
 
         </div>
         {avatarOpen && (
-          <div className="absolute z-10">
+          <div className="absolute z-10" data-testid="avatar-dropdown">
             <AvatarDropdown
               setAvatar={setAvatar}
               setAvatarOpen={setAvatarOpen}

frontend/tests/components/avatarDropdown.test.jsx

@@ -0,0 +1,31 @@
+//imports needed 
+import { render, screen } from "@testing-library/react";
+import { describe, expect, test,vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { AvatarDropdown } from "../../src/components/AvatarDropdown";
+import { socket } from "../../src/socket";
+
+
+vi.mock("../../src/socket.js", () => {
+  return { socket: { emit: vi.fn() } };
+});
+const setAvatar = vi.fn()
+const setAvatarOpen = vi.fn()
+
+describe("Avatar dropdown", () => {
+    test('user can select a specific avatar', async () => {
+      const user = userEvent.setup()
+    //user sees the avatar list
+    render(<AvatarDropdown setAvatar={setAvatar} isOpen={true} setAvatarOpen={setAvatarOpen}/>)
+    //user clicks on an avatar
+    const avatarEl = screen.getByAltText("Avatar 0")
+    await user.click(avatarEl)
+    //handle click is called
+    expect(setAvatar).toHaveBeenCalledWith("/src/assets/1.png")
+    expect(socket.emit).toHaveBeenCalledWith("avatar-selected","/src/assets/1.png")
+    expect(setAvatarOpen).toHaveBeenCalledWith(false)
+
+    })
+  })
+
+

frontend/tests/components/listPlayers.test.jsx

@@ -35,4 +35,36 @@ describe("List players component", () => {
     const loadingSpinnerEls = screen.getAllByTestId("loading-spinner-svg");
     expect(loadingSpinnerEls.length).toEqual(1);
   });
-});
+  test("when a player has an avatar it is visible", () => {
+    const playersWithAvatar = [
+      {
+        currentGuess: 1,
+        id: "WHbOG6ET1uHeg-MqAAA8",
+        name: "Alexia (Host)",
+        totalScore: 0,
+        avatar: "/avatar.png"
+      },
+    ]
+    render(<ListPlayers players={playersWithAvatar} />);
+    const imgEl = screen.getByAltText("Alexia (Host)'s avatar")
+    expect(imgEl).toHaveProperty('src', 'http://localhost:3000/avatar.png')
+  })
+
+  test("when a player who has not guessed has an avatar it is visible", () => {
+  // mock player who has not guessed
+  const playersWithAvatar = [
+    {
+      currentGuess: null,
+      id: "WHbOG6ET1uHeg-MqAAA8",
+      name: "Alexia (Host)",
+      totalScore: 0,
+      avatar: "/avatar.png"
+    },
+  ]
+
+  render(<ListPlayers players={playersWithAvatar} />);
+    const imgEl = screen.getByAltText("Alexia (Host)'s avatar")
+    expect(imgEl).toHaveProperty('src', 'http://localhost:3000/avatar.png')
+
+  });
+})