Added tests

Signed-off-by: Kristin Brown <kristin.brown@solo.io>

Author: kristin-kronstain-brown

fixture/content/en/test/v2/everything.md

@@ -2,6 +2,15 @@
 title: Everything
 weight: 100
 description: Every shortcode the framework cares about, in one page, with sentinel strings tests can grep for.
+# Title-badge front-matter flags. All five are set on this single fixture
+# page so static.spec.ts can assert that every badge variant renders next
+# to the H1. Regression guard for solo-io/docs#2414. The v1/everything
+# page intentionally leaves these unset to cover the negative case.
+enterprise: true
+alpha: true
+beta: true
+oss: true
+experimental: true
 ---
 
 The page exists to exercise every shortcode pattern in a single place. Tests assert the rendered HTML, so sentinels of the form `MARKER_*` and `COND_*` are placed where each pattern's correctness can be verified. Sections are ordered alphabetically by heading. The body is shared across versions via the `reuse` shortcode; per-version content is gated by the `version` shortcode against the page's URL section.

tests/auto-cards.spec.ts

@@ -72,9 +72,19 @@ function extractCards(
     const descMatch = inner.match(
       /<p[^>]*class="section-card-desc"[^>]*>([\s\S]*?)<\/p>/,
     );
+    // Strip any badge spans from the title: list.html appends
+    // `<span class="section-card-badge ...">LABEL</span>` next to the
+    // title text when the target page sets enterprise/alpha/etc. flags.
+    // The badge presence is asserted separately; here we want just the
+    // human-readable title text.
+    const rawTitle = titleMatch?.[1] ?? "";
+    const titleWithoutBadges = rawTitle.replace(
+      /<span[^>]*class="section-card-badge[^"]*"[^>]*>[\s\S]*?<\/span>/g,
+      "",
+    );
     out.push({
       href: match[1],
-      title: (titleMatch?.[1] ?? "").replace(/\s+/g, " ").trim(),
+      title: titleWithoutBadges.replace(/\s+/g, " ").trim(),
       description: (descMatch?.[1] ?? "").replace(/\s+/g, " ").trim(),
     });
   }

tests/browser.spec.ts

@@ -175,6 +175,30 @@ test.describe("dark mode flips mermaid theme", () => {
     expect(darkFill, "mermaid text fill did not change with dark mode").not.toBe(
       lightFill,
     );
+
+    // PR 2412 regression guard: at least one <text> in the dark-mode SVG
+    // must be light-colored. The fixed bug was that actor labels and
+    // signal text both rendered near-black on a dark background, making
+    // the whole diagram unreadable. Looking at the *max* luminance across
+    // all texts (not the first one) is robust to legitimate dark-on-light
+    // text inside light-coloured node boxes — what we're catching is the
+    // case where *every* text is dark.
+    const maxLuminance = await darkSvg.evaluate((node) => {
+      const texts = node.querySelectorAll("text");
+      let max = 0;
+      for (const t of Array.from(texts)) {
+        const fill = window.getComputedStyle(t).fill;
+        const m = fill.match(/(\d+),\s*(\d+),\s*(\d+)/);
+        if (!m) continue;
+        const lum = 0.299 * +m[1] + 0.587 * +m[2] + 0.114 * +m[3];
+        if (lum > max) max = lum;
+      }
+      return max;
+    });
+    expect(
+      maxLuminance,
+      "no light-coloured text in dark-mode mermaid SVG — every <text> is dark on a dark background",
+    ).toBeGreaterThan(150);
   });
 });
 

tests/static.spec.ts

@@ -266,3 +266,217 @@ test.describe("conditional-text excludes content correctly", () => {
     });
   }
 });
