import assert from "node:assert/strict"; import { readFileSync } from "node:fs"; import React from "react"; import { renderToStaticMarkup } from "react-dom/server"; import test from "node:test"; import { ChartDashaTab } from "../src/components/chart-page/chart-dasha-tab.tsx"; import { ChartVedicTab } from "../src/components/chart-page/chart-vedic-tab.tsx"; import { ChartWesternTab } from "../src/components/chart-page/chart-western-tab.tsx"; import { EMPTY_NORTH_INDIAN_CHART, VedicChartSvg } from "../src/components/personal-report/vedic-chart-svg.tsx"; import { ChartPageView } from "../src/components/chart-page/chart-page-view.tsx"; import { SidebarProvider } from "../src/components/ui/sidebar.tsx"; import { assembleChartView } from "../src/lib/chart-view-load.ts"; import { CHART_VIEW_TABS, type ChartViewOk } from "../src/lib/chart-view-contract.ts"; import { CHART_VIEW_LAYERS } from "../src/lib/chart-view-engine.ts"; import { chartViewFailureResponse } from "../src/lib/chart-view-failure.ts"; import { CHART_VIEW_COPY } from "../src/lib/chart-view-labels.ts"; import { CHART_SETTINGS_HREF } from "../src/lib/settings-url.ts"; import { westernLabelBox } from "../src/components/chart-page/western-wheel-layout.ts"; import { cssDeclarations } from "./css-contract-test-support.ts"; Object.assign(globalThis, { React }); const golden = JSON.parse( readFileSync(new URL("./fixtures/chart-view-golden.json", import.meta.url), "utf8"), ) as { chart: Record; varga_full: Record; chara: Record; western: Record; }; const globalStyles = readFileSync(new URL("../src/app/globals.css", import.meta.url), "utf8"); const sidebar = readFileSync(new URL("../src/components/app-sidebar.tsx", import.meta.url), "utf8"); const vedicTab = readFileSync(new URL("../src/components/chart-page/chart-vedic-tab.tsx", import.meta.url), "utf8"); const westernTab = readFileSync(new URL("../src/components/chart-page/chart-western-tab.tsx", import.meta.url), "utf8"); const qizhengTab = readFileSync(new URL("../src/components/chart-page/chart-qizheng-tab.tsx", import.meta.url), "utf8"); /** Every selector that has at least one rule, comments stripped first. */ function declaredSelectors(source: string): Set { const withoutComments = source.replace(/\/\*[\s\S]*?\*\//g, " "); const found = new Set(); for (const [, selectorList] of withoutComments.matchAll(/([^{}]+)\{([^{}]*)\}/g)) { for (const target of selectorList.split(",")) found.add(target.trim().replace(/\s+/g, " ")); } return found; } const vedicSvg = readFileSync(new URL("../src/components/personal-report/vedic-chart-svg.tsx", import.meta.url), "utf8"); const profile = { name: "示例", date: "1990-06-15", time: "12:00", placeLabel: "北京", latitude: 39.9042, longitude: 116.4074, timezoneOffset: 8, timezoneId: "Asia/Shanghai", ayanamsa: "raman", birthTimeStatus: "confirmed", }; async function okView(western: Record | null = null): Promise { const result = await assembleChartView({ userId: "user-1", profile, asOf: "2026-09-15", layers: CHART_VIEW_LAYERS, postEngine: async (path) => { if (path === "/api/chart") return { status: "ok", payload: golden.chart }; if (path === "/api/varga_full") return { status: "ok", payload: golden.varga_full }; if (path === "/api/dasha/chara") return { status: "ok", payload: golden.chara }; if (path === "/api/western" && western) return { status: "ok", payload: western }; return { status: "http_error", path, elapsedMs: 1, httpStatus: 500 }; }, }); assert.equal(result.body.status, "ok"); return result.body as ChartViewOk; } /* 原值:直接 `renderToStaticMarkup()` 新值:外面裹一层 `SidebarProvider` 原因:次级页的 `SidebarProvider` 从每页各一份上移到 `app/(app)/layout.tsx` (TASK-sidebar-unify D2)。页面组件自己不再自带 provider,而 46px 顶栏里的 `SidebarTrigger` 仍要读它。断言主语一字未改,改的是测试挂载环境。 */ function withSidebarProvider(element: React.ReactElement) { return renderToStaticMarkup(React.createElement(SidebarProvider, null, element)); } test("the five tabs render and can each be selected", async () => { const view = await okView(); for (const tab of CHART_VIEW_TABS) { const markup = withSidebarProvider(React.createElement(ChartPageView, { view, initialTab: tab.id })); // 原值: 成功页必须含「主盘直接算 · 分盘按需 · 不消耗点数」;基础信息含「词条式释义」 // 新值: 成功页与失败页都不写这两句;基础信息只留行星卡 // 原因: 产品 2026-09-17 判定为过度提示,计费/速度说明和「不是对你个人的判断」都不印在页上 assert.doesNotMatch(markup, /chart-page-eyebrow|主盘直接算|分盘按需|不消耗点数|打开即有/); assert.doesNotMatch(markup, /词条式释义|不是对你个人的判断/); assert.match(markup, />星盘基础信息大运西洋盘七政四余 { const view = await okView(); const western = withSidebarProvider(React.createElement(ChartPageView, { view, initialTab: "western" })); const qizheng = withSidebarProvider(React.createElement(ChartPageView, { view, initialTab: "qizheng" })); assert.doesNotMatch(western, /报错|出错了|500/); assert.doesNotMatch(qizheng, /报错|出错了|500/); assert.match(western, /不能换算/); assert.match(qizheng, /不能换算/); }); test("a tropical packet draws the western wheel instead of the unavailable copy", async () => { const view = await okView(golden.western); const markup = withSidebarProvider(React.createElement(ChartPageView, { view, initialTab: "western" })); assert.match(markup, /回归黄道本命盘/); assert.doesNotMatch(markup, /西洋盘这一栏要等回归黄道端点上线/); }); test("the North Indian svg is imported in place and its export signature is unchanged", () => { assert.match(vedicTab, /from "@\/components\/personal-report\/vedic-chart-svg"/); assert.match(vedicSvg, /export function VedicChartSvg/); assert.match(vedicSvg, /export const NorthIndianChartSvg = VedicChartSvg/); assert.doesNotMatch(vedicTab, /chart-page\/vedic-chart-svg/); }); test("sidebar adds 星盘 and 星历 after 新建对话 without renaming 我的报告", () => { // 原值:三个页面项的中文标签直接写在 `` 的 JSX 里,顺序用 // `header.indexOf(">星盘<")` 之类量。 // 新值:标签收进模块常量 `NAV_PAGES`,头部只剩 `NAV_PAGES.map(...)`;顺序改在 // 常量里量,并另外断言这一段仍排在「新建对话」之后。 // 原因:TASK-sidebar-unify T1 把次级页那份侧栏收编进同一个组件,三项在两种模式下 // 必须逐字一致,写两遍就会再次分叉。断言主语(新建对话 → 星盘 → 星历 → // 我的报告,且「我的报告」未改名)一字未改。 const header = sidebar.slice(sidebar.indexOf("")); const newChat = header.indexOf("新建对话"); const navPages = header.indexOf("NAV_PAGES.map"); assert.ok(newChat >= 0 && navPages > newChat); const pages = sidebar.slice(sidebar.indexOf("const NAV_PAGES"), sidebar.indexOf("] as const;")); const chart = pages.indexOf('"星盘"'); const ephemeris = pages.indexOf('"星历"'); const reports = pages.indexOf('"我的报告"'); assert.ok(chart >= 0 && ephemeris > chart && reports > ephemeris); // 原值:`leaveChat("/chart")` / `leaveChat("/ephemeris")` —— 两个会走 // `window.location.assign(path)` 的按钮回调。 // 新值:三个页面项统一由 `NAV_PAGES` 渲染成 ``,并追加 // 反向断言:侧栏里不得再出现 `window.location.assign("/chart"…)` 这类整页跳转。 // 原因:TASK-sidebar-unify D3/T4——首页进次级页曾是整页刷新,React 树、会话列表、 // 账户全部清零。断言主语(三项都在、顺序正确、有 tooltip)没变, // 新增的 doesNotMatch 比原断言更强。 assert.match(sidebar, /\{ href: "\/chart", label: "星盘"/); assert.match(sidebar, /\{ href: "\/ephemeris", label: "星历"/); assert.match(sidebar, /\{ href: "\/reports", label: "我的报告"/); assert.match(sidebar, /tooltip=\{label\}/); assert.doesNotMatch(sidebar, /window\.location\.assign/); }); test("the parameters are one key/value table, not a per-breakpoint duplicate", () => { // 原值:断言 `@media (max-width: 767px)` 块里的三个开关 // `.chart-page-center-compact { display: block }` / // `.chart-page-center-extra { display: none }` / // `.chart-page-params-below { display: block }`。 // 新值:断言参数只有一张 `.chart-page-params-table` 键值表,且那三个类名在 // 整份 CSS 里都不再作为规则出现。 // 原因:T5.1 要求参数从中宫卡与盘下卡收进一张统一键值表(决策记录 D8 一系)。 // 原断言守的是「同一组参数按断点切换三种画法」,那正是本轮要去掉的东西, // 断言无法原样保留。新断言比原来更强:它不只要求当前画法正确,还禁止 // 任何一种按断点复制参数的写法回来。 // 注:原写法本身也是个陷阱——`indexOf` 未命中时返回 -1,`-2000` 之后 // 会从文件开头重新搜 `@media`,静默锚到无关的断点块上。 assert.match(cssDeclarations(".chart-page-param-row", globalStyles), /grid-template-columns/); for (const dead of [ ".chart-page-center-card", ".chart-page-center-compact", ".chart-page-center-extra", ".chart-page-params-below", ".chart-page-boundary-desktop", // 原值: 这一组不含 .chart-page-eyebrow // 新值: 成功页眉标已删,该类不得再有 CSS 规则 // 原因: 产品 2026-09-17 去掉「主盘直接算 · 分盘按需 · 不消耗点数」 ".chart-page-eyebrow", ]) { assert.equal( declaredSelectors(globalStyles).has(dead), false, `${dead} still has a CSS rule`, ); } assert.match(cssDeclarations(".chart-page-tab", globalStyles), /min-height:\s*44px/); assert.match(cssDeclarations(".chart-page-chip", globalStyles), /min-height:\s*44px/); // 原值:`.chart-page-vedic-stage .personal-report-chart-svg text { font-size: 16px; }` // —— 一条 `text` 通选,把盘内所有文字统一提到 16 viewBox 单位。 // 新值:只提小字(宫位序号 16、As 15、图例 14/16),并新增一条反向断言:这个 // stage 下不得再出现 `text {` 通选规则。 // 原因:盘内文字现在不只有一种字号——行星符号本身已经按窄盘宽度定在 22 单位。 // 通选规则会把符号一起压回 16,正是本轮要避免的(DESIGN §15 的原意是 // 「小字在 ~318px 盘宽下不低于 12px」,不是「所有字一样大」)。断言主语 // (宫位序号仍是 16)一字未改,新增的 doesNotMatch 比原断言更强。 assert.match( globalStyles, /\.chart-page-vedic-stage \.personal-report-chart-svg \.personal-report-chart-muted \{ font-size: 16px; \}/, ); assert.doesNotMatch(globalStyles, /\.chart-page-vedic-stage \.personal-report-chart-svg text \{/); }); test("the planet table scrolls inside its own box instead of widening the page", () => { assert.match(cssDeclarations(".chart-page-planet-table-wrap", globalStyles), /overflow-x:\s*auto/); // Without `min-width: 0` a grid item is sized by its content, so the table // pushes the page sideways and the overflow never engages. assert.match(cssDeclarations(".chart-page-planet-table-wrap", globalStyles), /min-width:\s*0/); assert.match(cssDeclarations(".chart-page-planet-table", globalStyles), /min-width:\s*\d/); // Every planet table is wrapped, not just the one on the 星盘 tab. for (const source of [vedicTab, westernTab, qizhengTab]) { const tables = [...source.matchAll(//g)].length; const wraps = [...source.matchAll(/
/g)].length; assert.equal(wraps, tables); } }); test("an incomplete profile page has no loading animation", () => { const markup = withSidebarProvider(React.createElement(ChartPageView, { view: { status: "birth_profile_incomplete", billed: false, message: "还没有可用来排盘的出生资料。" }, })); assert.match(markup, /还没有可用来排盘的出生资料/); assert.doesNotMatch(markup, /正在加载|InlineSpinner|skeleton/i); assert.doesNotMatch(markup, /chart-page-eyebrow|打开即有/); }); test("the chart page shell is visible before the natal chart arrives", () => { const markup = withSidebarProvider(React.createElement(ChartPageView, { view: null })); assert.match(markup, />星盘 { const reasons = [ "profile_incomplete", "profile_query_error", "adopted_calculation_incomplete", "timezone_resolver_failure", ] as const; for (const reason of reasons) { const view = chartViewFailureResponse(reason); const markup = withSidebarProvider(React.createElement(ChartPageView, { view })); assert.match(markup, new RegExp(view.message)); assert.ok(markup.includes(`href="${CHART_SETTINGS_HREF}"`)); assert.match(markup, new RegExp(CHART_VIEW_COPY.profileEntryAction)); if (reason === "profile_incomplete") { assert.match(markup, new RegExp(CHART_VIEW_COPY.profileEntryTitle)); assert.match(globalStyles, /\.chart-page-message h2 \{[^}]*font-size:\s*var\(--type-title-md\)/); } else { assert.doesNotMatch(markup, new RegExp(CHART_VIEW_COPY.profileEntryTitle)); } assert.doesNotMatch(markup, /正在加载|skeleton|spinner/i); } const engine = withSidebarProvider(React.createElement(ChartPageView, { view: chartViewFailureResponse("engine_busy"), })); assert.match(engine, new RegExp(CHART_VIEW_COPY.busy)); assert.equal(engine.includes(CHART_VIEW_COPY.profileEntryAction), false); assert.equal(engine.includes(CHART_SETTINGS_HREF), false); }); test("failure copy has no eyebrow and does not promise a later retry", () => { const markup = withSidebarProvider(React.createElement(ChartPageView, { view: { status: "chart_unavailable", billed: false, message: CHART_VIEW_COPY.unavailable }, })); assert.match(markup, new RegExp(CHART_VIEW_COPY.unavailable)); assert.doesNotMatch(markup, /chart-page-eyebrow|打开即有|过一会儿再打开|不消耗点数/); }); test("a pending western tab uses inline waiting copy instead of a spinner", async () => { const view = await okView(); const markup = withSidebarProvider(React.createElement(ChartPageView, { view, initialTab: "western", pendingLayers: new Set(["western"]), })); assert.match(markup, /这一栏还没拿到/); // 原值:禁止 skeleton;新值:必须 data-skeleton;原因:D1/D2 授权复用西洋空盘。 assert.match(markup, /data-skeleton="true"/); assert.doesNotMatch(markup, /正在加载|InlineSpinner/i); }); test("varga pending shows the empty shared chart and failure replaces it", async () => { const all = await okView(); const view = { ...all, vedic: { ...all.vedic, vargas: all.vedic.vargas.filter((v) => v.id === "D1") } }; const render = (pending: boolean, failure?: "engine_busy" | "client_timeout") => renderToStaticMarkup(React.createElement(ChartVedicTab, { view, vargaId: "D9", pending, failure, onSelectVarga: () => {} })); assert.match(render(true), /data-skeleton="true"/); assert.match(render(true), /这一分盘还没拿到/); for (const [failure, copy] of [["engine_busy", CHART_VIEW_COPY.busy], ["client_timeout", CHART_VIEW_COPY.timedOut]] as const) { const markup = render(false, failure); assert.ok(markup.includes(copy)); assert.doesNotMatch(markup, /data-skeleton|这一分盘还没拿到/); } assert.match(render(true, "engine_busy"), /data-skeleton="true"/); }); test("western qizheng and chara failures are terminal copy rather than waiting", async () => { const view = await okView(); for (const [tab, layer] of [["western", "western"], ["qizheng", "qizheng"], ["dasha", "chara"]] as const) { const markup = withSidebarProvider(React.createElement(ChartPageView, { view, initialTab: tab, layerFailures: new Map([[layer, "engine_busy" as const]]) })); assert.ok(markup.includes(CHART_VIEW_COPY.busy)); assert.doesNotMatch(markup, /data-skeleton|这一栏还没拿到/); if (tab === "dasha") assert.match(markup, /Vimshottari/); } }); test("qizheng and chara pending remain static and only western has a wheel skeleton", async () => { const view = await okView(); for (const [tab, layer] of [["qizheng", "qizheng"], ["dasha", "chara"]] as const) { const markup = withSidebarProvider(React.createElement(ChartPageView, { view, initialTab: tab, pendingLayers: new Set([layer]) })); assert.match(markup, /这一栏还没拿到/); assert.doesNotMatch(markup, /data-skeleton|InlineSpinner/); } }); test("skeleton shares north Indian geometry without planets degrees or signs", async () => { const view = await okView(); const markup = renderToStaticMarkup(React.createElement(VedicChartSvg, { chart: view.vedic.vargas[0].chart, ariaLabel: "test", skeleton: true })); const empty = renderToStaticMarkup(React.createElement(VedicChartSvg, { chart: EMPTY_NORTH_INDIAN_CHART, ariaLabel: "test" })); assert.deepEqual([...markup.matchAll(/ m[1]), [...empty.matchAll(/ m[1])); assert.doesNotMatch(markup, / { assert.match(cssDeclarations(".chart-page-skeleton", globalStyles), /animation: chart-skeleton-breathe 2\.4s ease-in-out infinite/); assert.equal((globalStyles.match(/@keyframes chart-skeleton-breathe/g) ?? []).length, 1); assert.match(globalStyles, /@keyframes chart-skeleton-breathe\s*\{\s*0%, 100% \{ opacity: 0\.35; \}\s*50% \{ opacity: 0\.6; \}/); assert.match(globalStyles, /@media \(prefers-reduced-motion: reduce\)\s*\{\s*\.chart-page-skeleton \{ animation: none; opacity: 0\.5; \}/); }); test("chart svgs omit the invalid height attribute and western height stays in css", () => { const westernSvg = readFileSync(new URL("../src/components/chart-page/western-wheel-svg.tsx", import.meta.url), "utf8"); assert.doesNotMatch(vedicSvg, /height="auto"/); assert.doesNotMatch(westernSvg, /height="auto"/); assert.match(westernSvg, /width="100%"/); assert.match(vedicSvg, /width="100%"/); assert.match(globalStyles, /\.chart-page-western-svg \{[^}]*height: auto/); }); test("the dasha tab folds every track to the current period and keeps a now card", async () => { const view = await okView(golden.western); const markup = renderToStaticMarkup(React.createElement(ChartDashaTab, { view })); assert.equal((markup.match(/chart-page-dasha-now/g) ?? []).length, 2); assert.match(markup, /现在/); assert.match(markup, /
小运剩余<\/dt>
\d+ 个月<\/dd>/); const periods = [...view.dasha.vimshottari.periods, ...view.dasha.chara.periods]; assert.equal(periods.some((period) => period.zeroYear), false); assert.equal((markup.match(/data-dasha-segment=/g) ?? []).length, periods.length); const details = markup.match(/
period.current).length); assert.ok(details.length > open.length); assert.match(cssDeclarations(".chart-page-dasha-period summary", globalStyles), /min-height:\s*44px/); assert.match(globalStyles, /\.chart-page-dasha-period details:not\(\[open\]\) > ul \{ display: none; \}/); }); test("the western tab lists every planet and filters aspects for the selected body", async () => { const view = await okView(golden.western); assert.equal(view.western.status, "ok"); if (view.western.status !== "ok") return; const markup = renderToStaticMarkup(React.createElement(ChartWesternTab, { view })); assert.equal((markup.match(/data-planet-row=/g) ?? []).length, view.western.planets.length); assert.equal((markup.match(/data-aspect-row=/g) ?? []).length, view.western.aspects.length); assert.match(markup, /viewBox="0 0 520 520"/); assert.match(markup, /data-tone=/); assert.doesNotMatch(markup, /]*>升<\/text>/); assert.match(markup, /上升 /); assert.match(markup, /太阳 /); assert.match(markup, /月亮 /); assert.match(markup, /星群 摩羯/); assert.match(cssDeclarations(".chart-page-western-wheel", globalStyles), /max-width:\s*520px/); assert.match(cssDeclarations(".chart-page-western-table-wrap", globalStyles), /overflow-x:\s*auto/); assert.match(cssDeclarations(".chart-page-western-table-wrap", globalStyles), /min-width:\s*0/); assert.doesNotMatch(cssDeclarations(".chart-page-western-table", globalStyles), /min-width/); const sun = view.western.planets.find((planet) => planet.id === "sun"); assert.ok(sun); const filtered = renderToStaticMarkup(React.createElement(ChartWesternTab, { view, initialSelectedId: sun.id })); const expected = view.western.aspects.filter((aspect) => aspect.left === sun.label || aspect.right === sun.label); assert.equal((filtered.match(/data-aspect-row=/g) ?? []).length, expected.length); assert.ok(expected.length < view.western.aspects.length); assert.match(filtered, /data-filtering="true"/); assert.match(filtered, /is-selected/); const svg = markup.slice(markup.indexOf("")); const labels = [...svg.matchAll(/]*>([^<]*)<\/text>/g)].map((match) => ({ text: match[3] ?? "", box: westernLabelBox(Number(match[1]), Number(match[2]), match[3] ?? ""), })); for (let left = 0; left < labels.length; left += 1) { for (let right = left + 1; right < labels.length; right += 1) { const a = labels[left]!.box; const b = labels[right]!.box; const overlap = a.left < b.right && a.right > b.left && a.top < b.bottom && a.bottom > b.top; assert.equal(overlap, false, `${labels[left]!.text} overlaps ${labels[right]!.text}`); } } }); test("the (app) layout mounts one sidebar for home and the four secondary routes", () => { // 原值:`(secondary)/layout.tsx` 挂只读侧栏,`useSidebarData` 另拉一份列表 // 新值:`(app)/layout.tsx` 一份 SessionListProvider + SidebarProvider,首页也在里面 // 原因:TASK-session-list-single-source T2,列表只拉一次、侧栏不卸载 const layout = readFileSync(new URL("../src/app/(app)/layout.tsx", import.meta.url), "utf8"); assert.match(layout, //); assert.match(layout, //); assert.match(layout, /