From 5802c39825fc197dab8665bece8f6e70f6dfce0b Mon Sep 17 00:00:00 2001
From: Will Chen <willchen90@gmail.com>
Date: Mon, 2 Jun 2025 22:46:35 -0700
Subject: [PATCH] Rename app E2E (#315)

---
 e2e-tests/helpers/test_helper.ts | 11 ++++++-
 e2e-tests/rename_app.spec.ts     | 54 ++++++++++++++++++++++++++++++++
 src/pages/app-details.tsx        |  1 +
 3 files changed, 65 insertions(+), 1 deletion(-)
 create mode 100644 e2e-tests/rename_app.spec.ts

diff --git a/e2e-tests/helpers/test_helper.ts b/e2e-tests/helpers/test_helper.ts
index 08526b2..5ab55fc 100644
--- a/e2e-tests/helpers/test_helper.ts
+++ b/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();
   }
diff --git a/e2e-tests/rename_app.spec.ts b/e2e-tests/rename_app.spec.ts
new file mode 100644
index 0000000..240d15c
--- /dev/null
+++ b/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();
+});
diff --git a/src/pages/app-details.tsx b/src/pages/app-details.tsx
index 2ccefa4..fe571bc 100644
--- a/src/pages/app-details.tsx
+++ b/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>