feat(frontend): add block tests (#8804)

We want to be able to automatically test agent running creation and building via the build page ### Changes 🏗️ - updates many UI elements to have new data ids - adds page for build - adds spec for build  ### Checklist 📋 #### For code changes: - [x] I have clearly listed my changes in the PR description - [x] I have made a test plan - [x] I have tested my changes according to the test plan: - [x] Run the UI Tests! --------- Co-authored-by: Bently <tomnoon9@gmail.com>
Significant-Gravitas · Dec 3, 2024 · 89011aa · 89011aa
1 parent 43bd5c8
commit 89011aa
Show file tree

Hide file tree

Showing 11 changed files with 563 additions and 5 deletions.
diff --git a/autogpt_platform/frontend/src/components/CustomNode.tsx b/autogpt_platform/frontend/src/components/CustomNode.tsx
@@ -566,6 +566,17 @@ export function CustomNode({
       className={`${blockClasses} ${errorClass} ${statusClass}`}
       data-id={`custom-node-${id}`}
       z-index={1}
+      data-blockid={data.block_id}
+      data-blockname={data.title}
+      data-blocktype={data.blockType}
+      data-nodetype={data.uiType}
+      data-category={data.categories[0]?.category.toLowerCase() || ""}
+      data-inputs={JSON.stringify(
+        Object.keys(data.inputSchema?.properties || {}),
+      )}
+      data-outputs={JSON.stringify(
+        Object.keys(data.outputSchema?.properties || {}),
+      )}
     >
       {/* Header */}
       <div

diff --git a/autogpt_platform/frontend/src/components/NodeHandle.tsx b/autogpt_platform/frontend/src/components/NodeHandle.tsx
@@ -59,6 +59,7 @@ const NodeHandle: FC<HandleProps> = ({
       <div key={keyName} className="handle-container">
         <Handle
           type="target"
+          data-testid={`input-handle-${keyName}`}
           position={Position.Left}
           id={keyName}
           className="-ml-[26px]"
@@ -76,6 +77,7 @@ const NodeHandle: FC<HandleProps> = ({
       <div key={keyName} className="handle-container justify-end">
         <Handle
           type="source"
+          data-testid={`output-handle-${keyName}`}
           position={Position.Right}
           id={keyName}
           className="group -mr-[26px]"

diff --git a/autogpt_platform/frontend/src/components/edit/control/BlocksControl.tsx b/autogpt_platform/frontend/src/components/edit/control/BlocksControl.tsx
@@ -122,6 +122,8 @@ export const BlocksControl: React.FC<BlocksControlProps> = ({
               variant="ghost"
               size="icon"
               data-id="blocks-control-popover-trigger"
+              data-testid="blocks-control-blocks-button"
+              name="Blocks"
             >
               <IconToyBrick />
             </Button>
@@ -143,6 +145,7 @@ export const BlocksControl: React.FC<BlocksControlProps> = ({
                 htmlFor="search-blocks"
                 className="whitespace-nowrap text-base font-bold text-black 2xl:text-xl"
                 data-id="blocks-control-label"
+                data-testid="blocks-control-blocks-label"
               >
                 Blocks
               </Label>
@@ -205,6 +208,7 @@ export const BlocksControl: React.FC<BlocksControlProps> = ({
                       <span
                         className="block truncate pb-1 text-sm font-semibold"
                         data-id={`block-name-${block.id}`}
+                        data-testid={`block-name-${block.id}`}
                       >
                         <TextRenderer
                           value={beautifyString(block.name).replace(
@@ -214,7 +218,10 @@ export const BlocksControl: React.FC<BlocksControlProps> = ({
                           truncateLengthLimit={45}
                         />
                       </span>
-                      <span className="block break-all text-xs font-normal text-gray-500">
+                      <span
+                        className="block break-all text-xs font-normal text-gray-500"
+                        data-testid={`block-description-${block.id}`}
+                      >
                         <TextRenderer
                           value={block.description}
                           truncateLengthLimit={165}
@@ -224,6 +231,7 @@ export const BlocksControl: React.FC<BlocksControlProps> = ({
                     <div
                       className="flex flex-shrink-0 items-center gap-1"
                       data-id={`block-tooltip-${block.id}`}
+                      data-testid={`block-add`}
                     >
                       <PlusIcon className="h-6 w-6 rounded-lg bg-gray-200 stroke-black stroke-[0.5px] p-1" />
                     </div>

diff --git a/autogpt_platform/frontend/src/components/edit/control/ControlPanel.tsx b/autogpt_platform/frontend/src/components/edit/control/ControlPanel.tsx
@@ -59,6 +59,7 @@ export const ControlPanel = ({
                     size="icon"
                     onClick={() => control.onClick()}
                     data-id={`control-button-${index}`}
+                    data-testid={`blocks-control-${control.label.toLowerCase()}-button`}
                     disabled={control.disabled || false}
                   >
                     {control.icon}

diff --git a/autogpt_platform/frontend/src/components/edit/control/SaveControl.tsx b/autogpt_platform/frontend/src/components/edit/control/SaveControl.tsx
@@ -91,6 +91,8 @@ export const SaveControl = ({
               variant="ghost"
               size="icon"
               data-id="save-control-popover-trigger"
+              data-testid="blocks-control-save-button"
+              name="Save"
             >
               <IconSave />
             </Button>
@@ -115,6 +117,7 @@ export const SaveControl = ({
                 value={agentName}
                 onChange={(e) => onNameChange(e.target.value)}
                 data-id="save-control-name-input"
+                data-testid="save-control-name-input"
                 maxLength={100}
               />
               <Label htmlFor="description">Description</Label>
@@ -125,6 +128,7 @@ export const SaveControl = ({
                 value={agentDescription}
                 onChange={(e) => onDescriptionChange(e.target.value)}
                 data-id="save-control-description-input"
+                data-testid="save-control-description-input"
                 maxLength={500}
               />
               {agentMeta?.version && (
@@ -136,6 +140,7 @@ export const SaveControl = ({
                     className="col-span-3"
                     value={agentMeta?.version || "-"}
                     disabled
+                    data-testid="save-control-version-output"
                   />
                 </>
               )}
@@ -146,6 +151,7 @@ export const SaveControl = ({
               className="w-full"
               onClick={handleSave}
               data-id="save-control-save-agent"
+              data-testid="save-control-save-agent-button"
             >
               Save {getType()}
             </Button>

diff --git a/autogpt_platform/frontend/src/components/nav/NavBarButtons.tsx b/autogpt_platform/frontend/src/components/nav/NavBarButtons.tsx
@@ -34,6 +34,7 @@ export function NavBarButtons({ className }: { className?: string }) {
           <Link
             key={button.href}
             href={button.href}
+            data-testid={`${button.text.toLowerCase()}-nav-link`}
             className={cn(
               className,
               "flex items-center gap-2 rounded-xl p-3",
@@ -49,6 +50,7 @@ export function NavBarButtons({ className }: { className?: string }) {
       {isCloud ? (
         <Link
           href="/marketplace"
+          data-testid="marketplace-nav-link"
           className={cn(
             className,
             "flex items-center gap-2 rounded-xl p-3",
@@ -61,6 +63,7 @@ export function NavBarButtons({ className }: { className?: string }) {
         </Link>
       ) : (
         <MarketPopup
+          data-testid="marketplace-nav-link"
           className={cn(
             className,
             "flex items-center gap-2 rounded-xl p-3 text-muted-foreground hover:text-foreground",

diff --git a/autogpt_platform/frontend/src/components/runner-ui/RunnerInputBlock.tsx b/autogpt_platform/frontend/src/components/runner-ui/RunnerInputBlock.tsx
@@ -40,7 +40,11 @@ export function InputBlock({
             </SelectTrigger>
             <SelectContent>
               {placeholder_values.map((placeholder, index) => (
-                <SelectItem key={index} value={placeholder.toString()}>
+                <SelectItem
+                  key={index}
+                  value={placeholder.toString()}
+                  data-testid={`run-dialog-input-${name}-${placeholder.toString()}`}
+                >
                   {placeholder.toString()}
                 </SelectItem>
               ))}
@@ -49,6 +53,7 @@ export function InputBlock({
         ) : (
           <Input
             id={`${id}-Value`}
+            data-testid={`run-dialog-input-${name}`}
             value={value}
             onChange={(e) => onInputChange(id, "value", e.target.value)}
             placeholder={placeholder_values?.[0]?.toString() || "Enter value"}

diff --git a/autogpt_platform/frontend/src/components/runner-ui/RunnerInputUI.tsx b/autogpt_platform/frontend/src/components/runner-ui/RunnerInputUI.tsx
@@ -72,6 +72,7 @@ export function RunnerInputUI({
         </div>
         <DialogFooter className="px-6 py-4">
           <Button
+            data-testid="run-dialog-run-button"
             onClick={scheduledInput ? handleSchedule : handleRun}
             className="px-8 py-2 text-lg"
             disabled={scheduledInput ? isScheduling : isRunning}