Feature/image upload e2e tests

apps/backend/test-1.spec.ts

@@ -0,0 +1,56 @@
+import { test, expect } from "@playwright/test";
+
+test("test", async ({ page }) => {
+  // Go to http://localhost:19006/
+  await page.goto("http://localhost:19006/");
+
+  // Go to http://localhost:19006/login
+  await page.goto("http://localhost:19006/login");
+
+  // Click [placeholder="Enter your email …"]
+  await page.locator('[placeholder="Enter your email …"]').click();
+
+  // Fill [placeholder="Enter your email …"]
+  await page.locator('[placeholder="Enter your email …"]').fill("[email protected]");
+
+  // Press Tab
+  await page.locator('[placeholder="Enter your email …"]').press("Tab");
+
+  // Fill [placeholder="Enter your password …"]
+  await page.locator('[placeholder="Enter your password …"]').fill("pass");
+
+  // Click div[role="button"]:has-text("Log in")
+  await page.locator('div[role="button"]:has-text("Log in")').click();
+  await expect(page).toHaveURL(
+    "http://localhost:19006/workspace/8f832295-4e3a-482f-a506-cb407dc2e650/page/18610bc1-edd5-41af-b3f8-0af282aa230d"
+  );
+
+  // Click [data-testid="editor-sidebar__add-image"] div:has-text("Upload Image") >> nth=0
+  await page
+    .locator(
+      '[data-testid="editor-sidebar__add-image"] div:has-text("Upload Image")'
+    )
+    .first()
+    .click();
+
+  // Upload whatsapp-logo.png
+  await page
+    .locator('[data-testid="editor-sidebar__add-image"]')
+    .setInputFiles("whatsapp-logo.png");
+
+  // Click img
+  await page.locator("img").click();
+
+  // Click img
+  await page.locator("img").click({
+    button: "right",
+  });
+  await expect(page).toHaveURL(
+    "http://localhost:19006/workspace/8f832295-4e3a-482f-a506-cb407dc2e650/page/18610bc1-edd5-41af-b3f8-0af282aa230d"
+  );
+
+  // Click img
+  await page.locator("img").click({
+    button: "right",
+  });
+});

apps/backend/test/e2e/images/register.e2e.ts

@@ -0,0 +1,56 @@
+import { test } from "@playwright/test";
+import * as sodium from "@serenity-tools/libsodium";
+import { v4 as uuidv4 } from "uuid";
+import { createDocument } from "../../helpers/e2e/createDocument";
+import { createSubFolder } from "../../helpers/e2e/createSubFolder";
+import { deleteDocument } from "../../helpers/e2e/deleteDocument";
+import { register } from "../../helpers/e2e/register";
+import { renameDocument } from "../../helpers/e2e/renameDocument";
+import { uploadImage } from "../../helpers/e2e/uploadImage";
+
+const username = `${uuidv4()}@example.com`;
+const password = "pass";
+const workspaceName = "a workspace";
+
+test.beforeAll(async () => {
+  await sodium.ready;
+});
+
+test.describe("After register", () => {
+  test.only("Upload, remove image", async ({ page }) => {
+    const { workspace, folder } = await register({
+      page,
+      username,
+      password,
+      workspaceName,
+    });
+    const numImages = await uploadImage({
+      page,
+      filePath: "/Users/adonis/Downloads/whatsapp-logo.png",
+    });
+  });
+
+  test("Create, rename, delete document in subfolder", async ({ page }) => {
+    const { workspace, folder } = await register({
+      page,
+      username: `${uuidv4()}@example.com`,
+      password,
+      workspaceName,
+    });
+    const addedFolder = await createSubFolder(
+      page,
+      folder?.id!,
+      workspace?.id!
+    );
+    if (!addedFolder) {
+      throw new Error("Folder not found");
+    }
+    const addedDocument = await createDocument(
+      page,
+      addedFolder.id,
+      workspace?.id!
+    );
+    await renameDocument(page, addedDocument?.id!, "Renamed document");
+    await deleteDocument(page, addedDocument?.id!, workspace?.id!);
+  });
+});

apps/backend/test/helpers/e2e/uploadImage.ts