+
+// Regression guard for solo-io/docs#2389: the module's pager partial overrides
+// hextra's default to include section index pages (`_index.md`) as navigable
+// siblings. If anyone reverts to hextra's default, section landings silently
+// stop rendering prev/next links.
+test.describe("section-index pager (PR 2389 regression guard)", () => {
+  const sectionRel = path.join(
+    target.baseURL.replace(/^\/+|\/+$/g, "") || "",
+    "v2",
+    "index.html",
+  );
+  const sectionIndex = path.join(target.builtRoot, sectionRel);
+
+  test.skip(
+    !fs.existsSync(sectionIndex),
+    "section index /v2/ not present in builtRoot (fixture-only check)",
+  );
+
+  test("v2 section landing renders a pager linking to a sibling section", () => {
+    const html = readFixture(sectionIndex);
+    // The pager wrapper has a unique Tailwind class signature emitted by
+    // layouts/partials/components/pager.html. If the partial is dropped or
+    // hextra's default takes over (which skips _index pages), this match
+    // fails and the section landing silently loses navigation.
+    const pagerRe =
+      /<div class="hx:mb-8 hx:flex hx:items-center hx:border-t[^"]*"[^>]*>([\s\S]*?)<\/div>/;
+    const pagerMatch = html.match(pagerRe);
+    expect(pagerMatch, "no pager rendered on /v2/").not.toBeNull();
+    const inner = pagerMatch![1];
+    const hrefs = [...inner.matchAll(/<a[^>]+href="([^"]+)"/g)].map((m) => m[1]);
+    expect(hrefs.length, "pager has no <a> children").toBeGreaterThan(0);
+    // Every pager href on /v2/ should point at a sibling section landing
+    // (v1, main, etc.) — never at a non-existent path. Strip baseURL and
+    // expect it to match one of the configured sibling versions.
+    const baseAbs = "/" + target.baseURL.replace(/^\/+|\/+$/g, "");
+    const siblingVersions = target.versions.filter((v) => v !== "v2");
+    for (const href of hrefs) {
+      const rel = href.replace(baseAbs, "").replace(/\/$/, "").replace(/^\/+/, "");
+      expect(
+        siblingVersions,
+        `pager href ${href} should point at a sibling section`,
+      ).toContain(rel);
+    }
+  });
+});
+
+// Regression guard for solo-io/docs#2416: numbered-list counter integrity.
+// The bug was triggered by a `{{% version %}}` shortcode wrapping a sub-list
+// item, which broke CSS counter increments and produced gaps in step numbers.
+// We don't reproduce the exact pattern here, but the simpler check — that
+// the fixture's 3-level ordered list renders with the expected <ol>/<li>
+// structure — catches any regression that mangles list nesting.
+test.describe("ordered-list structure (PR 2416 regression guard)", () => {
+  const everythingV2 = path.join(TEST_PRODUCT_ROOT, "v2", "everything", "index.html");
+  test.skip(
+    !fs.existsSync(everythingV2),
+    "v2/everything not present in builtRoot (fixture-only check)",
+  );
+
+  test("3-level ordered list preserves nesting: outer 2 items, each with nested <ol>", () => {
+    const html = readFixture(everythingV2);
+    // Locate the "Ordered (3 levels)" section heading, then capture the
+    // first <ol> that follows it. This is the fixture's canonical
+    // three-level list from everything.md ("Ordered (3 levels)" subsection).
+    const headingIdx = html.indexOf('id="ordered-3-levels"');
+    expect(headingIdx, "ordered-3-levels heading not found").toBeGreaterThan(-1);
+    const tail = html.slice(headingIdx);
+    const olStart = tail.indexOf("<ol");
+    expect(olStart, "no <ol> follows the heading").toBeGreaterThan(-1);
+    // Extract the balanced top <ol> ... </ol> (with one level of nesting).
+    // Hugo emits this as well-formed HTML so a simple depth counter works.
+    let depth = 0;
+    let i = olStart;
+    let endIdx = -1;
+    while (i < tail.length) {
+      if (tail.startsWith("<ol", i)) {
+        depth++;
+        i += 3;
+      } else if (tail.startsWith("</ol>", i)) {
+        depth--;
+        if (depth === 0) {
+          endIdx = i + 5;
+          break;
+        }
+        i += 5;
+      } else {
+        i++;
+      }
+    }
+    expect(endIdx, "unbalanced <ol> tags").toBeGreaterThan(-1);
+    const outerOl = tail.slice(olStart, endIdx);
+    // Count direct-child <li> elements at the outer level. A naive count
+    // would include nested <li>; instead, count <li> *after* slicing out
+    // any nested <ol>...</ol> blocks first.
+    const outerWithoutNested = stripNested(outerOl, "<ol", "</ol>");
+    const outerLiCount = (outerWithoutNested.match(/<li\b/g) ?? []).length;
+    expect(
+      outerLiCount,
+      "top-level ordered list should have exactly 2 items",
+    ).toBe(2);
+    // The list MUST contain at least one nested <ol> (the bug pattern is
+    // that nesting collapses). Two <ol> total: outer + one nested.
+    const nestedOlCount = (outerOl.match(/<ol\b/g) ?? []).length;
+    expect(
+      nestedOlCount,
+      "list lost its nesting — expected outer + at least one nested <ol>",
+    ).toBeGreaterThan(1);
+  });
+});
+
+// Helper: remove every balanced `<openTag...</closeTag>` block from a string.
+// Used to count direct children at a given nesting depth.
+function stripNested(s: string, openTag: string, closeTag: string): string {
+  let out = "";
+  let i = 0;
+  // Skip the very first opening tag (we want to keep it as the outer wrapper).
+  const first = s.indexOf(openTag);
+  if (first < 0) return s;
+  out += s.slice(0, first + openTag.length);
+  i = first + openTag.length;
+  while (i < s.length) {
+    const nextOpen = s.indexOf(openTag, i);
+    const nextClose = s.indexOf(closeTag, i);
+    if (nextOpen < 0 || nextClose < 0 || nextClose < nextOpen) {
+      out += s.slice(i);
+      break;
+    }
+    // Found a nested open before the next close — skip everything between
+    // the nested open and its matching close.
+    out += s.slice(i, nextOpen);
+    let depth = 1;
+    let j = nextOpen + openTag.length;
+    while (j < s.length && depth > 0) {
+      if (s.startsWith(openTag, j)) {
+        depth++;
+        j += openTag.length;
+      } else if (s.startsWith(closeTag, j)) {
+        depth--;
+        j += closeTag.length;
+      } else {
+        j++;
+      }
+    }
+    i = j;
+  }
+  return out;
+}
+
+// Regression guard for solo-io/docs#2414: title badges. The fixture sets
+// every badge flag (enterprise/alpha/beta/oss/experimental) on v2/everything.md
+// so a single page exercises all five variants. v1/everything.md has none
+// of them, covering the negative case.
+test.describe("title badges (PR 2414 regression guard)", () => {
+  const v2Everything = path.join(
+    TEST_PRODUCT_ROOT,
+    "v2",
+    "everything",
+    "index.html",
+  );
+  const v1Everything = path.join(
+    TEST_PRODUCT_ROOT,
+    "v1",
+    "everything",
+    "index.html",
+  );
+
+  test.skip(
+    !fs.existsSync(v2Everything),
+    "v2/everything not present in builtRoot (fixture-only check)",
+  );
+
+  test("v2/everything renders .page-badges with all five badge variants", () => {
+    const html = readFixture(v2Everything);
+    // Pull out the .page-badges block. The module's docs/single.html only
+    // emits this wrapper when at least one flag is truthy.
+    const badgesMatch = html.match(
+      /<div class="page-badges">([\s\S]*?)<\/div>/,
+    );
+    expect(
+      badgesMatch,
+      ".page-badges container missing — badge front-matter not honored",
+    ).not.toBeNull();
+    const inner = badgesMatch![1];
+    // Each badge is a <span class="section-card-badge ...">LABEL</span>.
+    // Assert every label appears.
+    const expectedLabels = ["Enterprise", "Alpha", "Beta", "Open Source", "Experimental"];
+    for (const label of expectedLabels) {
+      expect(
+        inner,
+        `badge "${label}" should render when its front-matter flag is true`,
+      ).toContain(label);
+    }
+    // Variant classes: the alpha/beta/experimental badges should carry
+    // badge-tag, the oss badge carries badge-oss. Catches silent CSS-class
+    // regressions that would render the right text in the wrong color.
+    expect(inner, ".badge-tag should apply to alpha/beta/experimental").toMatch(
+      /section-card-badge badge-tag/,
+    );
+    expect(inner, ".badge-oss should apply to the Open Source badge").toMatch(
+      /section-card-badge badge-oss/,
+    );
+  });
+
+  test("v1/everything (no badge flags) does NOT render .page-badges", () => {
+    if (!fs.existsSync(v1Everything)) {
+      test.skip(true, "v1/everything not present in builtRoot");
+    }
+    const html = readFixture(v1Everything);
+    expect(
+      html,
+      "page-badges container leaked onto a page with no badge front-matter",
+    ).not.toContain('class="page-badges"');
+  });
+});

