✅ (tests): add end-to-end test for sending an image in chat

✨ (tests): introduce chain.png asset for image upload test

src/frontend/tests/end-to-end/chatInputOutputUser.spec.ts

@@ -1,4 +1,5 @@
 import { expect, test } from "@playwright/test";
+import { readFileSync } from "fs";
 
 test("user must interact with chat with Input/Output", async ({ page }) => {
   if (!process.env.CI) {
@@ -147,3 +148,83 @@ test("user must be able to see output inspection", async ({ page }) => {
   await page.getByText("Type", { exact: true }).isVisible();
   await page.getByText("User", { exact: true }).last().isVisible();
 });
+
+test("user must be able to send an image on chat", async ({ page }) => {
+  if (!process.env.CI) {
+    dotenv.config();
+    dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+  }
+
+  await page.goto("/");
+
+  await page.waitForTimeout(1000);
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(5000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.getByRole("heading", { name: "Basic Prompting" }).click();
+  await page.waitForTimeout(1000);
+
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  if (!process.env.OPENAI_API_KEY) {
+    //You must set the OPENAI_API_KEY on .env file to run this test
+    expect(false).toBe(true);
+  }
+
+  await page
+    .getByTestId("popover-anchor-input-openai_api_key")
+    .fill(process.env.OPENAI_API_KEY ?? "");
+
+  await page.getByText("Chat Input", { exact: true }).click();
+  await page.getByTestId("more-options-modal").click();
+  await page.getByTestId("edit-button-modal").click();
+  await page.getByTestId("toggle-edit-return_record").click();
+  expect(
+    await page.getByTestId("toggle-edit-return_record").isChecked(),
+  ).toBeTruthy();
+  await page.getByText("Save Changes").click();
+
+  await page.getByText("Playground", { exact: true }).click();
+
+  const jsonContent = readFileSync(
+    "src/frontend/tests/end-to-end/assets/chain.png",
+    "utf-8",
+  );
+
+  // Create the DataTransfer and File
+  const dataTransfer = await page.evaluateHandle((data) => {
+    const dt = new DataTransfer();
+    // Convert the buffer to a hex array
+    const file = new File([data], "chain.png", {
+      type: "application/json",
+    });
+    dt.items.add(file);
+    return dt;
+  }, jsonContent);
+
+  const element = await page.getByPlaceholder("Send a message...");
+
+  await element.dispatchEvent("drop", { dataTransfer });
+
+  await page.getByText("chain.png").isVisible();
+  await page.getByTestId("icon-LucideSend").click();
+  await page.waitForTimeout(2000);
+  await page.getByText("chain.png").isVisible();
+});