diff --git a/e2e-tests/helpers/test_helper.ts b/e2e-tests/helpers/test_helper.ts index c166999..9cce33a 100644 --- a/e2e-tests/helpers/test_helper.ts +++ b/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..."); } diff --git a/e2e-tests/refresh.spec.ts b/e2e-tests/refresh.spec.ts new file mode 100644 index 0000000..7ca4292 --- /dev/null +++ b/e2e-tests/refresh.spec.ts @@ -0,0 +1,19 @@ +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(); +}); diff --git a/e2e-tests/snapshots/refresh.spec.ts_refresh-app-1.aria.yml b/e2e-tests/snapshots/refresh.spec.ts_refresh-app-1.aria.yml new file mode 100644 index 0000000..a778454 --- /dev/null +++ b/e2e-tests/snapshots/refresh.spec.ts_refresh-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/ \ No newline at end of file diff --git a/src/components/preview_panel/PreviewIframe.tsx b/src/components/preview_panel/PreviewIframe.tsx index 4e6af66..ac08472 100644 --- a/src/components/preview_panel/PreviewIframe.tsx +++ b/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" > @@ -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" > @@ -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" > @@ -429,6 +432,7 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => { {/* Action Buttons */}