test: add data-testid attributes to key UI elements for automated testing #56

src/components/AudioSpeedControl.tsx

@@ -91,6 +91,7 @@ export default function AudioSpeedControl({ recipe, onChange }: Props) {
         </div>
         <input
           id="speed-control"
+          data-testid="speed-slider"
           type="range"
           min={0}
           max={SPEED_STEPS.length - 1}

src/components/DownloadResult.tsx

@@ -136,6 +136,7 @@ export default function DownloadResult({ result, onReset, soundOnCompletion, onT
 
       <div className="flex flex-wrap gap-2 pt-2">
         <a
+          data-testid="download-button"
           href={isValid ? result.blobUrl : undefined}
           download={isValid ? filename : undefined}
           className={cn(
@@ -166,6 +167,7 @@ export default function DownloadResult({ result, onReset, soundOnCompletion, onT
           Preview
         </a>
         <button
+          data-testid="reset-button"
           type="button"
           title="Reset and upload a new video"
           aria-label="Upload a new video"

src/components/ExportOverlay.tsx

@@ -134,6 +134,7 @@ export default function ExportOverlay({ status, progress, exportStartedAt, onCan
               <div className="h-1 w-full bg-film-100 rounded-full overflow-hidden">
                 <div
                   role="progressbar"
+                  data-testid="export-progress"
                   aria-valuenow={progress}
                   aria-valuemin={0}
                   aria-valuemax={100}

src/components/ExportSettings.tsx

@@ -72,6 +72,7 @@ export default function ExportSettings({
 
         <input
           id="quality-control"
+          data-testid="quality-slider"
           type="range"
           min={18}
           max={30}

src/components/FileUpload.tsx

@@ -188,6 +188,7 @@ export default function FileUpload({
   const DropZone = () => (
     <div
       id="upload-zone"
+      data-testid="file-upload-zone"
       role="button"
       tabIndex={0}
       aria-label="Video upload area. Drag and drop a video file or press Enter to browse."

src/components/VideoEditor.tsx

@@ -746,6 +746,7 @@ return () => {
 
             <button
               id="export-button"
+              data-testid="export-button"
               type="button"
               onClick={handleExport}
                 disabled={!file || isProcessing}