Add some simple tests

src/js/__tests__/menu.test.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import "@testing-library/jest-dom";
+import "@testing-library/jest-dom/jest-globals";
+import { describe, it, expect } from "@jest/globals";
+import { render, screen } from "@testing-library/react";
+import { Menu } from "../menu";
+
+describe("<Menu />", () => {
+  it("renders ok", () => {
+    const cb = () => {};
+    render(
+      <Menu
+        items={[{ streamKey: "streamer", viewCount: 10 }]}
+        selectedItem={null}
+        selectCallback={cb}
+      />,
+    );
+  });
+
+  it("has item in list", () => {
+    const cb = () => {};
+    render(
+      <Menu
+        items={[{ streamKey: "streamer", viewCount: 10 }]}
+        selectedItem={null}
+        selectCallback={cb}
+      />,
+    );
+    const streamerElement = screen.getByText("streamer");
+    expect(streamerElement).toBeInTheDocument();
+  });
+
+  it("updates selected when clicked", () => {
+    let selected: string | null = null;
+    const cb = (name: string | null) => {
+      selected = name;
+    };
+    render(
+      <Menu
+        items={[{ streamKey: "streamer", viewCount: 10 }]}
+        selectedItem={null}
+        selectCallback={cb}
+      />,
+    );
+    const streamerElement = screen.getByText("streamer");
+    expect(streamerElement).toBeInTheDocument();
+    expect(selected).toBeNull();
+    streamerElement.click();
+    expect(selected).toStrictEqual("streamer");
+  });
+});

src/js/menu.tsx

@@ -14,34 +14,31 @@ export function Menu({ items, selectedItem, selectCallback }: MenuProps) {
   const menuitems = () => {
     return (
       <>
-        {items.map((value, idx) => {
+        {items.map((value) => {
+          const key = `${value.streamKey}_${value.viewCount}`
           if (selectedItem == value.streamKey) {
             return (
-              <>
-                <li key={idx} className="menu-item menu-selected">
-                  <a href={"#" + value} className="menu-link">
+                <li key={key} className="menu-item menu-selected">
+                  <a className="menu-link">
                     {value.streamKey}
                   </a>
                   <p className="menu-viewcount">{value.viewCount}</p>
                 </li>
-              </>
             );
           } else {
             return (
-              <>
                 <li
-                  key={idx}
+                  key={value.streamKey}
                   onClick={() => {
                     selectCallback(value.streamKey);
                   }}
                   className="menu-item"
                 >
-                  <a href={"#" + value.streamKey} className="menu-link">
+                  <a className="menu-link">
                     {value.streamKey}
                   </a>
                   <p className="menu-viewcount">{value.viewCount}</p>
                 </li>
-              </>
             );
           }
         })}
@@ -56,8 +53,7 @@ export function Menu({ items, selectedItem, selectCallback }: MenuProps) {
           onClick={() => {
             selectCallback(null);
           }}
-          href="#"
-        >
+          href="#">
           {title}
         </a>
         <ul className="menu-list">{menuitems()}</ul>