0pt/tests/components/import-wizard-ssr.test.ts

/**
 * C8: SSR-render proof that the host can render the @siax/ui ImportWizard over
 * the @siax/import-export runtime store (the exact packages the admin import
 * page uses). Node environment — react-dom/server, no DOM needed.
 */
import { describe, it, expect, vi } from "vitest";

// ImportWizard subscribes to the runtime store via useSyncExternalStore, which
// demands getServerSnapshot under react-dom/server. For a static render proof
// the snapshot read is enough — reactivity is the browser's concern.
vi.mock("react", async (importOriginal) => {
  const React = await importOriginal<typeof import("react")>();
  return { ...React, useSyncExternalStore: ((_subscribe: unknown, getSnapshot: () => unknown) => getSnapshot()) as typeof React.useSyncExternalStore };
});
import { createElement } from "react";
import { renderToString } from "react-dom/server";
import { ImportWizard } from "@siax/ui";
import { createImportRunStore } from "@siax/import-export";
import { createImportJob } from "@siax/contracts/import-export";

function makeStore(rows: Record<string, string>[]) {
  return createImportRunStore({
    job: createImportJob({
      id: "test-import",
      tenantId: "tenant-test",
      entity: "orders",
      format: "csv",
      source: { system: "0pt-admin", channel: "web" },
      createdAt: "2026-09-30T00:00:00Z",
    }),
    rows,
  });
}

describe("ImportWizard renders over the runtime store (host integration)", () => {
  it("empty store → explicit empty state with the pipeline <ol>", () => {
    const html = renderToString(
      createElement(ImportWizard, { store: makeStore([]), onExecute: async () => {} }),
    );
    expect(html).toContain("<ol");
    expect(html.length).toBeGreaterThan(100);
  });

  it("rows present → pipeline steps render; mapped stage shows mapping table", () => {
    const store = makeStore([{ flow: "custom", service_type: "icp", type: "Bolag", volume: "10", frequency: "Engångs", markets: "SE" }]);
    store.detect();
    let html = renderToString(createElement(ImportWizard, { store, columns: [{ source: "flow", target: "flow" }], onExecute: async () => {} }));
    expect(html).toContain("<ol");
    expect(html).toContain("aria-current=\"step\"");
    store.map({ columns: [{ source: "flow", target: "flow", required: true }] });
    html = renderToString(createElement(ImportWizard, { store, onExecute: async () => {} }));
    expect(html).toContain("flow");
  });

  it("failed store renders the failure report with role=alert", () => {
    const store = makeStore([{ flow: "custom" }]);
    store.detect();
    store.fail("Servern avvisade exekveringen");
    const html = renderToString(createElement(ImportWizard, { store, onExecute: async () => {} }));
    expect(html).toContain("alert");
    expect(html).toContain("Servern avvisade exekveringen");
  });
});