diff --git a/e2e-tests/approve.spec.ts b/e2e-tests/approve.spec.ts new file mode 100644 index 0000000..5624ab7 --- /dev/null +++ b/e2e-tests/approve.spec.ts @@ -0,0 +1,16 @@ +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(); +}); diff --git a/e2e-tests/fixtures/write-index.md b/e2e-tests/fixtures/write-index.md new file mode 100644 index 0000000..6e48a9a --- /dev/null +++ b/e2e-tests/fixtures/write-index.md @@ -0,0 +1,15 @@ +OK, I'm going to do some writing now... + + +const Index = () => { + return ( +
+ Testing:write-index! +
+ ); +}; + +export default Index; +
+ +And it's done! diff --git a/e2e-tests/helpers/test_helper.ts b/e2e-tests/helpers/test_helper.ts index 527e76e..c119298 100644 --- a/e2e-tests/helpers/test_helper.ts +++ b/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, diff --git a/e2e-tests/reject.spec.ts b/e2e-tests/reject.spec.ts new file mode 100644 index 0000000..1ad9038 --- /dev/null +++ b/e2e-tests/reject.spec.ts @@ -0,0 +1,14 @@ +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(); +}); diff --git a/e2e-tests/snapshots/approve.spec.ts_write-to-index-approve-check-preview-1.aria.yml b/e2e-tests/snapshots/approve.spec.ts_write-to-index-approve-check-preview-1.aria.yml new file mode 100644 index 0000000..89efbdc --- /dev/null +++ b/e2e-tests/snapshots/approve.spec.ts_write-to-index-approve-check-preview-1.aria.yml @@ -0,0 +1,9 @@ +- 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 diff --git a/e2e-tests/snapshots/approve.spec.ts_write-to-index-approve-check-preview-2.aria.yml b/e2e-tests/snapshots/approve.spec.ts_write-to-index-approve-check-preview-2.aria.yml new file mode 100644 index 0000000..0b43a10 --- /dev/null +++ b/e2e-tests/snapshots/approve.spec.ts_write-to-index-approve-check-preview-2.aria.yml @@ -0,0 +1,13 @@ +- 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 diff --git a/e2e-tests/snapshots/approve.spec.ts_write-to-index-approve-check-preview-3.aria.yml b/e2e-tests/snapshots/approve.spec.ts_write-to-index-approve-check-preview-3.aria.yml new file mode 100644 index 0000000..d176260 --- /dev/null +++ b/e2e-tests/snapshots/approve.spec.ts_write-to-index-approve-check-preview-3.aria.yml @@ -0,0 +1,4 @@ +- region "Notifications (F8)": + - list +- region "Notifications alt+T" +- text: Testing:write-index! \ No newline at end of file diff --git a/e2e-tests/snapshots/reject.spec.ts_reject-1.aria.yml b/e2e-tests/snapshots/reject.spec.ts_reject-1.aria.yml new file mode 100644 index 0000000..89efbdc --- /dev/null +++ b/e2e-tests/snapshots/reject.spec.ts_reject-1.aria.yml @@ -0,0 +1,9 @@ +- 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 diff --git a/e2e-tests/snapshots/reject.spec.ts_reject-2.aria.yml b/e2e-tests/snapshots/reject.spec.ts_reject-2.aria.yml new file mode 100644 index 0000000..5217ba1 --- /dev/null +++ b/e2e-tests/snapshots/reject.spec.ts_reject-2.aria.yml @@ -0,0 +1,11 @@ +- 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 diff --git a/src/components/chat/ChatInput.tsx b/src/components/chat/ChatInput.tsx index de8f5b2..1436fc0 100644 --- a/src/components/chat/ChatInput.tsx +++ b/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 ? ( @@ -687,6 +688,7 @@ function ChatInputActions({ variant="outline" onClick={onReject} disabled={!isApprovable || isApproving || isRejecting} + data-testid="reject-proposal-button" > {isRejecting ? ( diff --git a/src/components/preview_panel/PreviewIframe.tsx b/src/components/preview_panel/PreviewIframe.tsx index 0541a89..4e6af66 100644 --- a/src/components/preview_panel/PreviewIframe.tsx +++ b/src/components/preview_panel/PreviewIframe.tsx @@ -464,6 +464,7 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => { ) : (