Update deps

Reviewed-on: #7

.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
+    

flake.lock

@@ -0,0 +1,27 @@
+{
+  "nodes": {
+    "nixpkgs": {
+      "locked": {
+        "lastModified": 1726463316,
+        "narHash": "sha256-gI9kkaH0ZjakJOKrdjaI/VbaMEo9qBbSUl93DnU7f4c=",
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "99dc8785f6a0adac95f5e2ab05cc2e1bf666d172",
+        "type": "github"
+      },
+      "original": {
+        "owner": "NixOS",
+        "ref": "nixos-unstable",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "root": {
+      "inputs": {
+        "nixpkgs": "nixpkgs"
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}

flake.nix

@@ -0,0 +1,36 @@
+{
+  description = "Jank workaround for mumble PTT";
+
+  inputs.nixpkgs.url = "github:NixOS/nixpkgs/nixos-unstable";
+
+  outputs =
+    { self, nixpkgs }:
+    let
+      allSystems = [
+        "x86_64-linux"
+        "aarch64-linux"
+        "x86_64-darwin"
+        "aarch64-darwin"
+      ];
+      forAllSystems =
+        f:
+        nixpkgs.lib.genAttrs allSystems (
+          system:
+          f {
+            pkgs = import nixpkgs { inherit system; };
+          }
+        );
+    in
+    {
+      devShells = forAllSystems (
+        { pkgs }:
+        {
+          default = pkgs.mkShell {
+            packages = with pkgs; [
+              nodejs
+            ];
+          };
+        }
+      );
+    };
+}

jest.config.js

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

package.json

@@ -7,26 +7,32 @@
     "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": {
-    "@typescript-eslint/eslint-plugin": "^6.13.2",
-    "@typescript-eslint/parser": "^6.13.2",
-    "eslint": "^8.55.0",
-    "parcel": "^2.10.3",
-    "prettier": "^3.1.0",
+    "@jest/globals": "^29.7.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.0.1",
+    "@types/testing-library__jest-dom": "^5.14.9",
+    "@typescript-eslint/eslint-plugin": "^8.6.0",
+    "eslint": "^9.10.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "parcel": "^2.12.0",
+    "prettier": "^3.3.3",
     "process": "^0.11.10",
+    "ts-jest": "^29.2.5",
     "ts-loader": "^9.5.1",
-    "typescript": "^5.3.2"
+    "typescript": "^5.6.2"
   },
   "dependencies": {
-    "@types/node": "^20.10.1",
-    "@types/react": "^18.2.39",
-    "@types/react-dom": "^18.2.17",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "@types/node": "^22.5.5",
+    "@types/react": "^18.3.7",
+    "@types/react-dom": "^18.3.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   }
 }

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"]