Aislo/resources/tester/helper_271_detail_notify.cjs

/* 463 B05 · B06 한 페이지 상세 알림(요구 271-5 · 분석 4장 (C)) — 진짜 상세 가게(`B06_Section_Section_Store`) ·
 * 진짜 [측점 만들기] 줄(`B06_Section_UI_Missing_Stations`) · 진짜 페이지 노선 칸. 서버 · 그림 · DOM 은 가짜.
 *   R1 — B05 가 쥔 상세(구독) · B06 넓힘 재생성 = 강제 다시 받기 → 듣는 쪽 한 번 · 새 객체
 *   R2 — [측점 만들기] 뒤 = 캐시 비우고 강제로 받음 → 듣는 쪽 한 번 · 다시 그림(onCreated)이 새 상세를 읽음
 *   node helper_271_detail_notify.cjs   (짝 = `test_271_detail_notify.py`)
 */
const fs = require("fs");
const path = require("path");
const ROOT = path.join(__dirname, "..", "..");
const { makeLoader } = require("./helper_ts_stub_loader.cjs");
const CATALOG = require(path.join(__dirname, "helper_322_catalog_module.cjs"));

const P = "P463";

function memoryStorage() {
  const map = new Map();
  return {
    getItem: (k) => (map.has(k) ? map.get(k) : null),
    setItem: (k, v) => map.set(k, String(v)),
    removeItem: (k) => map.delete(k),
    key: (i) => [...map.keys()][i] ?? null,
    get length() {
      return map.size;
    },
  };
}
globalThis.window = {
  sessionStorage: memoryStorage(),
  localStorage: memoryStorage(),
  setTimeout,
  clearTimeout,
};

/** 가짜 DOM — [측점 만들기] 줄이 쓰는 만큼(요소 · 단추 누름). */
function fakeElement() {
  const handlers = {};
  return {
    className: "",
    textContent: "",
    disabled: false,
    isConnected: true,
    children: [],
    append(...nodes) {
      this.children.push(...nodes);
    },
    prepend(node) {
      this.children.unshift(node);
    },
    remove() {},
    querySelector: () => null,
    addEventListener: (name, fn) => (handlers[name] = fn),
    fire: (name) => handlers[name](),
  };
}
globalThis.document = { createElement: () => fakeElement() };
const buttons = [];

const anyModule = (extra = {}) =>
  new Proxy(extra, { get: (t, key) => (key in t ? t[key] : () => undefined) });

/** 가짜 서버 — 노선 3 상세 · 받을 때마다 새 객체 · 측점 수는 `server.stations`. */
const server = { stations: [0, 20, 40], fetches: 0, created: 0 };
const detailOf = () => ({
  longitudinal: { stations: [], design_profiles: [] },
  cross_sections: server.stations.map((chainage_m) => ({
    station_id: `s${chainage_m}`,
    chainage_m,
    samples: [],
    design: {},
  })),
});
globalThis.fetch = async (url, init) => {
  const method = init?.method ?? "GET";
  if (method === "POST") {
    server.stations = [0, 20, 33.5, 40]; // 서버가 관 자리 측점을 세움
    server.created += 1;
    return { ok: true, status: 200, json: async () => ({ created: 1 }) };
  }
  const missing = server.created ? [] : [{ chainage_m: 33.5, label: "배수관" }];
  return { ok: true, status: 200, json: async () => ({ missing, can_create: true }) };
};

