executable-stories-react 0.19.0 → 0.20.0

package/dist/index.js

@@ -658,7 +658,7 @@ function ReportDocEntries({ entries }) {
 }
 
 // src/components/ReportSteps.tsx
-import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
 var STEP_GLYPH = {
   passed: "\u2713",
   failed: "\u2717",
@@ -735,6 +735,23 @@ function ReportStepItem({
             children: step.errorMessage
           }
         ) : null,
+        step.expected !== void 0 || step.actual !== void 0 ? /* @__PURE__ */ jsxs11(
+          "dl",
+          {
+            "data-slot": "step-comparison",
+            className: "mt-1.5 ml-6 grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 font-mono text-xs",
+            children: [
+              step.expected !== void 0 ? /* @__PURE__ */ jsxs11(Fragment6, { children: [
+                /* @__PURE__ */ jsx19("dt", { className: "text-muted-foreground", children: "Expected" }),
+                /* @__PURE__ */ jsx19("dd", { className: "overflow-x-auto whitespace-pre-wrap text-pass", children: step.expected })
+              ] }) : null,
+              step.actual !== void 0 ? /* @__PURE__ */ jsxs11(Fragment6, { children: [
+                /* @__PURE__ */ jsx19("dt", { className: "text-muted-foreground", children: "Actual" }),
+                /* @__PURE__ */ jsx19("dd", { className: "overflow-x-auto whitespace-pre-wrap text-fail", children: step.actual })
+              ] }) : null
+            ]
+          }
+        ) : null,
         step.docEntries.length > 0 ? /* @__PURE__ */ jsx19("div", { "data-es-docs": true, className: "mt-2 ml-6", children: /* @__PURE__ */ jsx19(ReportDocEntries, { entries: step.docEntries }) }) : null
       ]
     }
@@ -858,7 +875,7 @@ function StateCardView({ card }) {
 }
 
 // src/components/ReportAttachments.tsx
