feat: invalid step should stop flow

RBND-studio · Feb 28, 2024 · f66dfee · f66dfee
1 parent f6acd56
commit f66dfee
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 2 deletions.
diff --git a/workspaces/e2e/tests/branch/branch.html b/workspaces/e2e/tests/branch/branch.html
@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="/node_modules/@flows/js/css.min/flows.css" />
   </head>
   <body>
+    <button class="start-flow">Start flow</button>
     <button class="enter-1">Variant 1</button>
     <button class="enter-2">Variant 2</button>
     <div

diff --git a/workspaces/e2e/tests/branch/branch.spec.ts b/workspaces/e2e/tests/branch/branch.spec.ts
@@ -34,3 +34,20 @@ test("branch can have multiple steps", async ({ page }) => {
   await page.locator(".flows-continue").click();
   await expect(page.locator(".flows-tooltip")).toContainText("Last Step");
 });
+test("should reset flow when entering branch without targetBranch", async ({ page }) => {
+  await page.goto("/branch/branch.html?hideNext=false");
+  await expect(page.locator(".flows-tooltip")).toBeVisible();
+  await page.locator(".flows-continue").click();
+  await expect(page.locator(".flows-tooltip")).toBeHidden();
+  await page.locator(".start-flow").click();
+  await expect(page.locator(".flows-tooltip")).toBeVisible();
+});
+test("should reset flow when entering out of bound step", async ({ page }) => {
+  await page.goto("/branch/branch.html?lastStep=true");
+  await page.locator(".enter-1").click();
+  await page.locator(".flows-continue").click();
+  await page.locator(".flows-option").click();
+  await expect(page.locator(".flows-tooltip")).toBeHidden();
+  await page.locator(".start-flow").click();
+  await expect(page.locator(".flows-tooltip")).toBeVisible();
+});
diff --git a/workspaces/e2e/tests/branch/branch.ts b/workspaces/e2e/tests/branch/branch.ts
@@ -1,13 +1,14 @@
 import type { FlowSteps } from "@flows/js";
-import { init } from "@flows/js/core";
+import { init, startFlow } from "@flows/js/core";
 
 const lastStep = new URLSearchParams(window.location.search).get("lastStep") === "true";
+const hideNext = new URLSearchParams(window.location.search).get("hideNext") !== "false";
 
 const steps: FlowSteps = [
   {
     targetElement: ".target",
     title: "Hello",
-    hideNext: true,
+    hideNext,
     wait: [
       { clickElement: ".enter-1", targetBranch: 0 },
       { clickElement: ".enter-2", targetBranch: 1 },
@@ -43,6 +44,7 @@ if (lastStep)
   steps.push({
     targetElement: ".target",
     title: "Last Step",
+    footerActions: { right: [{ label: "Continue", targetBranch: undefined }] },
   });
 
 void init({
@@ -54,3 +56,7 @@ void init({
     },
   ],
 });
+
+document.querySelector(".start-flow")?.addEventListener("click", () => {
+  startFlow("flow");
+});
diff --git a/workspaces/js/src/core/flow-state.ts b/workspaces/js/src/core/flow-state.ts
@@ -1,6 +1,7 @@
 import type { DebugEvent, Flow, FlowStep, FlowStepIndex, TrackingEvent } from "../types";
 import { hash } from "../lib/hash";
 import { isModalStep, isTooltipStep } from "../lib/step-type";
+import { log } from "../lib/log";
 import { render } from "./render";
 import type { FlowsContext } from "./flows-context";
 
@@ -73,6 +74,10 @@ export class FlowState {
       ...props,
     });
   }
+
+  /**
+   * Called when entering a step or when the flow is started or recreated from local storage.
+   */
   enterStep(): this {
     const step = this.currentStep;
     if (step && isTooltipStep(step) && !this.tooltipErrorPromise)
@@ -83,6 +88,19 @@ export class FlowState {
         });
       }, 1000);
 
+    const isFork = Array.isArray(step);
+    if (isFork) {
+      log.error("Stopping flow: entered invalid step, make sure to use targetBranch");
+      // TODO: maybe emit event?
+      this.destroy();
+    }
+    const isOutOfBoundStep = !step && this.flow?._incompleteSteps !== true;
+    if (isOutOfBoundStep) {
+      log.error("Stopping flow: entered out of bound step");
+      // TODO: maybe emit event?
+      this.destroy();
+    }
+
     return this;
   }