collavre 0.24.0 → 0.25.0

data/app/javascript/lib/__tests__/common_popup_bounds.test.js

@@ -41,9 +41,11 @@ describe('CommonPopup bounds clamping', () => {
         const popup = build({ popupWidth: 320, popupHeight: 400 })
         popup._boundsElement = boundsElement
         popup.updatePosition({ left: 200, bottom: 200 })
-        // inner box = dimension - 2*pad
+        // inner box = width - 2*pad
         expect(element.style.maxWidth).toBe('384px')
-        expect(element.style.maxHeight).toBe('584px')
+        // Height is capped to the space under the anchor rather than the whole
+        // box (700 - 8 - 204), so content arriving later cannot spill past it.
+        expect(element.style.maxHeight).toBe('488px')
     })
 
     test('falls back to viewport clamping when no bounds element is set', () => {
@@ -52,7 +54,10 @@ describe('CommonPopup bounds clamping', () => {
         // jsdom viewport defaults 1024x768; anchor at 0 → left clamps to padding 8, parent 0
         Object.defineProperty(element, 'offsetParent', { value: null, configurable: true })
         popup.updatePosition({ left: 0, bottom: 0 })
-        expect(element.style.maxHeight).toBe('')
+        // Space below the anchor inside the viewport: 768 - 8 - 4.
+        expect(element.style.maxHeight).toBe('756px')
         expect(element.style.left).toBe('8px')
+        // maxWidth stays a stylesheet concern when unbounded.
+        expect(element.style.maxWidth).toBe('')
     })
 })

data/app/javascript/lib/__tests__/common_popup_placement.test.js