-import { Fragment as Fragment6, jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
 function attachmentText(att) {
   if (att.contentEncoding !== "BASE64") return att.body;
   try {
@@ -898,7 +915,7 @@ function ReportAttachments({ attachments }) {
       const href = dataUri ?? safeUrl(att.body);
       const imageSrc = dataUri ?? safeImageUrl(att.body);
       const isImage = att.mediaType.startsWith("image/") && imageSrc !== void 0;
-      return /* @__PURE__ */ jsx21("figure", { className: "m-0", children: isImage ? /* @__PURE__ */ jsxs13(Fragment6, { children: [
+      return /* @__PURE__ */ jsx21("figure", { className: "m-0", children: isImage ? /* @__PURE__ */ jsxs13(Fragment7, { children: [
         /* @__PURE__ */ jsx21(
           "img",
           {
@@ -909,7 +926,7 @@ function ReportAttachments({ attachments }) {
           }
         ),
         /* @__PURE__ */ jsx21("figcaption", { className: "mt-1 text-xs text-muted-foreground", children: att.name })
-      ] }) : /* @__PURE__ */ jsxs13(Fragment6, { children: [
+      ] }) : /* @__PURE__ */ jsxs13(Fragment7, { children: [
         att.external ? null : preview(att),
         /* @__PURE__ */ jsxs13(
           "a",
@@ -1104,7 +1121,7 @@ function flakinessOf(entries) {
 }
 
 // src/components/ScenarioRunHistory.tsx
-import { Fragment as Fragment7, jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
 var MAX_DOTS = 10;
 var DOT_COLOR = {
   passed: "bg-pass",
@@ -1124,7 +1141,7 @@ function ScenarioRunHistory({ scenarioId }) {
   const recent = entries.slice(-MAX_DOTS);
   const flaky = flakinessOf(recent) === "flaky";
   const summary = flaky ? `${describeRunHistory(recent)} \xB7 Flaky` : describeRunHistory(recent);
-  return /* @__PURE__ */ jsxs15(Fragment7, { children: [
+  return /* @__PURE__ */ jsxs15(Fragment8, { children: [
     flaky ? /* @__PURE__ */ jsx23(Badge, { variant: "pending", "aria-label": "Flaky: status flips between recent runs", title: summary, children: "Flaky" }) : null,
     /* @__PURE__ */ jsx23(
       "span",
@@ -1459,9 +1476,9 @@ function ReportScenario({ scenario, hideTitle = false }) {
 }
 
 // src/components/ReportScenarioList.tsx
-import { Fragment as Fragment8, jsx as jsx27 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx27 } from "react/jsx-runtime";
 function ReportScenarioList({ feature }) {
-  return /* @__PURE__ */ jsx27(Fragment8, { children: feature.scenarios.map((scenario) => /* @__PURE__ */ jsx27(ReportScenario, { scenario }, scenario.id)) });
+  return /* @__PURE__ */ jsx27(Fragment9, { children: feature.scenarios.map((scenario) => /* @__PURE__ */ jsx27(ReportScenario, { scenario }, scenario.id)) });
 }
 
 // src/components/ReportFeatureIntro.tsx
@@ -1499,7 +1516,7 @@ function featureKindLabel(kind) {
 }
 
 // src/components/ReportFeature.tsx
-import { Fragment as Fragment9, jsx as jsx29, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx29, jsxs as jsxs20 } from "react/jsx-runtime";
 function ReportFeature({ feature }) {
   const titleId = `${feature.id}-title`;
   const bodyId = `${feature.id}-body`;
@@ -1559,14 +1576,14 @@ function ReportFeature({ feature }) {
                     s.failed,
                     " failed"
                   ] }),
-                  s.skipped > 0 ? /* @__PURE__ */ jsxs20(Fragment9, { children: [
+                  s.skipped > 0 ? /* @__PURE__ */ jsxs20(Fragment10, { children: [
                     /* @__PURE__ */ jsx29("span", { "aria-hidden": true, children: "\xB7" }),
                     /* @__PURE__ */ jsxs20("span", { children: [
                       s.skipped,
                       " skipped"
                     ] })
                   ] }) : null,
-                  s.pending > 0 ? /* @__PURE__ */ jsxs20(Fragment9, { children: [
+                  s.pending > 0 ? /* @__PURE__ */ jsxs20(Fragment10, { children: [
                     /* @__PURE__ */ jsx29("span", { "aria-hidden": true, children: "\xB7" }),
                     /* @__PURE__ */ jsxs20("span", { children: [
                       s.pending,
@@ -1813,9 +1830,9 @@ function ReportSchemaError({ error }) {
 }
 
 // src/components/ReportShell.tsx
-import { Fragment as Fragment10, jsx as jsx36, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx36, jsxs as jsxs24 } from "react/jsx-runtime";
 function ReportTitleBlock({ title }) {
-  return /* @__PURE__ */ jsxs24(Fragment10, { children: [
+  return /* @__PURE__ */ jsxs24(Fragment11, { children: [
     /* @__PURE__ */ jsx36("h1", { children: title ?? "Story Report" }),
     /* @__PURE__ */ jsx36(ReportSummary, {}),
     /* @__PURE__ */ jsx36(ReportMeta, {})
@@ -1909,7 +1926,7 @@ function Report(props) {
 
 // src/components/doc/MermaidView.tsx
 import { useEffect as useEffect3, useRef as useRef2, useState as useState4 } from "react";
-import { Fragment as Fragment11, jsx as jsx39, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx39, jsxs as jsxs27 } from "react/jsx-runtime";
 function prefersDark(el) {
   const themed = el?.closest("[data-theme]");
   if (themed?.dataset.theme === "dark") return true;
@@ -1979,7 +1996,7 @@ function MermaidView({ entry, load }) {
       )
     ] });
   }
-  return /* @__PURE__ */ jsxs27(Fragment11, { children: [
+  return /* @__PURE__ */ jsxs27(Fragment12, { children: [
     error ? /* @__PURE__ */ jsxs27(
       "p",
       {
@@ -2498,6 +2515,14 @@ var story_report_v1_default = {
         errorMessage: {
           type: "string"
         },
+        expected: {
+          type: "string",
+          description: "Serialized expected value of the failed assertion. Present only when the host framework reports one."
+        },
+        actual: {
+          type: "string",
+          description: "Serialized actual (observed) value of the failed assertion. Present only when the host framework reports one."
+        },
         mode: {
           $ref: "#/$defs/StepMode"
         },