feat: setup test for Map (#58)

packages/core/src/AutoForm.test.tsx

@@ -1,41 +1,81 @@
-import { describe, it, vi, expect } from 'vitest';
-import { fireEvent, render, prettyDOM } from '@testing-library/react';
-import { createAutoForm } from './AutoForm';
-import { useForm } from 'react-hook-form';
-import protobuf from 'protobufjs';
-import React from 'react';
+import { describe, it, vi, expect, afterEach } from "vitest";
+import {
+  fireEvent,
+  render,
+  prettyDOM,
+  cleanup,
+  waitFor,
+} from "@testing-library/react";
+import { createAutoForm } from "./AutoForm";
+import { useForm } from "react-hook-form";
+import protobuf from "protobufjs";
+import React from "react";
 
 const namespace = protobuf.parse(`
 syntax = "proto3";
 
-message Child {
+message GrandChild {
   map<int32, string> items = 1;
 }
 
+message Child {
+  GrandChild gc = 1;
+}
+
 message Parent {
-  repeated Child children = 1;
+  repeated string children = 1;
 }
   `).root;
 
 const MockApp: React.FC<{ onSubmit: (values: unknown) => void }> = (props) => {
   const form = useForm();
   const { AutoForm } = createAutoForm({
     form,
-    messageType: 'Parent',
+    messageType: "Parent",
     namespace,
-  })
+  });
 
-  return <AutoForm onSubmitValid={props.onSubmit}><button id="submit">submit</button></AutoForm>
-}
+  return (
+    <AutoForm onSubmitValid={props.onSubmit}>
+      <button id="submit">submit</button>
+    </AutoForm>
+  );
+};
 
-describe('AutoForm', () => {
-  it('Form submission', async () => {
+afterEach(cleanup);
+
+describe("AutoForm", () => {
+  it("Form submission", async () => {
     const handleSubmit = vi.fn();
-    const dom = render(<MockApp onSubmit={handleSubmit}><button id="submit" /></MockApp>);
-    const submitButton = dom.container.querySelector('#submit');
+    const dom = render(
+      <MockApp onSubmit={handleSubmit}>
+        <button id="submit" />
+      </MockApp>
+    );
+    const submitButton = dom.container.querySelector("#submit");
     expect(submitButton).toBeDefined();
     fireEvent.click(submitButton!);
     await vi.waitFor(() => handleSubmit.mock.calls.length > 0);
     expect(handleSubmit.mock.calls.length).toBe(1);
   });
-})
+
+  it("Add map item", async () => {
+    const handleSubmit = vi.fn();
+    const dom = render(
+      <MockApp
+        onSubmit={(values) => {
+          console.log(values);
+          handleSubmit(values);
+        }}
+      >
+        <button id="submit" />
+      </MockApp>
+    );
+    fireEvent.click(dom.queryByTestId("add-btn")!);
+    await vi.waitUntil(() => dom.queryByTestId("delete-btn") !== null);
+    fireEvent.click(dom.container.querySelector("#submit")!);
+    await waitFor(() => expect(handleSubmit).toHaveBeenCalledTimes(1));
+
+    expect(handleSubmit.mock.calls[0]).toEqual([{ children: [""] }]);
+  });
+});

packages/core/src/common/AddButton.tsx

@@ -6,7 +6,7 @@ interface Props {
 }
 
 const AddButton: React.FC<Props> = ({ onClick }) => (
-  <button type="button" className="btn btn-xs" onClick={onClick}>
+  <button type="button" className="btn btn-xs" onClick={onClick} data-testid="add-btn">
     <PlusIcon />
     Add
   </button>

packages/core/src/common/DelButton.tsx

@@ -6,7 +6,7 @@ interface Props {
 }
 
 const AddButton: React.FC<Props> = ({ onClick }) => (
-  <button type="button" className="btn btn-xs btn-error" onClick={onClick}>
+  <button type="button" className="btn btn-xs btn-error" onClick={onClick} data-testid="delete-btn">
     <MinusIcon />
   </button>
 );