@@ -0,0 +1,374 @@
+/**
+ * @jest-environment jsdom
+ */
+import { jest } from '@jest/globals'
+import CommonPopup, { elementAnchor } from '../common_popup'
+
+// Viewport-fit placement: a popup anchored to a caret sitting just above the
+// chat composer has almost no room below it. updatePosition must flip above the
+// anchor, cap the popup to the space it actually has, and re-run once async
+// content (the creative mini-tree) has replaced the "Loading…" placeholder.
+describe('CommonPopup viewport-fit placement', () => {
+    const VIEWPORT_WIDTH = 1024
+
+    let element
+
+    // offsetHeight is mutable so a test can simulate the popup growing after its
+    // async content lands, which is the whole point of reposition().
+    const build = ({ popupWidth = 320, popupHeight = 400 } = {}) => {
+        element = document.createElement('div')
+        Object.defineProperty(element, 'offsetParent', { value: null, configurable: true })
+        Object.defineProperty(element, 'offsetWidth', { get: () => popupWidth, configurable: true })
+        Object.defineProperty(element, 'offsetHeight', {
+            get: () => element._testHeight,
+            configurable: true,
+        })
+        element._testHeight = popupHeight
+        document.body.appendChild(element)
+        return new CommonPopup(element, { listElement: document.createElement('ul') })
+    }
+
+    const stubVisualViewport = (height) => {
+        const listeners = {}
+        window.visualViewport = {
+            offsetLeft: 0,
+            offsetTop: 0,
+            width: VIEWPORT_WIDTH,
+            height,
+            addEventListener: (type, fn) => { listeners[type] = fn },
+            removeEventListener: (type) => { delete listeners[type] },
+        }
+        return listeners
+    }
+
+    afterEach(() => {
+        document.body.innerHTML = ''
+        delete window.visualViewport
+    })
+
+    test('flips above the anchor when the popup does not fit below it', () => {
+        const popup = build({ popupHeight: 400 })
+        // Caret on the last line of a composer pinned to the bottom: only 48px
+        // of viewport under it, far less than the popup's 400px.
+        popup.updatePosition({ left: 200, top: 700, bottom: 720 })
+
+        // top = anchorTop - gap - height = 700 - 4 - 400
+        expect(element.style.top).toBe('296px')
+        // Space above = 700 - 4 - 8 = 688, and the popup fits in it untouched.
+        expect(element.style.maxHeight).toBe('688px')
+    })
+
+    test('stays below the anchor when there is room for the popup', () => {
+        const popup = build({ popupHeight: 400 })
+        popup.updatePosition({ left: 200, top: 80, bottom: 100 })
+
+        expect(element.style.top).toBe('104px')
+        // Capped to the space below (768 - 8 - 104) so later growth still fits.
+        expect(element.style.maxHeight).toBe('656px')
+    })
+
+    test('caps the popup to the larger side when it fits on neither', () => {
+        const popup = build({ popupHeight: 400 })
+        // spaceBelow = 768 - 8 - 564 = 196; spaceAbove = 360 - 4 - 8 = 348.
+        popup.updatePosition({ left: 200, top: 360, bottom: 560 })
+
+        expect(element.style.maxHeight).toBe('348px')
+        // Rendered height is now the cap, so the top edge sits at the padding.
+        expect(element.style.top).toBe('8px')
+    })
+
+    test('never shrinks the popup below a usable minimum', () => {
+        const popup = build({ popupHeight: 400 })
+        // Anchor pinned to the very bottom: nothing below, 8px above.
+        popup.updatePosition({ left: 200, top: 20, bottom: 760 })
+
+        expect(element.style.maxHeight).toBe('160px')
+    })
+
+    test('measures the popup unconstrained so a stale cap cannot stick', () => {
+        const popup = build({ popupHeight: 400 })
+        // A previous placement left a tiny cap behind.
+        element.style.maxHeight = '130px'
+        popup.updatePosition({ left: 200, top: 700, bottom: 720 })
+
+        // Had the 130px cap been read back as the popup's height, it would have
+        // "fit" below the caret and stayed pinned there.
+        expect(element.style.top).toBe('296px')
+    })
+
+    test('measures the visual viewport, not the layout viewport', () => {
+        // The on-screen keyboard covers the bottom 300px of a 768px window.
+        stubVisualViewport(468)
+        const popup = build({ popupHeight: 400 })
+        popup.updatePosition({ left: 200, top: 400, bottom: 420 })
+
+        // spaceBelow against the keyboard top = 468 - 8 - 424 = 36, so it flips;
+        // spaceAbove = 400 - 4 - 8 = 388, which becomes the cap.
+        expect(element.style.maxHeight).toBe('388px')
+        expect(element.style.top).toBe('8px')
+    })
+
+    describe('reposition after async content', () => {
+        let realRaf
+        let realCancelRaf
+
+        beforeEach(() => {
+            jest.useFakeTimers()
+            realRaf = window.requestAnimationFrame
+            realCancelRaf = window.cancelAnimationFrame
+            // Stubbed as a pair: the timer id doubles as the frame handle, so
+            // cancelAnimationFrame actually drops the pending callback the way
+            // the browser would. Stubbing only requestAnimationFrame would make
+            // cancellation silently no-op and hide regressions.
+            window.requestAnimationFrame = (cb) => setTimeout(cb, 0)
+            window.cancelAnimationFrame = (handle) => clearTimeout(handle)
+        })
+
+        afterEach(() => {
+            window.requestAnimationFrame = realRaf
+            window.cancelAnimationFrame = realCancelRaf
+            jest.useRealTimers()
+        })
+
+        const openAndSettle = (popup, anchorRect) => {
+            popup.showAt(anchorRect)
+            // showAt defers positioning by one animation frame.
+            jest.advanceTimersByTime(20)
+        }
+
+        test('re-places the popup once its content has grown', () => {
+            const popup = build({ popupHeight: 400 })
+            // Opens while still showing "Loading…": header + input only.
+            element._testHeight = 130
+            openAndSettle(popup, { left: 200, top: 700, bottom: 720 })
+            expect(element.style.top).toBe('566px')
+
+            // The mini-tree lands and the popup grows to its full height.
+            element._testHeight = 400
+            popup.reposition()
+
+            expect(element.style.top).toBe('296px')
+        })
+
+        test('keeps the popup above the anchor once flipped, even if it later shrinks', () => {
+            const popup = build({ popupHeight: 400 })
+            openAndSettle(popup, { left: 200, top: 700, bottom: 720 })
+            expect(element.style.top).toBe('296px')
+
+            // Collapsing every tree node shrinks the popup back to a size that
+            // would fit below — hopping across the caret would be jarring.
+            element._testHeight = 120
+            popup.reposition()
+
+            expect(element.style.top).toBe('576px')
+        })
+
+        test('does nothing when the popup is closed', () => {
+            const popup = build({ popupHeight: 400 })
+            popup.reposition()
+            expect(element.style.top).toBe('')
+        })
+
+        test('re-places on visual viewport resize while open, and unbinds on hide', () => {
+            const listeners = stubVisualViewport(768)
+            const popup = build({ popupHeight: 400 })
+            openAndSettle(popup, { left: 200, top: 300, bottom: 320 })
+            // spaceBelow = 768 - 8 - 324 = 436, enough for 400px.
+            expect(element.style.top).toBe('324px')
+            expect(element.style.maxHeight).toBe('436px')
+            expect(typeof listeners.resize).toBe('function')
+
+            // The on-screen keyboard opens and eats the bottom of the viewport.
+            window.visualViewport.height = 400
+            listeners.resize()
+
+            // spaceBelow = 400 - 8 - 324 = 68; spaceAbove = 300 - 4 - 8 = 288.
+            expect(element.style.maxHeight).toBe('288px')
+            expect(element.style.top).toBe('8px')
+
+            popup.hide()
+            expect(listeners.resize).toBeUndefined()
+        })
+
+        // The placement frame runs a tick after showAt, so a close that lands in
+        // between must not leave document/visualViewport holding this popup:
+        // hide()'s removeEventListener calls run before the additions would.
+        test('registers nothing when the popup is closed before its placement frame runs', () => {
+            const listeners = stubVisualViewport(768)
+            const addSpy = jest.spyOn(document, 'addEventListener')
+            const popup = build({ popupHeight: 400 })
+
+            popup.showAt({ left: 200, top: 300, bottom: 320 })
+            popup.hide()
+            jest.advanceTimersByTime(20)
+
+            expect(listeners.resize).toBeUndefined()
+            expect(addSpy.mock.calls.some(([type]) => type === 'mousedown' || type === 'touchstart')).toBe(false)
+            // The cancelled frame must not re-show what hide() closed.
+            expect(element.style.display).toBe('none')
+            addSpy.mockRestore()
+        })
+
+        // Turbo swaps the page without closing the popup: the element is gone
+        // from the document but still reads display:block.
+        test('registers nothing when the element is detached before its placement frame runs', () => {
+            const listeners = stubVisualViewport(768)
+            const addSpy = jest.spyOn(document, 'addEventListener')
+            const popup = build({ popupHeight: 400 })
+
+            popup.showAt({ left: 200, top: 300, bottom: 320 })
+            element.remove()
+            jest.advanceTimersByTime(20)
+
+            expect(listeners.resize).toBeUndefined()
+            expect(addSpy.mock.calls.some(([type]) => type === 'mousedown' || type === 'touchstart')).toBe(false)
+            addSpy.mockRestore()
+        })
+
+        // Reopening before the first frame fires must drop the superseded one,
+        // so the popup is never placed against the anchor it has abandoned.
+        test('supersedes a pending placement frame when reopened', () => {
+            const popup = build({ popupHeight: 400 })
+            const placeSpy = jest.spyOn(popup, 'updatePosition')
+
+            popup.showAt({ left: 200, top: 300, bottom: 320 })
+            popup.showAt({ left: 200, top: 700, bottom: 720 })
+            jest.advanceTimersByTime(20)
+
+            expect(placeSpy).toHaveBeenCalledTimes(1)
+            expect(placeSpy).toHaveBeenCalledWith({ left: 200, top: 700, bottom: 720 })
+            expect(element.style.top).toBe('296px')
+            placeSpy.mockRestore()
+        })
+    })
+
+    // A rect captured at open time stops describing the anchor as soon as the
+    // anchor moves, and the one event that reliably moves it is the same one
+    // that triggers a re-place: the on-screen keyboard shrinks the viewport and
+    // comments--presence pushes the composer up off the keyboard on that very
+    // resize. Callers that can re-measure pass a provider instead of a rect.
+    describe('live anchor providers', () => {
+        let realRaf
+        let realCancelRaf
+
+        beforeEach(() => {
+            jest.useFakeTimers()
+            realRaf = window.requestAnimationFrame
+            realCancelRaf = window.cancelAnimationFrame
+            window.requestAnimationFrame = (cb) => setTimeout(cb, 0)
+            window.cancelAnimationFrame = (handle) => clearTimeout(handle)
+        })
+
+        afterEach(() => {
+            window.requestAnimationFrame = realRaf
+            window.cancelAnimationFrame = realCancelRaf
+            jest.useRealTimers()
+        })
+
+        const openAndSettle = (popup, anchor) => {
+            popup.showAt(anchor)
+            jest.advanceTimersByTime(20)
+        }
+
+        test('re-measures the anchor on every reposition', () => {
+            const popup = build({ popupHeight: 300 })
+            let caret = { left: 200, top: 300, bottom: 320 }
+            openAndSettle(popup, () => caret)
+            expect(element.style.top).toBe('324px')
+
+            // The composer scrolled: the caret is 120px higher than at open.
+            caret = { left: 200, top: 180, bottom: 200 }
+            popup.reposition()
+
+            expect(element.style.top).toBe('204px')
+        })
+
+        test('follows the anchor the keyboard pushed up, not its opening rect', () => {
+            const listeners = stubVisualViewport(768)
+            const popup = build({ popupHeight: 300 })
+            // Caret on a composer pinned to the bottom of a full-height viewport.
+            let caret = { left: 200, top: 700, bottom: 720 }
+            openAndSettle(popup, () => caret)
+            expect(element.style.top).toBe('396px')
+
+            // The keyboard takes the bottom 368px. comments--presence lifts the
+            // composer clear of it on the same resize, so the caret rides up
+            // with it — its opening rect now sits *under* the keyboard.
+            window.visualViewport.height = 400
+            caret = { left: 200, top: 332, bottom: 352 }
+            listeners.resize()
+
+            // Flipped above the lifted caret: 332 - 4 - 300.
+            expect(element.style.top).toBe('28px')
+        })
+
+        test('keeps the last measured rect when the anchor disappears', () => {
+            const popup = build({ popupHeight: 300 })
+            let caret = { left: 200, top: 300, bottom: 320 }
+            openAndSettle(popup, () => caret)
+            expect(element.style.top).toBe('324px')
+
+            // Turbo tore the textarea out: nothing left to measure. Reading a
+            // detached element's rect would report all zeros and fling the
+            // popup into the top-left corner.
+            caret = null
+            popup.reposition()
+
+            expect(element.style.top).toBe('324px')
+        })
+
+        test('keeps the last measured rect when the provider throws', () => {
+            const popup = build({ popupHeight: 300 })
+            let broken = false
+            openAndSettle(popup, () => {
+                if (broken) throw new Error('anchor gone')
+                return { left: 200, top: 300, bottom: 320 }
+            })
+            expect(element.style.top).toBe('324px')
+
+            broken = true
+            expect(() => popup.reposition()).not.toThrow()
+            expect(element.style.top).toBe('324px')
+        })
+
+        test('drops the provider on hide so the next open cannot reuse it', () => {
+            const popup = build({ popupHeight: 300 })
+            const provider = jest.fn(() => ({ left: 200, top: 300, bottom: 320 }))
+            openAndSettle(popup, provider)
+            popup.hide()
+
+            const callsWhileOpen = provider.mock.calls.length
+            openAndSettle(popup, { left: 200, top: 100, bottom: 120 })
+            popup.reposition()
+
+            expect(provider).toHaveBeenCalledTimes(callsWhileOpen)
+            expect(element.style.top).toBe('124px')
+        })
+
+        describe('elementAnchor', () => {
+            test('measures the element live', () => {
+                const anchor = document.createElement('button')
+                document.body.appendChild(anchor)
+                anchor.getBoundingClientRect = () => ({ left: 10, top: 500, bottom: 540 })
+                const provider = elementAnchor(anchor)
+
+                expect(provider().top).toBe(500)
+                anchor.getBoundingClientRect = () => ({ left: 10, top: 200, bottom: 240 })
+                expect(provider().top).toBe(200)
+            })
+
+            test('returns nothing once the element has left the document', () => {
+                const anchor = document.createElement('button')
+                document.body.appendChild(anchor)
+                const provider = elementAnchor(anchor)
+                anchor.remove()
+
+                expect(provider()).toBeNull()
+            })
+
+            test('returns nothing when there is no element at all', () => {
+                expect(elementAnchor(null)()).toBeNull()
+            })
+        })
+    })
+})

