fix(rest): enforce sequential lifecycle stages

Author: frobel0520

frontend/src/topics/rest/lab.tsx

@@ -14,7 +14,7 @@ import {
   type RestScenarioId,
   type RestTraceStageId,
 } from "./content";
-import { createInitialRestState, isRestLabComplete, runRestEvent } from "./simulator";
+import { createInitialRestState, isRestLabComplete, isRestStageUnlocked, runRestEvent } from "./simulator";
 
 type RestCodeMode = "annotated" | "source";
 
@@ -163,12 +163,13 @@ export function RestLab({ onComplete }: { onComplete?: () => void }) {
         {restTraceStages.map((stage, index) => {
           const isBlocked = index > terminalIndex;
           const isVisited = state.currentVisitedStageIds.includes(stage.id);
+          const isLocked = state.requestStarted && !isRestStageUnlocked(state, stage.id);
           return (
             <button
               className={`${state.activeStageId === stage.id ? "active" : ""} ${isVisited ? "visited" : ""}`}
               type="button"
               key={stage.id}
-              disabled={!state.requestStarted || isBlocked}
+              disabled={!state.requestStarted || isBlocked || isLocked}
               onClick={() => dispatch({ type: "inspect-stage", stageId: stage.id })}
             >
               <span>{stage.label}</span><b>{stage.actor}</b><small>{isBlocked ? "此 request 不執行" : stage.summary}</small>

frontend/src/topics/rest/simulator.test.ts

@@ -62,6 +62,19 @@ describe("REST simulator", () => {
     expect(result.state.databaseItems).toEqual(restDatabaseFixture);
   });
 
+  it("rejects future stages until the previous lifecycle stages are visited", () => {
+    const started = runRestEvents([{ type: "start-request" }]);
+    const skipped = runRestEvent(started, { type: "inspect-stage", stageId: "routing" });
+
+    expect(skipped.accepted).toBe(false);
+    expect(skipped.state.activeStageId).toBe("browser");
+    expect(skipped.state.currentVisitedStageIds).toEqual(["browser"]);
+
+    const next = runRestEvent(started, { type: "inspect-stage", stageId: "cors" });
+    expect(next.accepted).toBe(true);
+    expect(next.state.activeStageId).toBe("cors");
+  });
+
   it("completes only after all requests and lifecycle stages", () => {
     const events = restScenarios.flatMap((scenario) => completeScenarioEvents(scenario.id));
     const state = runRestEvents(events);

frontend/src/topics/rest/simulator.ts

@@ -38,8 +38,23 @@ function stageIndex(stageId: RestTraceStageId): number {
   return restTraceStages.findIndex((stage) => stage.id === stageId);
 }
 
-function isKnownStage(stageId: RestTraceStageId): boolean {
-  return stageIndex(stageId) >= 0;
+function highestVisitedStageIndex(state: RestLabState): number {
+  return state.currentVisitedStageIds.reduce(
+    (highestIndex, visitedStageId) => Math.max(highestIndex, stageIndex(visitedStageId)),
+    -1,
+  );
+}
+
+export function isRestStageUnlocked(state: RestLabState, stageId: RestTraceStageId): boolean {
+  const scenario = findRestScenario(state.selectedScenarioId);
+  const targetIndex = stageIndex(stageId);
+  const terminalIndex = stageIndex(scenario.terminalStageId);
+
+  if (!state.requestStarted || targetIndex < 0 || targetIndex > terminalIndex) {
+    return false;
+  }
+
+  return targetIndex <= highestVisitedStageIndex(state) + 1;
 }
 
 function isComplete(state: RestLabState): boolean {
@@ -62,7 +77,7 @@ function withStage(current: RestLabState, stageId: RestTraceStageId): RestLabSta
   const terminalIndex = stageIndex(scenario.terminalStageId);
   const nextIndex = stageIndex(stageId);
 
-  if (!state.requestStarted || !isKnownStage(stageId) || nextIndex > terminalIndex) {
+  if (!isRestStageUnlocked(state, stageId)) {
     return { ...state, lastMessage: "這個 stage 不會在目前 request 執行；請依 lifecycle 前進。" };
   }
 
@@ -150,8 +165,7 @@ export function runRestEvent(current: RestLabState, event: RestLabEvent): RestEv
   }
 
   if (event.type === "inspect-stage") {
-    const scenario = findRestScenario(state.selectedScenarioId);
-    const accepted = isKnownStage(event.stageId) && stageIndex(event.stageId) <= stageIndex(scenario.terminalStageId);
+    const accepted = isRestStageUnlocked(state, event.stageId);
     return { state: withStage(state, event.stageId), accepted };
   }