feat(eager frame): add test for check fetch eager frame count

hotwired · Jan 20, 2022 · 2afffb9 · 2afffb9
1 parent 6ba1181
commit 2afffb9
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 0 deletions.
diff --git a/src/tests/fixtures/frames.html b/src/tests/fixtures/frames.html
@@ -121,5 +121,9 @@ <h2>Frames: #nested-child</h2>
     <hr class="push-off-screen">
     <input id="below-the-fold-input">
     <a id="below-the-fold-link-frame-action" data-turbo-action="advance" data-turbo-frame="frame" href="/src/tests/fixtures/frames/frame.html">Navigate #frame</a>
+
+    <p>
+      <a id="link-to-eager-loaded-frame" href="/__turbo/redirect?path=/src/tests/fixtures/page_with_eager_frame.html">Eager-loaded frame after GET redirect</a>
+    </p>
   </body>
 </html>
diff --git a/src/tests/fixtures/frames/frame_for_eager.html b/src/tests/fixtures/frames/frame_for_eager.html
@@ -0,0 +1,3 @@
+<turbo-frame id="eager-loaded-frame" >
+  <h2>Eager-loaded frame: Loaded</h2>
+</turbo-frame>
diff --git a/src/tests/fixtures/page_with_eager_frame.html b/src/tests/fixtures/page_with_eager_frame.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html id="html" data-skip-event-details="turbo:before-render">
+  <head>
+    <meta charset="utf-8">
+    <title>Frame</title>
+    <script src="/dist/turbo.es2017-umd.js" data-turbo-track="reload"></script>
+    <script src="/src/tests/fixtures/test.js"></script>
+  </head>
+  <body>
+    <h1>Eager-loaded frame</h1>
+
+    <turbo-frame id="eager-loaded-frame" src="/src/tests/fixtures/frames/frame_for_eager.html" loading="eager">
+      <h2>Eager-loaded frame: NOT Loaded...</h2>
+    </turbo-frame>
+
+
+    <p>
+      <a href="/src/tests/fixtures/frames.html">Page /src/tests/fixtures/frames.html</a>
+    </p>
+  </body>
+</html>
diff --git a/src/tests/functional/frame_tests.ts b/src/tests/functional/frame_tests.ts
@@ -551,6 +551,24 @@ export class FrameTests extends TurboDriveTestCase {
     this.assert.ok(await this.nextEventOnTarget("frame", "turbo:before-fetch-response"))
   }
 
+  async "test navigating a eager frame with a link[method=get] that does not fetch eager frame twice"() {
+    await this.clickSelector("#link-to-eager-loaded-frame")
+
+    await this.nextBeat
+
+    const eventLogs = await this.eventLogChannel.read()
+    const fetchLogs = eventLogs.filter(([name, options]) => 
+      name == "turbo:before-fetch-request" && options?.url?.includes('/src/tests/fixtures/frames/frame_for_eager.html')
+    )
+    this.assert.equal(fetchLogs.length, 1)
+
+    const src = await this.attributeForSelector("#eager-loaded-frame", "src") ?? ""
+    this.assert.ok(src.includes("/src/tests/fixtures/frames/frame_for_eager.html"), "updates src attribute")
+    this.assert.equal(await (await this.querySelector("h1")).getVisibleText(), "Eager-loaded frame")
+    this.assert.equal(await (await this.querySelector("#eager-loaded-frame h2")).getVisibleText(), "Eager-loaded frame: Loaded")
+    this.assert.equal(await this.pathname, "/src/tests/fixtures/page_with_eager_frame.html")
+  }
+
   async withoutChangingEventListenersCount(callback: () => void) {
     const name = "eventListenersAttachedToDocument"
     const setup = () => {