username and avatar selector tests

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/UsernameForm.jsx

@@ -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/usernameForm.test.jsx

@@ -0,0 +1,33 @@
+//tests for the username form component visible on landing
+
+//imports needed 
+import { render, screen } from "@testing-library/react";
+import { describe, expect, test } from "vitest";
+import { UsernameForm } from "../../src/components/UsernameForm";
+import userEvent from "@testing-library/user-event";
+
+describe("Username Form", () => {
+
+//avatar selection tests
+  test("given an avatar link it is displayed", () => {
+    render(<UsernameForm avatar={"./testroute"}/>)
+    const imgEl = screen.getByTestId("avatar-img")
+    expect(imgEl).toHaveProperty('src', 'http://localhost:3000/testroute')
+  })
+
+//avatar dropdown
+  test("user clicks on icon and sees the dropdown", async () => {
+    // user sees the username form
+    const user = userEvent.setup()
+    render(<UsernameForm />)
+    //user clicks on the icon
+    const buttonEl = screen.getByTestId("select-avatar")
+    await user.click(buttonEl)
+    //expect dropdown to appear
+    const dropdownEl = screen.getByTestId("avatar-dropdown")
+    expect(dropdownEl).toBeDefined()
+  })
+
+})
+
+