Merge pull request #106 from shammy642/show-show-show-me-your-tests

show show show me your tests

frontend/src/components/Clipboard.jsx

@@ -1,8 +1,22 @@
-export default function CheckMark() {
+export default function Clipboard() {
   return (
-<svg className="w-6 h-6 text-white-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
-  <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 4h3a1 1 0 0 1 1 1v15a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h3m0 3h6m-5-4v4h4V3h-4Z"/>
-</svg>
-
+    <svg
+      data-testid="clipboard-svg"
+      className="w-6 h-6 text-white-800 dark:text-white"
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        d="M15 4h3a1 1 0 0 1 1 1v15a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h3m0 3h6m-5-4v4h4V3h-4Z"
+      />
+    </svg>
   );
 }

frontend/src/components/Copied.jsx

@@ -1,6 +1,7 @@
 export default function Copied() {
   return (
     <svg
+      data-testid="copied-svg"
       className="w-6 h-6 text-white-800 dark:text-white"
       aria-hidden="true"
       xmlns="http://www.w3.org/2000/svg"

frontend/src/components/CopyToClipboardButton.jsx

@@ -1,10 +1,7 @@
-import { useState } from "react";
 import Copied from "./Copied";
 import Clipboard from "./Clipboard";
 
-const useCopyToClipboard = () => {
-  const [isCopied, setIsCopied] = useState(false);
-
+export const CopyToClipboardButton = ({ content, isCopied, setIsCopied }) => {
   const copyToClipboard = async (content) => {
     try {
       await navigator.clipboard.writeText(content);
@@ -16,12 +13,6 @@ const useCopyToClipboard = () => {
     }
   };
 
-  return { isCopied, copyToClipboard };
-};
-
-const CopyToClipboardButton = ({ content }) => {
-  const { isCopied, copyToClipboard } = useCopyToClipboard();
-
   return (
     <div className="flex justify-center">
       <div className="flex items-center bg-black text-white shadow-md p-3 rounded-md">
@@ -37,4 +28,3 @@ const CopyToClipboardButton = ({ content }) => {
   );
 };
 
-export default CopyToClipboardButton;

frontend/src/pages/Lobby.jsx

@@ -7,12 +7,13 @@ import { ListPlayers } from "../components/ListPlayers";
 import { Card } from "../components/Card";
 import { Header } from "../components/Header";
 import { Footer } from "../components/Footer";
-import CopyToClipboardButton from "../components/CopyToClipboardButton";
+import { CopyToClipboardButton } from "../components/CopyToClipboardButton";
 import { H1 } from "../components/H1";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 
 export function Lobby({ gameState, isHost, redirect, setRedirect}) {
   const navigate = useNavigate();
+  const [isCopied, setIsCopied] = useState(false)
 
   const handleClick = () => {
     socket.emit("start_game");
@@ -38,6 +39,8 @@ export function Lobby({ gameState, isHost, redirect, setRedirect}) {
         <p>Share your game link:</p>
         <CopyToClipboardButton
           content={`${window.location.origin}/join/${gameState.id}`}
+          isCopied={isCopied}
+          setIsCopied={setIsCopied}
         />
       </Card>
       <Footer/>

frontend/tests/components/copyToClipboardButton.test.jsx

@@ -0,0 +1,51 @@
+//imports needed
+import { render, screen } from "@testing-library/react";
+import { describe, expect, test, vi } from "vitest";
+import { CopyToClipboardButton } from "../../src/components/CopyToClipboardButton";
+import userEvent from "@testing-library/user-event";
+
+vi.mock("../../src/socket.js", () => {
+  return { socket: { emit: vi.fn() } };
+});
+const setIsCopied = vi.fn();
+
+describe("Avatar dropdown", () => {
+  test("if is copied is true show copied svg", async () => {
+    render(
+      <CopyToClipboardButton
+        content={"test content"}
+        isCopied={true}
+        setIsCopied={setIsCopied}
+      />
+    );
+    const imgEl = screen.getByTestId("copied-svg");
+    expect(imgEl).toBeDefined();
+  });
+  test("if is copied is false show clipbaord svg", async () => {
+    render(
+      <CopyToClipboardButton
+        content={"test content"}
+        isCopied={false}
+        setIsCopied={setIsCopied}
+      />
+    );
+    const imgEl = screen.getByTestId("clipboard-svg");
+    expect(imgEl).toBeDefined();
+  });
+  test("when user clicks on copied", async () => {
+    const user = userEvent.setup();
+    render(
+      <CopyToClipboardButton
+        content={"test content"}
+        isCopied={false}
+        setIsCopied={setIsCopied}
+      />
+    );
+    await user.click(screen.getByRole("button"));
+
+    const clipboardText = await navigator.clipboard.readText();
+
+    expect(clipboardText).toBe("test content");
+    expect(setIsCopied).toHaveBeenCalledWith(true)
+  });
+});

frontend/vite.config.js

@@ -28,7 +28,8 @@ export default defineConfig({
         "**/.{eslint,mocha,prettier}rc.{?(c|m)js,yml}",
         "**/*.config.*",
         "**/socket.js",
-        "**/main.jsx"
+        "**/main.jsx",
+        "**/assets/**"
       ],
     },
   },