test(latest-image+use-feature-gate): extract pure helpers and add 29 unit tests

Author: adibarra

packages/app/src/components/latest-image/latest-image-content.tsx

@@ -16,17 +16,17 @@ import {
 import { TooltipProvider } from '@/components/ui/tooltip';
 import { useFrameworkReleases } from '@/hooks/api/use-framework-releases';
 import { useLatestImages } from '@/hooks/api/use-latest-images';
-import type { FrameworkReleases, LatestImageRow } from '@/lib/api';
+import type { LatestImageRow } from '@/lib/api';
 import { track } from '@/lib/analytics';
 import { getFrameworkLabel } from '@/lib/utils';
-
-/** Map framework variants to their base framework for release lookup. */
-const FRAMEWORK_TO_BASE: Record<string, string> = {
-  vllm: 'vllm',
-  sglang: 'sglang',
-  'dynamo-sglang': 'sglang',
-  'mori-sglang': 'sglang',
-};
+import {
+  AGE_MAX_RED_DAYS,
+  ageColorStyle,
+  ageRowStyle,
+  daysSince,
+  getActualLatestTag,
+  isOutdated,
+} from './latest-image-utils';
 
 /**
  * Disaggregated frameworks pair a separate prefill/decode pool — identified by
@@ -83,64 +83,6 @@ function formatSpecMethod(method: string) {
   return method === 'none' ? 'Off' : method.toUpperCase();
 }
 
-function getActualLatestTag(framework: string, releases: FrameworkReleases | undefined) {
-  if (!releases) return null;
-  const base = FRAMEWORK_TO_BASE[framework];
-  if (!base) return null;
-  return releases[base] ?? null;
-}
-
-const UNSTABLE_PATTERNS = ['nightly', 'rocm/sgl-dev', 'sglang-rocm'];
-
-/** Whole-day delta between today (UTC) and an ISO date string (YYYY-MM-DD). */
-function daysSince(dateStr: string, today: Date): number {
-  const submitted = new Date(`${dateStr}T00:00:00Z`).getTime();
-  const ms = today.getTime() - submitted;
-  return Math.max(0, Math.floor(ms / 86_400_000));
-}
-
-/** Age past which the cell is rendered at max red — anything older looks identical. */
-const AGE_MAX_RED_DAYS = 60;
-
-/**
- * Returns inline style for the Days-Since-Update cell so older rows scream
- * louder visually. Ramps from a subtle red at 1 day to deep red at 60 days
- * (then clamps); 0-day rows return `undefined` so the cell falls back to the
- * muted-foreground class.
- */
-function ageColorStyle(days: number): React.CSSProperties | undefined {
-  if (days < 1) return undefined;
-  const t = Math.min(AGE_MAX_RED_DAYS, days) / AGE_MAX_RED_DAYS; // 0.017 … 1
-  // Perceptually-uniform OKLCH ramp at hue 25 (red): lightness drops as
-  // chroma rises, so the cell goes from light pink to saturated dark red.
-  const L = 0.78 - 0.28 * t;
-  const C = 0.12 + 0.12 * t;
-  return { color: `oklch(${L.toFixed(3)} ${C.toFixed(3)} 25)` };
-}
-
-/**
- * Companion to `ageColorStyle` for the whole row's background tint — same
- * 1d → 60d ramp but expressed as a low-alpha fill so the row content stays
- * readable. 0-day rows return `undefined` so the row falls back to its
- * hover-only class background.
- */
-function ageRowStyle(days: number): React.CSSProperties | undefined {
-  if (days < 1) return undefined;
-  const t = Math.min(AGE_MAX_RED_DAYS, days) / AGE_MAX_RED_DAYS;
-  // Alpha tops out around 0.28 — enough that 60d+ rows are unmistakably
-  // tinted without drowning out the text or competing with hover affordance.
-  const alpha = (0.04 + 0.24 * t).toFixed(3);
-  return { backgroundColor: `oklch(0.60 0.22 25 / ${alpha})` };
-}
-
-/** Check if the image tag is outdated or uses an unstable/dev image. */
-function isOutdated(image: string, actualLatest: string | null): boolean {
-  const lower = image.toLowerCase();
-  if (UNSTABLE_PATTERNS.some((p) => lower.includes(p))) return true;
-  if (!actualLatest) return false;
-  return !image.includes(actualLatest);
-}
-
 export function CurrentImageContent() {
   const { data, isLoading, error } = useLatestImages();
   const { data: releases } = useFrameworkReleases();

packages/app/src/components/latest-image/latest-image-utils.test.ts

@@ -0,0 +1,132 @@
+import { describe, expect, it } from 'vitest';
+
+import {
+  AGE_MAX_RED_DAYS,
+  ageColorStyle,
+  ageRowStyle,
+  daysSince,
+  getActualLatestTag,
+  isOutdated,
+} from './latest-image-utils';
+
+const lightnessOf = (s: string) => Number(s.match(/oklch\(([\d.]+)/u)?.[1] ?? Number.NaN);
+const alphaOf = (s: string) => Number(s.match(/\/ ([\d.]+)\)/u)?.[1] ?? Number.NaN);
+
+describe('daysSince', () => {
+  it('returns 0 for today', () => {
+    const today = new Date('2026-05-27T12:34:56Z');
+    expect(daysSince('2026-05-27', today)).toBe(0);
+  });
+
+  it('returns whole days for dates strictly in the past', () => {
+    const today = new Date('2026-05-27T00:00:00Z');
+    expect(daysSince('2026-05-26', today)).toBe(1);
+    expect(daysSince('2026-05-20', today)).toBe(7);
+    expect(daysSince('2026-03-28', today)).toBe(60);
+  });
+
+  it('floors to whole days regardless of intraday hour offset', () => {
+    // The submitted-day anchor is 00:00Z; an early-morning "today" still
+    // belongs to the same UTC day, so 23:59 vs 00:01 must round identically.
+    const today = new Date('2026-05-28T00:01:00Z');
+    expect(daysSince('2026-05-27', today)).toBe(1);
+    const lateToday = new Date('2026-05-28T23:59:00Z');
+    expect(daysSince('2026-05-27', lateToday)).toBe(1);
+  });
+
+  it('clamps at 0 for future-dated submissions (never returns negative)', () => {
+    const today = new Date('2026-05-27T00:00:00Z');
+    expect(daysSince('2026-06-01', today)).toBe(0);
+  });
+});
+
+describe('ageColorStyle', () => {
+  it('returns undefined for 0-day rows so the muted-foreground class wins', () => {
+    expect(ageColorStyle(0)).toBeUndefined();
+  });
+
+  it('returns an oklch color for 1d and ramps toward darker red at AGE_MAX_RED_DAYS', () => {
+    const oneDay = ageColorStyle(1);
+    const maxDay = ageColorStyle(AGE_MAX_RED_DAYS);
+    expect(oneDay?.color).toMatch(/^oklch\(/u);
+    expect(maxDay?.color).toMatch(/^oklch\(/u);
+    // Lightness L drops as days grow; AGE_MAX_RED_DAYS sits at L≈0.50, 1d at L≈0.77.
+    expect(lightnessOf(maxDay!.color as string)).toBeLessThan(lightnessOf(oneDay!.color as string));
+  });
+
+  it('clamps anything past AGE_MAX_RED_DAYS to the same color (no extrapolation past the ramp)', () => {
+    const at60 = ageColorStyle(AGE_MAX_RED_DAYS);
+    const at365 = ageColorStyle(365);
+    expect(at60).toEqual(at365);
+  });
+});
+
+describe('ageRowStyle', () => {
+  it('returns undefined for 0-day rows', () => {
+    expect(ageRowStyle(0)).toBeUndefined();
+  });
+
+  it('returns a low-alpha oklch background that ramps from ~0.04 to ~0.28', () => {
+    const oneDay = ageRowStyle(1);
+    const maxDay = ageRowStyle(AGE_MAX_RED_DAYS);
+    const a1 = alphaOf(oneDay!.backgroundColor as string);
+    const aMax = alphaOf(maxDay!.backgroundColor as string);
+    expect(a1).toBeGreaterThan(0);
+    expect(a1).toBeLessThan(0.1);
+    expect(aMax).toBeGreaterThan(0.2);
+    expect(aMax).toBeLessThanOrEqual(0.3);
+  });
+
+  it('clamps past AGE_MAX_RED_DAYS so a 1y-old row looks identical to a 60d row', () => {
+    expect(ageRowStyle(AGE_MAX_RED_DAYS)).toEqual(ageRowStyle(365));
+  });
+});
+
+describe('isOutdated', () => {
+  it('is false when image contains the latest tag', () => {
+    expect(isOutdated('sgl-project/sglang:v0.5.12-cu130', 'v0.5.12')).toBe(false);
+  });
+
+  it('is true when image does not contain the latest tag', () => {
+    expect(isOutdated('sgl-project/sglang:v0.5.10-cu130', 'v0.5.12')).toBe(true);
+  });
+
+  it('is true for nightly tags regardless of latest', () => {
+    expect(isOutdated('sgl-project/sglang:nightly', 'v0.5.12')).toBe(true);
+    expect(isOutdated('sgl-project/sglang:nightly', null)).toBe(true);
+  });
+
+  it('is true for rocm/sgl-dev and sglang-rocm patterns (case-insensitive)', () => {
+    expect(isOutdated('rocm/sgl-dev:latest', 'v0.5.12')).toBe(true);
+    expect(isOutdated('ROCM/SGL-DEV:foo', 'v0.5.12')).toBe(true);
+    expect(isOutdated('myreg/sglang-rocm:bar', 'v0.5.12')).toBe(true);
+  });
+
+  it('is false when actualLatest is null and tag is not in UNSTABLE_PATTERNS', () => {
+    // No release data → can't classify as outdated. Avoid red-flagging a row
+    // we have no ground truth for.
+    expect(isOutdated('vllm/vllm-openai:v0.21.0', null)).toBe(false);
+  });
+});
+
+describe('getActualLatestTag', () => {
+  it('looks up the base framework from FRAMEWORK_TO_BASE and returns its release', () => {
+    const releases = { vllm: 'v0.21.0', sglang: 'v0.5.12' };
+    expect(getActualLatestTag('vllm', releases)).toBe('v0.21.0');
+    expect(getActualLatestTag('sglang', releases)).toBe('v0.5.12');
+    expect(getActualLatestTag('dynamo-sglang', releases)).toBe('v0.5.12');
+    expect(getActualLatestTag('mori-sglang', releases)).toBe('v0.5.12');
+  });
+
+  it('returns null when releases is undefined (API still loading)', () => {
+    expect(getActualLatestTag('vllm', undefined)).toBeNull();
+  });
+
+  it('returns null for an unknown framework (no base mapping)', () => {
+    expect(getActualLatestTag('trt', { vllm: 'v0.21.0', sglang: 'v0.5.12' })).toBeNull();
+  });
+
+  it('returns null when the base release is missing from the releases map', () => {
+    expect(getActualLatestTag('vllm', { sglang: 'v0.5.12' })).toBeNull();
+  });
+});

packages/app/src/components/latest-image/latest-image-utils.ts

@@ -0,0 +1,77 @@
+import type { CSSProperties } from 'react';
+
+import type { FrameworkReleases } from '@/lib/api';
+
+/** Map framework variants to their base framework for release lookup. */
+export const FRAMEWORK_TO_BASE: Record<string, string> = {
+  vllm: 'vllm',
+  sglang: 'sglang',
+  'dynamo-sglang': 'sglang',
+  'mori-sglang': 'sglang',
+};
+
+/**
+ * Substrings that mark an image tag as unstable / pre-release. Lowercased
+ * comparison — kept here (not inlined) so tests can re-import and stay in
+ * sync with the runtime classifier.
+ */
+export const UNSTABLE_PATTERNS = ['nightly', 'rocm/sgl-dev', 'sglang-rocm'];
+
+/** Age past which the cell is rendered at max red — anything older looks identical. */
+export const AGE_MAX_RED_DAYS = 60;
+
+/** Whole-day delta between today (UTC) and an ISO date string (YYYY-MM-DD). */
+export function daysSince(dateStr: string, today: Date): number {
+  const submitted = new Date(`${dateStr}T00:00:00Z`).getTime();
+  const ms = today.getTime() - submitted;
+  return Math.max(0, Math.floor(ms / 86_400_000));
+}
+
+/**
+ * Inline style for the Days-Since-Update cell so older rows scream louder
+ * visually. Ramps from a subtle red at 1 day to deep red at 60 days (then
+ * clamps); 0-day rows return `undefined` so the cell falls back to the
+ * muted-foreground class.
+ */
+export function ageColorStyle(days: number): CSSProperties | undefined {
+  if (days < 1) return undefined;
+  const t = Math.min(AGE_MAX_RED_DAYS, days) / AGE_MAX_RED_DAYS;
+  // Perceptually-uniform OKLCH ramp at hue 25 (red): lightness drops as
+  // chroma rises, so the cell goes from light pink to saturated dark red.
+  const L = 0.78 - 0.28 * t;
+  const C = 0.12 + 0.12 * t;
+  return { color: `oklch(${L.toFixed(3)} ${C.toFixed(3)} 25)` };
+}
+
+/**
+ * Companion to ageColorStyle for the whole row's background tint — same
+ * 1d → 60d ramp but expressed as a low-alpha fill so the row content stays
+ * readable. 0-day rows return undefined so the row falls back to its
+ * hover-only class background.
+ */
+export function ageRowStyle(days: number): CSSProperties | undefined {
+  if (days < 1) return undefined;
+  const t = Math.min(AGE_MAX_RED_DAYS, days) / AGE_MAX_RED_DAYS;
+  // Alpha tops out around 0.28 — enough that 60d+ rows are unmistakably
+  // tinted without drowning out the text or competing with hover affordance.
+  const alpha = (0.04 + 0.24 * t).toFixed(3);
+  return { backgroundColor: `oklch(0.60 0.22 25 / ${alpha})` };
+}
+
+/** Check if the image tag is outdated or uses an unstable/dev image. */
+export function isOutdated(image: string, actualLatest: string | null): boolean {
+  const lower = image.toLowerCase();
+  if (UNSTABLE_PATTERNS.some((p) => lower.includes(p))) return true;
+  if (!actualLatest) return false;
+  return !image.includes(actualLatest);
+}
+
+export function getActualLatestTag(
+  framework: string,
+  releases: FrameworkReleases | undefined,
+): string | null {
+  if (!releases) return null;
+  const base = FRAMEWORK_TO_BASE[framework];
+  if (!base) return null;
+  return releases[base] ?? null;
+}