From e5278c2f34620bc51c8f6cb55eb97088f72448a5 Mon Sep 17 00:00:00 2001
From: YAM1234-B <yaminibehera32@gmail.com>
Date: Wed, 3 Jun 2026 21:58:34 +0530
Subject: [PATCH] test: add data-testid attributes to key UI elements for issue
 #56

---
 src/components/AudioSpeedControl.tsx | 1 +
 src/components/DownloadResult.tsx    | 2 ++
 src/components/ExportOverlay.tsx     | 1 +
 src/components/ExportSettings.tsx    | 1 +
 src/components/FileUpload.tsx        | 1 +
 src/components/VideoEditor.tsx       | 1 +
 6 files changed, 7 insertions(+)

diff --git a/src/components/AudioSpeedControl.tsx b/src/components/AudioSpeedControl.tsx
index dd6c6007..be44237e 100644
--- a/src/components/AudioSpeedControl.tsx
+++ b/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}
diff --git a/src/components/DownloadResult.tsx b/src/components/DownloadResult.tsx
index 9cb04286..81ad4892 100644
--- a/src/components/DownloadResult.tsx
+++ b/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"
diff --git a/src/components/ExportOverlay.tsx b/src/components/ExportOverlay.tsx
index 702461cb..6a6f6e9b 100644
--- a/src/components/ExportOverlay.tsx
+++ b/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}
diff --git a/src/components/ExportSettings.tsx b/src/components/ExportSettings.tsx
index 6eee9b9b..27e7e5cb 100644
--- a/src/components/ExportSettings.tsx
+++ b/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}
diff --git a/src/components/FileUpload.tsx b/src/components/FileUpload.tsx
index c5b3f608..bff6e59d 100644
--- a/src/components/FileUpload.tsx
+++ b/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."
diff --git a/src/components/VideoEditor.tsx b/src/components/VideoEditor.tsx
index e3563037..d007d833 100644
--- a/src/components/VideoEditor.tsx
+++ b/src/components/VideoEditor.tsx
@@ -746,6 +746,7 @@ return () => {
 
             <button
               id="export-button"
+              data-testid="export-button"
               type="button"
               onClick={handleExport}
                 disabled={!file || isProcessing}