@isi-ui7/bos7-shared 0.3.8 → 0.3.10

package/src/wizard-mode-nav.test.tsx

@@ -0,0 +1,136 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+
+// Dimock supaya mode `edit`/`view` tidak menggantung di InlineLoading: tanpa
+// `loadApiPath` yang selesai, `loading` tidak pernah kembali false dan yang
+// terender hanya spinner — uji akan "lulus" karena stepper-nya memang belum
+// sempat dirender, bukan karena perbaikannya bekerja. Itu lulus palsu.
+vi.mock("./workflow/crud-client", () => ({
+  fetchDetailData: vi.fn(async () => ({ f1: "satu", f2: "dua", f3: "tiga" })),
+  submitWorkflowForm: vi.fn(async () => "wf-1"),
+}));
+
+import { CrudSchemaPage } from "./crud-components";
+import type { CrudForm } from "./form-types";
+
+type D = { f1: string; f2: string; f3: string };
+
+const schema: CrudForm<D> = {
+  title: { create: "Baru", edit: "Ubah", view: "Lihat" },
+  emptyData: { f1: "", f2: "", f3: "" },
+  createApiPath: "/api/x/create",
+  updateApiPath: () => "/api/x/1",
+  loadApiPath: () => "/api/x/1",
+  layout: {
+    type: "wizard",
+    pages: [
+      { label: "Langkah Satu", sublabel: "Sub Satu", sections: [{ title: "S1", fields: [{ key: "f1", label: "Field Satu", type: "text", span: 4 }] }] },
+      { label: "Langkah Dua", sublabel: "Sub Dua", sections: [{ title: "S2", fields: [{ key: "f2", label: "Field Dua", type: "text", span: 4 }] }] },
+      { label: "Langkah Tiga", sublabel: "Sub Tiga", sections: [{ title: "S3", fields: [{ key: "f3", label: "Field Tiga", type: "text", span: 4 }] }] },
+    ],
+  },
+};
+
+// Stepper dirender sebagai <nav aria-label=…> — satu-satunya landmark navigasi
+// di halaman ini, jadi role "navigation" cukup untuk membedakannya.
+const stepper = () => screen.queryByRole("navigation");
+
+// Pada `view` field dirender sebagai nilai baca-saja, BUKAN input berlabel —
+// jadi getByLabelText hanya bekerja di create/edit. Query teks label bekerja di
+// ketiga mode, sehingga uji ini membandingkan hal yang sama di semua mode.
+const fieldTampil = (nama: string) => screen.queryByText(nama) !== null;
+
+beforeEach(() => {
+  vi.clearAllMocks();
+});
+
+describe("navigasi wizard hanya pada mode create", () => {
+  it("create — stepper TAMPIL dan hanya halaman aktif yang dirender", async () => {
+    render(<CrudSchemaPage schema={schema} mode="create" />);
+
+    expect(stepper(), "stepper harus ada saat membuat data baru").not.toBeNull();
+    expect(screen.getByText("Langkah Tiga")).toBeTruthy(); // ada di stepper…
+    expect(fieldTampil("Field Satu")).toBe(true);
+    // …tapi field-nya belum, karena halaman 3 belum dibuka.
+    expect(fieldTampil("Field Tiga")).toBe(false);
+  });
+
+  it("view — stepper TIDAK ada, dan SELURUH halaman terbaca sekaligus", async () => {
+    render(<CrudSchemaPage schema={schema} mode="view" />);
+    await waitFor(() => expect(fieldTampil("Field Satu")).toBe(true));
+
+    expect(stepper(), "view tidak boleh punya navigasi langkah").toBeNull();
+    // Inti perbaikannya: nol navigasi TIDAK boleh berarti isi yang hilang.
+    // Sebelum ini, `view` merender satu halaman saja sementara footernya nol
+    // tombol Lanjut — jadi langkah 2-5 tidak bisa dibaca sama sekali.
+    for (const label of ["Field Satu", "Field Dua", "Field Tiga"]) {
+      expect(fieldTampil(label), `${label} harus terbaca di view`).toBe(true);
+    }
+  });
+
+  // Ditambahkan setelah verifikasi adversarial membantah klaim "nol isi yang
+  // hilang": versi pertama perbaikan ini me-`flatMap` seluruh section dan
+  // membuang `pg.label`/`pg.sublabel` — 10 string konkret lenyap dari layar
+  // perorangan, dan uji versi pertama nol memeriksanya karena ia hanya
+  // menanyakan field dan stepper.
+  it.each(["view", "edit"] as const)(
+    "%s — label & sublabel halaman TETAP terbaca sebagai judul kelompok",
+    async (mode) => {
+      render(<CrudSchemaPage schema={schema} mode={mode} />);
+      await waitFor(() => expect(fieldTampil("Field Satu")).toBe(true));
+
+      expect(stepper(), "judul kelompok bukan navigasi").toBeNull();
+      for (const l of ["Langkah Satu", "Langkah Dua", "Langkah Tiga"]) {
+        expect(fieldTampil(l), `${l} hilang dari ${mode}`).toBe(true);
+      }
+      for (const s of ["Sub Satu", "Sub Dua", "Sub Tiga"]) {
+        expect(fieldTampil(s), `sublabel ${s} hilang dari ${mode}`).toBe(true);
+      }
+    },
+  );
+
+  it("edit — stepper TIDAK ada, seluruh halaman terbaca, nol tombol Lanjut", async () => {
+    render(<CrudSchemaPage schema={schema} mode="edit" />);
+    await waitFor(() => expect(fieldTampil("Field Satu")).toBe(true));
+
+    expect(stepper(), "edit tidak boleh punya navigasi langkah").toBeNull();
+    expect(fieldTampil("Field Tiga")).toBe(true);
+
+    const tombol = screen.getAllByRole("button").map((b) => b.textContent ?? "");
+    expect(tombol.some((t) => /lanjut|next/i.test(t)), `masih ada tombol Lanjut: ${tombol.join("|")}`).toBe(false);
+    expect(tombol.some((t) => /kembali|prev/i.test(t)), `masih ada tombol Kembali: ${tombol.join("|")}`).toBe(false);
+  });
+
+  // Kontrol kedua, dan ini yang penting: `tabs` juga punya `pages`, jadi ia
+  // kandidat paling mungkin ikut terseret kalau urutan cabang render bergeser.
+  // Tanpa kontrol ini, memindahkan cabang datar ke atas cabang `tabs` akan
+  // meratakan 4 layar bos7-enterprise/bos7-financing tanpa satu pun galat.
+  it("kontrol negatif — layout tabs tetap bertab, tidak ikut diratakan", async () => {
+    const tabs: CrudForm<D> = {
+      ...schema,
+      layout: {
+        type: "tabs",
+        pages: [
+          { label: "Tab Satu", sections: [{ title: "T1", fields: [{ key: "f1", label: "Field Satu", type: "text", span: 4 }] }] },
+          { label: "Tab Dua", sections: [{ title: "T2", fields: [{ key: "f2", label: "Field Dua", type: "text", span: 4 }] }] },
+        ],
+      },
+    };
+    render(<CrudSchemaPage schema={tabs} mode="view" />);
+    await waitFor(() => expect(fieldTampil("Field Satu")).toBe(true));
+
+    // Tab masih tab: tombol role=tab ada, dan hanya tab aktif yang terlihat.
+    expect(screen.getAllByRole("tab").length, "tab hilang — cabang datar menelan layout tabs").toBe(2);
+    expect(stepper()).toBeNull();
+  });
+
+  it("kontrol negatif — layout single-page tidak ikut berubah", async () => {
+    const single: CrudForm<D> = {
+      ...schema,
+      layout: { type: "single-page", sections: [{ title: "S", fields: [{ key: "f1", label: "Field Satu", type: "text", span: 4 }] }] },
+    };
+    render(<CrudSchemaPage schema={single} mode="view" />);
+    await waitFor(() => expect(fieldTampil("Field Satu")).toBe(true));
+    expect(stepper()).toBeNull();
+  });
+});