jazz-tools 0.19.0 → 0.19.2

package/src/inspector/tests/viewer/co-value-editor.test.tsx

@@ -0,0 +1,903 @@
+// @vitest-environment happy-dom
+import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
+import { setActiveAccount, setupJazzTestSync } from "jazz-tools/testing";
+import { co, z } from "jazz-tools";
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
+import { CoValueEditor } from "../../viewer/co-value-editor";
+import { setup } from "goober";
+import React from "react";
+
+describe("CoValueEditor", async () => {
+  const account = await setupJazzTestSync();
+  setActiveAccount(account);
+
+  beforeAll(() => {
+    setup(React.createElement);
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  describe("Initial Rendering", () => {
+    it("should render with number value", async () => {
+      const value = co
+        .map({
+          count: z.number(),
+        })
+        .create({ count: 42 });
+
+      const onCancel = vi.fn();
+
+      render(
+        <CoValueEditor
+          node={account.$jazz.localNode}
+          property="count"
+          value={42}
+          coValue={value.$jazz.raw}
+          onCancel={onCancel}
+        />,
+      );
+
+      expect(screen.getByLabelText("Type")).toBeDefined();
+      expect(screen.getByDisplayValue("number")).toBeDefined();
+      expect(screen.getByDisplayValue("42")).toBeDefined();
+      expect(screen.getByText("Cancel")).toBeDefined();
+      expect(screen.getByText("Submit")).toBeDefined();
+    });
+
+    it("should render with string value", async () => {
+      const value = co
+        .map({
+          name: z.string(),
+        })
+        .create({ name: "test" });
+
+      const onCancel = vi.fn();
+
+      render(
+        <CoValueEditor
+          node={account.$jazz.localNode}
+          property="name"
+          value="test"
+          coValue={value.$jazz.raw}
+          onCancel={onCancel}
+        />,
+      );
+
+      expect(screen.getByDisplayValue("string")).toBeDefined();
+      expect(screen.getByDisplayValue("test")).toBeDefined();
+    });
+
+    it("should render with boolean true value", async () => {
+      const value = co
+        .map({
+          active: z.boolean(),
+        })
+        .create({ active: true });
+
+      const onCancel = vi.fn();
+
+      render(
+        <CoValueEditor
+          node={account.$jazz.localNode}
+          property="active"
+          value={true}
+          coValue={value.$jazz.raw}
+          onCancel={onCancel}
+        />,
+      );
+
+      expect(screen.getByDisplayValue("true")).toBeDefined();
+      expect(screen.queryByRole("textbox")).toBeNull();
+    });
+
+    it("should render with boolean false value", async () => {
+      const value = co
+        .map({
+          active: z.boolean(),
+        })
+        .create({ active: false });
+
+      const onCancel = vi.fn();
+
+      render(
+        <CoValueEditor
+          node={account.$jazz.localNode}
+          property="active"
+          value={false}
+          coValue={value.$jazz.raw}
+          onCancel={onCancel}
+        />,
+      );
+
+      expect(screen.getByDisplayValue("false")).toBeDefined();
+      expect(screen.queryByRole("textbox")).toBeNull();
+    });
+
+    it("should render with null value", async () => {
+      const value = co
+        .map({
+          data: z.string().nullable(),
+        })
+        .create({ data: null });
+
+      const onCancel = vi.fn();
+
+      render(
+        <CoValueEditor
+          node={account.$jazz.localNode}
+          property="data"
+          value={null}
+          coValue={value.$jazz.raw}
+          onCancel={onCancel}
+        />,
+      );
+
+      expect(screen.getByDisplayValue("null")).toBeDefined();
+      expect(screen.queryByRole("textbox")).toBeNull();
+    });
+
+    it("should render with undefined value", async () => {
+      const value = co
+        .map({
+          optional: z.string().optional(),
+        })
+        .create({});
+
+      const onCancel = vi.fn();
+
+      render(
+        <CoValueEditor
+          node={account.$jazz.localNode}
+          property="optional"
+          value={undefined}
+          coValue={value.$jazz.raw}
+          onCancel={onCancel}
+        />,
+      );
+
+      expect(screen.getByDisplayValue("undefined")).toBeDefined();
+      expect(screen.queryByRole("textbox")).toBeNull();
+    });
+
+    it("should render with object value", async () => {
+      const value = co
+        .map({
+          config: z.json(),
+        })
+        .create({ config: { foo: "bar", num: 123 } });
+
+      const onCancel = vi.fn();
+
+      render(
+        <CoValueEditor
+          node={account.$jazz.localNode}
+          property="config"
+          value={{ foo: "bar", num: 123 }}
+          coValue={value.$jazz.raw}
+          onCancel={onCancel}
+        />,
+      );
+
+      expect(screen.getByDisplayValue("object")).toBeDefined();
+      const textarea = screen.getByRole("textbox") as HTMLTextAreaElement;
+      expect(textarea).toBeDefined();
+      expect(textarea.value).toBe(
+        JSON.stringify({ foo: "bar", num: 123 }, null, 2),
+      );
+    });
+  });
+
+  describe("Type Selection", () => {
+    it("should show textarea when number type is selected", async () => {
+      const value = co
+        .map({
+          count: z.number(),
+        })
+        .create({ count: 42 });
+
+      const onCancel = vi.fn();
+
+      render(
+        <CoValueEditor
+          node={account.$jazz.localNode}
+          property="count"
+          value={42}
+          coValue={value.$jazz.raw}
+          onCancel={onCancel}
+        />,
+      );
+
+      const select = screen.getByLabelText("Type");
+      expect(screen.getByRole("textbox")).toBeDefined();
+
+      fireEvent.change(select, { target: { value: "number" } });
+      expect(screen.getByRole("textbox")).toBeDefined();
+    });
+
+    it("should show textarea when string type is selected", async () => {
+      const value = co
+        .map({
+          name: z.string(),
+        })
+        .create({ name: "test" });
+
+      const onCancel = vi.fn();
+
+      render(
+        <CoValueEditor
+          node={account.$jazz.localNode}
+          property="name"
+          value="test"
+          coValue={value.$jazz.raw}
+          onCancel={onCancel}
+        />,
+      );
+
+      const select = screen.getByLabelText("Type");
+      expect(screen.getByRole("textbox")).toBeDefined();
+
+      fireEvent.change(select, { target: { value: "string" } });
+      expect(screen.getByRole("textbox")).toBeDefined();
+    });
+
+    it("should show textarea when object type is selected", async () => {
+      const value = co
+        .map({
+          data: z.json(),
+        })
+        .create({ data: {} });
+
+      const onCancel = vi.fn();
+
+      render(
+        <CoValueEditor
+          node={account.$jazz.localNode}
+          property="data"
+          value={{}}
+          coValue={value.$jazz.raw}
+          onCancel={onCancel}
+        />,
+      );
+
+      const select = screen.getByLabelText("Type");
+      expect(screen.getByRole("textbox")).toBeDefined();
+
+      fireEvent.change(select, { target: { value: "object" } });
+      expect(screen.getByRole("textbox")).toBeDefined();
+    });
+
+    it("should hide textarea when boolean type is selected", async () => {
+      const value = co
+        .map({
+          count: z.number(),
+        })
+        .create({ count: 42 });
+
+      const onCancel = vi.fn();
+
+      render(
+        <CoValueEditor
+          node={account.$jazz.localNode}
+          property="count"
+          value={42}
+          coValue={value.$jazz.raw}
+          onCancel={onCancel}
+        />,
+      );
+
+      const select = screen.getByLabelText("Type");
+      fireEvent.change(select, { target: { value: "true" } });
+
+      await waitFor(() => {
+        expect(screen.queryByRole("textbox")).toBeNull();
+      });
+    });
+
+    it("should hide textarea when null type is selected", async () => {
+      const value = co
+        .map({
+          count: z.number(),
+        })
+        .create({ count: 42 });
+
+      const onCancel = vi.fn();
+
+      render(
+        <CoValueEditor
+          node={account.$jazz.localNode}
+          property="count"
+          value={42}
+          coValue={value.$jazz.raw}
+          onCancel={onCancel}
+        />,
+      );
+
+      const select = screen.getByLabelText("Type");
+      fireEvent.change(select, { target: { value: "null" } });
+
+      await waitFor(() => {
+        expect(screen.queryByRole("textbox")).toBeNull();
+      });
+    });
+
+    it("should hide textarea when undefined type is selected", async () => {
+      const value = co
+        .map({
+          count: z.number(),
+        })
+        .create({ count: 42 });
+
+      const onCancel = vi.fn();
+
+      render(
+        <CoValueEditor
+          node={account.$jazz.localNode}
+          property="count"
+          value={42}
+          coValue={value.$jazz.raw}
+          onCancel={onCancel}
+        />,
+      );
+
+      const select = screen.getByLabelText("Type");
+      fireEvent.change(select, { target: { value: "undefined" } });
+
+      await waitFor(() => {
+        expect(screen.queryByRole("textbox")).toBeNull();
+      });
+    });
+  });
+
+  describe("Form Submission", () => {
+    it("should submit number value", async () => {
+      const value = co
+        .map({
+          count: z.number(),
+        })
+        .create({ count: 42 });
+
+      const onCancel = vi.fn();
+      const makeTransactionSpy = vi.spyOn(
+        value.$jazz.raw.core,
+        "makeTransaction",
+      );
+
+      render(
+        <CoValueEditor
+          node={account.$jazz.localNode}
+          property="count"
+          value={42}
+          coValue={value.$jazz.raw}
+          onCancel={onCancel}
+        />,
+      );
+
+      const textarea = screen.getByRole("textbox");
+      fireEvent.change(textarea, { target: { value: "100" } });
+
+      const submitButton = screen.getByText("Submit");
+      fireEvent.click(submitButton);
+
+      await waitFor(() => {
+        expect(makeTransactionSpy).toHaveBeenCalledWith(
+          [{ op: "set", key: "count", value: 100 }],
+          "private",
+        );
+        expect(onCancel).toHaveBeenCalled();
+      });
+    });
+
+    it("should submit string value", async () => {
+      const value = co
+        .map({
+          name: z.string(),
+        })
+        .create({ name: "test" });
+
+      const onCancel = vi.fn();
+      const makeTransactionSpy = vi.spyOn(
+        value.$jazz.raw.core,
+        "makeTransaction",
+      );
+
+      render(
+        <CoValueEditor
+          node={account.$jazz.localNode}
+          property="name"
+          value="test"
+          coValue={value.$jazz.raw}
+          onCancel={onCancel}
+        />,
+      );
+
+      const textarea = screen.getByRole("textbox");
+      fireEvent.change(textarea, { target: { value: "updated" } });
+
+      const submitButton = screen.getByText("Submit");
+      fireEvent.click(submitButton);
+
+      await waitFor(() => {
+        expect(makeTransactionSpy).toHaveBeenCalledWith(
+          [{ op: "set", key: "name", value: "updated" }],
+          "private",
+        );
+        expect(onCancel).toHaveBeenCalled();
+      });
+    });
+
+    it("should submit boolean true value", async () => {
+      const value = co
+        .map({
+          active: z.boolean(),
+        })
+        .create({ active: false });
+
+      const onCancel = vi.fn();
+      const makeTransactionSpy = vi.spyOn(
+        value.$jazz.raw.core,
+        "makeTransaction",
+      );
+
+      render(
+        <CoValueEditor
+          node={account.$jazz.localNode}
+          property="active"
+          value={false}
+          coValue={value.$jazz.raw}
+          onCancel={onCancel}
+        />,
+      );
+
+      const select = screen.getByLabelText("Type");
+      fireEvent.change(select, { target: { value: "true" } });
+
+      const submitButton = screen.getByText("Submit");
+      fireEvent.click(submitButton);
+
+      await waitFor(() => {
+        expect(makeTransactionSpy).toHaveBeenCalledWith(
+          [{ op: "set", key: "active", value: true }],
+          "private",
+        );
+        expect(onCancel).toHaveBeenCalled();
+      });
+    });
+
+    it("should submit boolean false value", async () => {
+      const value = co
+        .map({
+          active: z.boolean(),
+        })
+        .create({ active: true });
+
+      const onCancel = vi.fn();
+      const makeTransactionSpy = vi.spyOn(
+        value.$jazz.raw.core,
+        "makeTransaction",
+      );
+
+      render(
+        <CoValueEditor
+          node={account.$jazz.localNode}
+          property="active"
+          value={true}
+          coValue={value.$jazz.raw}
+          onCancel={onCancel}
+        />,
+      );
+
+      const select = screen.getByLabelText("Type");
+      fireEvent.change(select, { target: { value: "false" } });
+
+      const submitButton = screen.getByText("Submit");
+      fireEvent.click(submitButton);
+
+      await waitFor(() => {
+        expect(makeTransactionSpy).toHaveBeenCalledWith(
+          [{ op: "set", key: "active", value: false }],
+          "private",
+        );
+        expect(onCancel).toHaveBeenCalled();
+      });
+    });
+
+    it("should submit null value", async () => {
+      const value = co
+        .map({
+          data: z.string().nullable(),
+        })
+        .create({ data: "test" });
+
+      const onCancel = vi.fn();
+      const makeTransactionSpy = vi.spyOn(
+        value.$jazz.raw.core,
+        "makeTransaction",
+      );
+
+      render(
+        <CoValueEditor
+          node={account.$jazz.localNode}
+          property="data"
+          value="test"
+          coValue={value.$jazz.raw}
+          onCancel={onCancel}
+        />,
+      );
+
+      const select = screen.getByLabelText("Type");
+      fireEvent.change(select, { target: { value: "null" } });
+
+      const submitButton = screen.getByText("Submit");
+      fireEvent.click(submitButton);
+
+      await waitFor(() => {
+        expect(makeTransactionSpy).toHaveBeenCalledWith(
+          [{ op: "set", key: "data", value: null }],
+          "private",
+        );
+        expect(onCancel).toHaveBeenCalled();
+      });
+    });
+
+    it("should submit undefined value", async () => {
+      const value = co
+        .map({
+          optional: z.string().optional(),
+        })
+        .create({ optional: "test" });
+
+      const onCancel = vi.fn();
+      const makeTransactionSpy = vi.spyOn(
+        value.$jazz.raw.core,
+        "makeTransaction",
+      );
+
+      render(
+        <CoValueEditor
+          node={account.$jazz.localNode}
+          property="optional"
+          value="test"
+          coValue={value.$jazz.raw}
+          onCancel={onCancel}
+        />,
+      );
+
+      const select = screen.getByLabelText("Type");
+      fireEvent.change(select, { target: { value: "undefined" } });
+
+      const submitButton = screen.getByText("Submit");
+      fireEvent.click(submitButton);
+
+      await waitFor(() => {
+        expect(makeTransactionSpy).toHaveBeenCalledWith(
+          [{ op: "set", key: "optional", value: undefined }],
+          "private",
+        );
+        expect(onCancel).toHaveBeenCalled();
+      });
+    });
+
+    it("should submit object value", async () => {
+      const value = co
+        .map({
+          config: z.json(),
+        })
+        .create({ config: {} });
+
+      const onCancel = vi.fn();
+      const makeTransactionSpy = vi.spyOn(
+        value.$jazz.raw.core,
+        "makeTransaction",
+      );
+
+      render(
+        <CoValueEditor
+          node={account.$jazz.localNode}
+          property="config"
+          value={{}}
+          coValue={value.$jazz.raw}
+          onCancel={onCancel}
+        />,
+      );
+
+      const textarea = screen.getByRole("textbox");
+      const newObject = { foo: "bar", nested: { value: 123 } };
+      fireEvent.change(textarea, {
+        target: { value: JSON.stringify(newObject, null, 2) },
+      });
+
+      const submitButton = screen.getByText("Submit");
+      fireEvent.click(submitButton);
+
+      await waitFor(() => {
+        expect(makeTransactionSpy).toHaveBeenCalledWith(
+          [{ op: "set", key: "config", value: newObject }],
+          "private",
+        );
+        expect(onCancel).toHaveBeenCalled();
+      });
+    });
+
+    it("should prevent default form submission", async () => {
+      const value = co
+        .map({
+          count: z.number(),
+        })
+        .create({ count: 42 });
+
+      const onCancel = vi.fn();
+
+      render(
+        <CoValueEditor
+          node={account.$jazz.localNode}
+          property="count"
+          value={42}
+          coValue={value.$jazz.raw}
+          onCancel={onCancel}
+        />,
+      );
+
+      const form = screen.getByRole("textbox").closest("form");
+      expect(form).toBeDefined();
+
+      const submitEvent = new Event("submit", {
+        bubbles: true,
+        cancelable: true,
+      });
+      const preventDefaultSpy = vi.spyOn(submitEvent, "preventDefault");
+      const stopPropagationSpy = vi.spyOn(submitEvent, "stopPropagation");
+
+      if (form) {
+        fireEvent(form, submitEvent);
+      }
+
+      expect(preventDefaultSpy).toHaveBeenCalled();
+      expect(stopPropagationSpy).toHaveBeenCalled();
+    });
+  });
+
+  describe("Cancel Button", () => {
+    it("should call onCancel when cancel button is clicked", async () => {
+      const value = co
+        .map({
+          count: z.number(),
+        })
+        .create({ count: 42 });
+
+      const onCancel = vi.fn();
+
+      render(
+        <CoValueEditor
+          node={account.$jazz.localNode}
+          property="count"
+          value={42}
+          coValue={value.$jazz.raw}
+          onCancel={onCancel}
+        />,
+      );
+
+      const cancelButton = screen.getByText("Cancel");
+      fireEvent.click(cancelButton);
+
+      expect(onCancel).toHaveBeenCalledTimes(1);
+    });
+
+    it("should not make transaction when cancel is clicked", async () => {
+      const value = co
+        .map({
+          count: z.number(),
+        })
+        .create({ count: 42 });
+
+      const onCancel = vi.fn();
+      const makeTransactionSpy = vi.spyOn(
+        value.$jazz.raw.core,
+        "makeTransaction",
+      );
+
+      render(
+        <CoValueEditor
+          node={account.$jazz.localNode}
+          property="count"
+          value={42}
+          coValue={value.$jazz.raw}
+          onCancel={onCancel}
+        />,
+      );
+
+      const cancelButton = screen.getByText("Cancel");
+      fireEvent.click(cancelButton);
+
+      expect(makeTransactionSpy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("Event Propagation", () => {
+    it("should stop propagation on select click", async () => {
+      const value = co
+        .map({
+          count: z.number(),
+        })
+        .create({ count: 42 });
+
+      const onCancel = vi.fn();
+
+      render(
+        <CoValueEditor
+          node={account.$jazz.localNode}
+          property="count"
+          value={42}
+          coValue={value.$jazz.raw}
+          onCancel={onCancel}
+        />,
+      );
+
+      const select = screen.getByLabelText("Type");
+      const clickEvent = new MouseEvent("click", { bubbles: true });
+      const stopPropagationSpy = vi.spyOn(clickEvent, "stopPropagation");
+
+      fireEvent(select, clickEvent);
+
+      expect(stopPropagationSpy).toHaveBeenCalled();
+    });
+
+    it("should stop propagation on textarea click", async () => {
+      const value = co
+        .map({
+          count: z.number(),
+        })
+        .create({ count: 42 });
+
+      const onCancel = vi.fn();
+
+      render(
+        <CoValueEditor
+          node={account.$jazz.localNode}
+          property="count"
+          value={42}
+          coValue={value.$jazz.raw}
+          onCancel={onCancel}
+        />,
+      );
+
+      const textarea = screen.getByRole("textbox");
+      const clickEvent = new MouseEvent("click", { bubbles: true });
+      const stopPropagationSpy = vi.spyOn(clickEvent, "stopPropagation");
+
+      fireEvent(textarea, clickEvent);
+
+      expect(stopPropagationSpy).toHaveBeenCalled();
+    });
+  });
+
+  describe("Edge Cases", () => {
+    it("should handle decimal number input", async () => {
+      const value = co
+        .map({
+          count: z.number(),
+        })
+        .create({ count: 42 });
+
+      const onCancel = vi.fn();
+      const makeTransactionSpy = vi.spyOn(
+        value.$jazz.raw.core,
+        "makeTransaction",
+      );
+
+      render(
+        <CoValueEditor
+          node={account.$jazz.localNode}
+          property="count"
+          value={42}
+          coValue={value.$jazz.raw}
+          onCancel={onCancel}
+        />,
+      );
+
+      const textarea = screen.getByRole("textbox");
+      fireEvent.change(textarea, { target: { value: "3.14" } });
+
+      const submitButton = screen.getByText("Submit");
+      fireEvent.click(submitButton);
+
+      await waitFor(() => {
+        expect(makeTransactionSpy).toHaveBeenCalledWith(
+          [{ op: "set", key: "count", value: 3.14 }],
+          "private",
+        );
+      });
+    });
+
+    it("should handle empty string input", async () => {
+      const value = co
+        .map({
+          name: z.string(),
+        })
+        .create({ name: "test" });
+
+      const onCancel = vi.fn();
+      const makeTransactionSpy = vi.spyOn(
+        value.$jazz.raw.core,
+        "makeTransaction",
+      );
+
+      render(
+        <CoValueEditor
+          node={account.$jazz.localNode}
+          property="name"
+          value="test"
+          coValue={value.$jazz.raw}
+          onCancel={onCancel}
+        />,
+      );
+
+      const textarea = screen.getByRole("textbox");
+      fireEvent.change(textarea, { target: { value: "" } });
+
+      const submitButton = screen.getByText("Submit");
+      fireEvent.click(submitButton);
+
+      await waitFor(() => {
+        expect(makeTransactionSpy).toHaveBeenCalledWith(
+          [{ op: "set", key: "name", value: "" }],
+          "private",
+        );
+      });
+    });
+
+    it("should handle complex nested object", async () => {
+      const value = co
+        .map({
+          config: z.json(),
+        })
+        .create({ config: {} });
+
+      const onCancel = vi.fn();
+      const makeTransactionSpy = vi.spyOn(
+        value.$jazz.raw.core,
+        "makeTransaction",
+      );
+
+      render(
+        <CoValueEditor
+          node={account.$jazz.localNode}
+          property="config"
+          value={{}}
+          coValue={value.$jazz.raw}
+          onCancel={onCancel}
+        />,
+      );
+
+      const textarea = screen.getByRole("textbox");
+      const complexObject = {
+        nested: {
+          deep: {
+            value: [1, 2, 3],
+            items: [{ id: 1 }, { id: 2 }],
+          },
+        },
+      };
+      fireEvent.change(textarea, {
+        target: { value: JSON.stringify(complexObject, null, 2) },
+      });
+
+      const submitButton = screen.getByText("Submit");
+      fireEvent.click(submitButton);
+
+      await waitFor(() => {
+        expect(makeTransactionSpy).toHaveBeenCalledWith(
+          [{ op: "set", key: "config", value: complexObject }],
+          "private",
+        );
+      });
+    });
+  });
+});