Approve & reject proposal e2e (#298)

e2e-tests/approve.spec.ts

+import { test } from "./helpers/test_helper";
+import { expect } from "@playwright/test";
+
+test("write to index, approve, check preview", async ({ po }) => {
+  await po.setUp();
+  await po.sendPrompt("tc=write-index");
+  await po.snapshotMessages();
+  await po.approveProposal();
+
+  // Should be slightly different from above, because it will say "approved"
+  await po.snapshotMessages();
+
+  // This can be pretty slow because it's waiting for the app to build.
+  await expect(po.getPreviewIframeElement()).toBeVisible({ timeout: 15_000 });
+  await po.snapshotPreview();
+});

e2e-tests/fixtures/write-index.md

+OK, I'm going to do some writing now...
+
+<dyad-write path="src/pages/Index.tsx" description="write-description">
+const Index = () => {
+  return (
+    <div>
+        Testing:write-index!
+    </div>
+  );
+};
+
+export default Index;
+</dyad-write>
+
+And it's done!

e2e-tests/helpers/test_helper.ts

@@ -20,6 +20,23 @@ class PageObject {
     await expect(this.page.getByTestId("messages-list")).toMatchAriaSnapshot();
   }
 
+  async approveProposal() {
+    await this.page.getByTestId("approve-proposal-button").click();
+  }
+
+  async rejectProposal() {
+    await this.page.getByTestId("reject-proposal-button").click();
+  }
+
+  getPreviewIframeElement() {
+    return this.page.getByTestId("preview-iframe-element");
+  }
+
+  async snapshotPreview() {
+    const iframe = this.getPreviewIframeElement();
+    await expect(iframe.contentFrame().locator("body")).toMatchAriaSnapshot();
+  }
+
   async snapshotServerDump() {
     // Get the text content of the messages list
     const messagesListText = await this.page
@@ -199,11 +216,12 @@ export const test = base.extend<{
     { auto: true },
   ],
   attachScreenshotsToReport: [
-    async ({ page }, use, testInfo) => {
+    async ({ electronApp }, use, testInfo) => {
       await use();
 
       // 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();
         await testInfo.attach("screenshot", {
           body: screenshot,

e2e-tests/reject.spec.ts

+import { test } from "./helpers/test_helper";
+import { expect } from "@playwright/test";
+
+test("reject", async ({ po }) => {
+  await po.setUp();
+  await po.sendPrompt("tc=write-index");
+  await po.snapshotMessages();
+  await po.rejectProposal();
+
+  // Should be slightly different from above, because it will say "rejected"
+  await po.snapshotMessages();
+
+  await expect(po.getPreviewIframeElement()).not.toBeVisible();
+});

e2e-tests/snapshots/approve.spec.ts_write-to-index-approve-check-preview-1.aria.yml

+- paragraph: tc=write-index
+- paragraph: OK, I'm going to do some writing now...
+- img
+- text: Index.tsx
+- img
+- text: "src/pages/Index.tsx Summary: write-description"
+- paragraph: And it's done!
+- button "Retry":
+  - img
\ No newline at end of file

e2e-tests/snapshots/approve.spec.ts_write-to-index-approve-check-preview-2.aria.yml

+- paragraph: tc=write-index
+- paragraph: OK, I'm going to do some writing now...
+- img
+- text: Index.tsx
+- img
+- text: "src/pages/Index.tsx Summary: write-description"
+- paragraph: And it's done!
+- img
+- text: Approved
+- button "Undo":
+  - img
+- button "Retry":
+  - img
\ No newline at end of file

e2e-tests/snapshots/approve.spec.ts_write-to-index-approve-check-preview-3.aria.yml

+- region "Notifications (F8)":
+  - list
+- region "Notifications alt+T"
+- text: Testing:write-index!
\ No newline at end of file

e2e-tests/snapshots/reject.spec.ts_reject-1.aria.yml

+- paragraph: tc=write-index
+- paragraph: OK, I'm going to do some writing now...
+- img
+- text: Index.tsx
+- img
+- text: "src/pages/Index.tsx Summary: write-description"
+- paragraph: And it's done!
+- button "Retry":
+  - img
\ No newline at end of file

e2e-tests/snapshots/reject.spec.ts_reject-2.aria.yml

+- paragraph: tc=write-index
+- paragraph: OK, I'm going to do some writing now...
+- img
+- text: Index.tsx
+- img
+- text: "src/pages/Index.tsx Summary: write-description"
+- paragraph: And it's done!
+- img
+- text: Rejected
+- button "Retry":
+  - img
\ No newline at end of file

src/components/chat/ChatInput.tsx

@@ -673,6 +673,7 @@ function ChatInputActions({
             variant="outline"
             onClick={onApprove}
             disabled={!isApprovable || isApproving || isRejecting}
+            data-testid="approve-proposal-button"
           >
             {isApproving ? (
               <Loader2 size={16} className="mr-1 animate-spin" />
@@ -687,6 +688,7 @@ function ChatInputActions({
             variant="outline"
             onClick={onReject}
             disabled={!isApprovable || isApproving || isRejecting}
+            data-testid="reject-proposal-button"
           >
             {isRejecting ? (
               <Loader2 size={16} className="mr-1 animate-spin" />

src/components/preview_panel/PreviewIframe.tsx

@@ -464,6 +464,7 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => {
           </div>
         ) : (
           <iframe
+            data-testid="preview-iframe-element"
             onLoad={() => {
               setErrorMessage(undefined);
             }}