Merge branch 'dev' into abhimanyuyadav/open-2576-test-the-complete-agent-publishing-workflow

Refactored the agent publishing test to include login steps directly within the test case. Added new tests to verify the agent creation popout content when the user is logged out and to ensure appropriate error messages are displayed when the required agent title is missing. This improves test coverage and ensures a smoother user experience during the agent publishing flow.

autogpt_platform/frontend/src/app/(platform)/profile/(user)/dashboard/components/AgentTableRow/AgentTableRow.tsx

@@ -90,7 +90,10 @@ export const AgentTableRow = ({
             />
           </div>
           <div className="flex flex-col">
-            <h3 className="text-[15px] font-medium text-neutral-800 dark:text-neutral-200">
+            <h3
+              data-testid="agent-name"
+              className="text-[15px] font-medium text-neutral-800 dark:text-neutral-200"
+            >
               {agentName}
             </h3>
             <p className="line-clamp-2 text-sm text-neutral-600 dark:text-neutral-400">
@@ -105,7 +108,7 @@ export const AgentTableRow = ({
         </div>
 
         {/* Status column */}
-        <div>
+        <div data-testid="agent-status">
           <Status status={status} />
         </div>
 

autogpt_platform/frontend/src/components/agptui/BecomeACreator.tsx

@@ -44,6 +44,7 @@ export const BecomeACreator: React.FC<BecomeACreatorProps> = ({
         <PublishAgentPopout
           trigger={
             <button
+              data-testid={"become-a-creator-btn"}
               onClick={handleButtonClick}
               className="inline-flex h-[48px] cursor-pointer items-center justify-center rounded-[38px] bg-neutral-800 px-8 py-3 transition-colors hover:bg-neutral-700 dark:bg-neutral-700 dark:hover:bg-neutral-600 md:h-[56px] md:px-10 md:py-4 lg:h-[68px] lg:px-12 lg:py-5"
             >

autogpt_platform/frontend/src/components/agptui/PublishAgentAwaitingReview.tsx

@@ -105,6 +105,7 @@ export const PublishAgentAwaitingReview: React.FC<
           Done
         </Button>
         <Button
+          data-testid={"view-progrss-btn"}
           onClick={onViewProgress}
           className="h-12 w-full rounded-[59px] bg-neutral-800 text-white hover:bg-neutral-900 dark:bg-neutral-700 dark:text-neutral-100 dark:hover:bg-neutral-600 sm:flex-1"
         >

autogpt_platform/frontend/src/components/agptui/PublishAgentSelect.tsx

@@ -119,6 +119,7 @@ export const PublishAgentSelect: React.FC<PublishAgentSelectProps> = ({
                           handleAgentClick(agent.name, agent.id, agent.version);
                         }
                       }}
+                      data-testid={"agent-to-select"}
                       tabIndex={0}
                       role="button"
                       aria-pressed={selectedAgentId === agent.id}
@@ -151,6 +152,7 @@ export const PublishAgentSelect: React.FC<PublishAgentSelectProps> = ({
               Back
             </Button>
             <Button
+              data-testid={"next-button"}
               onClick={() => {
                 if (selectedAgentId && selectedAgentVersion) {
                   onNext(selectedAgentId, selectedAgentVersion);

autogpt_platform/frontend/src/components/agptui/PublishAgentSelectInfo.tsx

@@ -204,6 +204,7 @@ export const PublishAgentInfo: React.FC<PublishAgentInfoProps> = ({
             Title
           </label>
           <input
+            data-testid={"agent-title-input"}
             id="title"
             type="text"
             placeholder="Agent name"
@@ -221,6 +222,7 @@ export const PublishAgentInfo: React.FC<PublishAgentInfoProps> = ({
             Subheader
           </label>
           <input
+            data-testid={"agent-subheader-input"}
             id="subheader"
             type="text"
             placeholder="A tagline for your agent"
@@ -238,6 +240,7 @@ export const PublishAgentInfo: React.FC<PublishAgentInfoProps> = ({
             Slug
           </label>
           <input
+            data-testid={"agent-slug-input"}
             id="slug"
             type="text"
             placeholder="URL-friendly name for your agent"
@@ -277,9 +280,11 @@ export const PublishAgentInfo: React.FC<PublishAgentInfoProps> = ({
                   onClick={handleAddImage}
                   variant="ghost"
                   className="flex h-[70px] w-[100px] flex-col items-center justify-center rounded-md bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-700 dark:hover:bg-neutral-600"
+                  data-testid="add-image-btn"
                 >
                   <label htmlFor="image-upload" className="cursor-pointer">
                     <input
+                      data-testid={"agent-image-input"}
                       id="image-upload"
                       type="file"
                       accept="image/*"
@@ -374,6 +379,7 @@ export const PublishAgentInfo: React.FC<PublishAgentInfoProps> = ({
           </label>
           <input
             id="youtube"
+            data-testid={"agent-youtube-input"}
             type="text"
             placeholder="Paste a video link here"
             value={youtubeLink}
@@ -392,6 +398,7 @@ export const PublishAgentInfo: React.FC<PublishAgentInfoProps> = ({
           <select
             id="category"
             value={category}
+            data-testid={"agent-category-select"}
             onChange={(e) => setCategory(e.target.value)}
             className="w-full appearance-none rounded-[55px] border border-slate-200 py-2.5 pl-4 pr-5 font-sans text-base font-normal leading-normal text-slate-500 dark:border-slate-700 dark:bg-gray-700 dark:text-slate-300"
           >
@@ -419,6 +426,7 @@ export const PublishAgentInfo: React.FC<PublishAgentInfoProps> = ({
           </label>
           <textarea
             id="description"
+            data-testid={"agent-description-textarea"}
             placeholder="Describe your agent and what it does"
             value={description}
             onChange={(e) => setDescription(e.target.value)}
@@ -436,6 +444,7 @@ export const PublishAgentInfo: React.FC<PublishAgentInfoProps> = ({
           Back
         </Button>
         <Button
+          data-testid={"agent-submit-button"}
           onClick={handleSubmit}
           size="lg"
           className="w-full bg-neutral-800 text-white hover:bg-neutral-900 dark:bg-neutral-600 dark:hover:bg-neutral-500 sm:flex-1"

autogpt_platform/frontend/src/tests/publish-agent.spec.ts

@@ -0,0 +1,98 @@
+import path from "path";
+import test, { expect } from "@playwright/test";
+import { LoginPage } from "./pages/login.page";
+import { TEST_CREDENTIALS } from "./credentials";
+import { getSelectors } from "./utils/selectors";
+import { hasUrl, isVisible } from "./utils/assertion";
+
+
+test("User can publish an agent through the complete flow", async ({
+  page,
+}) => {
+  const { getId, getText } = getSelectors(page);
+
+  const loginPage = new LoginPage(page);
+  await page.goto("/login");
+  await loginPage.login(TEST_CREDENTIALS.email, TEST_CREDENTIALS.password);
+  await hasUrl(page, "/marketplace");
+
+  await page.goto("/marketplace");
+  await getId("become-a-creator-btn").click();
+
+  await isVisible(getText("Select your project that you'd like to publish"));
+  const agentToSelect = getId("agent-to-select").first();
+  await agentToSelect.waitFor({ state: "visible" });
+  await agentToSelect.click();
+  await getId("next-button").click();
+
+  // 2. Adding details of agent
+  await isVisible(getText("Write a bit of details about your agent"));
+  const agentTitle = "Test Agent Title";
+  await getId("agent-title-input").fill(agentTitle);
+  await getId("agent-subheader-input").fill("Test Agent Subheader");
+  await getId("agent-slug-input").fill("test-agent-slug");
+
+  const fileChooserPromise = page.waitForEvent("filechooser");
+  await getId("add-image-btn").click();
+  const fileChooser = await fileChooserPromise;
+  await fileChooser.setFiles(path.resolve(__dirname, "assets/placeholder.png"));
+  await page.waitForSelector('img[alt="Selected Thumbnail"]', {
+    timeout: 10000,
+  });
+
+  await getId("agent-youtube-input").fill(
+    "https://www.youtube.com/watch?v=test",
+  );
+  await getId("agent-category-select").selectOption({ index: 2 });
+  await getId("agent-description-textarea").fill(
+    "This is a test agent description for the automated test.",
+  );
+  await getId("agent-submit-button").click();
+
+  // 3. Agent reviewing page
+  await isVisible(getText("Agent is awaiting review"));
+  await getId("view-progrss-btn").click();
+
+  await hasUrl(page, "/profile/dashboard");
+
+  // 4. Check if agent is published
+  const agentStatus = getId("agent-status").first();
+  const agentName = getId("agent-name").first();
+  await agentStatus.waitFor({ state: "visible" });
+  await agentName.waitFor({ state: "visible" });
+  await expect(agentStatus).toHaveText("Awaiting review");
+  await expect(agentName).toHaveText(agentTitle);
+});
+
+test("Should display appropriate content in agent creation popout when user is logged out", async ({ page }) => {
+  const { getId, getText } = getSelectors(page);
+
+  await page.goto("/marketplace");
+  await getId("become-a-creator-btn").click();
+
+  await isVisible(getText("Uh-oh.. It seems like you don't have any agents in your library."));
+});
+
+test("Should show error when required agent title is missing", async ({ page }) => {
+  const { getId, getText } = getSelectors(page);
+
+  const loginPage = new LoginPage(page);
+  await page.goto("/login");
+  await loginPage.login(TEST_CREDENTIALS.email, TEST_CREDENTIALS.password);
+  await hasUrl(page, "/marketplace");
+
+  await page.goto("/marketplace");
+  await getId("become-a-creator-btn").click();
+
+  await getId("agent-to-select").first().click();
+  await getId("next-button").click();
+
+  await isVisible(getText("Write a bit of details about your agent"));
+
+  await getId("agent-subheader-input").fill("Test Agent Subheader");
+  await getId("agent-slug-input").fill("test-agent-slug");
+
+  await getId("agent-submit-button").click();
+
+  await isVisible(getText(/missing|required/i));
+});