yusufipek/OpenFrame
1
0
Fork 0
mirror of https://github.com/yusufipk/OpenFrame.git synced 2026-09-11 17:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

test: add unit, API, component and end-to-end test suites

Browse Source 
The repo had no automated tests. Every change was verified by hand.

Adds four layers, 2023 tests in total, runnable with one command:

- 1191 unit tests over the pure logic in lib/, including the full
  computeProjectAccess permission matrix and the billing gate
- 167 component and hook tests in jsdom, covering the hooks that hold
  real logic rather than presentational wrappers
- 647 API integration tests against a real Postgres, with only auth()
  mocked, including a data-driven sweep asserting that none of the 60
  route modules answers 2xx to an unauthenticated caller
- 18 Playwright specs driving a real browser against a real build

Infrastructure: vitest.config.ts with three projects, a disposable
Postgres and MinIO in docker-compose.test.yml, factories and helpers
under tests/, scripts/test.sh as the single entry point, a pre-push
hook running bun run verify, and CI split into check, test and e2e jobs.

The test database is built with prisma db push plus a replay of the
hand-written SQL, because prisma migrate deploy cannot build this schema
from empty: the migration history has no captured baseline. This mirrors
what scripts/docker-db-bootstrap.ts already does in production, and
tests/setup/db-global.ts carries a drift guard so a new migration fails
the run until someone reviews it.

Production code is unchanged apart from one pure-function extraction out
of use-video-player.ts, which was too large to test in jsdom.

