retain local appState props on restore (#2224)

Co-authored-by: Lipis <lipiridis@gmail.com>

src/tests/appState.test.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { render, waitFor } from "./test-utils";
+import App from "../components/App";
+import { API } from "./helpers/api";
+import { getDefaultAppState } from "../appState";
+
+const { h } = window;
+
+describe("appState", () => {
+  it("drag&drop file doesn't reset non-persisted appState", async () => {
+    const defaultAppState = getDefaultAppState();
+    const exportBackground = !defaultAppState.exportBackground;
+    render(
+      <App
+        initialData={{
+          appState: {
+            ...defaultAppState,
+            exportBackground,
+            viewBackgroundColor: "#F00",
+          },
+          elements: [],
+        }}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(h.state.exportBackground).toBe(exportBackground);
+      expect(h.state.viewBackgroundColor).toBe("#F00");
+    });
+
+    API.dropFile({
+      appState: {
+        viewBackgroundColor: "#000",
+      },
+      elements: [API.createElement({ type: "rectangle", id: "A" })],
+    });
+
+    await waitFor(() => {
+      expect(h.elements).toEqual([expect.objectContaining({ id: "A" })]);
+      // non-imported prop → retain
+      expect(h.state.exportBackground).toBe(exportBackground);
+      // imported prop → overwrite
+      expect(h.state.viewBackgroundColor).toBe("#000");
+    });
+  });
+});

src/tests/helpers/api.ts

@@ -7,6 +7,8 @@ import {
 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";
 
 const { h } = window;
 
@@ -135,4 +137,28 @@ export class API {
     }
     return element as any;
   };
+
+  static dropFile(sceneData: ImportedDataState) {
+    const fileDropEvent = createEvent.drop(GlobalTestState.canvas);
+    const file = new Blob(
+      [
+        JSON.stringify({
+          type: "excalidraw",
+          ...sceneData,
+        }),
+      ],
+      {
+        type: "application/json",
+      },
+    );
+    Object.defineProperty(fileDropEvent, "dataTransfer", {
+      value: {
+        files: [file],
+        getData: (_type: string) => {
+          return "";
+        },
+      },
+    });
+    fireEvent(GlobalTestState.canvas, fileDropEvent);
+  }
 }

src/tests/history.test.tsx

@@ -1,10 +1,10 @@
 import React from "react";
-import { render, GlobalTestState } from "./test-utils";
+import { render } from "./test-utils";
 import App from "../components/App";
 import { UI } from "./helpers/ui";
 import { API } from "./helpers/api";
 import { getDefaultAppState } from "../appState";
-import { waitFor, fireEvent, createEvent } from "@testing-library/react";
+import { waitFor } from "@testing-library/react";
 import { createUndoAction, createRedoAction } from "../actions/actionHistory";
 
 const { h } = window;
@@ -77,31 +77,14 @@ describe("history", () => {
     await waitFor(() =>
       expect(h.elements).toEqual([expect.objectContaining({ id: "A" })]),
     );
-    const fileDropEvent = createEvent.drop(GlobalTestState.canvas);
-    const file = new Blob(
-      [
-        JSON.stringify({
-          type: "excalidraw",
-          appState: {
-            ...getDefaultAppState(),
-            viewBackgroundColor: "#000",
-          },
-          elements: [API.createElement({ type: "rectangle", id: "B" })],
-        }),
-      ],
-      {
-        type: "application/json",
-      },
-    );
-    Object.defineProperty(fileDropEvent, "dataTransfer", {
-      value: {
-        files: [file],
-        getData: (_type: string) => {
-          return "";
-        },
+
+    API.dropFile({
+      appState: {
+        ...getDefaultAppState(),
+        viewBackgroundColor: "#000",
       },
+      elements: [API.createElement({ type: "rectangle", id: "B" })],
     });
-    fireEvent(GlobalTestState.canvas, fileDropEvent);
 
     await waitFor(() => expect(API.getStateHistory().length).toBe(2));
     expect(h.state.viewBackgroundColor).toBe("#000");