Give the frontend tests, and fix what they found

frontend/package.json

@@ -5,6 +5,8 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "build": "tsc && vite build",
     "preview": "vite preview"
   },
@@ -39,13 +41,18 @@
     "@tauri-apps/api": "^2.10.1",
     "@tauri-apps/plugin-process": "^2.3.1",
     "@tauri-apps/plugin-updater": "^2.10.1",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
+    "@vitest/coverage-v8": "^2.1.9",
     "autoprefixer": "^10.4.20",
+    "jsdom": "^30.0.1",
     "postcss": "^8.4.47",
     "tailwindcss": "^3.4.13",
     "typescript": "^5.5.3",
-    "vite": "^5.4.8"
+    "vite": "^5.4.8",
+    "vitest": "^2.1.9"
   }
 }

frontend/pnpm-workspace.yaml

@@ -0,0 +1,6 @@
+# esbuild ships a prebuilt binary and needs its install
+# script to put it in place; vitest will not start without
+# it. Approved explicitly because pnpm blocks build scripts
+# by default, which is the right default.
+allowBuilds:
+  esbuild: true

frontend/src/test/setup.ts

@@ -0,0 +1,35 @@
+/**
+ * Test environment setup.
+ *
+ * Node 22 and later ship an experimental built-in
+ * ``localStorage`` that is ``undefined`` unless the process
+ * is started with ``--localstorage-file``. That global
+ * shadows the one jsdom installs, so ``window`` exists and
+ * ``localStorage`` does not — which reads like a broken
+ * jsdom and is not:
+ *
+ *     ExperimentalWarning: localStorage is not available
+ *     because --localstorage-file was not provided
+ *
+ * Put jsdom's back when Node has left a hole. Anything that
+ * touches i18n needs it: detectLanguage() reads the stored
+ * language on import.
+ */
+if (typeof globalThis.localStorage === "undefined") {
+  const store = new Map<string, string>();
+  const shim: Storage = {
+    get length() {
+      return store.size;
+    },
+    clear: () => store.clear(),
+    getItem: (k) => (store.has(k) ? store.get(k)! : null),
+    key: (i) => [...store.keys()][i] ?? null,
+    removeItem: (k) => void store.delete(k),
+    setItem: (k, v) => void store.set(k, String(v)),
+  };
+  Object.defineProperty(globalThis, "localStorage", {
+    value: shim,
+    configurable: true,
+    writable: true,
+  });
+}

frontend/src/utils/__tests__/formatting.test.ts

