Add test coverage for toggling data-turbo-preview

Closes hotwired#117 Closes hotwired#159 --- While the original implementation change for this commit was covered elsewhere, there is still value in the tests to add coverage for the behavior.
seanpdoyle · Apr 9, 2021 · 631649b · 631649b
1 parent 2f9a281
commit 631649b
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 1 deletion.
diff --git a/src/tests/fixtures/navigation.html b/src/tests/fixtures/navigation.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html id="document">
   <head>
     <meta charset="utf-8">
     <title>Turbo</title>

diff --git a/src/tests/fixtures/one.html b/src/tests/fixtures/one.html
@@ -10,6 +10,8 @@
   <body>
     <h1>One</h1>
 
+    <a id="navigation-link" href="/src/tests/fixtures/navigation.html">Back to Navigation</a>
+
     <!--styles ensure that the element will be scrolled to top when navigated to via an anchored link -->
     <a name="named-anchor"></a>
     <div id="element-id" style="margin-top: 1em; height: 200vh">An element with an ID</div>

diff --git a/src/tests/fixtures/test.js b/src/tests/fixtures/test.js
@@ -9,7 +9,15 @@
   function eventListener(event) {
     eventLogs.push([event.type, event.detail])
   }
+  window.mutationLogs = []
 
+  new MutationObserver((mutations) => {
+    for (const { attributeName, oldValue, target } of mutations.filter(({ type }) => type == "attributes")) {
+      if (target instanceof Element) {
+        mutationLogs.push([attributeName, target.id, target.getAttribute(attributeName)])
+      }
+    }
+  }).observe(document, { subtree: true, childList: true, attributes: true })
 })([
   "turbo:before-cache",
   "turbo:before-render",

diff --git a/src/tests/functional/navigation_tests.ts b/src/tests/functional/navigation_tests.ts
@@ -121,6 +121,17 @@ export class NavigationTests extends TurboDriveTestCase {
     this.assert.equal(await this.visitAction, "load")
   }
 
+  async "test following a link to a page that has been visited renders a preview the Snapshot cache"() {
+    await this.clickSelector("#same-origin-unannotated-link")
+    await this.nextBody
+    this.assert.notOk(await this.hasSelector("html[data-turbo-preview]"), "does not set data-turbo-preview on a visit")
+
+    await this.clickSelector("#navigation-link")
+    await this.nextBody
+    this.assert.equal(await this.nextAttributeMutationNamed("document", "data-turbo-preview"), "", "sets [data-turbo-preview] on the <html> element")
+    this.assert.equal(await this.nextAttributeMutationNamed("document", "data-turbo-preview"), null, "removes [data-turbo-preview] from the <html> element")
+  }
+
   async "test clicking the back button"() {
     this.clickSelector("#same-origin-unannotated-link")
     await this.nextBody

diff --git a/src/tests/helpers/turbo_drive_test_case.ts b/src/tests/helpers/turbo_drive_test_case.ts
@@ -3,9 +3,11 @@ import { RemoteChannel } from "./remote_channel"
 import { Element } from "@theintern/leadfoot"
 
 type EventLog = [string, any]
+type MutationLog = [string, string, string | null]
 
 export class TurboDriveTestCase extends FunctionalTestCase {
   eventLogChannel: RemoteChannel<EventLog> = new RemoteChannel(this.remote, "eventLogs")
+  mutationLogChannel: RemoteChannel<MutationLog> = new RemoteChannel(this.remote, "mutationLogs")
   lastBody?: Element
 
   async beforeTest() {
@@ -33,6 +35,15 @@ export class TurboDriveTestCase extends FunctionalTestCase {
     return record[1]
   }
 
+  async nextAttributeMutationNamed(elementId: string, attributeName: string): Promise<string | null> {
+    let record: MutationLog | undefined
+    while (!record) {
+      const records = await this.mutationLogChannel.read(1)
+      record = records.find(([name, id]) => id == elementId && name == attributeName)
+    }
+    return record[2]
+  }
+
   get nextBody(): Promise<Element> {
     return (async () => {
       let body