feat: create tests, more integration testing, fix ID tests, use UUID (almost) everywhere

ref: N25B-412

src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor.tsx

@@ -1,9 +1,9 @@
 import { useRef, useState } from "react";
-import styles from '../../VisProg.module.css';
+import styles from './PlanEditor.module.css';
 import { GetActionValue, type Action, type ActionTypes, type Plan } from "../components/Plan";
 import { defaultPlan } from "../components/Plan.default";
 import { TextField } from "../../../../components/TextField";
-import GestureValueEditor from "./GestureValueEditor"; // Add this import
+import GestureValueEditor from "./GestureValueEditor"; 
 
 type PlanEditorDialogProps = {
   plan?: Plan;
@@ -76,10 +76,10 @@ export default function PlanEditorDialog({
           ref={dialogRef}
           className={`${styles.planDialog}`}
           onWheel={(e) => e.stopPropagation()}
+          data-testid={"PlanEditorDialogTestID"}
         >
         <form method="dialog" className="flex-col gap-md">
             <h3> {draftPlan?.id === plan?.id ? "Edit Plan" : "Create Plan"} </h3>
-
             {/* Plan name text field */}
             {draftPlan && (
                 <TextField
@@ -115,8 +115,9 @@ export default function PlanEditorDialog({
                         </select>
                     </label>
 
-                    {/* Action value editor - UPDATED SECTION */}
+                    {/* Action value editor*/}
                     {newActionType === "gesture" ? (
+                        // Gesture get their own editor component
                         <GestureValueEditor
                           value={newActionValue}
                           setValue={setNewActionValue}
@@ -168,13 +169,23 @@ export default function PlanEditorDialog({
                     {/* Map over all steps */}
                     {draftPlan.steps.map((step, index) => (
                         <div
+                        role="button"
+                        tabIndex={0}
                         key={step.id}
                         className={styles.planStep}
+                        // Extra logic for screen readers to access using keyboard
+                        onKeyDown={(e) => {
+                            if (e.key === "Enter" || e.key === " ") {
+                            setDraftPlan({
+                            ...draftPlan,
+                            steps: draftPlan.steps.filter((s) => s.id !== step.id),}); 
+                            }}}
                         onClick={() => {
                             setDraftPlan({
                             ...draftPlan,
                             steps: draftPlan.steps.filter((s) => s.id !== step.id),});
                         }}>
+                        
                         <span className={styles.stepIndex}>{index + 1}.</span>
                         <span className={styles.stepType}>{step.type}:</span>
                         <span className={styles.stepName}>{