data/app/javascript/lib/__tests__/common_popup_reshow.test.js

@@ -0,0 +1,131 @@
+/**
+ * @jest-environment jsdom
+ */
+import { jest } from '@jest/globals'
+import CommonPopup from '../common_popup'
+
+// Typeahead menus (command menu, mention menu) call showAt on every keystroke to
+// re-anchor a popup that is already on screen. showAt used to blank the element
+// to visibility:hidden and wait a frame before revealing it again, so the menu
+// blinked off and back on once per character typed.
+describe('CommonPopup re-show while already open', () => {
+    let element
+    let frames
+
+    const build = ({ popupHeight = 100 } = {}) => {
+        element = document.createElement('div')
+        Object.defineProperty(element, 'offsetParent', { value: null, configurable: true })
+        Object.defineProperty(element, 'offsetWidth', { get: () => 320, configurable: true })
+        Object.defineProperty(element, 'offsetHeight', { get: () => popupHeight, configurable: true })
+        document.body.appendChild(element)
+        return new CommonPopup(element, { listElement: document.createElement('ul') })
+    }
+
+    const runFrames = () => {
+        const pending = frames.splice(0)
+        pending.forEach((fn) => fn())
+    }
+
+    beforeEach(() => {
+        frames = []
+        jest.spyOn(window, 'requestAnimationFrame').mockImplementation((fn) => {
+            frames.push(fn)
+            return frames.length
+        })
+        jest.spyOn(window, 'cancelAnimationFrame').mockImplementation(() => { })
+        global.requestAnimationFrame = window.requestAnimationFrame
+        global.cancelAnimationFrame = window.cancelAnimationFrame
+    })
+
+    afterEach(() => {
+        jest.restoreAllMocks()
+        document.body.innerHTML = ''
+    })
+
+    test('the first open hides the popup for a frame while it is measured', () => {
+        const popup = build()
+        popup.showAt({ left: 10, top: 100, bottom: 120 })
+
+        expect(element.style.display).toBe('block')
+        expect(element.style.visibility).toBe('hidden')
+
+        runFrames()
+        expect(element.style.visibility).toBe('visible')
+    })
+
+    test('re-anchoring an open popup never blanks it', () => {
+        const popup = build()
+        popup.showAt({ left: 10, top: 100, bottom: 120 })
+        runFrames()
+
+        const seen = []
+        for (const left of [20, 30, 40, 50]) {
+            popup.showAt({ left, top: 100, bottom: 120 })
+            seen.push(element.style.visibility)
+        }
+
+        expect(seen).toEqual(['visible', 'visible', 'visible', 'visible'])
+        expect(element.style.display).toBe('block')
+    })
+
+    test('re-anchoring places the popup immediately instead of a frame late', () => {
+        const popup = build()
+        popup.showAt({ left: 10, top: 100, bottom: 120 })
+        runFrames()
+        expect(element.style.left).toBe('10px')
+
+        // No frame is run: the new position must already be applied.
+        popup.showAt({ left: 240, top: 100, bottom: 120 })
+        expect(element.style.left).toBe('240px')
+    })
+
+    test('a popup flipped above the caret stays above when re-anchored', () => {
+        // 400px popup with the caret pinned near the bottom of a 768px viewport:
+        // it cannot fit below, so the first placement flips it above.
+        const popup = build({ popupHeight: 400 })
+        window.visualViewport = {
+            offsetLeft: 0, offsetTop: 0, width: 1024, height: 768,
+            addEventListener: () => { }, removeEventListener: () => { },
+        }
+
+        popup.showAt({ left: 200, top: 700, bottom: 720 })
+        runFrames()
+        expect(popup._placedAbove).toBe(true)
+        const flippedTop = element.style.top
+
+        popup.showAt({ left: 210, top: 700, bottom: 720 })
+        expect(popup._placedAbove).toBe(true)
+        expect(element.style.top).toBe(flippedTop)
+
+        delete window.visualViewport
+    })
+
+    test('re-registers the outside-click listeners so a re-open cannot self-close', () => {
+        const addSpy = jest.spyOn(document, 'addEventListener')
+        const removeSpy = jest.spyOn(document, 'removeEventListener')
+        const popup = build()
+
+        popup.showAt({ left: 10, top: 100, bottom: 120 })
+        runFrames()
+        popup.showAt({ left: 20, top: 100, bottom: 120 })
+
+        expect(removeSpy).toHaveBeenCalledWith('mousedown', popup.handleOutsideClick)
+        runFrames()
+        expect(addSpy).toHaveBeenCalledWith('mousedown', popup.handleOutsideClick)
+        expect(popup.isOpen()).toBe(true)
+    })
+
+    test('hide() after a re-anchor still closes the popup', () => {
+        const popup = build()
+        popup.showAt({ left: 10, top: 100, bottom: 120 })
+        runFrames()
+        popup.showAt({ left: 20, top: 100, bottom: 120 })
+        popup.hide()
+
+        expect(element.style.display).toBe('none')
+        expect(popup.isOpen()).toBe(false)
+        // _placedAbove is recomputed by the next genuine open.
+        popup.showAt({ left: 10, top: 100, bottom: 120 })
+        expect(element.style.visibility).toBe('hidden')
+    })
+})

