Add contract tests for chart text colour on dark themes

Follows the existing source-assertion style in this file. Both tests fail
against the pre-fix Explainer and pass after it:

- charts must receive textColor={textColor}, or their labels render
  dark-on-dark (the components default textColor to #1F2937)
- ComparisonCard must get a themed cardBackgroundColor, or its labels
  render light-on-light (the component hardcodes #F3F4F6)
This commit is contained in:
Troy O'Leary
2026-08-10 18:32:10 +10:00
parent 0f22ffcf44
commit 9767ff2fb9

View File

@@ -26,3 +26,43 @@ def test_cinematic_fades_are_bounded_by_each_scene_duration() -> None:
assert "Math.round(scene.durationSeconds * fps)" in source
assert "durationInFrames - fadeOutFrames" in source
def _jsx_block(source: str, component: str) -> str:
"""Return the JSX element text for <Component ... /> in the source."""
start = source.index(f"<{component}")
end = source.index("/>", start)
return source[start:end]
def test_chart_scenes_receive_the_theme_text_color() -> None:
"""Charts default textColor to near-black (#1F2937).
If Explainer does not forward the theme's textColor, every chart title,
axis label, category label and value renders dark-on-dark and is invisible
on any dark theme.
"""
source = (REPO_ROOT / "remotion-composer/src/Explainer.tsx").read_text(
encoding="utf-8"
)
for component in ("BarChart", "LineChart", "PieChart", "KPIGrid"):
assert "textColor={textColor}" in _jsx_block(source, component), (
f"{component} must receive the theme textColor, "
f"or its labels are invisible on dark themes"
)
def test_comparison_card_surface_follows_the_theme() -> None:
"""ComparisonCard hardcodes cardBackgroundColor to a light grey (#F3F4F6).
On a dark theme it receives the theme's light textColor, so without a
themed card surface the labels are light-on-light.
"""
source = (REPO_ROOT / "remotion-composer/src/Explainer.tsx").read_text(
encoding="utf-8"
)
block = _jsx_block(source, "ComparisonCard")
assert "textColor={textColor}" in block
assert "cardBackgroundColor={cut.cardBackgroundColor || theme.surfaceColor}" in block