.eslintrc.cjs

@@ -4,4 +4,8 @@ module.exports = {
   parser: "@typescript-eslint/parser",
   plugins: ["@typescript-eslint"],
   root: true,
+  ignorePatterns: ["jest.config.js", "dist"],
+  overrides: [{
+    files: ["src/**.js"],
+  }]
 };

.gitea/workflows/tests.yml

@@ -0,0 +1,31 @@
+name: Run tests
+on:
+  push:
+    paths:
+      - 'src/**.ts'
+      - 'src/**.tsx'
+  pull_request:
+    paths:
+      - 'src/**.ts'
+      - 'src/**.tsx'
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+    env:
+    steps:
+    - uses: actions/checkout@v4
+
+    - name: Set up node
+      uses: https://github.com/actions/setup-node@v4
+      with:
+        node-version: 21
+        cache: npm
+    
+    - name: deps
+      run: npm install
+
+    - name: Test
+      run: npm run test
+    

jest.config.js

@@ -0,0 +1,5 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+};

package.json

@@ -7,18 +7,25 @@
     "start": "parcel src/index.html",
     "build": "parcel build src/index.html",
     "type-check": "tsc --noEmit",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "jest"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
+    "@jest/globals": "^29.7.0",
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/react": "^14.1.2",
+    "@types/testing-library__jest-dom": "^6.0.0",
     "@typescript-eslint/eslint-plugin": "^6.13.2",
     "@typescript-eslint/parser": "^6.13.2",
     "eslint": "^8.55.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "parcel": "^2.10.3",
     "prettier": "^3.1.0",
     "process": "^0.11.10",
+    "ts-jest": "^29.1.1",
     "ts-loader": "^9.5.1",
     "typescript": "^5.3.2"
   },

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>

tsconfig.json

@@ -7,7 +7,8 @@
     "lib": ["dom", "esnext"],
     "strict": true,
     "sourceMap": true,
-    "target": "esnext"
+    "target": "esnext",
+    "types": ["node", "jest", "@testing-library/jest-dom"]
   },
   "exclude": ["node_modules"],
   "include": ["src/**/*.ts", "src/**/*.tsx"]