105 lines
3.8 KiB
TypeScript
105 lines
3.8 KiB
TypeScript
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 });
|
|
});
|