Delete app E2E (#313)

Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>

e2e-tests/delete_app.spec.ts

@@ -0,0 +1,28 @@
+import fs from "fs";
+import { test } from "./helpers/test_helper";
+import { expect } from "@playwright/test";
+test("delete app", async ({ po }) => {
+  await po.setUp();
+  await po.sendPrompt("hi");
+  const appName = await po.getCurrentAppName();
+  if (!appName) {
+    throw new Error("App name not found");
+  }
+  const appPath = await po.getCurrentAppPath();
+  await po.getTitleBarAppNameButton().click();
+  await expect(po.getAppListItem({ appName })).toBeVisible();
+
+  // Delete app
+  await po.clickAppDetailsMoreOptions();
+  // Open delete dialog
+  await po.page.getByRole("button", { name: "Delete" }).click();
+  // Confirm delete
+  await po.page.getByRole("button", { name: "Delete App" }).click();
+
+  // Make sure the app is deleted
+  await expect(async () => {
+    expect(await po.getCurrentAppName()).toBe("(no app selected)");
+  }).toPass();
+  expect(fs.existsSync(appPath)).toBe(false);
+  expect(po.getAppListItem({ appName })).not.toBeVisible();
+});

e2e-tests/helpers/test_helper.ts

@@ -232,6 +232,10 @@ class PageObject {
     return this.page.getByTestId("title-bar-app-name-button");
   }
 
+  getAppListItem({ appName }: { appName: string }) {
+    return this.page.getByTestId(`app-list-item-${appName}`);
+  }
+
   async getCurrentAppName() {
     return (await this.getTitleBarAppNameButton().textContent())?.replace(
       "App: ",
@@ -246,6 +250,13 @@ class PageObject {
     }
     return path.join(this.userDataDir, "dyad-apps", currentAppName);
   }
+  async clickAppListItem({ appName }: { appName: string }) {
+    await this.page.getByTestId(`app-list-item-${appName}`).click();
+  }
+
+  async clickAppDetailsMoreOptions() {
+    await this.page.getByTestId("app-details-more-options-button").click();
+  }
 
   ////////////////////////////////
   // Settings related

src/components/AppList.tsx

@@ -63,7 +63,7 @@ export function AppList({ show }: { show?: boolean }) {
           ) : apps.length === 0 ? (
             <div className="py-2 px-4 text-sm text-gray-500">No apps found</div>
           ) : (
-            <SidebarMenu className="space-y-1">
+            <SidebarMenu className="space-y-1" data-testid="app-list">
               {apps.map((app) => (
                 <SidebarMenuItem key={app.id} className="mb-1">
                   <Button
@@ -74,6 +74,7 @@ export function AppList({ show }: { show?: boolean }) {
                         ? "bg-sidebar-accent text-sidebar-accent-foreground"
                         : ""
                     }`}
+                    data-testid={`app-list-item-${app.name}`}
                   >
                     <div className="flex flex-col w-full">
                       <span className="truncate">{app.name}</span>

src/pages/app-details.tsx

@@ -192,7 +192,12 @@ export default function AppDetailsPage() {
         <div className="absolute top-2 right-2">
           <Popover>
             <PopoverTrigger asChild>
-              <Button variant="ghost" size="sm" className="h-7 w-7 p-0">
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-7 w-7 p-0"
+                data-testid="app-details-more-options-button"
+              >
                 <MoreVertical className="h-4 w-4" />
               </Button>
             </PopoverTrigger>