364 lines
9.6 KiB
TypeScript
364 lines
9.6 KiB
TypeScript
import { cleanup, fireEvent, render, screen } from '@testing-library/react';
|
||
import userEvent from '@testing-library/user-event';
|
||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
|
||
import type { ImportedMediaAsset } from '../../../src/app/application-state';
|
||
import { Inspector } from '../../../src/components/Inspector';
|
||
import { Timeline } from '../../../src/components/Timeline';
|
||
import type { AvProjectV1, TimelineClip } from '../../../src/project';
|
||
import { aggregatePcmPeaks } from '../../../src/waveform';
|
||
|
||
describe('visual editor integration', () => {
|
||
beforeEach(() => {
|
||
vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue(
|
||
createCanvasContext()
|
||
);
|
||
});
|
||
|
||
afterEach(cleanup);
|
||
|
||
it('shows encoded dimensions separately from normalized display metadata', () => {
|
||
const project = createProject();
|
||
|
||
render(
|
||
<Inspector
|
||
asset={createImportedAsset()}
|
||
project={project}
|
||
clip={project.timeline[0]}
|
||
onClipUpdate={vi.fn()}
|
||
onMetadataChange={vi.fn()}
|
||
onChaptersChange={vi.fn()}
|
||
onSubtitlesChange={vi.fn()}
|
||
onThumbnail={vi.fn()}
|
||
/>
|
||
);
|
||
|
||
expect(
|
||
screen.getByText('Encoded pixels 101×99 · coded 102×100 · 25.000 fps')
|
||
).toBeVisible();
|
||
expect(
|
||
screen.getByText('SAR 4:3 · DAR 16:9 · rotation -90°')
|
||
).toBeVisible();
|
||
});
|
||
|
||
it('uses the local video object URL in the rotation-aware crop editor', async () => {
|
||
const user = userEvent.setup();
|
||
const onClipUpdate = vi.fn();
|
||
const project = createProject();
|
||
const clip = {
|
||
...project.timeline[0]!,
|
||
crop: { x: 0, y: 0, width: 100, height: 98 },
|
||
rotation: 90 as const,
|
||
};
|
||
const asset = createImportedAsset();
|
||
|
||
render(
|
||
<Inspector
|
||
asset={asset}
|
||
project={project}
|
||
clip={clip}
|
||
disabled
|
||
onClipUpdate={onClipUpdate}
|
||
onMetadataChange={vi.fn()}
|
||
onChaptersChange={vi.fn()}
|
||
onSubtitlesChange={vi.fn()}
|
||
onThumbnail={vi.fn()}
|
||
/>
|
||
);
|
||
|
||
await user.click(screen.getByRole('tab', { name: 'Transform' }));
|
||
|
||
const cropEditor = screen.getByRole('region', {
|
||
name: 'Crop local-video.mp4',
|
||
});
|
||
expect(cropEditor).toHaveAttribute('data-orientation', '90');
|
||
expect(
|
||
screen.getByLabelText('Local preview of local-video.mp4')
|
||
).toHaveAttribute('src', 'blob:local-video');
|
||
expect(
|
||
screen.getByRole('button', { name: 'Move crop rectangle' })
|
||
).toBeDisabled();
|
||
expect(
|
||
screen.getByRole('group', { name: 'Encoded source pixels' })
|
||
).toBeVisible();
|
||
});
|
||
|
||
it('keeps numeric crop inputs when a visual video source is unavailable', async () => {
|
||
const user = userEvent.setup();
|
||
const onClipUpdate = vi.fn();
|
||
const project = createProject();
|
||
|
||
render(
|
||
<Inspector
|
||
project={project}
|
||
clip={project.timeline[0]}
|
||
onClipUpdate={onClipUpdate}
|
||
onMetadataChange={vi.fn()}
|
||
onChaptersChange={vi.fn()}
|
||
onSubtitlesChange={vi.fn()}
|
||
onThumbnail={vi.fn()}
|
||
/>
|
||
);
|
||
|
||
await user.click(screen.getByRole('tab', { name: 'Transform' }));
|
||
expect(
|
||
screen.getByText(/visual crop preview is unavailable/i)
|
||
).toBeVisible();
|
||
|
||
fireEvent.change(screen.getByRole('spinbutton', { name: 'WIDTH' }), {
|
||
target: { value: '101' },
|
||
});
|
||
expect(onClipUpdate).toHaveBeenLastCalledWith({
|
||
crop: { x: 0, y: 0, width: 100, height: 2 },
|
||
});
|
||
});
|
||
|
||
it('edits allowlisted fade curves and persists chapter time bases', async () => {
|
||
const user = userEvent.setup();
|
||
const onClipUpdate = vi.fn();
|
||
const onChaptersChange = vi.fn();
|
||
const baseProject = createProject();
|
||
const project: AvProjectV1 = {
|
||
...baseProject,
|
||
chapters: [
|
||
{
|
||
id: 'chapter-1',
|
||
title: 'Intro',
|
||
startSeconds: 0,
|
||
endSeconds: 1,
|
||
timeBase: '1/1000',
|
||
},
|
||
],
|
||
};
|
||
|
||
render(
|
||
<Inspector
|
||
project={project}
|
||
clip={project.timeline[0]}
|
||
onClipUpdate={onClipUpdate}
|
||
onMetadataChange={vi.fn()}
|
||
onChaptersChange={onChaptersChange}
|
||
onSubtitlesChange={vi.fn()}
|
||
onThumbnail={vi.fn()}
|
||
/>
|
||
);
|
||
|
||
await user.click(screen.getByRole('tab', { name: 'Transform' }));
|
||
await user.selectOptions(
|
||
screen.getByRole('combobox', { name: 'Video fade curve' }),
|
||
'exp'
|
||
);
|
||
expect(onClipUpdate).toHaveBeenLastCalledWith({
|
||
video: { enabled: true, fadeCurve: 'exp' },
|
||
});
|
||
|
||
await user.click(screen.getByRole('tab', { name: 'Audio' }));
|
||
await user.selectOptions(
|
||
screen.getByRole('combobox', { name: 'Audio fade curve' }),
|
||
'qsin'
|
||
);
|
||
expect(onClipUpdate).toHaveBeenLastCalledWith({
|
||
audio: { enabled: true, fadeCurve: 'qsin' },
|
||
});
|
||
|
||
await user.click(screen.getByRole('tab', { name: 'Chapters' }));
|
||
fireEvent.change(screen.getByLabelText('Chapter 1 time base'), {
|
||
target: { value: '1/48000' },
|
||
});
|
||
expect(onChaptersChange).toHaveBeenLastCalledWith([
|
||
expect.objectContaining({ id: 'chapter-1', timeBase: '1/48000' }),
|
||
]);
|
||
});
|
||
|
||
it('updates the selected clip and forwards validated waveform selections', () => {
|
||
const project = createProject();
|
||
const onUpdate = vi.fn();
|
||
const onSelectionChange = vi.fn();
|
||
|
||
render(
|
||
<Timeline
|
||
project={project}
|
||
selectedClipId="clip-1"
|
||
onSelect={vi.fn()}
|
||
onMove={vi.fn()}
|
||
onUpdate={onUpdate}
|
||
onRemove={vi.fn()}
|
||
waveformPeaks={createPeaks()}
|
||
currentTimeSeconds={4}
|
||
splitMarkers={[3]}
|
||
onSelectionChange={onSelectionChange}
|
||
/>
|
||
);
|
||
|
||
expect(screen.getByText('local-video.mp4')).toBeVisible();
|
||
expect(screen.getByText('Single sequential audio track')).toBeVisible();
|
||
|
||
fireEvent.keyDown(screen.getByRole('slider', { name: 'In trim handle' }), {
|
||
key: 'ArrowRight',
|
||
});
|
||
|
||
expect(onUpdate).toHaveBeenLastCalledWith('clip-1', {
|
||
sourceInSeconds: 1.1,
|
||
sourceOutSeconds: 9,
|
||
});
|
||
expect(onSelectionChange).toHaveBeenLastCalledWith({
|
||
inSeconds: 1.1,
|
||
outSeconds: 9,
|
||
markers: [3],
|
||
});
|
||
});
|
||
|
||
it('preserves the original clip-card timeline when waveform data is omitted', () => {
|
||
const project = createProject();
|
||
|
||
render(
|
||
<Timeline
|
||
project={project}
|
||
selectedClipId="clip-1"
|
||
onSelect={vi.fn()}
|
||
onMove={vi.fn()}
|
||
onUpdate={vi.fn()}
|
||
onRemove={vi.fn()}
|
||
/>
|
||
);
|
||
|
||
expect(screen.getByText('local-video.mp4')).toBeVisible();
|
||
expect(
|
||
screen.queryByText('Single sequential audio track')
|
||
).not.toBeInTheDocument();
|
||
expect(screen.getByRole('spinbutton', { name: 'In' })).toHaveValue(1);
|
||
expect(screen.getByRole('spinbutton', { name: 'Out' })).toHaveValue(9);
|
||
});
|
||
|
||
it('resets the selected clip trim to its full probed source duration', async () => {
|
||
const user = userEvent.setup();
|
||
const project = createProject();
|
||
const onUpdate = vi.fn();
|
||
|
||
render(
|
||
<Timeline
|
||
project={project}
|
||
selectedClipId="clip-1"
|
||
onSelect={vi.fn()}
|
||
onMove={vi.fn()}
|
||
onUpdate={onUpdate}
|
||
onRemove={vi.fn()}
|
||
/>
|
||
);
|
||
|
||
await user.click(
|
||
screen.getByRole('button', { name: 'Reset trim to full source' })
|
||
);
|
||
|
||
expect(onUpdate).toHaveBeenCalledWith('clip-1', {
|
||
sourceInSeconds: 0,
|
||
sourceOutSeconds: 10,
|
||
});
|
||
});
|
||
});
|
||
|
||
function createProject(): AvProjectV1 {
|
||
const clip: TimelineClip = {
|
||
id: 'clip-1',
|
||
assetId: 'asset-1',
|
||
sourceInSeconds: 1,
|
||
sourceOutSeconds: 9,
|
||
};
|
||
return {
|
||
schemaVersion: 1,
|
||
id: 'project-1',
|
||
name: 'Test project',
|
||
createdAt: '2026-07-24T12:00:00.000Z',
|
||
updatedAt: '2026-07-24T12:00:00.000Z',
|
||
assets: [
|
||
{
|
||
id: 'asset-1',
|
||
originalName: 'local-video.mp4',
|
||
size: 4,
|
||
lastModified: 0,
|
||
mimeType: 'video/mp4',
|
||
sourceStatus: 'attached',
|
||
probe: createProbe(),
|
||
},
|
||
],
|
||
timeline: [clip],
|
||
output: {
|
||
presetId: 'video-h264',
|
||
fileName: 'output.mp4',
|
||
container: 'mp4',
|
||
videoEnabled: true,
|
||
audioEnabled: true,
|
||
},
|
||
metadata: { custom: {} },
|
||
chapters: [],
|
||
subtitles: [],
|
||
};
|
||
}
|
||
|
||
function createImportedAsset(): ImportedMediaAsset {
|
||
return {
|
||
id: 'asset-1',
|
||
file: new File(['test'], 'local-video.mp4', { type: 'video/mp4' }),
|
||
objectUrl: 'blob:local-video',
|
||
phase: 'ready',
|
||
probe: createProbe(),
|
||
};
|
||
}
|
||
|
||
function createProbe() {
|
||
return {
|
||
durationSeconds: 10,
|
||
formatNames: ['mov', 'mp4'],
|
||
tags: {},
|
||
chapters: [],
|
||
warnings: [],
|
||
streams: [
|
||
{
|
||
index: 0,
|
||
type: 'video' as const,
|
||
codecName: 'h264',
|
||
width: 101,
|
||
height: 99,
|
||
codedWidth: 102,
|
||
codedHeight: 100,
|
||
sampleAspectRatio: '4:3',
|
||
displayAspectRatio: '16:9',
|
||
rotationDegrees: -90,
|
||
frameRate: 25,
|
||
disposition: {},
|
||
tags: {},
|
||
},
|
||
],
|
||
};
|
||
}
|
||
|
||
function createPeaks() {
|
||
return aggregatePcmPeaks(
|
||
{
|
||
container: 'raw',
|
||
data: new Int16Array(
|
||
Array.from({ length: 100 }, (_, index) =>
|
||
Math.round(Math.sin(index / 5) * 20_000)
|
||
)
|
||
),
|
||
encoding: 's16le',
|
||
sampleRate: 10,
|
||
},
|
||
{ bucketCount: 100 }
|
||
);
|
||
}
|
||
|
||
function createCanvasContext(): CanvasRenderingContext2D {
|
||
return {
|
||
setTransform: vi.fn(),
|
||
clearRect: vi.fn(),
|
||
fillRect: vi.fn(),
|
||
beginPath: vi.fn(),
|
||
moveTo: vi.fn(),
|
||
lineTo: vi.fn(),
|
||
stroke: vi.fn(),
|
||
fillStyle: '',
|
||
strokeStyle: '',
|
||
lineWidth: 1,
|
||
} as unknown as CanvasRenderingContext2D;
|
||
}
|