react-experiment: fix tasks being skipped when onTaskCompleted is cal…

…led multiple times (#209)

* react-experiment: prevent completing a task twice

* react-experiment: multiple onTaskCompleted test

* changest

.changeset/large-ties-explain.md

@@ -0,0 +1,5 @@
+---
+'@lightmill/react-experiment': patch
+---
+
+Fix tasks being skipped when onTaskCompleted is called several times.

packages/react-experiment/__tests__/run.test.tsx

@@ -276,4 +276,51 @@ describe('run', () => {
       );
     }).toThrow('Could not find task to resume after');
   });
+
+  it('throws an error if the same task is completed multiple times', async () => {
+    const wrapper = vi.fn(
+      (f: () => void, { shouldFail }: { shouldFail: boolean }) => {
+        if (shouldFail) {
+          try {
+            expect(() => f()).toThrowErrorMatchingInlineSnapshot(
+              `[Error: Task already completed]`,
+            );
+          } catch (e) {}
+        } else {
+          f();
+        }
+      },
+    );
+    const BadTask = () => {
+      let { onTaskCompleted } = useTask('bad');
+      return (
+        <div>
+          <h1>Bad Task</h1>
+          <button
+            onClick={() => {
+              wrapper(onTaskCompleted, { shouldFail: false });
+              wrapper(onTaskCompleted, { shouldFail: true });
+            }}
+          >
+            Complete
+          </button>
+        </div>
+      );
+    };
+    let config = {
+      tasks: {
+        bad: <BadTask />,
+        ok: <Task type="ok" dataProp="prop" />,
+      },
+    };
+    render(
+      <Run
+        elements={config}
+        timeline={[{ type: 'bad' }, { type: 'ok', prop: 'hello' }]}
+      />,
+    );
+    expect(screen.getByRole('heading')).toHaveTextContent('Bad Task');
+    fireEvent.click(screen.getByRole('button'));
+    expect(wrapper).toHaveBeenCalledTimes(2);
+  });
 });

packages/react-experiment/src/useManagedTimeline.ts

@@ -52,11 +52,14 @@ export default function useManagedTimeline<Task extends { type: string }>(
           runner.completeTask();
           return;
         }
+        let hasBeenCompleted = false;
         setState({
           status: 'running',
           task,
           onTaskCompleted() {
+            if (hasBeenCompleted) throw new Error('Task already completed');
             runner.completeTask();
+            hasBeenCompleted = true;
           },
         });
         optionsRef.current.onTaskStarted?.(task);