Files
paliad/frontend/src/client/date-range-picker-pure.test.ts
mAi 31d78526cf feat(date-range-picker): t-paliad-248 — symmetric picker + filter-bar wiring
Slice A complete. Builds on the additive backend constants (commit
34e3d71) by shipping the user-facing surface.

# Pure helpers (no DOM)

frontend/src/client/date-range-picker-pure.ts (190 LoC) — TimeSpec
shape, ALL_HORIZONS / PAST_HORIZONS / NEXT_HORIZONS registries,
horizonBounds (mirrors view_service.go), isValidHorizon, isValidISODate
(strict — rejects 2026-02-30 etc.), validateCustomRange, parseURL /
serializeURL (canonical ?horizon=...&horizon_from=...&horizon_to=...
with default-omission), isDefault.

frontend/src/client/date-range-picker-pure.test.ts (38 bun tests,
118 expect calls): registries, horizon bounds for all 14 values,
ISO-date validity rejects calendar-impossible dates, validateCustomRange
on every error branch, parseURL fallback to default, serializeURL
default-omission + key-override + custom-bounds, full round-trip.

# DOM mount

frontend/src/client/date-range-picker.ts (290 LoC) — mountDateRangePicker
returns {element, getValue, setValue, close, destroy}. Trigger button
in a .multi-anchor wrapper, popover panel reusing .multi-panel
positioning. Symmetric chip row: past fan (right-aligned) | ALLES
centre (target glyph U+2316) | next fan. 'Anpassen' chip toggles an
inline date-pair editor with Apply / Cancel + a live validation
message that surfaces only the meaningful 'inverted range' error
during typing (empty/format errors are visible via the disabled
Apply button). Outside-click + Esc close the popover, focus returns
to the trigger. setValue lets the host sync from URL changes.

# Filter-bar wiring

frontend/src/client/filter-bar/axes.ts:renderTimeAxis — the disabled
'Anpassen' stub (t-paliad-163 Phase 2 placeholder) is gone; the axis
mounts the picker instead. New default presets surface 6 chips +
ALLES centre + Anpassen, plus the per-surface timePresets override
filters down to whatever subset the surface declares. 'any' still
maps to BarState.time = undefined to keep the canonical URL short
and preserve the existing 'no overlay' semantics.

frontend/src/client/filter-bar/types.ts — TimeOverlay.horizon union
extended with next_1d / next_14d / next_all / past_1d / past_14d /
past_all.

frontend/src/client/filter-bar/url-codec.ts — parseHorizon accepts
the six new values; existing 9 values continue to round-trip.

frontend/src/client/filter-bar/url-codec.test.ts — round-trip
iteration extended to all 14 horizons.

frontend/src/client/views/types.ts — TimeHorizon TS mirror extended.

frontend/src/client/projects-detail.ts — horizonBounds covers the
six new values (open-ended for next_all/past_all so the upstream
filter treats nil bounds as 'no narrowing in that direction').

# i18n + retired legacy keys

frontend/src/client/i18n.ts — 30 new keys per language (date_range.*
namespace for the picker + 6 missing views.horizon.* labels for
existing dynamic-key composition in views.ts:317). Legacy
views.bar.time.* keys (10 per language) retired with a one-line
breadcrumb comment pointing at the date_range.* namespace.

frontend/src/i18n-keys.ts — regenerated by build.ts.

# CSS

frontend/src/styles/global.css — date-range-* class block (256 LoC).
Trigger button, popover panel, past/centre/next groups, custom-range
editor, mobile stack at <540px. Reuses --color-accent /
--color-accent-light / --color-bg-lime-tint / --color-border /
--color-text + .agenda-chip / .agenda-chip-active for chip styling
so every active state lights up with the same lime accent as every
other paliad filter chip — no new tokens, no fresh dark-mode
contrast risk (t-paliad-150 / fritz lesson held).

# Surfaces lit up by this single change

- /projects/:id Verlauf (filter-bar consumer)
- /views runtime
- /views/:id Custom-Views editor
- /inbox InboxFilterBar

All four pick up the picker on their next page load. Per-surface
presets (timePresets MountOpt) preserved exactly; Verlauf still
shows the past-only subset, /inbox the forward-leaning subset etc.
The custom chip that's been disabled-with-coming_soon since
t-paliad-163 now works.

