fix(cli): report a snippet the browser does not support as not supported

cli/CHANGELOG.md

@@ -10,6 +10,7 @@ Format based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). The CL
 
 ### Fixed
 - The markdown report escapes the message of an error in the New errors and Fixed errors lists of `--baseline`, as it does in its Errors and warnings list and in its tables. They printed the message as it came, so GitHub dropped the `<head>` of `1 blocking script(s) in <head>` there, and a line break in a message could start a heading or another list item.
+- The human and markdown reports say `not supported` and why for a snippet whose API the browser lacks, a result with the `unsupported` status. They printed it as a metric without a value: `undefined` as its value, and `· undefined` as its status in the markdown table.
 
 ---
 

cli/src/reporters/human.js

@@ -148,6 +148,11 @@ function renderResult(r, verbose) {
     return `  ${styleText("dim", "·")} ${pad(r.id, 16)} ${styleText("dim", `not measured: ${r.message ?? "nothing recorded"}`)}`;
   }
 
+  // The browser lacks the API the snippet reads, so there is no value to show
+  if (r.status === "unsupported") {
+    return `  ${styleText("dim", "·")} ${pad(r.id, 16)} ${styleText("dim", `not supported: ${r.error ?? "the browser lacks the API"}`)}`;
+  }
+
   if (r.script === "Fonts-Preloaded-Loaded-and-used-above-the-fold") {
     return renderFontsResult(r);
   }

cli/src/reporters/markdown.js

@@ -48,6 +48,11 @@ function renderNotMeasuredRow(r) {
   return `| ${r.id} | · not measured | ${cell(r.message ?? "nothing recorded")} |`;
 }
 
+// The browser lacks the API the snippet reads, so there is no value to show
+function renderUnsupportedRow(r) {
+  return `| ${r.id} | · not supported | ${cell(r.error ?? "the browser lacks the API")} |`;
+}
+
 // A result with a count and no value: its count, and its first numbers as the human report gives them
 function renderSummaryRow(r) {
   return `| ${r.id} | · ${r.count ?? ""} | ${summaryNumbers(r).join(" · ")} |`;
@@ -57,6 +62,7 @@ function renderRow(r) {
   if (r.status === "skipped") return renderSkippedRow(r);
   if (r.status === "error") return renderErrorRow(r);
   if (r.status === "tracking") return renderNotMeasuredRow(r);
+  if (r.status === "unsupported") return renderUnsupportedRow(r);
   if (Array.isArray(r.issues)) return renderAuditRow(r);
   if (isSummaryResult(r)) return renderSummaryRow(r);
   return renderMetricRow(r);

cli/tests/unit/reporters.test.js

@@ -800,3 +800,28 @@ describe("the details of each result in the markdown report", () => {
     expect(output).not.toContain("<details>");
   });
 });
+
+describe("a result of a browser without the API", () => {
+  const unsupported = {
+    url: "https://example.com",
+    navMs: 850,
+    results: [
+      { id: "LCP", script: "LCP", status: "unsupported", error: "largest-contentful-paint entries not supported in this browser" },
+      { id: "INP", script: "INP", status: "unsupported" },
+    ],
+  };
+
+  it("shows in the human report as not supported with its reason, and not as a value", () => {
+    const output = reportHuman(unsupported);
+    expect(output).toMatch(/LCP\s+.*not supported: largest-contentful-paint entries not supported in this browser/);
+    expect(output).toMatch(/INP\s+.*not supported: the browser lacks the API/);
+    expect(output).not.toContain("undefined");
+  });
+
+  it("shows in the markdown report as not supported with its reason, and not as a value", () => {
+    const output = reportMarkdown(unsupported);
+    expect(output).toContain("| LCP | · not supported | largest-contentful-paint entries not supported in this browser |");
+    expect(output).toContain("| INP | · not supported | the browser lacks the API |");
+    expect(output).not.toContain("undefined");
+  });
+});