tests/viewport.spec.ts

@@ -106,6 +106,75 @@ test.describe("viewport responsive layout", () => {
         expect(box, "version dropdown has no box").not.toBeNull();
         expect(box!.width, "version dropdown collapsed to zero width").toBeGreaterThan(0);
       });
+
+      // PR 2394 regression guard: on mobile the version dropdown elided
+      // the product-name prefix so the button fits one line in the
+      // narrow nav. On tablet and up, the product name is visible again.
+      test("version dropdown product-name visibility matches breakpoint", async ({
+        page,
+      }) => {
+        await page.goto(REPRESENTATIVE_PAGE!);
+        const productName = page
+          .locator(".version-dropdown-btn .version-product-name")
+          .first();
+        if (await productName.count() === 0) {
+          test.skip(
+            true,
+            "no .version-product-name in this build (consumer didn't set product name)",
+          );
+        }
+        if (vp.width < 768) {
+          await expect(
+            productName,
+            "product-name should be hidden under 768px to keep the dropdown narrow",
+          ).toBeHidden();
+        } else {
+          await expect(
+            productName,
+            "product-name should be visible at >=768px",
+          ).toBeVisible();
+        }
+      });
+
+      // PR 2388 regression guard: on mobile, cards must stack (one per row)
+      // and stay within the viewport width. The bug was a grid layout that
+      // produced multi-column cards on narrow viewports, which overflowed.
+      test("cards stack and stay within the viewport", async ({ page }) => {
+        await page.goto(REPRESENTATIVE_PAGE!);
+        const cards = page.locator(".hextra-cards .hextra-card");
+        const count = await cards.count();
+        if (count < 2) {
+          test.skip(true, "fewer than 2 cards on the sample page");
+        }
+        const viewportWidth = vp.width;
+        // Collect every card's bounding box, then assert none extends
+        // past the viewport edge (overflow bug from PR 2388).
+        const boxes = await cards.evaluateAll((els) =>
+          els.map((el) => el.getBoundingClientRect()).map((r) => ({
+            left: r.left,
+            right: r.right,
+            top: r.top,
+            width: r.width,
+          })),
+        );
+        for (const b of boxes) {
+          expect(
+            b.right,
+            `card extends past viewport right edge (${b.right} > ${viewportWidth})`,
+          ).toBeLessThanOrEqual(viewportWidth + 1);
+        }
+        // Mobile-specific: cards should stack vertically. A heuristic that
+        // works without coupling to CSS grid internals: no two cards share
+        // the same `top` (within a small tolerance) on mobile.
+        if (vp.width < 768 && boxes.length >= 2) {
+          const tops = boxes.map((b) => Math.round(b.top));
+          const uniqueTops = new Set(tops);
+          expect(
+            uniqueTops.size,
+            "cards should stack vertically on mobile (each on its own row)",
+          ).toBe(boxes.length);
+        }
+      });
     });
   }
 });