From 23bad2b0cf010fcc3047249fbef9d19d26701c32 Mon Sep 17 00:00:00 2001
From: Aditya Sharma <adityaiit07@gmail.com>
Date: Mon, 17 Aug 2026 00:35:00 +0530
Subject: [PATCH] feat: add data-testid attributes to key UI elements for
 automated testing

Add data-testid attributes to the following elements:
- file-upload-zone: File upload drag-drop area
- export-button: Export video button
- export-progress: Export progress bar
- download-button: Download result link
- reset-button: Reset/New video button
- quality-slider: Quality CRF range slider
- speed-slider: Speed range slider

No visual or functional changes. Prepares codebase for Playwright/RTL tests.

Closes #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 012f9319..02393f91 100644
--- a/src/components/AudioSpeedControl.tsx
+++ b/src/components/AudioSpeedControl.tsx
@@ -107,6 +107,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..553b4d1e 100644
--- a/src/components/DownloadResult.tsx
+++ b/src/components/DownloadResult.tsx
@@ -138,6 +138,7 @@ export default function DownloadResult({ result, onReset, soundOnCompletion, onT
         <a
           href={isValid ? result.blobUrl : undefined}
           download={isValid ? filename : undefined}
+          data-testid="download-button"
           className={cn(
             "flex-1 min-w-[10rem] flex items-center justify-center gap-2 py-3 text-sm font-heading font-bold uppercase tracking-wide rounded-lg transition-all",
             isValid 
@@ -167,6 +168,7 @@ export default function DownloadResult({ result, onReset, soundOnCompletion, onT
         </a>
         <button
           type="button"
+          data-testid="reset-button"
           title="Reset and upload a new video"
           aria-label="Upload a new video"
           onClick={handleReset}
diff --git a/src/components/ExportOverlay.tsx b/src/components/ExportOverlay.tsx
index a55d4d34..275059a0 100644
--- a/src/components/ExportOverlay.tsx
+++ b/src/components/ExportOverlay.tsx
@@ -133,6 +133,7 @@ export default function ExportOverlay({ status, progress, exportStartedAt, onCan
             <div className="w-full space-y-2">
               <div className="h-1 w-full bg-film-100 rounded-full overflow-hidden">
                 <div
+                  data-testid="export-progress"
                   role="progressbar"
                   aria-valuenow={progress}
                   aria-valuemin={0}
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 f94c17ef..931ec116 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 e83216e0..232c81dd 100644
--- a/src/components/VideoEditor.tsx
+++ b/src/components/VideoEditor.tsx
@@ -763,6 +763,7 @@ export default function VideoEditor() {
 
             <button
               id="export-button"
+              data-testid="export-button"
               type="button"
               onClick={handleExport}
                 disabled={!file || isProcessing}