Testing and Quality Signals

LibreUni quality is not one test. It is a chain of signals: content reads cleanly, MDX compiles, diagrams render, interactive widgets hydrate, the layout works on mobile and desktop, and the lesson has a clear learning purpose.

Quality Pipeline

skinparam backgroundColor transparent
rectangle "Author edits" as Edit
rectangle "MDX compile" as Compile
rectangle "Diagram render" as Diagrams
rectangle "Static build" as Build
rectangle "Browser preview" as Preview
rectangle "Review" as Review

Edit --> Compile
Compile --> Diagrams
Diagrams --> Build
Build --> Preview
Preview --> Review

Visual Sanity Checks

For diagrams, the key quality question is simple: can a reader understand the structure without fighting the layout? The overlay exists so large diagrams can be inspected without squeezing text into unreadable shapes.

\foreach \x/\label in {0/Content,2/Build,4/Preview,6/Review} {
\draw[rounded corners=4pt, fill=blue!8, draw=blue!60, thick] (\x,0) rectangle +(1.35,0.7);
\node at (\x + 0.675,0.35) {\small \label};
}
\draw[->, thick] (1.35,0.35) -- (2,0.35);
\draw[->, thick] (3.35,0.35) -- (4,0.35);
\draw[->, thick] (5.35,0.35) -- (6,0.35);
\draw[rounded corners=6pt, dashed, draw=green!60!black, thick] (-0.25,-0.25) rectangle (7.6,0.95);
\node[below] at (3.65,-0.25) {\small Every step should produce a useful signal};

\foreach \x/\label in {0/Content,2/Build,4/Preview,6/Review} {
\draw[rounded corners=4pt, fill=blue!8, draw=blue!60, thick] (\x,0) rectangle +(1.35,0.7);
\node at (\x + 0.675,0.35) {\small \label};
}
\draw[->, thick] (1.35,0.35) -- (2,0.35);
\draw[->, thick] (3.35,0.35) -- (4,0.35);
\draw[->, thick] (5.35,0.35) -- (6,0.35);
\draw[rounded corners=6pt, dashed, draw=green!60!black, thick] (-0.25,-0.25) rectangle (7.6,0.95);
\node[below] at (3.65,-0.25) {\small Every step should produce a useful signal};

Browser Logic Example

The code runner can execute JavaScript snippets too. Use this for small algorithmic demonstrations where Python would be unnecessary.

const checks = ["build", "preview", "review"];
const status = Object.fromEntries(checks.map((name) => [name, "ready"]));

console.log(JSON.stringify(status, null, 2));
console.log("All checks named:", Object.keys(status).join(" -> "));

Python Data Sketch

This example visualizes a fictional quality dashboard. It is intentionally small, but it exercises the same runtime used by scientific and math lessons.

import matplotlib.pyplot as plt

labels = ["MDX", "Diagrams", "Hydration", "Mobile", "Review"]
scores = [98, 95, 92, 90, 96]

plt.figure(figsize=(6, 3.2))
bars = plt.bar(labels, scores, color=["#2563eb", "#7c3aed", "#059669", "#f59e0b", "#0f172a"])
plt.ylim(80, 100)
plt.ylabel("confidence")
plt.title("Example Quality Signals")
for bar, score in zip(bars, scores):
  plt.text(bar.get_x() + bar.get_width() / 2, score + 0.5, str(score), ha="center")
print("Quality signal chart rendered.")

Review Heuristics

Use this checklist when reviewing a new lesson:

1. The title and description match the actual content.
2. The lesson teaches one coherent idea.
3. Diagrams are legible in the page and in the overlay.
4. Interactive components have a reason to be there.
5. Code samples are short enough to inspect.
6. The page builds without generating new errors.