Rebuild e2e (#310)

e2e-tests/helpers/test_helper.ts

@@ -62,6 +62,15 @@ class PageObject {
     await this.page.getByRole("button", { name: "Restart" }).click();
   }
 
+  async clickRebuild() {
+    await this.clickPreviewMoreOptions();
+    await this.page.getByText("Rebuild").click();
+  }
+
+  async clickPreviewMoreOptions() {
+    await this.page.getByTestId("preview-more-options-button").click();
+  }
+
   async clickPreviewRefresh() {
     await this.page.getByTestId("preview-refresh-button").click();
   }
@@ -218,6 +227,25 @@ class PageObject {
     await this.page.getByRole("link", { name: "Settings" }).click();
   }
 
+  getTitleBarAppNameButton() {
+    return this.page.getByTestId("title-bar-app-name-button");
+  }
+
+  async getCurrentAppName() {
+    return (await this.getTitleBarAppNameButton().textContent())?.replace(
+      "App: ",
+      "",
+    );
+  }
+
+  async getCurrentAppPath() {
+    const currentAppName = await this.getCurrentAppName();
+    if (!currentAppName) {
+      throw new Error("No current app name found");
+    }
+    return path.join("/tmp", "dyad-apps-test", currentAppName);
+  }
+
   ////////////////////////////////
   // Settings related
   ////////////////////////////////
@@ -344,11 +372,15 @@ export const test = base.extend<{
       // After the test we can check whether the test passed or failed.
       if (testInfo.status !== testInfo.expectedStatus) {
         const page = await electronApp.firstWindow();
-        const screenshot = await page.screenshot();
+        try {
-        await testInfo.attach("screenshot", {
+          const screenshot = await page.screenshot({ timeout: 5_000 });
-          body: screenshot,
+          await testInfo.attach("screenshot", {
-          contentType: "image/png",
+            body: screenshot,
-        });
+            contentType: "image/png",
+          });
+        } catch (error) {
+          console.error("Error taking screenshot on failure", error);
+        }
       }
     },
     { auto: true },

e2e-tests/rebuild.spec.ts

@@ -0,0 +1,24 @@
+import { test } from "./helpers/test_helper";
+import { expect } from "@playwright/test";
+import fs from "fs";
+import path from "path";
+
+test("rebuild app", async ({ po }) => {
+  await po.setUp({ autoApprove: true });
+  await po.sendPrompt("hi");
+  await po.snapshotPreview();
+
+  const currentAppPath = await po.getCurrentAppPath();
+  const testPath = path.join(currentAppPath, "node_modules", "test.txt");
+  fs.writeFileSync(testPath, "test");
+
+  await po.clickRebuild();
+  await expect(po.locateLoadingAppPreview()).toBeVisible();
+  await expect(po.locateLoadingAppPreview()).not.toBeVisible({
+    timeout: 15_000,
+  });
+
+  // Check that the file is removed with the rebuild
+  expect(fs.existsSync(testPath)).toBe(false);
+  await po.snapshotPreview();
+});

e2e-tests/snapshots/rebuild.spec.ts_rebuild-app-1.aria.yml

@@ -0,0 +1,7 @@
+- region "Notifications (F8)":
+  - list
+- region "Notifications alt+T"
+- heading "Welcome to Your Blank App" [level=1]
+- paragraph: Start building your amazing project here!
+- link "Made with Dyad":
+  - /url: https://www.dyad.sh/

e2e-tests/snapshots/rebuild.spec.ts_rebuild-app-2.aria.yml

@@ -0,0 +1,7 @@
+- region "Notifications (F8)":
+  - list
+- region "Notifications alt+T"
+- heading "Welcome to Your Blank App" [level=1]
+- paragraph: Start building your amazing project here!
+- link "Made with Dyad":
+  - /url: https://www.dyad.sh/

src/components/preview_panel/PreviewPanel.tsx

@@ -101,6 +101,7 @@ const PreviewHeader = ({
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <button
+            data-testid="preview-more-options-button"
             className="flex items-center justify-center p-1.5 rounded-md text-sm hover:bg-[var(--background-darkest)] transition-colors"
             title="More options"
           >