@@ -0,0 +1,92 @@
+import { describe, expect, it, vi, afterEach } from "vitest";
+import i18n from "../../i18n";
+import {
+  elapsed,
+  formatDate,
+  formatDateHeading,
+  formatHours,
+  formatTime,
+  minutesToDecimal,
+  totalHours,
+} from "../formatting";
+
+afterEach(() => {
+  vi.useRealTimers();
+});
+
+describe("durations", () => {
+  it("formats whole and fractional hours", () => {
+    expect(formatHours(0)).toBe("0h");
+    expect(formatHours(30)).toBe("0.5h");
+    expect(formatHours(60)).toBe("1h");
+    expect(formatHours(90)).toBe("1.5h");
+    expect(formatHours(600)).toBe("10h");
+    expect(formatHours(6000)).toBe("100h");
+    // Two decimals kept when they carry information.
+    expect(formatHours(603)).toBe("10.05h");
+  });
+
+  it("shows an em dash for no value", () => {
+    expect(formatHours(null)).toBe("—");
+    expect(minutesToDecimal(null)).toBe("");
+  });
+
+  it("sums entries", () => {
+    expect(totalHours([])).toBe("0");
+    expect(
+      totalHours([
+        { duration_minutes: 90 },
+        { duration_minutes: 30 },
+        { duration_minutes: null },
+        {},
+      ]),
+    ).toBe("2");
+  });
+});
+
+describe("elapsed", () => {
+  it("counts from the start", () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date("2026-06-15T12:00:00Z"));
+    expect(elapsed("2026-06-15T11:58:57Z")).toBe("00:01:03");
+    expect(elapsed("2026-06-15T09:00:00Z")).toBe("03:00:00");
+    // Past 24 hours the hour field keeps counting rather
+    // than wrapping, which is what a forgotten timer looks
+    // like the next morning.
+    expect(elapsed("2026-06-14T10:00:00Z")).toBe("26:00:00");
+  });
+
+  it("clamps a start in the future to zero", () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date("2026-06-15T12:00:00Z"));
+    expect(elapsed("2026-06-15T13:00:00Z")).toBe("00:00:00");
+  });
+});
+
+describe("dates", () => {
+  it("falls back to the raw value when unparseable", () => {
+    expect(formatDate("not-a-date")).toBe("not-a-date");
+    expect(formatTime(null)).toBe("—");
+  });
+
+  it("formats a heading in the selected language", async () => {
+    // formatDateLabel already does this; the heading in the
+    // clock widget sat on a hardcoded en-US, so a German UI
+    // showed "Heute" one day and "Apr 12" the next.
+    await i18n.changeLanguage("en");
+    const en = formatDateHeading("2026-04-12");
+    expect(en).toBe("Apr 12");
+
+    // German puts the day first and abbreviates with a
+    // period; Spanish uses its own month name. Asserting
+    // "not the English string" rather than the exact output
+    // keeps this from breaking on an ICU data update.
+    await i18n.changeLanguage("de");
+    expect(formatDateHeading("2026-04-12")).not.toBe(en);
+
+    await i18n.changeLanguage("es");
+    expect(formatDateHeading("2026-04-12")).not.toBe(en);
+
+    await i18n.changeLanguage("en");
+  });
+});

frontend/src/utils/__tests__/relativeDate.test.ts

@@ -0,0 +1,88 @@
+import { describe, expect, it, vi, afterEach } from "vitest";
+import { relativeDate } from "../relativeDate";
+
+/** Freeze the clock so the labels are deterministic. */
+function at(iso: string) {
+  vi.useFakeTimers();
+  vi.setSystemTime(new Date(iso));
+}
+
+afterEach(() => {
+  vi.useRealTimers();
+});
+
+describe("relativeDate labels", () => {
+  it("counts up through the units", () => {
+    at("2026-06-15T12:00:00");
+    const cases: [string, string][] = [
+      ["2026-06-15T11:59:30", "just now"],
+      ["2026-06-15T11:59:00", "1 min ago"],
+      ["2026-06-15T11:30:00", "30 min ago"],
+      ["2026-06-15T11:00:00", "1 hour ago"],
+      ["2026-06-15T06:00:00", "6 hours ago"],
+      ["2026-06-14T12:00:00", "yesterday"],
+      ["2026-06-12T12:00:00", "3 days ago"],
+      ["2026-06-05T12:00:00", "1 week ago"],
+      ["2026-05-20T12:00:00", "3 weeks ago"],
+      ["2026-05-01T12:00:00", "1 month ago"],
+      ["2025-06-15T12:00:00", "1 year ago"],
+    ];
+    for (const [raw, label] of cases) {
+      expect(relativeDate(raw).label, raw).toBe(label);
+    }
+  });
+
+  it("shows the full date for the future", () => {
+    at("2026-06-15T12:00:00");
+    const r = relativeDate("2026-06-16T12:00:00");
+    expect(r.label).toBe(r.full);
+    expect(r.label).not.toMatch(/ago/);
+  });
+
+  it("returns empty for empty input", () => {
+    expect(relativeDate("")).toEqual({
+      label: "", full: "",
+    });
+  });
+});
+
+describe("org timestamps", () => {
+  it("reads the format kaisho writes", () => {
+    at("2026-06-15T12:00:00");
+    // format_org_datetime in kaisho/org/clock.py emits an
+    // English three-letter weekday on purpose, so the file
+    // does not depend on the writer's locale.
+    const r = relativeDate("[2026-06-15 Mon 09:00]");
+    expect(r.label).toBe("3 hours ago");
+  });
+
+  it("reads a two-letter weekday from Emacs", () => {
+    at("2026-06-15T12:00:00");
+    // Emacs writes the weekday in the running locale, so a
+    // German one produces "Mi", "Do", "Sa" -- two letters.
+    // The Python parser takes \S+ for exactly this reason
+    // (see the comment above _DATETIME_RE); this one has
+    // to agree with it or the time is silently dropped and
+    // the entry renders as midnight.
+    const r = relativeDate("[2026-06-15 Mo 09:00]");
+    expect(r.label).toBe("3 hours ago");
+  });
+
+  it("reads a longer weekday", () => {
+    at("2026-06-15T12:00:00");
+    const r = relativeDate("[2026-06-15 Monday 09:00]");
+    expect(r.label).toBe("3 hours ago");
+  });
+
+  it("falls back to the date when there is no time", () => {
+    at("2026-06-15T12:00:00");
+    expect(relativeDate("[2026-06-14 Sun]").label)
+      .toBe("yesterday");
+  });
+
+  it("does not throw on unparseable input", () => {
+    at("2026-06-15T12:00:00");
+    expect(() => relativeDate("not a date at all"))
+      .not.toThrow();
+  });
+});

