@carlonicora/nextjs-jsonapi 6.13.0 → 6.13.1

package/src/features/onboarding/contexts/OnboardingContext.spec.tsx

@@ -20,6 +20,7 @@ const driverMock = vi.hoisted(() => {
     movePrevious: vi.fn(),
     moveTo: vi.fn(),
     destroy: vi.fn(),
+    isActive: vi.fn(() => true),
   };
   const state: { config?: Hooks } = {};
   const driver = vi.fn((config: Hooks) => {
@@ -53,7 +54,8 @@ describe("OnboardingProvider on driver.js", () => {
     driverMock.driver.mockClear();
     driverMock.instance.drive.mockClear();
     driverMock.instance.destroy.mockClear();
-    driverMock.instance.moveNext.mockClear();
+    driverMock.instance.moveNext.mockReset();
+    driverMock.instance.isActive.mockImplementation(() => true);
     driverMock.state.config = undefined;
   });
 
@@ -167,6 +169,45 @@ describe("OnboardingProvider on driver.js", () => {
     expect(onTourEnd).toHaveBeenCalledTimes(1);
   });
 
+  it("ends the tour when Next finds every remaining step's target missing", () => {
+    /* driver.js skips missing targets and, when none is left, destroys itself without
+       calling onDestroyed: without this the tour stayed "active" with no card on screen. */
+    const { wrapper, onTourEnd } = wrap();
+    const { result } = renderHook(() => useOnboarding(), { wrapper });
+    act(() => result.current.startTour("t", steps));
+    const config = driverMock.state.config!;
+    const popoverWrapper = document.createElement("div");
+    act(() => {
+      config.steps[0].onHighlightStarted?.();
+      config.steps[0].popover.onPopoverRender({ wrapper: popoverWrapper });
+    });
+    driverMock.instance.moveNext.mockImplementation(() => driverMock.instance.isActive.mockImplementation(() => false));
+
+    const next = Array.from(popoverWrapper.querySelectorAll("button")).find((b) => b.textContent === "Next")!;
+    act(() => next.click());
+
+    expect(driverMock.instance.moveNext).toHaveBeenCalled();
+    expect(result.current.isTourActive).toBe(false);
+    expect(result.current.activeTourId).toBeNull();
+    expect(onTourEnd).toHaveBeenCalledWith("t", "dismissed");
+  });
+
+  it("keeps the tour when Next moves to a step that is shown", () => {
+    const { wrapper, onTourEnd } = wrap();
+    const { result } = renderHook(() => useOnboarding(), { wrapper });
+    act(() => result.current.startTour("t", steps));
+    const config = driverMock.state.config!;
+    const popoverWrapper = document.createElement("div");
+    act(() => {
+      config.steps[0].onHighlightStarted?.();
+      config.steps[0].popover.onPopoverRender({ wrapper: popoverWrapper });
+    });
+    const next = Array.from(popoverWrapper.querySelectorAll("button")).find((b) => b.textContent === "Next")!;
+    act(() => next.click());
+    expect(result.current.isTourActive).toBe(true);
+    expect(onTourEnd).not.toHaveBeenCalled();
+  });
+
   it("reports 'dismissed' when driver is destroyed without a card action", () => {
     const { wrapper, onTourEnd } = wrap();
     const { result } = renderHook(() => useOnboarding(), { wrapper });

package/src/features/onboarding/contexts/OnboardingContext.tsx

@@ -147,7 +147,17 @@ export function OnboardingProvider({
 
       const move = (direction: "next" | "previous", from: number) => {
         const target = tourSteps[direction === "next" ? from + 1 : from - 1];
-        const go = () => (direction === "next" ? driverRef.current?.moveNext() : driverRef.current?.movePrevious());
+        const go = () => {
+          const instance = driverRef.current;
+          if (!instance) return;
+          if (direction === "next") instance.moveNext();
+          else instance.movePrevious();
+          /* driver.js skips steps whose target is missing (skipMissingElement); when every
+             step left is missing it destroys itself without calling onDestroyed (it only
+             does once its 400ms transition has run). The tour is then over: tear it down, as
+             "dismissed" because the user saw none of the remaining steps. */
+          if (driverRef.current === instance && !instance.isActive()) teardown("dismissed");
+        };
         if (target?.showDelay) setTimeout(go, target.showDelay);
         else go();
       };