refactor: Add stepName to snapshot type for easier debugging

Author: trillium

packages/test-case-component/src/generateHtml.ts

@@ -127,9 +127,6 @@ function getDuringSnapshot(data: DataFixture): ExtendedTestCaseSnapshot {
   return {
     ...base,
     ...data.ide,
-    finalStateMarkHelpers: {
-      thatMark: data?.finalState?.thatMark,
-      sourceMark: data?.finalState?.sourceMark
-    }
+    stepName: "during",
   };
 }

packages/test-case-component/src/helpers/decorations/createDecorations.ts

@@ -12,6 +12,7 @@ import { getIdeFlashDecorations } from "./getIdeFlashDecorations";
 import { getSelections } from "./getSelections";
 import { getSourceMarks } from "./getSourceMarks";
 import { getThatMarks } from "./getThatMarks";
+import type { StepNameType } from "../../types";
 
 export function createDecorations(
     options: {
@@ -22,13 +23,14 @@ export function createDecorations(
         selections?: SelectionPlainObject[]
         thatMark?: TargetPlainObject[]
         sourceMark?: TargetPlainObject[]
+        stepName?: StepNameType
         finalStateMarkHelpers?: {
             sourceMark?: TargetPlainObject[]
             thatMark?: TargetPlainObject[]
         }
     } = {}
 ): DecorationItem[][] {
-    const { marks, ide, lines, selections, thatMark, sourceMark } = options
+    const { marks, ide, lines, selections, thatMark, sourceMark, stepName } = options
 
     const decorations: DecorationItem[][] = [];
 

packages/test-case-component/src/helpers/decorations/getDecorations.ts

@@ -5,7 +5,7 @@
  * @param {Command} command - The command object for the test case.
  * @returns {Promise<DecorationItem[][]>} The computed decorations for the state.
  */
-import type { ExtendedTestCaseSnapshot } from "../../types";
+import type { ExtendedTestCaseSnapshot, StepNameType } from "../../types";
 import type { Command } from "@cursorless/common";
 import type { DecorationItem } from "shiki";
 import { createDecorations } from "../index";
@@ -20,6 +20,8 @@ export async function getDecorations({
     const { messages, flashes, highlights, finalStateMarkHelpers } = snapshot;
     const potentialMarks = snapshot.marks || {};
     const lines = snapshot.documentContents.split("\n");
+    // Use StepNameType for stepName, and provide a fallback if undefined
+    const stepName: StepNameType = snapshot.stepName ?? "error";
     const obj = {
         marks: potentialMarks,
         ide: { messages, flashes, highlights },
@@ -28,7 +30,7 @@ export async function getDecorations({
         selections: snapshot.selections,
         thatMark: snapshot.thatMark,
         sourceMark: snapshot.sourceMark,
-        finalStateMarkHelpers
+        stepName,
     };
     const decorations = createDecorations(obj);
     return decorations;

packages/test-case-component/src/types.ts

@@ -18,10 +18,9 @@ export type StepNameType = "before" | "during" | "after";
 
 export type ExtendedTestCaseSnapshot = TestCaseSnapshot &
   Partial<PlainSpyIDERecordedValues> & {
-    finalStateMarkHelpers?: {
-      thatMark?: TargetPlainObject[];
-      sourceMark?: TargetPlainObject[];
-    };
+    thatMark?: TargetPlainObject[];
+    sourceMark?: TargetPlainObject[];
+    stepName: StepNameType;
   };
 
 export type LineRange = { type: string; start: number; end: number };