frontend/src/utils/formatting.ts

@@ -2,6 +2,7 @@
  * Shared formatting utilities for durations, dates,
  * and times. Replaces per-component duplicates.
  */
+import i18n from "../i18n";
 
 /** Format minutes as "Xh" or "X.Xh" (e.g. "2.5h"). */
 export function formatHours(
@@ -77,13 +78,19 @@ export function formatTime(
 }
 
 /**
- * Format ISO date as short heading (e.g. "Apr 12").
- * Used in calendar/clock widgets.
+ * Format ISO date as a short heading, in the selected UI
+ * language. Used in the clock widget.
+ *
+ * The locale was hardcoded to "en-US", which put "Apr 12"
+ * next to a heading that says "Heute" the rest of the time:
+ * ClockWidget shows either the translated word for today or
+ * this. formatDateLabel in dateLabel.ts has always taken
+ * i18n.language; this is the same rule.
  */
 export function formatDateHeading(iso: string): string {
   const [y, m, d] = iso.split("-").map(Number);
   const date = new Date(y, m - 1, d);
-  return date.toLocaleDateString("en-US", {
+  return date.toLocaleDateString(i18n.language, {
     month: "short",
     day: "numeric",
   });

frontend/src/utils/relativeDate.ts

@@ -7,8 +7,19 @@
  * string for tooltip display.
  */
 
+// \S+ for the weekday, not \w{3}. Kaisho writes an English
+// three-letter abbreviation on purpose (see _EN_WEEKDAYS in
+// kaisho/org/clock.py), but these files are edited in Emacs
+// too, and Emacs writes the weekday in the running locale:
+// German gives "Mo", "Di", "Mi" -- two letters. Those failed
+// this pattern, then failed new Date(), and fell through to
+// the date-only branch, which drops the time and renders the
+// entry at midnight.
+//
+// The Python parser already takes \S+ for exactly this
+// reason; its comment says so. This is the same rule.
 const ORG_DATE_RE =
-  /^(\d{4}-\d{2}-\d{2})\s+\w{3}\s+(\d{2}:\d{2})/;
+  /^(\d{4}-\d{2}-\d{2})\s+\S+\s+(\d{2}:\d{2})/;
 
 function parseDate(raw: string): Date | null {
   const s = raw.replace(/^\[/, "").replace(/\]$/, "");

frontend/vitest.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from "vitest/config";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    // jsdom rather than node: the utilities under test are
+    // pure, but several of them reach for localStorage or
+    // Intl through the browser globals, and a component
+    // test needs a DOM the moment one is written.
+    environment: "jsdom",
+    globals: true,
+    setupFiles: ["src/test/setup.ts"],
+    include: ["src/**/*.test.{ts,tsx}"],
+  },
+});