@isi-ui7/bos7-shared 0.3.9 → 0.3.11

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

@@ -0,0 +1,173 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, waitFor, fireEvent } 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;
+
+/**
+ * ADA DI DOM ≠ TERLIHAT.
+ *
+ * Panel tab yang tidak aktif tetap dirender, hanya `display: none`. Jadi
+ * `queryByText` menemukannya, dan uji yang hanya bertanya "ada?" akan HIJAU
+ * untuk halaman yang tidak bisa dilihat siapa pun. Helper ini menaiki pohon ke
+ * `[role=tabpanel]` terdekat dan membaca `display`-nya, sehingga yang diukur
+ * adalah apa yang benar-benar tampil di layar.
+ *
+ * `null` = teksnya tidak ada sama sekali (beda dari "ada tapi tersembunyi").
+ */
+const panelTampil = (nama: string): boolean | null => {
+  const el = screen.queryByText(nama);
+  if (!el) return null;
+  const panel = el.closest('[role="tabpanel"]') as HTMLElement | null;
+  if (!panel) return true; // bukan layout bertab — terender langsung
+  return panel.style.display !== "none";
+};
+
+const tabs = () => screen.queryAllByRole("tab");
+
+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, diganti TAB, dan tiap halaman terjangkau", async () => {
+    render(<CrudSchemaPage schema={schema} mode="view" />);
+    await waitFor(() => expect(fieldTampil("Field Satu")).toBe(true));
+
+    expect(stepper(), "view tidak boleh punya navigasi langkah").toBeNull();
+    expect(tabs().length, "wizard di luar create harus jadi tab, bukan datar").toBe(3);
+
+    // Inti perbaikannya: nol stepper TIDAK boleh berarti isi yang tak
+    // terjangkau. Sebelum ini `view` merender satu halaman saja sementara
+    // footernya nol tombol Lanjut — langkah 2-5 tidak bisa dibaca sama sekali.
+    expect(panelTampil("Field Satu")).toBe(true);
+    expect(panelTampil("Field Tiga"), "halaman 3 belum dibuka").toBe(false);
+
+    fireEvent.click(screen.getByRole("tab", { name: "Langkah Tiga" }));
+    expect(panelTampil("Field Tiga"), "klik tab 3 harus menampilkannya").toBe(true);
+    expect(panelTampil("Field Satu"), "tab 1 harus ikut tertutup").toBe(false);
+  });
+
+  // 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(), "tab bukan landmark navigasi").toBeNull();
+      // Label halaman kini jadi teks tombol tab.
+      for (const l of ["Langkah Satu", "Langkah Dua", "Langkah Tiga"]) {
+        expect(
+          tabs().some((t) => t.textContent === l),
+          `${l} hilang dari ${mode}`,
+        ).toBe(true);
+      }
+      // Sublabel TIDAK muat di tombol tab, jadi ia pindah ke dalam panel.
+      // Diperiksa terpisah justru karena itu: tempatnya berbeda dari labelnya,
+      // dan tempat yang berbeda adalah tempat yang bisa terlupa.
+      for (const [i, sub] of ["Sub Satu", "Sub Dua", "Sub Tiga"].entries()) {
+        fireEvent.click(tabs()[i]);
+        expect(panelTampil(sub), `sublabel ${sub} 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(tabs().length).toBe(3);
+    fireEvent.click(screen.getByRole("tab", { name: "Langkah Tiga" }));
+    expect(panelTampil("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 negatif — kini SEMAKIN perlu, bukan semakin tidak: sejak kedua
+  // layout memakai perender yang SAMA, cacat di perender itu memukul keduanya
+  // sekaligus, dan uji wizard sendirian tidak akan menunjukkan bahwa 4 layar
+  // bos7-enterprise/bos7-financing ikut rusak. `tabs` di sini punya 2 halaman
+  // (wizard 3) supaya keduanya tidak bisa saling menyamar.
+  it("kontrol negatif — layout tabs ikut sehat memakai perender bersama", async () => {
+    const skemaTabs: 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={skemaTabs} mode="view" />);
+    await waitFor(() => expect(fieldTampil("Field Satu")).toBe(true));
+
+    // Tab masih tab: tombol role=tab ada, dan hanya tab aktif yang terlihat.
+    expect(tabs().length, "layout tabs kehilangan tabnya").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();
+  });
+});