feat: show the built-in test framework on the home page

src/lib/indexExamples.js

@@ -314,6 +314,29 @@ def size(t: Tree[Int32]): Int32 = match t {
     case Tree.Node(l, r) => size(l) + size(r)
 }`;
 
+export const testExample = `use Assert.{assertEq, assertErr}
+
+def divide(x: Int32, y: Int32): Result[String, Int32] =
+    if (y == 0) Err("Division by zero") else Ok(x / y)
+
+@Test
+def testDivide01(): Unit \\ Assert =
+    assertEq(expected = Ok(5), divide(10, 2))
+
+@Test
+def testDivide02(): Unit \\ Assert =
+    assertErr(divide(10, 0))`;
+
+// Terminal output rather than Flix, so the home page renders this one through a
+// plain <pre>: the CodeSnippet component only knows the Flix grammar and would
+// colour the PASS lines as if they were code.
+export const testOutput = `Running 2 tests...
+
+   PASS  testDivide01 1.4ms
+   PASS  testDivide02 0.3ms
+
+Passed: 2, Failed: 0. Skipped: 0. Elapsed: 2.1ms.`;
+
 export const datalogExample = `def reachable(g: List[(String, Int32, String)], minSpeed: Int32): List[(String, String)] =
     let facts = inject g into Road/3;
     let rules = #{

src/pages/index.astro

@@ -23,6 +23,8 @@ import {
   applicativeForExample,
   javaInteropExample,
   terminationExample,
+  testExample,
+  testOutput,
   datalogExample,
 } from "../lib/indexExamples.js";
 
@@ -548,6 +550,43 @@ const vscodeSlides = [
       </div>
     </div>
 
+    <div class="row mb-4">
+      <div class="col-md-6">
+        <div class="card border-0">
+          <div class="card-body">
+            <div class="card-title"><h4>Built-in Test Framework</h4></div>
+            <p class="card-text">
+              Flix comes with a built-in test framework. A test is a function
+              marked with the <code>@Test</code> annotation that takes no
+              arguments and returns <code>Unit</code>.
+            </p>
+            <p class="card-text">
+              Assertions come from the <code>Assert</code> module in the
+              standard library. Asserting is itself an effect, so a test
+              carries <code>Assert</code> in its signature and the test runner
+              is nothing more than its handler.
+            </p>
+            <p class="card-text">
+              Run every test in a project with <code>flix test</code>, or run
+              them one at a time from the code lens above each test in Visual
+              Studio Code.
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="col-md-6">
+        <CodeSnippet code={testExample} />
+        {/* Terminal output, not Flix, so it bypasses CodeSnippet and reuses
+            only its frame. overflow-x is set here because Astro's <Code> ships
+            that inline on the <pre> it renders and a bare one has nothing. */}
+        <div class="code-snippet-frame">
+          <div class="code-snippet-code">
+            <pre style="overflow-x: auto">{testOutput}</pre>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <div class="row mb-4">
       <div class="col-md-12">
         <div class="card border-0">