From a0bb48fb69097f8e87f0f8fc4dd57a9317b2f36b Mon Sep 17 00:00:00 2001 From: Rob Watson Date: Sat, 5 Feb 2022 09:16:31 +0100 Subject: [PATCH] Add basic test coverage for viewport handling --- frontend/src/AppState.test.ts | 178 ++++++++++++++++++++++++++++++---- 1 file changed, 161 insertions(+), 17 deletions(-) diff --git a/frontend/src/AppState.test.ts b/frontend/src/AppState.test.ts index 85c8162..7283025 100644 --- a/frontend/src/AppState.test.ts +++ b/frontend/src/AppState.test.ts @@ -2,7 +2,7 @@ import { MediaSet } from './generated/media_set'; import { stateReducer, State } from './AppState'; import { from } from 'rxjs'; import { PlayState } from './Player'; -import { CanvasWidth } from './HudCanvasState'; +import { CanvasWidth, SelectionMode } from './HudCanvasState'; const initialState: State = { selection: { start: 0, end: 0 }, @@ -22,29 +22,173 @@ 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, + ])( + 'mediaset with $audioFrames frames', + ({ audioFrames, wantViewportFrames }) => { + it('generates the expected state', () => { + 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); }); - 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); - }); - }); + } + ); + }); + + describe('setviewport', () => { + describe.each([ + { + audioFrames: 441000, + viewport: { start: 0, end: 44100 }, + selection: { start: 0, end: 0 }, + wantViewportCanvas: { x1: 0, x2: 200 }, + wantSelectionCanvas: { x1: 0, x2: 0 }, + }, + { + audioFrames: 441000, + viewport: { start: 0, end: 441000 }, + selection: { start: 0, end: 0 }, + wantViewportCanvas: { x1: 0, x2: 2000 }, + wantSelectionCanvas: { x1: 0, x2: 0 }, + }, + { + audioFrames: 441000, + viewport: { start: 0, end: 441000 }, + selection: { start: 0, end: 44100 }, + wantViewportCanvas: { x1: 0, x2: 2000 }, + wantSelectionCanvas: { x1: 0, x2: 200 }, + }, + { + audioFrames: 441000, + viewport: { start: 0, end: 22050 }, + selection: { start: 0, end: 44100 }, + wantViewportCanvas: { x1: 0, x2: 100 }, + wantSelectionCanvas: { x1: 0, x2: 2000 }, + }, + { + audioFrames: 441000, + viewport: { start: 44100, end: 88200 }, + selection: { start: 22050, end: 66150 }, + wantViewportCanvas: { x1: 200, x2: 400 }, + wantSelectionCanvas: { x1: 0, x2: 1000 }, + }, + ])( + 'selection $selection.start-$selection.end, viewport: $viewport.start-$viewport.end', + ({ + audioFrames, + viewport, + selection, + wantViewportCanvas, + wantSelectionCanvas, + }) => { + it('generates the expected state', () => { + const mediaSet = MediaSet.fromPartial({ + id: '123', + audioFrames: audioFrames, + }); + const state = stateReducer( + { ...initialState, mediaSet: mediaSet, selection: selection }, + { type: 'setviewport', viewport: viewport } + ); + + expect(state.viewport).toEqual(viewport); + expect(state.selection).toEqual(selection); + expect(state.viewportCanvas).toEqual(wantViewportCanvas); + expect(state.selectionCanvas).toEqual(wantSelectionCanvas); + }); + } + ); + }); + + describe('viewportchanged', () => { + describe.each([ + { + audioFrames: 441000, + event: { + mode: SelectionMode.Selecting, + prevMode: SelectionMode.Selecting, + selection: { x1: 0, x2: 200 }, + }, + selection: { start: 0, end: 0 }, + wantViewport: { start: 0, end: 441000 }, + wantSelectionCanvas: { x1: 0, x2: 0 }, + }, + { + audioFrames: 441000, + event: { + mode: SelectionMode.Normal, + prevMode: SelectionMode.Selecting, + selection: { x1: 0, x2: 200 }, + }, + selection: { start: 0, end: 0 }, + wantViewport: { start: 0, end: 44100 }, + wantSelectionCanvas: { x1: 0, x2: 0 }, + }, + { + audioFrames: 441000, + event: { + mode: SelectionMode.Normal, + prevMode: SelectionMode.Selecting, + selection: { x1: 0, x2: 200 }, + }, + selection: { start: 0, end: 22050 }, + wantViewport: { start: 0, end: 44100 }, + wantSelectionCanvas: { x1: 0, x2: 1000 }, + }, + { + audioFrames: 441000, + event: { + mode: SelectionMode.Normal, + prevMode: SelectionMode.Selecting, + selection: { x1: 1000, x2: 1500 }, + }, + selection: { start: 220500, end: 264600 }, + wantViewport: { start: 220500, end: 330750 }, + wantSelectionCanvas: { x1: 0, x2: 800 }, + }, + ])( + 'mode $event.mode, audioFrames $audioFrames, canvas range $event.selection.x1-$event.selection.x2, selectedFrames $selection.start-$selection.end', + ({ + audioFrames, + event, + selection, + wantViewport, + wantSelectionCanvas, + }) => { + it('generates the expected state', () => { + const mediaSet = MediaSet.fromPartial({ + id: '123', + audioFrames: audioFrames, + }); + const state = stateReducer( + { + ...initialState, + mediaSet: mediaSet, + viewport: { start: 0, end: audioFrames }, + selection: selection, + }, + { type: 'viewportchanged', event } + ); + + expect(state.selection).toEqual(selection); + expect(state.viewport).toEqual(wantViewport); + expect(state.selectionCanvas).toEqual(wantSelectionCanvas); + }); + } + ); }); });