Rename app E2E (#315)

e2e-tests/helpers/test_helper.ts

@@ -256,12 +256,21 @@ class PageObject {
     if (!currentAppName) {
       throw new Error("No current app name found");
     }
-    return path.join(this.userDataDir, "dyad-apps", currentAppName);
+    return this.getAppPath({ appName: currentAppName });
   }
+
+  getAppPath({ appName }: { appName: string }) {
+    return path.join(this.userDataDir, "dyad-apps", appName);
+  }
+
   async clickAppListItem({ appName }: { appName: string }) {
     await this.page.getByTestId(`app-list-item-${appName}`).click();
   }
 
+  async clickAppDetailsRenameAppButton() {
+    await this.page.getByTestId("app-details-rename-app-button").click();
+  }
+
   async clickAppDetailsMoreOptions() {
     await this.page.getByTestId("app-details-more-options-button").click();
   }

e2e-tests/rename_app.spec.ts

@@ -0,0 +1,54 @@
+import fs from "fs";
+import { test } from "./helpers/test_helper";
+import { expect } from "@playwright/test";
+
+test("rename app (including folder)", async ({ po }) => {
+  await po.setUp();
+  await po.sendPrompt("hi");
+
+  const appPath = await po.getCurrentAppPath();
+  await po.getTitleBarAppNameButton().click();
+
+  await po.clickAppDetailsRenameAppButton();
+  await po.page
+    .getByRole("textbox", { name: "Enter new app name" })
+    .fill("new-app-name");
+  await po.page.getByRole("button", { name: "Continue" }).click();
+  await po.page
+    .getByRole("button", { name: "Recommended Rename app and" })
+    .click();
+
+  await expect(async () => {
+    expect(await po.getCurrentAppName()).toBe("new-app-name");
+  }).toPass();
+
+  expect(fs.existsSync(appPath)).toBe(false);
+  const newAppPath = po.getAppPath({ appName: "new-app-name" });
+  expect(fs.existsSync(newAppPath)).toBe(true);
+
+  await expect(po.page.getByText(newAppPath)).toBeVisible();
+});
+
+test("rename app (without folder)", async ({ po }) => {
+  await po.setUp();
+  await po.sendPrompt("hi");
+
+  const appPath = await po.getCurrentAppPath();
+  await po.getTitleBarAppNameButton().click();
+
+  await po.clickAppDetailsRenameAppButton();
+  await po.page
+    .getByRole("textbox", { name: "Enter new app name" })
+    .fill("new-app-name");
+  await po.page.getByRole("button", { name: "Continue" }).click();
+  await po.page
+    .getByRole("button", { name: "Rename app only The folder" })
+    .click();
+
+  await expect(async () => {
+    expect(await po.getCurrentAppName()).toBe("new-app-name");
+  }).toPass();
+
+  expect(fs.existsSync(appPath)).toBe(true);
+  await expect(po.page.getByText(appPath)).toBeVisible();
+});

src/pages/app-details.tsx

@@ -183,6 +183,7 @@ export default function AppDetailsPage() {
             size="sm"
             className="ml-1 p-0.5 h-auto"
             onClick={handleOpenRenameDialog}
+            data-testid="app-details-rename-app-button"
           >
             <Pencil className="h-3.5 w-3.5" />
           </Button>