Add project files

e2e-tests/attach_image.spec.ts

@@ -0,0 +1,104 @@
+import path from "path";
+import { test } from "./helpers/test_helper";
+import { expect } from "@playwright/test";
+import * as fs from "fs";
+
+// It's hard to read the snapshots, but they should be identical across
+// all test cases in this file, so we use the same snapshot name to ensure
+// the outputs are identical.
+const SNAPSHOT_NAME = "attach-image";
+
+// attach image is implemented in two separate components
+// - HomeChatInput
+// - ChatInput
+// so we need to test both
+test("attach image - home chat", async ({ po }) => {
+  await po.setUp();
+
+  await po
+    .getHomeChatInputContainer()
+    .getByTestId("chat-context-file-input")
+    .setInputFiles("e2e-tests/fixtures/images/logo.png");
+  await po.sendPrompt("[dump]");
+  await po.snapshotServerDump("last-message", { name: SNAPSHOT_NAME });
+  await po.snapshotMessages({ replaceDumpPath: true });
+});
+
+test("attach image - chat", async ({ po }) => {
+  await po.setUp({ autoApprove: true });
+  await po.sendPrompt("basic");
+
+  // attach via file input (click-to-upload)
+  await po
+    .getChatInputContainer()
+    .getByTestId("chat-context-file-input")
+    .setInputFiles("e2e-tests/fixtures/images/logo.png");
+  await po.sendPrompt("[dump]");
+  await po.snapshotServerDump("last-message", { name: SNAPSHOT_NAME });
+  await po.snapshotMessages({ replaceDumpPath: true });
+});
+
+test("attach image - chat - upload to codebase", async ({ po }) => {
+  await po.setUp({ autoApprove: true });
+  await po.sendPrompt("basic");
+
+  // attach via file input (click-to-upload)
+  await po
+    .getChatInputContainer()
+    .getByTestId("upload-to-codebase-file-input")
+    .setInputFiles("e2e-tests/fixtures/images/logo.png");
+  await po.sendPrompt("[[UPLOAD_IMAGE_TO_CODEBASE]]");
+
+  await po.snapshotServerDump("last-message", { name: "upload-to-codebase" });
+  await po.snapshotMessages({ replaceDumpPath: true });
+
+  // new/image/file.png
+  const appPath = await po.getCurrentAppPath();
+  const filePath = path.join(appPath, "new", "image", "file.png");
+  expect(fs.existsSync(filePath)).toBe(true);
+  // check contents of filePath is equal in value to e2e-tests/fixtures/images/logo.png
+  const expectedContents = fs.readFileSync(
+    "e2e-tests/fixtures/images/logo.png",
+    "base64",
+  );
+  const actualContents = fs.readFileSync(filePath, "base64");
+  expect(actualContents).toBe(expectedContents);
+});
+
+// attach image via drag-and-drop to chat input container
+test("attach image via drag - chat", async ({ po }) => {
+  await po.setUp({ autoApprove: true });
+  await po.sendPrompt("basic");
+  // read fixture and convert to base64 for browser context
+  const fileBase64 = fs.readFileSync(
+    "e2e-tests/fixtures/images/logo.png",
+    "base64",
+  );
+  // locate the inner drop target (first child div of the container)
+  const dropTarget = po.getChatInputContainer().locator("div").first();
+  // simulate dragenter, dragover, and drop with a File
+  await dropTarget.evaluate((element, fileBase64) => {
+    // convert base64 to Uint8Array
+    const binary = atob(fileBase64);
+    const len = binary.length;
+    const array = new Uint8Array(len);
+    for (let i = 0; i < len; i++) array[i] = binary.charCodeAt(i);
+    // create file and dataTransfer
+    const blob = new Blob([array], { type: "image/png" });
+    const file = new File([blob], "logo.png", { type: "image/png" });
+    const dt = new DataTransfer();
+    dt.items.add(file);
+    // dispatch drag events
+    ["dragenter", "dragover", "drop"].forEach((eventType) => {
+      element.dispatchEvent(
+        new DragEvent(eventType, { dataTransfer: dt, bubbles: true }),
+      );
+    });
+  }, fileBase64);
+
+  // submit and verify
+  await po.sendPrompt("[dump]");
+  // Note: this should match EXACTLY the server dump from the previous test.
+  await po.snapshotServerDump("last-message", { name: SNAPSHOT_NAME });
+  await po.snapshotMessages({ replaceDumpPath: true });
+});