test: add tests for loading library from file picker (#5206)

src/tests/library.test.tsx

@@ -1,4 +1,4 @@
-import { render, waitFor } from "./test-utils";
+import { fireEvent, render, waitFor } from "./test-utils";
 import ExcalidrawApp from "../excalidraw-app";
 import { API } from "./helpers/api";
 import { MIME_TYPES } from "../constants";
@@ -8,9 +8,31 @@ import { serializeLibraryAsJSON } from "../data/json";
 import { distributeLibraryItemsOnSquareGrid } from "../data/library";
 import { ExcalidrawGenericElement } from "../element/types";
 import { getCommonBoundingBox } from "../element/bounds";
+import { parseLibraryJSON } from "../data/blob";
 
 const { h } = window;
 
+const libraryJSONPromise = API.readFile(
+  "./fixtures/fixture_library.excalidrawlib",
+  "utf8",
+);
+
+const mockLibraryFilePromise = new Promise<Blob>(async (resolve, reject) => {
+  try {
+    resolve(
+      new Blob([await libraryJSONPromise], { type: MIME_TYPES.excalidrawlib }),
+    );
+  } catch (error) {
+    reject(error);
+  }
+});
+
+jest.mock("../data/filesystem.ts", () => ({
+  __esmodule: true,
+  ...jest.requireActual("../data/filesystem.ts"),
+  fileOpen: jest.fn(() => mockLibraryFilePromise),
+}));
+
 describe("library", () => {
   beforeEach(async () => {
     await render(<ExcalidrawApp />);
@@ -37,11 +59,9 @@ describe("library", () => {
   // 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(
+    const libraryItems = parseLibraryJSON(await libraryJSONPromise);
-      await API.readFile("./fixtures/fixture_library.excalidrawlib", "utf8"),
-    ).library[0];
     await API.drop(
-      new Blob([serializeLibraryAsJSON([libraryItems])], {
+      new Blob([serializeLibraryAsJSON(libraryItems)], {
         type: MIME_TYPES.excalidrawlib,
       }),
     );
@@ -53,11 +73,9 @@ describe("library", () => {
   it("inserting library item should revert to selection tool", async () => {
     UI.clickTool("rectangle");
     expect(h.elements).toEqual([]);
-    const libraryItems: LibraryItem = JSON.parse(
+    const libraryItems = parseLibraryJSON(await libraryJSONPromise);
-      await API.readFile("./fixtures/fixture_library.excalidrawlib", "utf8"),
-    ).library[0];
     await API.drop(
-      new Blob([serializeLibraryAsJSON([libraryItems])], {
+      new Blob([serializeLibraryAsJSON(libraryItems)], {
         type: MIME_TYPES.excalidrawlib,
       }),
     );
@@ -68,6 +86,36 @@ describe("library", () => {
   });
 });
 
+describe("library menu", () => {
+  it("should load library from file picker", async () => {
+    const { container } = await render(<ExcalidrawApp />);
+
+    const latestLibrary = await h.app.library.getLatestLibrary();
+    expect(latestLibrary.length).toBe(0);
+
+    const libraryButton = container.querySelector(".ToolIcon__library");
+
+    fireEvent.click(libraryButton!);
+
+    const loadLibraryButton = container.querySelector(
+      ".library-actions .library-actions--load",
+    );
+
+    fireEvent.click(loadLibraryButton!);
+
+    const libraryItems = parseLibraryJSON(await libraryJSONPromise);
+
+    await waitFor(async () => {
+      const latestLibrary = await h.app.library.getLatestLibrary();
+      expect(latestLibrary.length).toBeGreaterThan(0);
+      expect(latestLibrary.length).toBe(libraryItems.length);
+      expect(latestLibrary[0].elements).toEqual(libraryItems[0].elements);
+    });
+
+    expect(true).toBe(true);
+  });
+});
+
 describe("distributeLibraryItemsOnSquareGrid()", () => {
   it("should distribute items on a grid", async () => {
     const createLibraryItem = (