Files
AutoGPT/autogpt_platform/frontend/src/tests/agent-activity.spec.ts
Abhimanyu Yadav d09f1532a4 feat(frontend): replace legacy builder with new flow editor
(#12081)

### Changes 🏗️

This PR completes the migration from the legacy builder to the new Flow
editor by removing all legacy code and feature flags.

**Removed:**
- Old builder view toggle functionality (`BuilderViewTabs.tsx`)
- Legacy debug panel (`RightSidebar.tsx`)
- Feature flags: `NEW_FLOW_EDITOR` and `BUILDER_VIEW_SWITCH`
- `useBuilderView` hook and related view-switching logic

**Updated:**
- Simplified `build/page.tsx` to always render the new Flow editor
- Added CSS styling (`flow.css`) to properly render Phosphor icons in
React Flow handles

**Tests:**
- Skipped e2e test suite in `build.spec.ts` (legacy builder tests)
- Follow-up PR (#12082) will add new e2e tests for the Flow editor

### 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] Create a new flow and verify it loads correctly
    - [x] Add nodes and connections to verify basic functionality works
    - [x] Verify that node handles render correctly with the new CSS
- [x] Check that the UI is clean without the old debug panel or view
toggles

#### For configuration changes:

- [x] `.env.default` is updated or already compatible with my changes
- [x] `docker-compose.yml` is updated or already compatible with my
changes
2026-02-12 11:16:01 +00:00

100 lines
3.2 KiB
TypeScript

import test, { expect } from "@playwright/test";
import { BuildPage } from "./pages/build.page";
import * as LibraryPage from "./pages/library.page";
import { LoginPage } from "./pages/login.page";
import { hasTextContent, hasUrl, isVisible } from "./utils/assertion";
import { getTestUser } from "./utils/auth";
import { getSelectors } from "./utils/selectors";
test.beforeEach(async ({ page }) => {
const loginPage = new LoginPage(page);
const buildPage = new BuildPage(page);
const testUser = await getTestUser();
await page.goto("/login");
await loginPage.login(testUser.email, testUser.password);
await hasUrl(page, "/marketplace");
await page.goto("/build");
await buildPage.closeTutorial();
const [dictionaryBlock] = await buildPage.getFilteredBlocksFromAPI(
(block) => block.name === "AddToDictionaryBlock",
);
await buildPage.addBlock(dictionaryBlock);
await buildPage.saveAgent("Test Agent", "Test Description");
await test
.expect(page)
.toHaveURL(({ searchParams }) => !!searchParams.get("flowID"));
// Wait for save to complete
await page.waitForTimeout(1000);
await page.goto("/library");
// Navigate to the specific agent we just created, not just the first one
await LibraryPage.navigateToAgentByName(page, "Test Agent");
await LibraryPage.waitForAgentPageLoad(page);
});
test("shows badge with count when agent is running", async ({ page }) => {
const { getId } = getSelectors(page);
// Start the agent run
await LibraryPage.clickRunButton(page);
// Wait for the badge to appear and check it has a valid count
const badge = getId("agent-activity-badge");
await isVisible(badge);
// Check that badge shows a positive number (more flexible than exact count)
await expect(async () => {
const badgeText = await badge.textContent();
const count = parseInt(badgeText || "0");
if (count < 1) {
throw new Error(`Expected badge count >= 1, got: ${badgeText}`);
}
}).toPass({ timeout: 10000 });
});
test("displays the runs on the activity dropdown", async ({ page }) => {
const { getId } = getSelectors(page);
const activityBtn = getId("agent-activity-button");
await isVisible(activityBtn);
// Start the agent run
await LibraryPage.clickRunButton(page);
// Wait for the activity badge to appear (indicating execution started)
const badge = getId("agent-activity-badge");
await isVisible(badge);
// Click to open the dropdown
await activityBtn.click();
const dropdown = getId("agent-activity-dropdown");
await isVisible(dropdown);
// Check that the agent name appears in the dropdown
await hasTextContent(dropdown, "Test Agent");
// Check for execution status - be more flexible with text matching
await expect(async () => {
const dropdownText = await dropdown.textContent();
const hasAgentName = dropdownText?.includes("Test Agent");
const hasExecutionStatus =
dropdownText?.includes("queued") ||
dropdownText?.includes("running") ||
dropdownText?.includes("Started");
if (!hasAgentName || !hasExecutionStatus) {
throw new Error(
`Expected agent name and execution status, got: ${dropdownText}`,
);
}
}).toPass({ timeout: 8000 });
});