Change frontend deps

flake.nix

@@ -57,7 +57,7 @@
 
                 src = ./frontend;
 
-                npmDepsHash = "sha256-cN+xm9wBRcpDHuYy8PelV1YWhudw4y8B6Ap4+3En8/4=";
+                npmDepsHash = "sha256-4gjtxGquuFzk4AOnm0lZC5x7+pVAMrt6CeQvj1Cd8W8=";
 
                 installPhase = ''
                   mkdir -p $out

frontend/jest.config.js

@@ -0,0 +1,7 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} **/
+module.exports = {
+  testEnvironment: "jsdom",
+  transform: {
+    "^.+\.tsx?$": ["ts-jest",{}],
+  },
+};

frontend/package.json

@@ -2,27 +2,35 @@
   "name": "apiary-frontend",
   "scripts": {
     "start": "parcel src/index.html",
-    "build": "parcel build src/index.html"
+    "build": "parcel build src/index.html",
+    "test": "jest"
   },
   "devDependencies": {
     "@ngneat/falso": "^7.3.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/humanize-duration": "^3.27.4",
+    "@types/jest": "^29.5.14",
+    "@types/node": "^22.13.9",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "parcel": "^2.13.3",
     "process": "^0.11.10",
     "svgo": "^3.3.2",
+    "ts-jest": "^29.2.6",
     "ts-loader": "^9.5.2",
     "typescript": "^5.8.2"
   },
   "dependencies": {
-    "@types/humanize-duration": "^3.27.4",
-    "@types/node": "^22.13.9",
-    "@types/react": "^19.0.10",
-    "@types/react-dom": "^19.0.4",
     "chart.js": "^4.4.8",
     "humanize-duration": "^3.32.1",
     "react": "^19.0.0",
     "react-chartjs-2": "^5.3.0",
     "react-dom": "^19.0.0",
-    "react-router": "^7.2.0",
+    "react-router": "^7.2.0"
-    "swr": "^2.3.2"
   }
 }

frontend/src/css/style.css

@@ -132,7 +132,9 @@ a {
 }
 #menu-logo {
     padding: 5px;
-
+    content: url("../assets/apiary.svg");
+    width: 30px;
+    height: 30px;
 }
 .menu-link {
     color: var(--menu-color-text);

frontend/src/js/app.tsx

@@ -8,7 +8,6 @@ import { Pie } from "react-chartjs-2";
 import humanizeDuration from "humanize-duration";
 
 ChartJS.register(Tooltip, ArcElement, Legend);
-const logo = new URL("../assets/apiary.svg", import.meta.url)
 
 interface AppProps {
     api: ApiaryAPI
@@ -34,14 +33,13 @@ let chartColors = [
     "#d35400",
     "#c0392b",
     "#bdc3c7",
-    "#7f8c8d"
+    "#7f8c8d",
 ]
 
 export function App({ api }: AppProps) {
     const [mode, setMode] = useState("light");
     const headerProps: HeaderMenuProps = {
         title: "apiary.home.2rjus.net",
-        logo: logo,
         items: [
             {
                 name: "Totals",
@@ -90,7 +88,7 @@ export function App({ api }: AppProps) {
         <>
             <BrowserRouter>
                 <div id="app">
-                    <HeaderMenu title={headerProps.title} logo={logo} items={headerProps.items} />
+                    <HeaderMenu title={headerProps.title} items={headerProps.items} />
                     <div className="content">
                         <Routes>
                             <Route path="/" element={<Home api={api} />} />
@@ -113,7 +111,7 @@ export interface StatsProps {
 }
 
 export function Stats({ api, type }: StatsProps) {
-    const [stats, setStats] = useState<StatsResult[]|null>(null)
+    const [stats, setStats] = useState<StatsResult[] | null>(null)
     const [currentType, setCurrentType] = useState(type)
 
     useEffect(() => {
@@ -250,14 +248,14 @@ export function Live({ api }: AppProps) {
 
 export interface LiveListProps {
     list: LoginAttempt[]
-}; 
+};
 
 export interface DateTDProps {
     date: Date
     now: Date
 }
 
-export function DateTD({ date, now}: DateTDProps) {
+export function DateTD({ date, now }: DateTDProps) {
     const [displayDate, setDisplayDate] = useState(date.toLocaleString());
 
     useEffect(() => {
@@ -270,12 +268,12 @@ export function DateTD({ date, now}: DateTDProps) {
     }, [displayDate, now])
 
     return (
-            <td className="live-table-date">{displayDate}</td>
+        <td className="live-table-date">{displayDate}</td>
     )
 }
 
 export function LiveList({ list }: LiveListProps) {
-    const [now, setNow] = useState(new Date())
+    const [now, setNow] = useState(new Date())
 
     let items = list.map((a) => {
         const attemptDate = new Date(a.date);
@@ -389,21 +387,21 @@ interface HeaderItem {
 
 interface HeaderMenuProps {
     title: string
-    logo: URL
     items: Array<HeaderItem>
 }
 
-export function HeaderMenu({ title, logo, items }: HeaderMenuProps) {
+export function HeaderMenu({ title, items }: HeaderMenuProps) {
     const menuItems = items.map((item) => {
-       return (
+        return (
-       <li key={item.path}>
+            <li key={item.path}>
                 <NavLink to={item.path} className={({ isActive }) => isActive ? "menu-link-active" : "menu-link"}>{item.name}</NavLink>
-       </li>
+            </li>
-    )})
+        )
+    })
 
     return (
         <div className="navbar">
-            <img id="menu-logo" src={logo.href}></img>
+            <img id="menu-logo"></img>
             <h2 id="menu-title">{title}</h2>
             <nav className="nav-flex">
                 <ul>

frontend/src/tests/api.test.ts

@@ -0,0 +1,17 @@
+import { DummyApiaryAPIClient, TotalStats } from "../js/api";
+
+describe("DummyApiaryAPIClient", () => {
+    const api = new DummyApiaryAPIClient()
+    test("totals returns expeced value", async () => {
+        let totals = await api.totals()
+        const expected: TotalStats = {
+            password: 1,
+            username: 1,
+            ip: 1,
+            attempts: 1,
+            country: 1,
+        }
+
+        expect(totals).toEqual(expected)
+    })
+});

frontend/tsconfig.json

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