Files
Jyotisha/frontend/tests/chart-page-mobile-width-20260929.test.ts
T
jesse-uxandClaude Code 64aa0ec20c
Independent Staging Quality Gate / publish (push) Canceled after 0s
Independent Staging Quality Gate / validate (push) Canceled after 1m27s
feat(chart): polish chart presentation and symbol explanations
Hide engine branding, gate supported divisional columns, align house cells, and add accessible symbol help. Reduce desktop chart width and stabilize the waiting slot.

Validated with 78 browser checks and 87 focused frontend tests. Full suite retains 29 identical baseline loader failures; no new failures.

Co-Authored-By: Claude Code <noreply@anthropic.com>
2026-09-29 19:03:28 +08:00

55 lines
3.3 KiB
TypeScript

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);
assert.match(cssDeclarations(".chart-page-vedic-plot", desktop), /max-width:\s*440px/);
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", globalStyles), /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/);
});