# Tests + build hygiene

- go build ./... clean
- go test ./internal/services/ clean (filter_spec + new bounds test)
- bun test passes (150 tests, 8 files, 377 expect calls)
- bun run build clean (2848 i18n keys, data-i18n scan clean)

# What's NOT in this slice

- /agenda chip-row migration (Slice B).
- /admin/audit-log + /projects/:id/chart migration (Slice C).
- upckommentar-style range slicer for custom mode (Slice D, separate
  task).
2026-05-25 15:47:51 +02:00

290 lines
11 KiB
TypeScript

// Unit tests for the date-range picker's pure helpers (t-paliad-248).
// Run with `bun test`.
import { test, expect, describe } from "bun:test";
import {
horizonBounds,
isValidHorizon,
isValidISODate,
validateCustomRange,
parseURL,
serializeURL,
isDefault,
ALL_HORIZONS,
PAST_HORIZONS,
NEXT_HORIZONS,
type TimeHorizon,
type TimeSpec,
} from "./date-range-picker-pure";
// Anchor the clock so day-arithmetic assertions don't drift with the
// wall clock. 2026-05-25 00:00 UTC matches the Go-side bounds test.
const NOW = new Date(Date.UTC(2026, 4, 25));
const DAY = (offsetDays: number): Date =>
new Date(NOW.getTime() + offsetDays * 86_400_000);
describe("ALL_HORIZONS / PAST / NEXT registries", () => {
test("registries sum to a known total without overlap", () => {
// 6 past + 6 next + any + custom = 14 fan chips (custom is the
// trailing entry in ALL_HORIZONS; `all` is intentionally absent —
// surfaces don't render the legacy bidirectional-unbounded chip).
expect(ALL_HORIZONS.length).toBe(14);
expect(PAST_HORIZONS.length).toBe(6);
expect(NEXT_HORIZONS.length).toBe(6);
expect(new Set(ALL_HORIZONS).size).toBe(ALL_HORIZONS.length);
});
test("PAST_HORIZONS are all past_*", () => {
for (const h of PAST_HORIZONS) {
expect(h.startsWith("past_")).toBe(true);
}
});
test("NEXT_HORIZONS are all next_*", () => {
for (const h of NEXT_HORIZONS) {
expect(h.startsWith("next_")).toBe(true);
}
});
test("ALL_HORIZONS ends with custom and contains any in the middle", () => {
expect(ALL_HORIZONS.at(-1)).toBe("custom");
expect(ALL_HORIZONS).toContain("any");
});
});
describe("horizonBounds", () => {
test("future fan: bounds anchor at today, extend forward", () => {
expect(horizonBounds("next_1d", NOW)).toEqual({ from: DAY(0), to: DAY(1) });
expect(horizonBounds("next_7d", NOW)).toEqual({ from: DAY(0), to: DAY(7) });
expect(horizonBounds("next_14d", NOW)).toEqual({ from: DAY(0), to: DAY(14) });
expect(horizonBounds("next_30d", NOW)).toEqual({ from: DAY(0), to: DAY(30) });
expect(horizonBounds("next_90d", NOW)).toEqual({ from: DAY(0), to: DAY(90) });
});
test("past fan: bounds extend back, upper bound is tomorrow (exclusive end-of-today)", () => {
expect(horizonBounds("past_1d", NOW)).toEqual({ from: DAY(-1), to: DAY(1) });
expect(horizonBounds("past_7d", NOW)).toEqual({ from: DAY(-7), to: DAY(1) });
expect(horizonBounds("past_14d", NOW)).toEqual({ from: DAY(-14), to: DAY(1) });
expect(horizonBounds("past_30d", NOW)).toEqual({ from: DAY(-30), to: DAY(1) });
expect(horizonBounds("past_90d", NOW)).toEqual({ from: DAY(-90), to: DAY(1) });
});
test("next_all is one-sided: from=today, to undefined", () => {
const b = horizonBounds("next_all", NOW);
expect(b.from).toEqual(DAY(0));
expect(b.to).toBeUndefined();
});
test("past_all is one-sided: from undefined, to=tomorrow", () => {
const b = horizonBounds("past_all", NOW);
expect(b.from).toBeUndefined();
expect(b.to).toEqual(DAY(1));
});
test("any / all / custom: both bounds undefined", () => {
expect(horizonBounds("any", NOW)).toEqual({});
expect(horizonBounds("all", NOW)).toEqual({});
expect(horizonBounds("custom", NOW)).toEqual({});
});
test("bounds anchor on UTC start-of-day regardless of input clock time", () => {
const nowAfternoon = new Date(Date.UTC(2026, 4, 25, 14, 37, 0));
const nowMidnight = new Date(Date.UTC(2026, 4, 25, 0, 0, 0));
expect(horizonBounds("past_7d", nowAfternoon)).toEqual(horizonBounds("past_7d", nowMidnight));
});
});
describe("isValidHorizon", () => {
test("accepts every entry in ALL_HORIZONS plus 'all' (legacy)", () => {
for (const h of ALL_HORIZONS) {
expect(isValidHorizon(h)).toBe(true);
}
expect(isValidHorizon("all")).toBe(true);
});
test("rejects unknown strings, numbers, undefined, null", () => {
expect(isValidHorizon("next_5d")).toBe(false);
expect(isValidHorizon("past_100d")).toBe(false);
expect(isValidHorizon("")).toBe(false);
expect(isValidHorizon(7)).toBe(false);
expect(isValidHorizon(undefined)).toBe(false);
expect(isValidHorizon(null)).toBe(false);
});
});
describe("isValidISODate", () => {
test("accepts valid YYYY-MM-DD", () => {
expect(isValidISODate("2026-05-25")).toBe(true);
expect(isValidISODate("2026-12-31")).toBe(true);
expect(isValidISODate("2024-02-29")).toBe(true);
});
test("rejects shape mismatches", () => {
expect(isValidISODate("2026/05/25")).toBe(false);
expect(isValidISODate("25.05.2026")).toBe(false);
expect(isValidISODate("2026-5-25")).toBe(false);
expect(isValidISODate("")).toBe(false);
expect(isValidISODate(undefined)).toBe(false);
});
test("rejects calendar-impossible dates (Date.parse silently rolls over)", () => {
expect(isValidISODate("2026-02-30")).toBe(false);
expect(isValidISODate("2026-13-01")).toBe(false);
expect(isValidISODate("2026-04-31")).toBe(false);
});
test("rejects 2025-02-29 (non-leap February)", () => {
expect(isValidISODate("2025-02-29")).toBe(false);
});
});
describe("validateCustomRange", () => {
test("requires both bounds present and valid", () => {
expect(validateCustomRange(undefined, undefined)).toBe("date_range.custom.invalid_missing");
expect(validateCustomRange("2026-05-25", undefined)).toBe("date_range.custom.invalid_missing");
expect(validateCustomRange(undefined, "2026-05-25")).toBe("date_range.custom.invalid_missing");
});
test("rejects malformed dates with format error", () => {
expect(validateCustomRange("bogus", "2026-05-25")).toBe("date_range.custom.invalid_format");
expect(validateCustomRange("2026-13-01", "2026-12-31")).toBe("date_range.custom.invalid_format");
});
test("rejects to <= from with invalid error", () => {
expect(validateCustomRange("2026-05-25", "2026-05-25")).toBe("date_range.custom.invalid");
expect(validateCustomRange("2026-05-25", "2026-05-24")).toBe("date_range.custom.invalid");
});
test("accepts strictly-ordered valid pair", () => {
expect(validateCustomRange("2026-05-25", "2026-05-26")).toBeNull();
expect(validateCustomRange("2026-01-01", "2026-12-31")).toBeNull();
});
});
describe("parseURL", () => {
test("missing horizon yields contract default", () => {
expect(parseURL(new URLSearchParams(""))).toEqual({ horizon: "any" });
expect(parseURL(new URLSearchParams(""), { default: "next_30d" })).toEqual({ horizon: "next_30d" });
});
test("unknown horizon falls back to default, doesn't throw", () => {
expect(parseURL(new URLSearchParams("horizon=mystery"), { default: "next_7d" }))
.toEqual({ horizon: "next_7d" });
});
test("every fan horizon round-trips on a fresh URLSearchParams", () => {
for (const h of ALL_HORIZONS) {
if (h === "custom") continue;
const params = new URLSearchParams(`horizon=${h}`);
expect(parseURL(params)).toEqual({ horizon: h });
}
});
test("custom horizon reads from+to", () => {
const params = new URLSearchParams("horizon=custom&horizon_from=2026-03-15&horizon_to=2026-04-30");
expect(parseURL(params)).toEqual({
horizon: "custom",
from: "2026-03-15",
to: "2026-04-30",
});
});
test("custom with malformed dates falls back to default rather than half-state", () => {
const params = new URLSearchParams("horizon=custom&horizon_from=2026-99-99&horizon_to=2026-04-30");
expect(parseURL(params, { default: "next_30d" })).toEqual({ horizon: "next_30d" });
});
test("custom with from>=to falls back", () => {
const params = new URLSearchParams("horizon=custom&horizon_from=2026-05-25&horizon_to=2026-05-25");
expect(parseURL(params)).toEqual({ horizon: "any" });
});
test("custom URL key override", () => {
const params = new URLSearchParams("range=past_30d");
expect(parseURL(params, { key: "range" })).toEqual({ horizon: "past_30d" });
expect(parseURL(params)).toEqual({ horizon: "any" }); // default `horizon` key absent
});
});
describe("serializeURL", () => {
test("default horizon is omitted (canonical URL stays short)", () => {
const params = new URLSearchParams();
serializeURL({ horizon: "any" }, params);
expect(params.toString()).toBe("");
});
test("explicit default param removed when value matches default", () => {
const params = new URLSearchParams("horizon=past_30d&other=keep");
serializeURL({ horizon: "past_30d" }, params, { default: "past_30d" });
expect(params.toString()).toBe("other=keep");
});
test("non-default horizon is written", () => {
const params = new URLSearchParams("other=keep");
serializeURL({ horizon: "next_7d" }, params);
expect(params.toString()).toBe("other=keep&horizon=next_7d");
});
test("custom writes horizon+from+to", () => {
const params = new URLSearchParams();
serializeURL({ horizon: "custom", from: "2026-03-15", to: "2026-04-30" }, params);
expect(params.toString()).toBe("horizon=custom&horizon_from=2026-03-15&horizon_to=2026-04-30");
});
test("custom partial bounds: from/to are written individually", () => {
const params = new URLSearchParams();
serializeURL({ horizon: "custom", from: "2026-03-15" }, params);
expect(params.toString()).toBe("horizon=custom&horizon_from=2026-03-15");
});
test("stale params cleared on re-serialize", () => {
const params = new URLSearchParams("horizon=custom&horizon_from=2026-03-15&horizon_to=2026-04-30&other=keep");
serializeURL({ horizon: "past_30d" }, params);
expect(params.toString()).toBe("other=keep&horizon=past_30d");
// Stale from/to must be gone.
expect(params.has("horizon_from")).toBe(false);
expect(params.has("horizon_to")).toBe(false);
});
test("key override propagates to from/to", () => {
const params = new URLSearchParams();
serializeURL({ horizon: "custom", from: "2026-03-15", to: "2026-04-30" }, params, { key: "range" });
expect(params.toString()).toBe("range=custom&range_from=2026-03-15&range_to=2026-04-30");
});
test("URL round-trips through parse → serialize → parse", () => {
const specs: TimeSpec[] = [
{ horizon: "any" },
{ horizon: "next_7d" },
{ horizon: "past_all" },
{ horizon: "next_all" },
{ horizon: "custom", from: "2026-03-15", to: "2026-04-30" },
];
for (const spec of specs) {
const params = new URLSearchParams();
serializeURL(spec, params);
expect(parseURL(params)).toEqual(spec);
}
});
});
describe("isDefault", () => {
test("true when horizon matches default exactly", () => {
expect(isDefault({ horizon: "any" }, "any")).toBe(true);
expect(isDefault({ horizon: "next_30d" }, "next_30d")).toBe(true);
});
test("false when horizon differs", () => {
expect(isDefault({ horizon: "past_7d" }, "any")).toBe(false);
expect(isDefault({ horizon: "next_30d" }, "next_7d")).toBe(false);
});
test("custom is never default — even when bounds match", () => {
// No surface treats "custom" as the natural default, so any custom
// selection IS user-driven and the closed button must surface
// the non-default indicator.
expect(isDefault({ horizon: "custom", from: "2026-01-01", to: "2026-12-31" }, "custom" as TimeHorizon))
.toBe(false);
});
});