Prevent Refresh from interrupting ongoing Visit

Closes [hotwired#1209]

Defers the `Session.refresh` calls while handling `<turbo-stream
action="refresh">` elements if there is a `Visit` that's already
initiated and being handled by the `Navigator`.

[hotwired#1209]: hotwired#1209

src/core/drive/navigator.js

@@ -125,6 +125,7 @@ export class Navigator {
 
   visitCompleted(visit) {
     this.delegate.visitCompleted(visit)
+    this.stop()
   }
 
   locationWithActionIsSamePage(location, action) {

src/core/session.js

@@ -109,7 +109,7 @@ export class Session {
 
   refresh(url, requestId) {
     const isRecentRequest = requestId && this.recentRequests.has(requestId)
-    if (!isRecentRequest) {
+    if (!isRecentRequest && !this.navigator.currentVisit) {
       this.visit(url, { action: "replace", shouldCacheSnapshot: false })
     }
   }

src/tests/fixtures/page_refresh.html

@@ -81,6 +81,7 @@
     <h1 id="title">Page to be refreshed</h1>
 
     <a href="/src/tests/fixtures/page_refresh.html" id="reload-link">Reload</a>
+    <a href="/__turbo/delayed_response" id="delayed_link">Navigate with delayed response</a>
 
     <turbo-frame id="refresh-morph" src="/src/tests/fixtures/frame_refresh_morph.html" refresh="morph">
       <h2>Frame to be morphed</h2>

src/tests/fixtures/test.js

@@ -91,6 +91,10 @@
   "turbo:reload"
 ])
 
+window.visitLogs = []
+
+addEventListener("turbo:visit", ({ detail }) => window.visitLogs.push(detail))
+
 customElements.define(
   "custom-link-element",
   class extends HTMLElement {

src/tests/functional/page_refresh_tests.js

@@ -8,7 +8,8 @@ import {
   nextEventOnTarget,
   noNextEventOnTarget,
   noNextEventNamed,
-  getSearchParam
+  getSearchParam,
+  refreshWithStream
 } from "../helpers/page"
 
 test("renders a page refresh with morphing", async ({ page }) => {
@@ -26,16 +27,32 @@ test("async page refresh with turbo-stream", async ({ page }) => {
 
   await page.evaluate(() => document.querySelector("#title").innerText = "Updated")
   await expect(page.locator("#title")).toHaveText("Updated")
-
-  await page.evaluate(() => {
-    document.body.insertAdjacentHTML("beforeend", `<turbo-stream action="refresh"></turbo-stream>`)
-  })
+  await refreshWithStream(page)
 
   await expect(page.locator("#title")).not.toHaveText("Updated")
   await expect(page.locator("#title")).toHaveText("Page to be refreshed")
   expect(await noNextEventNamed(page, "turbo:before-cache")).toBeTruthy()
 })
 
+test("async page refresh with turbo-stream sequentially initiate Visits", async ({ page }) => {
+  await page.goto("/src/tests/fixtures/page_refresh.html")
+  await refreshWithStream(page)
+  await nextEventNamed(page, "turbo:morph")
+  await nextEventNamed(page, "turbo:load")
+
+  await refreshWithStream(page)
+  await nextEventNamed(page, "turbo:morph")
+  await nextEventNamed(page, "turbo:load")
+})
+
+test("async page refresh with turbo-stream does not interrupt an initiated Visit", async ({ page }) => {
+  await page.goto("/src/tests/fixtures/page_refresh.html")
+  await page.click("#delayed_link")
+  await refreshWithStream(page)
+
+  await expect(page.locator("h1")).toHaveText("One")
+})
+
 test("dispatches a turbo:before-morph-element and turbo:morph-element event for each morphed element", async ({ page }) => {
   await page.goto("/src/tests/fixtures/page_refresh.html")
   await page.fill("#form-text", "Morph me")

src/tests/helpers/page.js

@@ -226,6 +226,10 @@ export function readMutationLogs(page, length) {
   return readArray(page, "mutationLogs", length)
 }
 
+export function refreshWithStream(page) {
+  return page.evaluate(() => document.body.insertAdjacentHTML("beforeend", `<turbo-stream action="refresh"></turbo-stream>`))
+}
+
 export function search(url) {
   const { search } = new URL(url)
 
@@ -284,8 +288,10 @@ export function textContent(page, html) {
 export function visitAction(page) {
   return page.evaluate(() => {
     try {
-      return window.Turbo.navigator.currentVisit.action
-    } catch (error) {
+      const lastVisit = window.visitLogs[window.visitLogs.length - 1]
+
+      return lastVisit.action
+    } catch {
       return "load"
     }
   })