Start to add test coverage to AppState

frontend/src/AppState.test.ts

@@ -0,0 +1,50 @@
+import { MediaSet } from './generated/media_set';
+import { stateReducer, State } from './AppState';
+import { from } from 'rxjs';
+import { PlayState } from './Player';
+import { CanvasLogicalWidth } from './HudCanvasState';
+
+const initialState: State = {
+  selection: { start: 0, end: 0 },
+  viewport: { start: 0, end: 441000 },
+  overviewPeaks: from([]),
+  waveformPeaks: from([]),
+  selectionCanvas: { start: 0, end: 0 },
+  viewportCanvas: { start: 0, end: CanvasLogicalWidth },
+  position: { currentTime: 0, frame: 0, percent: 0 },
+  audioSrc: '',
+  videoSrc: '',
+  currentTime: 0,
+  playState: PlayState.Paused,
+};
+
+describe('stateReducer', () => {
+  describe('mediasetloaded', () => {
+    describe.each([
+      {
+        name: 'with a normal length media set',
+        audioFrames: 4410000,
+        wantViewportFrames: 220500,
+      },
+      {
+        name: 'with a very short media set',
+        audioFrames: 44100,
+        wantViewportFrames: 2200,
+      },
+    ])('mousedown', ({ name, audioFrames, wantViewportFrames }) => {
+      test(name, () => {
+        const mediaSet = MediaSet.fromPartial({
+          id: '123',
+          audioFrames: audioFrames,
+        });
+        const state = stateReducer(
+          { ...initialState },
+          { type: 'mediasetloaded', mediaSet: mediaSet }
+        );
+        expect(state.mediaSet).toBe(mediaSet);
+        expect(state.viewport.start).toEqual(0);
+        expect(state.viewport.end).toEqual(wantViewportFrames);
+      });
+    });
+  });
+});

frontend/src/AppState.tsx

@@ -379,7 +379,6 @@ function handlePositionChanged(
   ) {
     playState = PlayState.Paused;
     forceCurrentTime = selection.start / mediaSet.audioSampleRate;
-    console.log('forceCurrentTime', forceCurrentTime);
   }
 
   return {
@@ -422,10 +421,16 @@ function selectionToWaveformCanvasRange(
   selection: FrameRange,
   viewport: FrameRange
 ): CanvasRange {
-  const x1 =
+  const x1 = frameToWaveformCanvasX(
-    frameToWaveformCanvasX(selection.start, viewport, CanvasLogicalWidth) || 0;
+    selection.start,
-  const x2 =
+    viewport,
-    frameToWaveformCanvasX(selection.end, viewport, CanvasLogicalWidth) || 0;
+    CanvasLogicalWidth
+  );
+  const x2 = frameToWaveformCanvasX(
+    selection.end,
+    viewport,
+    CanvasLogicalWidth
+  );
 
   if (x1 == x2) {
     return { start: 0, end: 0 };