Several tests pin behaviour that looks wrong, each marked KNOWN BUG in
place. TESTING.md section 12 records where the plan turned out to be
wrong, and AGENTS.md now states which layer a change needs a test in.
This commit is contained in:
yusufipk
2026-07-26 11:17:26 +07:00
parent 52b2c8d2a9
commit 1d099c68f2
101 changed files with 27625 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/video-page/hooks/use-video-player.ts
+47 -99
View File
@@ -20,17 +20,19 @@ import type {
Version,
} from '@/components/video-page/types';
import { validateAnnotationStrokes } from '@/lib/validation';
// A frame number is only meaningful against a stable rate: a raw measurement
// drifts (29.94, 30.07, ...) and would slide the count by whole frames late in a
// long video. Snap to the nearest broadcast standard when we are close enough.
const STANDARD_FRAME_RATES = [23.976, 24, 25, 29.97, 30, 48, 50, 59.94, 60, 120];
function normalizeFrameRate(rate: number | undefined): number | null {
if (typeof rate !== 'number' || !Number.isFinite(rate) || rate < 12 || rate > 120) return null;
const standard = STANDARD_FRAME_RATES.find((value) => Math.abs(rate - value) / value < 0.015);
return standard ?? rate;
}
import {
clampSeekTime,
getAdjacentPlaybackSpeed,
getFrameIndexAtTime,
getFrameStepLabel,
getFrameStepSeconds,
getPlayheadPercent,
isTypingTarget,
normalizeFrameRate,
resolvePlayerShortcut,
resolveSkipAmount as resolveSkipAmountFor,
timeFromClientX as timeFromClientXWithin,
} from '@/components/video-page/hooks/video-player-utils';
interface UseVideoPlayerParams {
activeVersion: Version | undefined;
@@ -133,19 +135,12 @@ export function useVideoPlayer({
};
}, []);
const frameStepSeconds = useMemo(() => {
if (estimatedFrameRate && Number.isFinite(estimatedFrameRate) && estimatedFrameRate > 0) {
return 1 / estimatedFrameRate;
}
return 1;
}, [estimatedFrameRate]);
const frameStepSeconds = useMemo(
() => getFrameStepSeconds(estimatedFrameRate),
[estimatedFrameRate]
);
const frameStepLabel = useMemo(() => {
if (estimatedFrameRate && Number.isFinite(estimatedFrameRate) && estimatedFrameRate > 0) {
return '1f';
}
return '1s';
}, [estimatedFrameRate]);
const frameStepLabel = useMemo(() => getFrameStepLabel(estimatedFrameRate), [estimatedFrameRate]);
const stopBunnyFrameTracking = useCallback(() => {
const videoEl = videoRef.current;
@@ -950,7 +945,7 @@ export function useVideoPlayer({
const applyPlayhead = useCallback(
(time: number) => {
const d = durationRef.current;
const percent = d > 0 ? Math.max(0, Math.min(100, (time / d) * 100)) : 0;
const percent = getPlayheadPercent(time, d);
if (progressRef.current) progressRef.current.style.width = `${percent}%`;
if (playheadRef.current) playheadRef.current.style.left = `calc(${percent}% - 2px)`;
@@ -963,11 +958,7 @@ export function useVideoPlayer({
if (rate === null) {
readoutEl.textContent = formatTime(time);
} else {
// Frame N covers [N/rate, (N+1)/rate); the epsilon keeps a time that
// lands exactly on a boundary from floating-point-ing down to N-1.
const lastFrame = d > 0 ? Math.max(0, Math.ceil(d * rate) - 1) : 0;
const frame = Math.min(Math.floor(time * rate + 1e-6), lastFrame);
readoutEl.textContent = `${formatTime(time)} · f${frame}`;
readoutEl.textContent = `${formatTime(time)} · f${getFrameIndexAtTime(time, rate, d)}`;
}
}
},
@@ -1043,11 +1034,7 @@ export function useVideoPlayer({
}, [currentTime, isPlaying, isDragging, applyPlayhead]);
const resolveSkipAmount = useCallback(
(seconds: number) => {
if (!isFrameMode) return seconds;
const direction = seconds === 0 ? 1 : Math.sign(seconds);
return frameStepSeconds * direction;
},
(seconds: number) => resolveSkipAmountFor(seconds, { isFrameMode, frameStepSeconds }),
[frameStepSeconds, isFrameMode]
);
@@ -1118,7 +1105,7 @@ export function useVideoPlayer({
const handleSkip = useCallback(
(seconds: number) => {
const newTime = Math.max(0, Math.min(duration, currentTime + resolveSkipAmount(seconds)));
const newTime = clampSeekTime(currentTime + resolveSkipAmount(seconds), duration);
handleSeekToTimestamp(newTime);
flashSeekReadout();
},
@@ -1131,15 +1118,23 @@ export function useVideoPlayer({
return;
}
const target = e.target as HTMLElement;
if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
if (isTypingTarget(e.target as HTMLElement)) {
return;
}
switch (e.code) {
case 'Space':
case 'KeyK':
e.preventDefault();
const shortcut = resolvePlayerShortcut(e);
if (shortcut === null) return;
e.preventDefault();
const stepPlaybackSpeed = (direction: 1 | -1) => {
const newSpeed = getAdjacentPlaybackSpeed(speedOptions, playbackSpeed, direction);
if (newSpeed === null) return;
setPlaybackSpeed(newSpeed);
playerRef.current?.setPlaybackRate(newSpeed);
};
switch (shortcut) {
case 'toggle-play':
if (playerRef.current) {
if (isPlaying) {
playerRef.current.pauseVideo();
@@ -1148,60 +1143,19 @@ export function useVideoPlayer({
}
}
break;
case 'ArrowLeft':
e.preventDefault();
case 'skip-back':
handleSkip(-5);
break;
case 'ArrowRight':
e.preventDefault();
case 'skip-forward':
handleSkip(5);
break;
case 'ArrowUp':
e.preventDefault();
{
const currentIndex = speedOptions.indexOf(playbackSpeed);
if (currentIndex < speedOptions.length - 1) {
const newSpeed = speedOptions[currentIndex + 1];
setPlaybackSpeed(newSpeed);
playerRef.current?.setPlaybackRate(newSpeed);
}
}
case 'speed-up':
stepPlaybackSpeed(1);
break;
case 'ArrowDown':
e.preventDefault();
{
const currentIndex = speedOptions.indexOf(playbackSpeed);
if (currentIndex > 0) {
const newSpeed = speedOptions[currentIndex - 1];
setPlaybackSpeed(newSpeed);
playerRef.current?.setPlaybackRate(newSpeed);
}
}
case 'speed-down':
stepPlaybackSpeed(-1);
break;
case 'Comma':
if (e.shiftKey) {
e.preventDefault();
const currentIndex = speedOptions.indexOf(playbackSpeed);
if (currentIndex > 0) {
const newSpeed = speedOptions[currentIndex - 1];
setPlaybackSpeed(newSpeed);
playerRef.current?.setPlaybackRate(newSpeed);
}
}
break;
case 'Period':
if (e.shiftKey) {
e.preventDefault();
const currentIndex = speedOptions.indexOf(playbackSpeed);
if (currentIndex < speedOptions.length - 1) {
const newSpeed = speedOptions[currentIndex + 1];
setPlaybackSpeed(newSpeed);
playerRef.current?.setPlaybackRate(newSpeed);
}
}
break;
case 'KeyM':
e.preventDefault();
case 'toggle-mute':
if (playerRef.current) {
if (isMuted) {
playerRef.current.unMute();
@@ -1211,8 +1165,7 @@ export function useVideoPlayer({
setIsMuted(!isMuted);
}
break;
case 'KeyJ':
e.preventDefault();
case 'jump-back':
if (playerRef.current?.seekTo) {
const newTime = Math.max(0, currentTime - 10);
playerRef.current.seekTo(newTime, true);
@@ -1220,8 +1173,7 @@ export function useVideoPlayer({
flashSeekReadout();
}
break;
case 'KeyL':
e.preventDefault();
case 'jump-forward':
if (playerRef.current?.seekTo) {
const newTime = Math.min(duration, currentTime + 10);
playerRef.current.seekTo(newTime, true);
@@ -1229,8 +1181,7 @@ export function useVideoPlayer({
flashSeekReadout();
}
break;
case 'KeyF':
e.preventDefault();
case 'toggle-fullscreen':
toggleFullscreen();
break;
}
@@ -1308,10 +1259,7 @@ export function useVideoPlayer({
// Convert a clientX into a time using the timeline rect captured at drag start
// (avoids a layout read on every move).
const timeFromClientX = useCallback((clientX: number) => {
const rect = dragRectRef.current;
if (!rect || rect.width === 0) return 0;
const percentage = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
return percentage * durationRef.current;
return timeFromClientXWithin(clientX, dragRectRef.current, durationRef.current);
}, []);
const handleTimelineMouseDown = useCallback(