@@ -0,0 +1,28 @@
+import { expect, Page } from "@playwright/test";
+import { delayForSeconds } from "../delayForSeconds";
+
+export type Props = {
+  page: Page;
+  filePath: string;
+};
+export const uploadImage = async ({ page, filePath }: Props) => {
+  const numImagesBefore = await page
+    .locator("div[class='ProseMirror'] > img")
+    .count();
+  // await page.locator('[data-testid="editor-sidebar__add-image"]').click();
+  // await delayForSeconds(2);
+  // await page
+  //   .locator('[data-testid="editor-sidebar__add-image"]')
+  //   .setInputFiles(filePath);
+  const identifier =
+    '//input[@data-testid="editor-sidebar__add-image--file-input"]';
+  // await page.locator(identifier).click();
+  await delayForSeconds(2);
+  await page.setInputFiles(identifier, [filePath]);
+  await delayForSeconds(20);
+  const numImagesAfter = await page
+    .locator("div[class='ProseMirror'] > img")
+    .count();
+  expect(numImagesAfter).toBe(numImagesBefore + 1);
+  return numImagesAfter;
+};

packages/editor/components/editorSidebar/EditorSidebar.tsx

@@ -2,6 +2,7 @@ import {
   EncryptAndUploadFunctionFile,
   initiateImagePicker,
   InsertImageParams,
+  insertImages,
   updateImageAttributes,
   UpdateImageAttributesParams,
 } from "@serenity-tools/editor-image-extension";
@@ -16,7 +17,8 @@ import {
 } from "@serenity-tools/ui";
 import { Level } from "@tiptap/extension-heading";
 import { Editor } from "@tiptap/react";
-import React from "react";
+import React, { useRef } from "react";
+import { Platform } from "react-native";
 
 type EditorSidebarProps = {
   editor: Editor | null;
@@ -29,6 +31,53 @@ export default function EditorSidebar({
   headingLevels,
   encryptAndUploadFile,
 }: EditorSidebarProps) {
+  const fileInputRef = useRef<any>();
+  const insertImage = async ({
+    uploadId,
+    width,
+    height,
+  }: InsertImageParams) => {
+    if (!editor) {
+      return;
+    }
+    editor.commands.insertContent({
+      type: "image",
+      attrs: {
+        uploadId,
+        width,
+        height,
+      },
+    });
+  };
+
+  const testFileUpload = async (event: any) => {
+    const file = event.target.files[0];
+    if (!file) {
+      return;
+    }
+    const reader = new FileReader();
+    reader.onload = function (e) {
+      const buf = e.target?.result as ArrayBuffer;
+      const data = Buffer.from(buf).toString("base64");
+      console.log(data);
+      insertImages({
+        encryptAndUploadFile,
+        filesAsBase64: [data],
+        insertImage,
+        updateImageAttributes: (params: UpdateImageAttributesParams) => {
+          if (!editor) {
+            return;
+          }
+          updateImageAttributes({ ...params, view: editor.view });
+        },
+      });
+      if (fileInputRef.current) {
+        fileInputRef.current.value = "";
+      }
+    };
+    reader.readAsArrayBuffer(file);
+  };
+
   return (
     <View
       style={tw`w-sidebar h-full border-l border-gray-200 bg-gray-100 pt-4`}
@@ -186,19 +235,7 @@ export default function EditorSidebar({
         onPress={() => {
           initiateImagePicker({
             encryptAndUploadFile,
-            insertImage: ({ uploadId, width, height }: InsertImageParams) => {
-              if (!editor) {
-                return;
-              }
-              editor.commands.insertContent({
-                type: "image",
-                attrs: {
-                  uploadId,
-                  width,
-                  height,
-                },
-              });
-            },
+            insertImage,
             updateImageAttributes: (params: UpdateImageAttributesParams) => {
               if (!editor) {
                 return;
@@ -207,12 +244,21 @@ export default function EditorSidebar({
             },
           });
         }}
+        testID="editor-sidebar__add-image"
       >
         <EditorSidebarIcon isActive={false} name="image-line" />
         <Text variant="xs" bold={false}>
           Upload Image
         </Text>
       </SidebarButton>
+      {Platform.OS === "web" && (
+        <input
+          ref={fileInputRef}
+          type="file"
+          onChange={testFileUpload}
+          data-testid="editor-sidebar__add-image--file-input"
+        />
+      )}
     </View>
   );
 }