Jyotisha/frontend/tests/chart-page-mobile-width-20260929.test.ts

import assert from "node:assert/strict";
import { readFileSync } from "node:fs";
import test from "node:test";

import { cssDeclarations } from "./css-contract-test-support.ts";

/*
 * BUG-1083 (TASK-mobile-chart-and-confirmed-edit-20260929 M1): on an iPhone the
 * chart page grew past the viewport and cut the North Indian chart off.
 * `.secondary-page` is a grid; its implicit `auto` column took the page body's
 * min-content (the nowrap chart-type strip, the 34rem planet table), so the
 * body measured 1101px at a 390px viewport (headless Chrome, golden fixture).
 * The one column must be allowed to shrink below its content.
 */
const globalStyles = readFileSync(new URL("../src/app/globals.css", import.meta.url), "utf8");

test("the secondary page's single column may shrink below its content (BUG-1083)", () => {
  const page = cssDeclarations(".secondary-page", globalStyles);
  assert.match(page, /display:\s*grid/);
  assert.match(page, /grid-template-columns:\s*minmax\(0,\s*1fr\)/);
});

test("chart drawing limits are desktop-only and exclude the padded Vedic stage", () => {
  const desktopStart = globalStyles.indexOf("@media (min-width: 1024px) {\n  .chart-page-vedic-layout,");
  assert.ok(desktopStart >= 0);
  const desktopEnd = globalStyles.indexOf("\n}", desktopStart);
  const desktop = globalStyles.slice(desktopStart, desktopEnd + 2);
  const outsideDesktop = globalStyles.slice(0, desktopStart) + globalStyles.slice(desktopEnd + 2);
  // 原值：桌面 `.chart-page-vedic-plot { max-width: 440px }`，且 `.chart-page-vedic-stage` 任何地方都不得有 max-width
  // 新值：桌面上限移到外框 `.chart-page-vedic-stage`（440px + 两侧内边距 + 边框），绘图区在框内撑满；手机端外框仍不设上限
  // 原因：产品 2026-09-29「星图外面的框太丑」——只限绘图区时外框比星图宽一大截，左右留白（BUG-1100）。骨架与结果同在外框内，揭幕不跳尺寸
  assert.match(cssDeclarations(".chart-page-vedic-stage", desktop), /max-width:\s*calc\(440px \+ 2 \* var\(--space-3\) \+ 2px\)/);
  assert.doesNotMatch(desktop, /\.chart-page-vedic-plot \{[^}]*max-width/);
  assert.match(cssDeclarations(".chart-page-western-wheel", desktop), /max-width:\s*480px/);
  assert.doesNotMatch(cssDeclarations(".chart-page-vedic-plot", outsideDesktop), /max-width/);
  assert.doesNotMatch(cssDeclarations(".chart-page-vedic-stage", outsideDesktop), /max-width/);
  assert.match(cssDeclarations(".chart-page-western-wheel", outsideDesktop), /max-width:\s*520px/);
  assert.match(cssDeclarations(".chart-page-waiting-plot", globalStyles), /width:\s*100%/);
  const skeleton = readFileSync(new URL("../src/components/chart-page/chart-page-skeleton.tsx", import.meta.url), "utf8");
  assert.match(skeleton, /chart-page-western-layout/);
  assert.match(skeleton, /chart-page-vedic-layout/);
  assert.match(skeleton, /chart-page-vedic-plot/);
});

test("the Vedic waiting slot reserves the result legend band without changing the shared SVG", () => {
  assert.match(cssDeclarations(".chart-page-skeleton.chart-page-vedic-plot", globalStyles), /aspect-ratio:\s*400\s*\/\s*452/);
});

test("only the house column in frozen natal and Moon tables overrides centering", () => {
  assert.match(cssDeclarations(".chart-page-planet-table td.chart-page-planet-mid", globalStyles), /text-align:\s*center/);
  assert.match(cssDeclarations(".chart-page-planet-table:has(> thead > tr > th:nth-child(8)) > tbody > tr > td:nth-child(4)", globalStyles), /text-align:\s*left/);
});

test("wide chart-page content still scrolls inside its own box instead of widening the page", () => {
  assert.match(cssDeclarations(".chart-page-planet-table-wrap", globalStyles), /overflow-x:\s*auto/);
  assert.match(cssDeclarations(".chart-page-type-strip", globalStyles), /overflow-x:\s*auto/);
  assert.match(cssDeclarations(".chart-page-planet-table", globalStyles), /min-width:\s*34rem/);
});