data/app/javascript/lib/__tests__/creative_link_prefetch.test.js

@@ -0,0 +1,46 @@
+/**
+ * @jest-environment jsdom
+ */
+import { isCreativeVisitNavigation } from "../creative_link_prefetch"
+
+function prefetch(link) {
+  const event = new Event("turbo:before-prefetch", { bubbles: true, cancelable: true })
+  link.dispatchEvent(event)
+  return event
+}
+
+afterEach(() => {
+  document.body.innerHTML = ""
+})
+
+test("prevents prefetching any same-origin Creative navigation link", () => {
+  const links = [ "/creatives/1", "/collavre/creatives/2", "/workspace/creatives?id=3" ].map((href) => {
+    const link = document.createElement("a")
+    link.href = href
+    document.body.appendChild(link)
+    return link
+  })
+
+  links.forEach((link) => expect(prefetch(link).defaultPrevented).toBe(true))
+})
+
+test("does not prevent prefetching unrelated or external links", () => {
+  const unrelated = document.createElement("a")
+  unrelated.href = "/users/1"
+  const external = document.createElement("a")
+  external.href = "https://example.com/creatives/1"
+  document.body.append(unrelated, external)
+
+  expect(prefetch(unrelated).defaultPrevented).toBe(false)
+  expect(prefetch(external).defaultPrevented).toBe(false)
+})
+
+test("identifies only Creative index and show routes as visit navigations", () => {
+  [ "/creatives", "/creatives.html", "/collavre/creatives/2" ].forEach((url) => {
+    expect(isCreativeVisitNavigation(url)).toBe(true)
+  })
+
+  ;[ "/creatives/2/comments/3/activity_log", "/creatives/next_last_visited_sequence" ].forEach((url) => {
+    expect(isCreativeVisitNavigation(url)).toBe(false)
+  })
+})

