Fix library dnd (#2314)

src/tests/appState.test.tsx

@@ -28,12 +28,20 @@ describe("appState", () => {
       expect(h.state.viewBackgroundColor).toBe("#F00");
     });
 
-    API.dropFile({
-      appState: {
-        viewBackgroundColor: "#000",
-      },
-      elements: [API.createElement({ type: "rectangle", id: "A" })],
-    });
+    API.drop(
+      new Blob(
+        [
+          JSON.stringify({
+            type: "excalidraw",
+            appState: {
+              viewBackgroundColor: "#000",
+            },
+            elements: [API.createElement({ type: "rectangle", id: "A" })],
+          }),
+        ],
+        { type: "application/json" },
+      ),
+    );
 
     await waitFor(() => {
       expect(h.elements).toEqual([expect.objectContaining({ id: "A" })]);

src/tests/collab.test.tsx

@@ -29,6 +29,17 @@ jest.mock("../data/firebase.ts", () => {
   };
 });
 
+jest.mock("socket.io-client", () => {
+  return () => {
+    return {
+      close: () => {},
+      on: () => {},
+      off: () => {},
+      emit: () => {},
+    };
+  };
+});
+
 describe("collaboration", () => {
   it("creating room should reset deleted elements", async () => {
     render(
@@ -50,7 +61,7 @@ describe("collaboration", () => {
       expect(API.getStateHistory().length).toBe(1);
     });
 
-    h.app.openPortal();
+    await h.app.openPortal();
     await waitFor(() => {
       expect(h.elements).toEqual([expect.objectContaining({ id: "A" })]);
       expect(API.getStateHistory().length).toBe(1);

src/tests/export.test.tsx

@@ -9,12 +9,6 @@ import {
 } from "../data/image";
 import { serializeAsJSON } from "../data/json";
 
-import fs from "fs";
-import util from "util";
-import path from "path";
-
-const readFile = util.promisify(fs.readFile);
-
 const { h } = window;
 
 const testElements = [
@@ -43,22 +37,18 @@ Object.defineProperty(window, "TextDecoder", {
   },
 });
 
-describe("appState", () => {
+describe("export", () => {
   beforeEach(() => {
     render(<App />);
   });
 
   it("export embedded png and reimport", async () => {
-    const pngBlob = new Blob(
-      [await readFile(path.resolve(__dirname, "./fixtures/smiley.png"))],
-      { type: "image/png" },
-    );
-
+    const pngBlob = await API.loadFile("./fixtures/smiley.png");
     const pngBlobEmbedded = await encodePngMetadata({
       blob: pngBlob,
       metadata: serializeAsJSON(testElements, h.state),
     });
-    API.dropFile(pngBlobEmbedded);
+    API.drop(pngBlobEmbedded);
 
     await waitFor(() => {
       expect(h.elements).toEqual([
@@ -78,17 +68,7 @@ describe("appState", () => {
   });
 
   it("import embedded png (legacy v1)", async () => {
-    const pngBlob = new Blob(
-      [
-        await readFile(
-          path.resolve(__dirname, "./fixtures/test_embedded_v1.png"),
-        ),
-      ],
-      { type: "image/png" },
-    );
-
-    API.dropFile(pngBlob);
-
+    API.drop(await API.loadFile("./fixtures/test_embedded_v1.png"));
     await waitFor(() => {
       expect(h.elements).toEqual([
         expect.objectContaining({ type: "text", text: "test" }),
@@ -97,17 +77,7 @@ describe("appState", () => {
   });
 
   it("import embedded png (v2)", async () => {
-    const pngBlob = new Blob(
-      [
-        await readFile(
-          path.resolve(__dirname, "./fixtures/smiley_embedded_v2.png"),
-        ),
-      ],
-      { type: "image/png" },
-    );
-
-    API.dropFile(pngBlob);
-
+    API.drop(await API.loadFile("./fixtures/smiley_embedded_v2.png"));
     await waitFor(() => {
       expect(h.elements).toEqual([
         expect.objectContaining({ type: "text", text: "😀" }),
@@ -116,17 +86,7 @@ describe("appState", () => {
   });
 
   it("import embedded svg (legacy v1)", async () => {
-    const svgBlob = new Blob(
-      [
-        await readFile(
-          path.resolve(__dirname, "./fixtures/test_embedded_v1.svg"),
-        ),
-      ],
-      { type: "image/svg+xml" },
-    );
-
-    API.dropFile(svgBlob);
-
+    API.drop(await API.loadFile("./fixtures/test_embedded_v1.svg"));
     await waitFor(() => {
       expect(h.elements).toEqual([
         expect.objectContaining({ type: "text", text: "test" }),
@@ -135,17 +95,7 @@ describe("appState", () => {
   });
 
   it("import embedded svg (v2)", async () => {
-    const svgBlob = new Blob(
-      [
-        await readFile(
-          path.resolve(__dirname, "./fixtures/smiley_embedded_v2.svg"),
-        ),
-      ],
-      { type: "image/svg+xml" },
-    );
-
-    API.dropFile(svgBlob);
-
+    API.drop(await API.loadFile("./fixtures/smiley_embedded_v2.svg"));
     await waitFor(() => {
       expect(h.elements).toEqual([
         expect.objectContaining({ type: "text", text: "😀" }),

src/tests/fixtures/fixture_library.excalidrawlib

@@ -0,0 +1,31 @@
+{
+  "type": "excalidrawlib",
+  "version": 1,
+  "library": [
+    [
+      {
+        "type": "rectangle",
+        "version": 38,
+        "versionNonce": 1046419680,
+        "isDeleted": false,
+        "id": "A",
+        "fillStyle": "hachure",
+        "strokeWidth": 1,
+        "strokeStyle": "solid",
+        "roughness": 1,
+        "opacity": 100,
+        "angle": 0,
+        "x": 21801,
+        "y": 719.5,
+        "strokeColor": "#c92a2a",
+        "backgroundColor": "#e64980",
+        "width": 50,
+        "height": 30,
+        "seed": 117297479,
+        "groupIds": [],
+        "strokeSharpness": "sharp",
+        "boundElementIds": []
+      }
+    ]
+  ]
+}

src/tests/helpers/api.ts

@@ -8,7 +8,12 @@ import { newElement, newTextElement, newLinearElement } from "../../element";
 import { DEFAULT_VERTICAL_ALIGN } from "../../constants";
 import { getDefaultAppState } from "../../appState";
 import { GlobalTestState, createEvent, fireEvent } from "../test-utils";
-import { ImportedDataState } from "../../data/types";
+import fs from "fs";
+import util from "util";
+import path from "path";
+import { getMimeType } from "../../data/blob";
+
+const readFile = util.promisify(fs.readFile);
 
 const { h } = window;
 
@@ -138,30 +143,48 @@ export class API {
     return element as any;
   };
 
-  static dropFile(data: ImportedDataState | Blob) {
+  static readFile = async <T extends "utf8" | null>(
+    filepath: string,
+    encoding?: T,
+  ): Promise<T extends "utf8" ? string : Buffer> => {
+    filepath = path.isAbsolute(filepath)
+      ? filepath
+      : path.resolve(path.join(__dirname, "../", filepath));
+    return readFile(filepath, { encoding }) as any;
+  };
+
+  static loadFile = async (filepath: string) => {
+    const { base, ext } = path.parse(filepath);
+    return new File([await API.readFile(filepath, null)], base, {
+      type: getMimeType(ext),
+    });
+  };
+
+  static drop = async (blob: Blob) => {
     const fileDropEvent = createEvent.drop(GlobalTestState.canvas);
-    const file =
-      data instanceof Blob
-        ? data
-        : new Blob(
-            [
-              JSON.stringify({
-                type: "excalidraw",
-                ...data,
-              }),
-            ],
-            {
-              type: "application/json",
-            },
-          );
+    const text = await new Promise<string>((resolve, reject) => {
+      try {
+        const reader = new FileReader();
+        reader.onload = () => {
+          resolve(reader.result as string);
+        };
+        reader.readAsText(blob);
+      } catch (error) {
+        reject(error);
+      }
+    });
+
     Object.defineProperty(fileDropEvent, "dataTransfer", {
       value: {
-        files: [file],
-        getData: (_type: string) => {
+        files: [blob],
+        getData: (type: string) => {
+          if (type === blob.type) {
+            return text;
+          }
           return "";
         },
       },
     });
     fireEvent(GlobalTestState.canvas, fileDropEvent);
-  }
+  };
 }

src/tests/history.test.tsx

@@ -78,13 +78,21 @@ describe("history", () => {
       expect(h.elements).toEqual([expect.objectContaining({ id: "A" })]),
     );
 
-    API.dropFile({
-      appState: {
-        ...getDefaultAppState(),
-        viewBackgroundColor: "#000",
-      },
-      elements: [API.createElement({ type: "rectangle", id: "B" })],
-    });
+    API.drop(
+      new Blob(
+        [
+          JSON.stringify({
+            type: "excalidraw",
+            appState: {
+              ...getDefaultAppState(),
+              viewBackgroundColor: "#000",
+            },
+            elements: [API.createElement({ type: "rectangle", id: "B" })],
+          }),
+        ],
+        { type: "application/json" },
+      ),
+    );
 
     await waitFor(() => expect(API.getStateHistory().length).toBe(2));
     expect(h.state.viewBackgroundColor).toBe("#000");

src/tests/library.test.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { render, waitFor } from "./test-utils";
+import App from "../components/App";
+import { API } from "./helpers/api";
+import { MIME_TYPES } from "../constants";
+import { LibraryItem } from "../types";
+
+const { h } = window;
+
+describe("library", () => {
+  beforeEach(() => {
+    h.library.resetLibrary();
+    render(<App />);
+  });
+
+  it("import library via drag&drop", async () => {
+    expect(await h.library.loadLibrary()).toEqual([]);
+    await API.drop(
+      await API.loadFile("./fixtures/fixture_library.excalidrawlib"),
+    );
+    await waitFor(async () => {
+      expect(await h.library.loadLibrary()).toEqual([
+        [expect.objectContaining({ id: "A" })],
+      ]);
+    });
+  });
+
+  // NOTE: mocked to test logic, not actual drag&drop via UI
+  it("drop library item onto canvas", async () => {
+    expect(h.elements).toEqual([]);
+    const libraryItems: LibraryItem = JSON.parse(
+      await API.readFile("./fixtures/fixture_library.excalidrawlib", "utf8"),
+    ).library[0];
+    await API.drop(
+      new Blob([JSON.stringify(libraryItems)], {
+        type: MIME_TYPES.excalidrawlib,
+      }),
+    );
+    await waitFor(() => {
+      expect(h.elements).toEqual([expect.objectContaining({ id: "A_copy" })]);
+    });
+  });
+});