const STUBS = {
  "design_pipeline_page.ts": {
    reconcilePagePipeline: async () => 0,
    pipelineOwnsCross: () => false,
    pagePipeline: () => null,
    pipelineCross: () => undefined,
    pipelineDetail: () => null,
  },
  "design_pipeline_cross.ts": { forceCross: () => undefined },
  "B06_Section_Section_Drafts.ts": {
    forgetDraftStations: () => undefined,
    supersedeDraftStations: () => undefined,
    withDraftShapes: async () => undefined,
    withDraftStations: async () => undefined,
  },
  "B05_Profile_Api_PlusStations.ts": {
    loadSavedPlusStations: async () => undefined,
    plusStationsOf: () => [],
  },
  "B05_Profile_Api_Pipes_Draft.ts": { readPendingPipes: () => null },
  "design_page_data.ts": { pagePipes: async () => ({ pipe_points: [] }) },
  "B06_Section_Api_Fetch.ts": anyModule({
    fetchSectionDetail: async () => {
      server.fetches += 1;
      return detailOf();
    },
  }),
  "B06_Section_Api_Culvert_Options.ts": anyModule({ STRUCTURE_ADJUST_KEYS: [] }),
  "B06_Section_Swap_Bus.ts": anyModule(),
  "B06_Section_Station_Keys.ts": anyModule({ KEYED_STATES: [] }),
  "B06_Section_UI_Page_Persist.ts": anyModule(),
  "B06_Section_UI_Standard_Panel.ts": anyModule({ readRockBoundaryDefault: () => null }),
  "B06_Section_Cross_Design_Session.ts": anyModule(),
  "common_util_cross_design.ts": anyModule(),
  "B06_Section_Structure_Layouts.ts": anyModule({ computeStoredLayouts: () => null }),
  "B06_Section_UI_Cross_Culvert_Wire.ts": anyModule(),
  "B06_Section_UI_Cross_Ford_Geom.ts": anyModule(),
  "B06_Section_UI_Cross_Box_Geom.ts": anyModule(),
  "B06_Section_UI_Cross_View.ts": anyModule(),
  "B06_Section_UI_Section_Common.ts": anyModule({ designElevationAt: () => undefined }),
  "B06_Section_Display_Width.ts": anyModule({ displayHalfWidth: () => 10 }),
  "B06_Section_UI_Style_Cross_Controls.css": {},
  "B06_Section_UI_Cross_Culvert_Basin.ts": anyModule(),
  "B06_Section_UI_Cross_Culvert_Const.ts": anyModule(),
  "B06_Section_UI_IrregularStations.ts": anyModule({ PIPE_DISPLAY_NAME: {} }),
  "B05_Profile_UI_IrregularStations.ts": anyModule({ PIPE_DISPLAY_NAME: {} }),
  "config_frontend.ts": anyModule({ PIPE_TYPES: [], API_BASE_URL: "/api" }),
  "ui_template_elements.ts": anyModule({
    createButton: () => {
      const button = fakeElement();
      buttons.push(button);
      return button;
    },
    showToast: () => undefined,
  }),
  "ui_template_hover_info.ts": anyModule(),
  "design_store.ts": { useDesignStore: () => ({ subscribe: () => () => undefined }) },
  "design_save.ts": { savingDesign: () => false },
};

const resolve = (base) =>
  [base, `${base}.ts`, path.join(base, "index.ts")].find(
    (p) => fs.existsSync(p) && fs.statSync(p).isFile(),
  ) ?? `${base}.ts`;
const { loadTs } = makeLoader({
  root: ROOT,
  interop: true,
  fileStub: (full) => STUBS[path.basename(full)],
  requireFor: (full) => (request) => {
    if (CATALOG.isCatalogRequest(request)) return CATALOG;
    const alias = { "@util/": "common_util", "@ui/": "ui_template", "@config/": "config" };
    for (const [prefix, dir] of Object.entries(alias))
      if (request.startsWith(prefix))
        return loadTs(resolve(path.join(ROOT, dir, request.slice(prefix.length))));
    return loadTs(resolve(path.join(path.dirname(full), request)));
  },
});

const store = loadTs(path.join(ROOT, "B06_Section", "B06_Section_Section_Store.ts"));
const missing = loadTs(path.join(ROOT, "B06_Section", "B06_Section_UI_Missing_Stations.ts"));
const route = loadTs(path.join(ROOT, "A00_Common", "design", "design_page_route.ts"));
const tick = () => new Promise((next) => setTimeout(next, 0));

(async () => {
  const out = {};
  route.setPageRouteId(P, 3);

  // R1 — B05 이 쥔 상세 · B06 넓힘 재생성 = 강제 다시 받기
  const held = await store.loadSectionDetail(P, 3);
  const heard = [];
  const stop = store.subscribeSectionDetail(P, 3, (next) => heard.push(next));
  const fresh = await store.loadSectionDetail(P, 3, { force: true });
  out.r1 = {
    newObject: fresh !== held,
    listenerCalls: heard.length,
    listenerGotFresh: heard[0] === fresh,
    cacheIsFresh: store.peekSectionDetail(P, 3) === fresh,
  };

  // R2 — [측점 만들기] 뒤 = 캐시 비우고 강제로 받음 · 듣는 쪽 한 번 · 다시 그림이 새 상세
  heard.length = 0;
  const before = server.fetches;
  const redrawn = [];
  const host = fakeElement();
  await missing.mountMissingStationNotice(host, P, async () => {
    const seen = await store.loadSectionDetail(P, 3); // 다시 그림 자리(횡단 보기 refreshDetailForStructures)
    redrawn.push(seen.cross_sections.map((section) => section.chainage_m));
  });
  const button = buttons.at(-1);
  await button.fire("click");
  await tick();
  out.r2 = {
    posted: server.created,
    fetchesAfter: server.fetches - before,
    listenerCalls: heard.length,
    listenerStations: heard[0]?.cross_sections.map((section) => section.chainage_m) ?? null,
    redrawn,
  };
  stop();
  console.log(JSON.stringify(out));
})().catch((error) => {
  console.error(error);
  process.exit(1);
});