refresh e2e (#307)

e2e-tests/helpers/test_helper.ts

@@ -54,6 +54,22 @@ class PageObject {
     await this.page.getByRole("button", { name: "Restart" }).click();
   }
 
+  async clickPreviewRefresh() {
+    await this.page.getByTestId("preview-refresh-button").click();
+  }
+
+  async clickPreviewNavigateBack() {
+    await this.page.getByTestId("preview-navigate-back-button").click();
+  }
+
+  async clickPreviewNavigateForward() {
+    await this.page.getByTestId("preview-navigate-forward-button").click();
+  }
+
+  async clickPreviewOpenBrowser() {
+    await this.page.getByTestId("preview-open-browser-button").click();
+  }
+
   locateLoadingAppPreview() {
     return this.page.getByText("Loading app preview...");
   }

e2e-tests/refresh.spec.ts

+import { test } from "./helpers/test_helper";
+
+test("refresh app", async ({ po }) => {
+  await po.setUp({ autoApprove: true });
+  await po.sendPrompt("hi");
+
+  // Drop the document.body inside the contentFrame to make
+  // sure refresh works.
+  await po
+    .getPreviewIframeElement()
+    .contentFrame()
+    .locator("body")
+    .evaluate((body) => {
+      body.remove();
+    });
+
+  await po.clickPreviewRefresh();
+  await po.snapshotPreview();
+});

e2e-tests/snapshots/refresh.spec.ts_refresh-app-1.aria.yml

+- 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/
\ No newline at end of file

src/components/preview_panel/PreviewIframe.tsx

@@ -372,6 +372,7 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => {
             className="p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed dark:text-gray-300"
             disabled={!canGoBack || loading || !selectedAppId}
             onClick={handleNavigateBack}
+            data-testid="preview-navigate-back-button"
           >
             <ArrowLeft size={16} />
           </button>
@@ -379,6 +380,7 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => {
             className="p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed dark:text-gray-300"
             disabled={!canGoForward || loading || !selectedAppId}
             onClick={handleNavigateForward}
+            data-testid="preview-navigate-forward-button"
           >
             <ArrowRight size={16} />
           </button>
@@ -386,6 +388,7 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => {
             onClick={handleReload}
             className="p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed dark:text-gray-300"
             disabled={loading || !selectedAppId}
+            data-testid="preview-refresh-button"
           >
             <RefreshCw size={16} />
           </button>
@@ -429,6 +432,7 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => {
         {/* Action Buttons */}
         <div className="flex space-x-1">
           <button
+            data-testid="preview-open-browser-button"
             onClick={() => {
               if (originalUrl) {
                 IpcClient.getInstance().openExternalUrl(originalUrl);