Custom Body: Reintroduce support for turbo:reload

Add test coverage for a mismatch between current and new `<meta name="turbo-body">` elements in the respective `<head>` elements. Prior to this commit, the original version would never return `PageRenderer.shouldRender == false` because `Page.getBodyElement` never returned `null` (since it always fell back to the provided `HTMLElement` instance). After this commit, the `Page.getBodyElement` could return `null`, which is guarded against in `PageRenderer.renderElement`.
hotwired · Sep 14, 2022 · 98cde44 · 98cde44
1 parent 3151587
commit 98cde44
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 6 deletions.
diff --git a/src/core/drive/page_renderer.ts b/src/core/drive/page_renderer.ts
@@ -7,8 +7,8 @@ import { nextEventLoopTick } from "../../util"
 export class PageRenderer extends Renderer<HTMLBodyElement, PageSnapshot> {
   static renderElement(currentElement: HTMLBodyElement, newElement: HTMLBodyElement) {
     if (document.body && newElement instanceof HTMLBodyElement) {
-      const currentBody = PageRenderer.getBodyElement(currentElement)
-      const newBody = PageRenderer.getBodyElement(newElement)
+      const currentBody = PageRenderer.getBodyElement(currentElement) || currentElement
+      const newBody = PageRenderer.getBodyElement(newElement) || newElement
 
       currentBody.replaceWith(newBody)
     } else {
@@ -17,7 +17,7 @@ export class PageRenderer extends Renderer<HTMLBodyElement, PageSnapshot> {
   }
 
   get shouldRender() {
-    return this.newSnapshot.isVisitable && this.trackedElementsAreIdentical
+    return this.newSnapshot.isVisitable && this.trackedElementsAreIdentical && this.bodyElementMatches
   }
 
   get reloadReason(): ReloadReason {
@@ -32,6 +32,12 @@ export class PageRenderer extends Renderer<HTMLBodyElement, PageSnapshot> {
         reason: "tracked_element_mismatch",
       }
     }
+
+    if (!this.bodyElementMatches) {
+      return {
+        reason: "body_element_mismatch",
+      }
+    }
   }
 
   async prepareToRender() {
@@ -94,8 +100,12 @@ export class PageRenderer extends Renderer<HTMLBodyElement, PageSnapshot> {
     return bodyId ? `#${bodyId}` : "body"
   }
 
-  static getBodyElement(element: HTMLElement): HTMLElement {
-    return element.querySelector(this.bodySelector) || element
+  static getBodyElement(element: HTMLElement): HTMLElement | null {
+    if (element.matches(this.bodySelector)) {
+      return element
+    } else {
+      return element.querySelector(this.bodySelector)
+    }
   }
 
   async copyNewHeadStylesheetElements() {

diff --git a/src/tests/fixtures/drive_custom_body.html b/src/tests/fixtures/drive_custom_body.html
@@ -13,6 +13,7 @@ <h1>Drive (with custom body)</h1>
     <div id="app">
       <div>
         <a id="drive" href="/src/tests/fixtures/drive_custom_body_2.html">Drive enabled link</a>
+        <a id="mismatch" href="/src/tests/fixtures/drive_custom_body_3.html">Drive enabled link to page with mismatched custom body</a>
       </div>
 
       <p id="different-content">Drive 1</p>

diff --git a/src/tests/fixtures/drive_custom_body_3.html b/src/tests/fixtures/drive_custom_body_3.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="turbo-body" content="main">
+    <title>Drive (with custom body)</title>
+    <script src="/dist/turbo.es2017-umd.js" data-turbo-track="reload"></script>
+    <script src="/src/tests/fixtures/test.js"></script>
+  </head>
+  <body>
+    <main id="main">
+      <h1>Drive (with custom body 3)</h1>
+    </main>
+  </body>
+</html>
diff --git a/src/tests/functional/drive_custom_body_tests.ts b/src/tests/functional/drive_custom_body_tests.ts
@@ -1,6 +1,6 @@
 import { test } from "@playwright/test"
 import { assert } from "chai"
-import { nextEventNamed, pathname } from "../helpers/page"
+import { nextEventNamed, pathname, getFromLocalStorage, setLocalStorageFromEvent } from "../helpers/page"
 
 test.beforeEach(async ({ page }) => {
   await page.goto("/src/tests/fixtures/drive_custom_body.html")
@@ -28,3 +28,13 @@ test("test drive with a custom body element", async ({ page }) => {
   assert.equal(await page.textContent("h1"), "Drive (with custom body)")
   assert.equal(await page.textContent("#different-content"), "Drive 2")
 })
+
+test("test drive with mismatched custom body elements", async ({ page }) => {
+  await setLocalStorageFromEvent(page, "turbo:reload", "reloaded", "true")
+  await page.click("#mismatch")
+  await page.waitForEvent("load")
+
+  assert.equal(await page.textContent("h1"), "Drive (with custom body 3)")
+  assert.equal(await getFromLocalStorage(page, "reloaded"), "true", "dispatches turbo:reload event")
+  assert.equal(pathname(page.url()), "/src/tests/fixtures/drive_custom_body_3.html")
+})