feat: add stable test IDs for E2E test reliability

Abubakar-01 · tylerslaton · commit 1719274a6190 · 2025-08-06T16:07:33.000-04:00
diff --git a/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/agentic_generative_ui/page.tsx b/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/agentic_generative_ui/page.tsx
@@ -47,7 +47,9 @@ const Chat = () => {
 
       return (
         <div className="flex">
-          <div className={`relative rounded-xl w-[700px] p-6 shadow-lg backdrop-blur-sm ${
+          <div 
+          data-testid="task-progress"
+          className={`relative rounded-xl w-[700px] p-6 shadow-lg backdrop-blur-sm ${
             theme === "dark" 
               ? "bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white border border-slate-700/50 shadow-2xl"
               : "bg-gradient-to-br from-white via-gray-50 to-white text-gray-800 border border-gray-200/80"
@@ -132,7 +134,9 @@ const Chat = () => {
 
                     {/* Step Content */}
                     <div className="flex-1 min-w-0">
-                      <div className={`font-semibold transition-all duration-300 text-sm ${
+                      <div 
+                      data-testid="task-step-text"
+                      className={`font-semibold transition-all duration-300 text-sm ${
                         isCompleted 
                           ? theme === "dark" ? "text-green-300" : "text-green-700"
                           : isCurrentPending
diff --git a/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/human_in_the_loop/page.tsx b/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/human_in_the_loop/page.tsx
@@ -34,7 +34,9 @@ interface Step {
 
 // Shared UI Components
 const StepContainer = ({ theme, children }: { theme?: string; children: React.ReactNode }) => (
-  <div className="flex">
+  <div 
+  data-testid="select-steps"
+  className="flex">
     <div className={`relative rounded-xl w-[600px] p-6 shadow-lg backdrop-blur-sm ${
       theme === "dark" 
         ? "bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white border border-slate-700/50 shadow-2xl"
@@ -114,7 +116,9 @@ const StepItem = ({
         ? "bg-slate-800/30 border border-slate-600/30"
         : "bg-gray-50/50 border border-gray-200/40"
   }`}>
-    <label className="flex items-center cursor-pointer w-full">
+    <label 
+    data-testid="step-item" 
+    className="flex items-center cursor-pointer w-full">
       <div className="relative">
         <input
           type="checkbox"
@@ -137,7 +141,9 @@ const StepItem = ({
           )}
         </div>
       </div>
-      <span className={`ml-3 font-medium transition-all duration-300 ${
+      <span 
+       data-testid="step-text"
+       className={`ml-3 font-medium transition-all duration-300 ${
         step.status !== "enabled" && status != "inProgress"
           ? `line-through ${theme === "dark" ? "text-slate-500" : "text-gray-400"}`
           : theme === "dark" ? "text-white" : "text-gray-800"
diff --git a/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/predictive_state_updates/page.tsx b/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/predictive_state_updates/page.tsx
@@ -303,12 +303,15 @@ interface ConfirmChangesProps {
 function ConfirmChanges({ args, respond, status, onReject, onConfirm }: ConfirmChangesProps) {
   const [accepted, setAccepted] = useState<boolean | null>(null);
   return (
-    <div className="bg-white p-6 rounded shadow-lg border border-gray-200 mt-5 mb-5">
+    <div 
+    data-testid="confirm-changes-modal"
+    className="bg-white p-6 rounded shadow-lg border border-gray-200 mt-5 mb-5">
       <h2 className="text-lg font-bold mb-4">Confirm Changes</h2>
       <p className="mb-6">Do you want to accept the changes?</p>
       {accepted === null && (
         <div className="flex justify-end space-x-4">
           <button
+            data-testid="reject-button"
             className={`bg-gray-200 text-black py-2 px-4 rounded disabled:opacity-50 ${
               status === "executing" ? "cursor-pointer" : "cursor-default"
             }`}
@@ -324,6 +327,7 @@ function ConfirmChanges({ args, respond, status, onReject, onConfirm }: ConfirmC
             Reject
           </button>
           <button
+            data-testid="confirm-button"
             className={`bg-black text-white py-2 px-4 rounded disabled:opacity-50 ${
               status === "executing" ? "cursor-pointer" : "cursor-default"
             }`}
@@ -342,7 +346,9 @@ function ConfirmChanges({ args, respond, status, onReject, onConfirm }: ConfirmC
       )}
       {accepted !== null && (
         <div className="flex justify-end">
-          <div className="mt-4 bg-gray-200 text-black py-2 px-4 rounded inline-block">
+          <div 
+          data-testid="status-display"
+          className="mt-4 bg-gray-200 text-black py-2 px-4 rounded inline-block">
             {accepted ? "✓ Accepted" : "✗ Rejected"}
           </div>
         </div>
diff --git a/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/shared_state/page.tsx b/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/shared_state/page.tsx
@@ -366,7 +366,9 @@ function Recipe() {
   };
 
   return (
-    <form className="recipe-card">
+    <form 
+    data-testid="recipe-card"
+    className="recipe-card">
       {/* Recipe Title */}
       <div className="recipe-header">
         <input
@@ -452,13 +454,23 @@ function Recipe() {
         {changedKeysRef.current.includes("ingredients") && <Ping />}
         <div className="section-header">
           <h2 className="section-title">Ingredients</h2>
-          <button type="button" className="add-button" onClick={addIngredient}>
+          <button
+            data-testid="add-ingredient-button"
+            type="button"
+            className="add-button"
+            onClick={addIngredient}
+          >
             + Add Ingredient
           </button>
         </div>
-        <div className="ingredients-container">
+        <div
+          data-testid="ingredients-container"
+          className="ingredients-container"
+        >
           {recipe.ingredients.map((ingredient, index) => (
-            <div key={index} className="ingredient-card">
+            <div key={index} 
+             data-testid="ingredient-card"
+             className="ingredient-card">
               <div className="ingredient-icon">{getProperIcon(ingredient.icon)}</div>
               <div className="ingredient-content">
                 <input
@@ -498,7 +510,9 @@ function Recipe() {
             + Add Step
           </button>
         </div>
-        <div className="instructions-container">
+        <div 
+          data-testid="instructions-container"
+          className="instructions-container">
           {recipe.instructions.map((instruction, index) => (
             <div key={index} className="instruction-item">
               {/* Number Circle */}
@@ -555,6 +569,7 @@ function Recipe() {
       {/* Improve with AI Button */}
       <div className="action-container">
         <button
+          data-testid="improve-button"
           className={isLoading ? "improve-button loading" : "improve-button"}
           type="button"
           onClick={() => {
diff --git a/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/tool_based_generative_ui/page.tsx b/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/tool_based_generative_ui/page.tsx
@@ -177,10 +177,12 @@ const VALID_IMAGE_NAMES = [
 
 function HaikuCard({generatedHaiku, setHaikus, haikus} : HaikuCardProps) {
   return (
-    <div className="suggestion-card text-left rounded-md p-4 mt-4 mb-4 flex flex-col bg-gray-100">
+    <div 
+     data-testid="haiku-card"
+     className="suggestion-card text-left rounded-md p-4 mt-4 mb-4 flex flex-col bg-gray-100">
       <div className="mb-4 pb-4">
         {generatedHaiku?.japanese?.map((line, index) => (
-          <div className="flex items-center gap-3 mb-2" key={index}>
+          <div className="flex items-center gap-3 mb-2"  data-testid="haiku-line" key={index}>
             <p className="text-lg font-bold">{line}</p>
             <p className="text-sm font-light">
               {generatedHaiku.english?.[index]}
@@ -340,6 +342,7 @@ function Haiku() {
           {generatedHaikus.map((haiku, index) => (
             <div
               key={index}
+              data-testid="thumbnail-haiku"
               className={`haiku-card animated-fade-in mb-4 cursor-pointer ${index === activeIndex ? 'active' : ''}`}
               style={{
                 width: '80px',
@@ -395,6 +398,7 @@ function Haiku() {
           }).map((haiku, index) => (
             <div
               key={index}
+              data-testid="main-haiku-display"
               className={`haiku-card animated-fade-in ${isJustApplied && index === activeIndex ? 'applied-flash' : ''} ${index === activeIndex ? 'active' : ''}`}
               style={{
                 zIndex: index === activeIndex ? haikus.length : index,
@@ -403,6 +407,7 @@ function Haiku() {
             >
               {haiku.japanese.map((line, lineIndex) => (
                 <div
+                  data-testid="main-haiku-line"
                   className={`flex items-start mb-4 haiku-line ${
                     isMobile 
                       ? 'flex-col gap-1' 
