create next.js e2e test (#305)

e2e-tests/fixtures/edit-made-with-dyad.md

@@ -0,0 +1,16 @@
+<dyad-write path="src/components/made-with-dyad.tsx" description="write-description">
+export const MadeWithDyad = () => {
+  return (
+    <div className="p-4 text-center">
+      <a
+        href="https://www.dyad.sh/"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+      >
+        Made with Dyad (EDITED)
+      </a>
+    </div>
+  );
+};
+</dyad-write>

e2e-tests/helpers/test_helper.ts

@@ -50,6 +50,10 @@ class PageObject {
     await this.page.getByTestId("reject-proposal-button").click();
   }
 
+  async clickRestart() {
+    await this.page.getByRole("button", { name: "Restart" }).click();
+  }
+
   getPreviewIframeElement() {
     return this.page.getByTestId("preview-iframe-element");
   }
@@ -196,6 +200,14 @@ class PageObject {
     await this.page.getByRole("link", { name: "Apps" }).click();
   }
 
+  async goToHubTab() {
+    await this.page.getByRole("link", { name: "Hub" }).click();
+  }
+
+  async selectTemplate(templateName: string) {
+    await this.page.getByRole("img", { name: templateName }).click();
+  }
+
   ////////////////////////////////
   // Toast assertions
   ////////////////////////////////

e2e-tests/snapshots/template-create-nextjs.spec.ts_create-next-js-app-1.aria.yml

@@ -0,0 +1,10 @@
+- main:
+  - heading "Blank page" [level=1]
+- link "Made with Dyad (EDITED)":
+  - /url: https://www.dyad.sh/
+- status:
+  - img
+  - text: Static route
+  - button "Hide static indicator":
+    - img
+- alert

e2e-tests/template-create-nextjs.spec.ts

@@ -0,0 +1,20 @@
+import { test } from "./helpers/test_helper";
+import { expect } from "@playwright/test";
+
+test("create next.js app", async ({ po }) => {
+  await po.setUp();
+  // Select Next.js template
+  await po.goToHubTab();
+  await po.selectTemplate("Next.js Template");
+  await po.goToAppsTab();
+
+  // Create an app
+  await po.sendPrompt("tc=edit-made-with-dyad");
+  await po.approveProposal();
+
+  await po.clickRestart();
+
+  // This can be pretty slow because it's waiting for the app to build.
+  await expect(po.getPreviewIframeElement()).toBeVisible({ timeout: 25_000 });
+  await po.snapshotPreview();
+});

playwright.config.ts

@@ -5,7 +5,7 @@ const config: PlaywrightTestConfig = {
   workers: 1,
   retries: process.env.CI ? 1 : 0,
   // maxFailures: 1,
-  timeout: process.env.CI ? 60_000 : 15_000,
+  timeout: process.env.CI ? 60_000 : 30_000,
   // Use a custom snapshot path template because Playwright's default
   // is platform-specific which isn't necessary for Dyad e2e tests
   // which should be platform agnostic (we don't do screenshots; only textual diffs).