@isi-ui7/bos7-shared 0.3.7 → 0.3.9

package/src/detail-modal-field.test.tsx

@@ -0,0 +1,530 @@
+import { describe, it, expect, vi, beforeAll } from "vitest";
+import { render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { SchemaFormRenderer } from "./form-renderer";
+import type { FormSection } from "./form-types";
+
+type D = Record<string, unknown>;
+
+// jsdom tidak punya ResizeObserver, dan `ComposedModal` Carbon memakainya. Paket
+// ini belum punya berkas setup vitest karena belum ada satu pun tesnya yang
+// pernah memasang modal. Stub-nya ditaruh di sini, bukan di config global,
+// supaya cakupannya jelas dan tidak diam-diam mengubah lingkungan tes lain.
+beforeAll(() => {
+  if (!("ResizeObserver" in globalThis)) {
+    (globalThis as Record<string, unknown>).ResizeObserver = class {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    };
+  }
+});
+
+/**
+ * Baris tabel yang memuat teks tertentu.
+ *
+ * Aksi per baris dicari lewat barisnya, bukan lewat nama tombol yang unik:
+ * nama terakses tombol ikon Carbon berasal dari tooltip-nya, jadi semua tombol
+ * Hapus bernama sama. Ini juga cara operator bekerja — ia mencari BARIS "Budi",
+ * lalu menekan Hapus di baris itu.
+ */
+function rowWith(text: string): HTMLElement {
+  const cell = screen.getByText(text);
+  const row = cell.closest("tr");
+  if (!row) throw new Error(`Baris untuk "${text}" tidak ditemukan`);
+  return row as HTMLElement;
+}
+
+// Tipe field `detail-modal` — tabel ringkas + modal berisi form penuh satu baris.
+//
+// Uji ini ditulis dengan KOSAKATA OPERATOR, bukan kosakata API: yang dicari
+// "Tambah Ahli Waris", "Nama Lengkap", "Simpan" — teks yang benar-benar ada di
+// layar. Dua cacat di modul ini lolos justru karena tesnya memakai nama field
+// versi backend, sehingga salah-petakan antara form dan payload tak terlihat.
+//
+// Yang paling dijaga: baris yang tersimpan harus membawa SELURUH field yang
+// diisi operator. Kelas kegagalan termahal di wizard ini bukan galat, melainkan
+// field yang hilang dari payload tanpa satu pun tanda.
+
+const heirSections: FormSection<Record<string, unknown>>[] = [
+  {
+    title: "Data Ahli Waris",
+    columns: 2,
+    fields: [
+      {
+        key: "full_name",
+        label: "Nama Lengkap",
+        type: "text",
+        validation: { required: "Nama wajib diisi" },
+      },
+      { key: "seq_no", label: "Nomor Urut Prioritas", type: "text" },
+      { key: "notes", label: "Keterangan", type: "text" },
+    ],
+  },
+];
+
+function heirField(overrides: Record<string, unknown> = {}) {
+  return {
+    key: "heirs",
+    label: "Daftar Ahli Waris",
+    type: "detail-modal" as const,
+    detailModal: {
+      sections: heirSections,
+      columns: [
+        { field: "full_name", header: "Nama" },
+        { field: "seq_no", header: "Prioritas" },
+        { field: "notes", header: "Keterangan" },
+      ],
+      newRowFactory: () => ({ full_name: "", seq_no: "", notes: "" }),
+      addLabel: "Tambah Ahli Waris",
+      addModalTitle: "Tambah Ahli Waris",
+      emptyText: 'Belum ada ahli waris. Klik "Tambah Ahli Waris".',
+      ...overrides,
+    },
+  };
+}
+
+function renderHeirs(
+  value: D,
+  onChange: (patch: Partial<D>) => void,
+  fieldOverrides: Record<string, unknown> = {},
+  mode: "create" | "edit" | "view" = "create",
+) {
+  const section: FormSection<D> = {
+    title: "Ahli Waris",
+    fields: [heirField(fieldOverrides)],
+  };
+  return render(
+    <SchemaFormRenderer<D>
+      mode={mode}
+      value={value}
+      sections={[section]}
+      onChange={onChange}
+    />,
+  );
+}
+
+describe("detail-modal — tabel ringkas", () => {
+  it("tabel kosong mengajak menambah, bukan menampilkan baris hantu", () => {
+    renderHeirs({ heirs: [] }, () => {});
+    expect(
+      screen.getByText('Belum ada ahli waris. Klik "Tambah Ahli Waris".'),
+    ).toBeTruthy();
+  });
+
+  it("baris yang ada tampil sebagai ringkasan, bernomor urut", () => {
+    renderHeirs(
+      {
+        heirs: [
+          { full_name: "Siti Aminah", seq_no: "1", notes: "Istri" },
+          { full_name: "Budi Santoso", seq_no: "2", notes: "Anak" },
+        ],
+      },
+      () => {},
+    );
+    expect(screen.getByText("Siti Aminah")).toBeTruthy();
+    expect(screen.getByText("Budi Santoso")).toBeTruthy();
+    // Nomor urut dihitung renderer, bukan diambil dari data.
+    expect(screen.getByText("Istri")).toBeTruthy();
+  });
+
+  it("nilai kosong tampil sebagai em-dash, bukan sel kosong yang ambigu", () => {
+    renderHeirs({ heirs: [{ full_name: "Siti Aminah", seq_no: "", notes: "" }] }, () => {});
+    expect(screen.getAllByText("—").length).toBeGreaterThan(0);
+  });
+
+  it("nilai simpan bisa dialihkan ke label lewat format()", () => {
+    renderHeirs(
+      { heirs: [{ full_name: "Siti", seq_no: "1", notes: "", gender: "M" }] },
+      () => {},
+      {
+        columns: [
+          { field: "full_name", header: "Nama" },
+          {
+            field: "gender",
+            header: "Jenis Kelamin",
+            format: (v: unknown) => (v === "M" ? "Laki-laki" : "Perempuan"),
+          },
+        ],
+      },
+    );
+    // Tanpa format, kolom ini akan menampilkan "M" — kode simpan, bukan
+    // sesuatu yang berarti bagi operator.
+    expect(screen.getByText("Laki-laki")).toBeTruthy();
+  });
+});
+
+describe("detail-modal — menambah baris lewat modal", () => {
+  it("tombol Tambah membuka modal berisi form penuh baris", async () => {
+    const user = userEvent.setup();
+    renderHeirs({ heirs: [] }, () => {});
+
+    // Sebelum diklik, form baris tidak ada di layar sama sekali.
+    expect(screen.queryByLabelText("Nomor Urut Prioritas")).toBeNull();
+
+    await user.click(screen.getByRole("button", { name: "Tambah Ahli Waris" }));
+
+    expect(screen.getByLabelText(/Nama Lengkap/)).toBeTruthy();
+    expect(screen.getByLabelText("Nomor Urut Prioritas")).toBeTruthy();
+    expect(screen.getByLabelText("Keterangan")).toBeTruthy();
+  });
+
+  it("Simpan menaruh SELURUH field yang diisi ke payload induk", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    renderHeirs({ heirs: [] }, onChange);
+
+    await user.click(screen.getByRole("button", { name: "Tambah Ahli Waris" }));
+    await user.type(screen.getByLabelText(/Nama Lengkap/), "Siti Aminah");
+    await user.type(screen.getByLabelText("Nomor Urut Prioritas"), "1");
+    await user.type(screen.getByLabelText("Keterangan"), "Istri");
+    await user.click(screen.getByRole("button", { name: "Simpan" }));
+
+    // Inti uji ini: bukan bahwa onChange terpanggil, tapi bahwa KETIGA field
+    // sampai utuh. Pemetaan yang meleset tidak menghasilkan galat di mana pun —
+    // baris tetap tersimpan, hanya isinya yang bolong.
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith({
+      heirs: [{ full_name: "Siti Aminah", seq_no: "1", notes: "Istri" }],
+    });
+  });
+
+  it("baris baru DITAMBAHKAN, tidak menimpa baris yang sudah ada", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    renderHeirs({ heirs: [{ full_name: "Budi", seq_no: "1", notes: "" }] }, onChange);
+
+    await user.click(screen.getByRole("button", { name: "Tambah Ahli Waris" }));
+    await user.type(screen.getByLabelText(/Nama Lengkap/), "Siti");
+    await user.click(screen.getByRole("button", { name: "Simpan" }));
+
+    expect(onChange).toHaveBeenCalledWith({
+      heirs: [
+        { full_name: "Budi", seq_no: "1", notes: "" },
+        { full_name: "Siti", seq_no: "", notes: "" },
+      ],
+    });
+  });
+});
+
+describe("detail-modal — gerbang validasi", () => {
+  it("Nama kosong MENAHAN Simpan: baris tidak pernah masuk payload", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    renderHeirs({ heirs: [] }, onChange);
+
+    await user.click(screen.getByRole("button", { name: "Tambah Ahli Waris" }));
+    await user.type(screen.getByLabelText("Keterangan"), "Istri");
+    await user.click(screen.getByRole("button", { name: "Simpan" }));
+
+    // Yang diukur adalah AKIBATNYA, bukan hanya munculnya pesan: baris yang
+    // tidak sah tidak boleh sampai ke data form dengan cara apa pun.
+    expect(onChange).not.toHaveBeenCalled();
+    expect(screen.getByText("Nama wajib diisi")).toBeTruthy();
+    // Modal tetap terbuka supaya operator bisa memperbaikinya.
+    expect(screen.getByLabelText(/Nama Lengkap/)).toBeTruthy();
+  });
+
+  it("setelah diperbaiki, Simpan lolos dan barisnya masuk", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    renderHeirs({ heirs: [] }, onChange);
+
+    await user.click(screen.getByRole("button", { name: "Tambah Ahli Waris" }));
+    await user.click(screen.getByRole("button", { name: "Simpan" }));
+    expect(onChange).not.toHaveBeenCalled();
+
+    await user.type(screen.getByLabelText(/Nama Lengkap/), "Siti");
+    await user.click(screen.getByRole("button", { name: "Simpan" }));
+
+    expect(onChange).toHaveBeenCalledWith({
+      heirs: [{ full_name: "Siti", seq_no: "", notes: "" }],
+    });
+  });
+
+  it("validateRow berjalan SETELAH validasi per-field dan bisa menahan sendiri", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    renderHeirs({ heirs: [] }, onChange, {
+      validateRow: (row: Record<string, unknown>) =>
+        String(row.seq_no ?? "") === "" ? { seq_no: "Nomor urut wajib" } : {},
+    });
+
+    await user.click(screen.getByRole("button", { name: "Tambah Ahli Waris" }));
+    await user.type(screen.getByLabelText(/Nama Lengkap/), "Siti");
+    await user.click(screen.getByRole("button", { name: "Simpan" }));
+
+    expect(onChange).not.toHaveBeenCalled();
+    expect(screen.getByText("Nomor urut wajib")).toBeTruthy();
+  });
+
+  it("validateRow menerima indeks tempat baris BARU akan mendarat", async () => {
+    const user = userEvent.setup();
+    const seen: number[] = [];
+    renderHeirs(
+      { heirs: [{ full_name: "Budi", seq_no: "1", notes: "" }] },
+      () => {},
+      {
+        validateRow: (_row: Record<string, unknown>, index: number) => {
+          seen.push(index);
+          return {};
+        },
+      },
+    );
+
+    await user.click(screen.getByRole("button", { name: "Tambah Ahli Waris" }));
+    await user.type(screen.getByLabelText(/Nama Lengkap/), "Siti");
+    await user.click(screen.getByRole("button", { name: "Simpan" }));
+
+    // Sudah ada 1 baris, jadi baris baru akan mendarat di indeks 1 — bukan -1,
+    // dan bukan 0. Aturan yang bergantung urutan harus melihat posisi akhirnya.
+    expect(seen).toEqual([1]);
+  });
+});
+
+describe("detail-modal — ubah, batal, hapus", () => {
+  it("Batal membuang suntingan: payload induk tidak tersentuh", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    renderHeirs({ heirs: [{ full_name: "Budi", seq_no: "1", notes: "" }] }, onChange);
+
+    await user.click(within(rowWith("Budi")).getByRole("button", { name: "Ubah" }));
+    await user.clear(screen.getByLabelText(/Nama Lengkap/));
+    await user.type(screen.getByLabelText(/Nama Lengkap/), "DIUBAH");
+    await user.click(screen.getByRole("button", { name: "Batal" }));
+
+    // Draft disimpan terpisah justru untuk ini: menyunting objek baris langsung
+    // akan mengubah data induk sebelum Simpan, dan Batal tak bisa lagi
+    // mengembalikannya — tanpa galat, dan tanpa cara mengetahuinya.
+    expect(onChange).not.toHaveBeenCalled();
+    expect(screen.getByText("Budi")).toBeTruthy();
+  });
+
+  it("Ubah menulis kembali ke indeks yang sama, bukan menambah baris", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    renderHeirs(
+      {
+        heirs: [
+          { full_name: "Budi", seq_no: "1", notes: "" },
+          { full_name: "Siti", seq_no: "2", notes: "" },
+        ],
+      },
+      onChange,
+    );
+
+    await user.click(within(rowWith("Siti")).getByRole("button", { name: "Ubah" }));
+    await user.clear(screen.getByLabelText(/Nama Lengkap/));
+    await user.type(screen.getByLabelText(/Nama Lengkap/), "Siti Aminah");
+    await user.click(screen.getByRole("button", { name: "Simpan" }));
+
+    expect(onChange).toHaveBeenCalledWith({
+      heirs: [
+        { full_name: "Budi", seq_no: "1", notes: "" },
+        { full_name: "Siti Aminah", seq_no: "2", notes: "" },
+      ],
+    });
+  });
+
+  it("modal dibuka ulang membawa nilai baris itu, bukan sisa baris sebelumnya", async () => {
+    const user = userEvent.setup();
+    renderHeirs(
+      {
+        heirs: [
+          { full_name: "Budi", seq_no: "1", notes: "" },
+          { full_name: "Siti", seq_no: "2", notes: "" },
+        ],
+      },
+      () => {},
+    );
+
+    await user.click(within(rowWith("Budi")).getByRole("button", { name: "Ubah" }));
+    expect((screen.getByLabelText(/Nama Lengkap/) as HTMLInputElement).value).toBe("Budi");
+    await user.click(screen.getByRole("button", { name: "Batal" }));
+
+    await user.click(within(rowWith("Siti")).getByRole("button", { name: "Ubah" }));
+    expect((screen.getByLabelText(/Nama Lengkap/) as HTMLInputElement).value).toBe("Siti");
+  });
+
+  it("Hapus mengeluarkan baris itu saja", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    renderHeirs(
+      {
+        heirs: [
+          { full_name: "Budi", seq_no: "1", notes: "" },
+          { full_name: "Siti", seq_no: "2", notes: "" },
+        ],
+      },
+      onChange,
+    );
+
+    await user.click(within(rowWith("Budi")).getByRole("button", { name: "Hapus" }));
+
+    expect(onChange).toHaveBeenCalledWith({
+      heirs: [{ full_name: "Siti", seq_no: "2", notes: "" }],
+    });
+  });
+});
+
+describe("detail-modal — mode & batas", () => {
+  it("mode view: tabel tetap terbaca, Tambah dan Aksi hilang", () => {
+    renderHeirs(
+      { heirs: [{ full_name: "Budi", seq_no: "1", notes: "" }] },
+      () => {},
+      {},
+      "view",
+    );
+
+    expect(screen.getByText("Budi")).toBeTruthy();
+    expect(screen.queryByRole("button", { name: "Tambah Ahli Waris" })).toBeNull();
+    expect(within(rowWith("Budi")).queryByRole("button", { name: "Ubah" })).toBeNull();
+    expect(within(rowWith("Budi")).queryByRole("button", { name: "Hapus" })).toBeNull();
+  });
+
+  it("maxRows menonaktifkan Tambah setelah batas tercapai", () => {
+    renderHeirs(
+      { heirs: [{ full_name: "Budi", seq_no: "1", notes: "" }] },
+      () => {},
+      { maxRows: 1 },
+    );
+    const btn = screen.getByRole("button", { name: "Tambah Ahli Waris" }) as HTMLButtonElement;
+    expect(btn.disabled).toBe(true);
+  });
+
+  it("allowEdit/allowDelete false menghilangkan aksinya masing-masing", () => {
+    renderHeirs(
+      { heirs: [{ full_name: "Budi", seq_no: "1", notes: "" }] },
+      () => {},
+      { allowEdit: false },
+    );
+    expect(within(rowWith("Budi")).queryByRole("button", { name: "Ubah" })).toBeNull();
+    expect(within(rowWith("Budi")).getByRole("button", { name: "Hapus" })).toBeTruthy();
+  });
+
+  it("nilai bukan-array tidak meruntuhkan tabel", () => {
+    // Field yang belum pernah diisi tiba sebagai undefined dari backend.
+    renderHeirs({}, () => {});
+    expect(
+      screen.getByText('Belum ada ahli waris. Klik "Tambah Ahli Waris".'),
+    ).toBeTruthy();
+  });
+
+  it("config yang hilang BERBUNYI, tidak melenyapkan field diam-diam", () => {
+    const section: FormSection<D> = {
+      title: "Ahli Waris",
+      fields: [{ key: "heirs", label: "Daftar Ahli Waris", type: "detail-modal" }],
+    };
+    render(
+      <SchemaFormRenderer<D>
+        mode="create"
+        value={{ heirs: [] }}
+        sections={[section]}
+        onChange={() => {}}
+      />,
+    );
+    // Mengembalikan [] di sini akan membuat field salah-tulis lenyap dari layar
+    // tanpa satu pun galat — bentuk kegagalan yang paling mahal di modul ini.
+    expect(screen.getByRole("alert").textContent).toContain("detail-modal");
+  });
+});
+
+describe("KONTROL REGRESI — jalur yang tidak disentuh", () => {
+  it("field text biasa tetap terender seperti sebelumnya", () => {
+    const section: FormSection<D> = {
+      title: "Biasa",
+      fields: [{ key: "nama", label: "Nama Lengkap", type: "text", span: 4 }],
+    };
+    render(
+      <SchemaFormRenderer<D> mode="create" value={{}} sections={[section]} onChange={() => {}} />,
+    );
+    expect(screen.getByLabelText(/Nama Lengkap/)).toBeTruthy();
+  });
+
+  it("detail-rows (EditableTable inline) tetap jalan berdampingan", () => {
+    const section: FormSection<D> = {
+      title: "Campur",
+      fields: [
+        {
+          key: "limits",
+          label: "Limit Transaksi",
+          type: "detail-rows",
+          detailRows: {
+            columns: [
+              { field: "kode", header: "Kode", columnType: { type: "text" } },
+            ],
+            newRowFactory: () => ({ kode: "" }),
+          },
+        },
+        heirField(),
+      ],
+    };
+    render(
+      <SchemaFormRenderer<D>
+        mode="create"
+        value={{ limits: [{ kode: "CASH_IN" }], heirs: [] }}
+        sections={[section]}
+        onChange={() => {}}
+      />,
+    );
+
+    // Dua tipe tabel yang berbeda hidup dalam satu form tanpa saling ganggu.
+    expect(screen.getByText("Limit Transaksi")).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Tambah Ahli Waris" })).toBeTruthy();
+  });
+
+  it("dua detail-modal dalam satu form berdiri sendiri-sendiri", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    const section: FormSection<D> = {
+      title: "Langkah 4",
+      fields: [
+        heirField(),
+        {
+          key: "relations",
+          label: "Daftar Relasi",
+          type: "detail-modal" as const,
+          detailModal: {
+            sections: [
+              {
+                title: "Data Relasi",
+                fields: [
+                  {
+                    key: "first_name",
+                    label: "Nama Relasi",
+                    type: "text" as const,
+                    validation: { required: "Nama relasi wajib diisi" },
+                  },
+                ],
+              },
+            ],
+            columns: [{ field: "first_name", header: "Nama" }],
+            newRowFactory: () => ({ first_name: "" }),
+            addLabel: "Tambah Relasi",
+          },
+        },
+      ],
+    };
+
+    render(
+      <SchemaFormRenderer<D>
+        mode="create"
+        value={{ heirs: [], relations: [] }}
+        sections={[section]}
+        onChange={onChange}
+      />,
+    );
+
+    // Membuka modal Relasi tidak boleh memunculkan form Ahli Waris.
+    await user.click(screen.getByRole("button", { name: "Tambah Relasi" }));
+    const dialog = screen.getByRole("dialog");
+    expect(within(dialog).getByLabelText(/Nama Relasi/)).toBeTruthy();
+    expect(within(dialog).queryByLabelText("Nomor Urut Prioritas")).toBeNull();
+
+    await user.type(screen.getByLabelText(/Nama Relasi/), "Andi");
+    await user.click(screen.getByRole("button", { name: "Simpan" }));
+
+    // Hanya kunci `relations` yang ditulis — `heirs` tidak ikut tersentuh.
+    expect(onChange).toHaveBeenCalledWith({ relations: [{ first_name: "Andi" }] });
+  });
+});