data/app/javascript/lib/__tests__/last_visited_creative.test.js

@@ -0,0 +1,87 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { jest } from '@jest/globals'
+
+const csrfFetch = jest.fn()
+const refreshCsrfToken = jest.fn()
+
+jest.unstable_mockModule('../api/csrf_fetch', () => ({
+  default: csrfFetch,
+  refreshCsrfToken,
+}))
+
+const {
+  prepareLastVisitedCreativeNavigation,
+  rememberLastVisitedCreative,
+} = await import('../last_visited_creative')
+
+describe('rememberLastVisitedCreative', () => {
+  beforeEach(() => {
+    csrfFetch.mockReset()
+    refreshCsrfToken.mockReset()
+  })
+
+  test('cancels the CSRF refresh when a newer visit supersedes a restored visit', async () => {
+    csrfFetch
+      .mockResolvedValue({ ok: true, json: async () => ({ sequence: 3 }) })
+      .mockResolvedValueOnce({ ok: true, json: async () => ({ sequence: 2 }) })
+      .mockResolvedValueOnce({ ok: false, status: 422 })
+    refreshCsrfToken.mockImplementationOnce(({ signal }) => new Promise((resolve) => {
+      signal.addEventListener('abort', resolve, { once: true })
+    }))
+
+    rememberLastVisitedCreative('/creatives', 1, 'restored-token')
+    await new Promise((resolve) => setTimeout(resolve, 0))
+    rememberLastVisitedCreative('/creatives', 2, 'newer-token')
+
+    expect(refreshCsrfToken).toHaveBeenCalledWith(expect.objectContaining({ signal: expect.any(AbortSignal) }))
+    expect(csrfFetch).toHaveBeenCalledWith('/creatives/next_last_visited_sequence', expect.objectContaining({ method: 'PATCH' }))
+  })
+
+  test('refreshes CSRF and retries sequence reservation before remembering a restored Creative', async () => {
+    csrfFetch
+      .mockResolvedValueOnce({ ok: false, status: 422 })
+      .mockResolvedValueOnce({ ok: true, json: async () => ({ sequence: 2 }) })
+      .mockResolvedValueOnce({ ok: true })
+
+    rememberLastVisitedCreative('/creatives', 1, 'restored-token')
+    await new Promise((resolve) => setTimeout(resolve, 0))
+
+    expect(refreshCsrfToken).toHaveBeenCalledWith(expect.objectContaining({ signal: expect.any(AbortSignal) }))
+    expect(csrfFetch).toHaveBeenNthCalledWith(1, '/creatives/next_last_visited_sequence', expect.objectContaining({ method: 'PATCH' }))
+    expect(csrfFetch).toHaveBeenNthCalledWith(2, '/creatives/next_last_visited_sequence', expect.objectContaining({ method: 'PATCH' }))
+    expect(csrfFetch).toHaveBeenNthCalledWith(3, '/creatives/1/remember_last_visited?visit_token=restored-token', expect.objectContaining({ method: 'PATCH' }))
+  })
+
+  test('does not reserve a sequence for an unrelated Turbo navigation', async () => {
+    const fetchOptions = { method: 'GET', headers: new Headers() }
+    const resume = jest.fn()
+    const event = new CustomEvent('turbo:before-fetch-request', {
+      cancelable: true,
+      detail: { fetchOptions, resume, url: '/users' },
+    })
+
+    await prepareLastVisitedCreativeNavigation(event, '/creatives', 'server-token')
+
+    expect(event.defaultPrevented).toBe(false)
+    expect(resume).not.toHaveBeenCalled()
+    expect(csrfFetch).not.toHaveBeenCalled()
+  })
+
+  test('does not reserve a sequence for a nested Creative Turbo frame request', async () => {
+    const fetchOptions = { method: 'GET', headers: new Headers() }
+    const resume = jest.fn()
+    const event = new CustomEvent('turbo:before-fetch-request', {
+      cancelable: true,
+      detail: { fetchOptions, resume, url: '/creatives/1/comments/2/activity_log' },
+    })
+
+    await prepareLastVisitedCreativeNavigation(event, '/creatives', 'server-token')
+
+    expect(event.defaultPrevented).toBe(false)
+    expect(resume).not.toHaveBeenCalled()
+    expect(csrfFetch).not.toHaveBeenCalled()
+  })
+})