Add tests for pausable Frame Rendering (#635)

* Add tests for pausable Frame Rendering Follow-up to #431 Support for the `turbo:before-frame-render` event relies on the same underlying infrastructure as the `turbo:before-render` event (i.e. the `Renderer` abstract class). As a result of re-using that abstraction, listeners for the `turbo:before-frame-render` event can also leverage the `detail.resume` function in the same way to handle asynchronous rendering. The changes made in [#431][] excluded test coverage for that behavior. This commit adds that coverage to guard against regressions in that behvaior. [#431]: #431 * Form Links: Copy `[data-turbo-frame]` from `<a>` to `<form>` Follow-up to #633 The flaky test outlined in [#633][] was "flaky", but not in the sense that was originally suspected. Somehow, it was presenting as a false negative, failing when we thought it should consistently pass. On further inspection, it was _passing when it should consistently fail_. This commit addresses the underlying issue by copying any `[data-turbo-frame]` attributes onto the `<form>` element from the `<a>` element that is clicked outside of the targeted `<turbo-frame>`. [#633]: #633
hotwired · Jul 18, 2022 · ddef79f · ddef79f
1 parent 87b0efb
commit ddef79f
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 12 deletions.
diff --git a/src/observers/form_link_interceptor.ts b/src/observers/form_link_interceptor.ts
@@ -38,6 +38,9 @@ export class FormLinkInterceptor implements LinkInterceptorDelegate {
     const method = link.getAttribute("data-turbo-method")
     if (method) form.setAttribute("method", method)
 
+    const turboFrame = link.getAttribute("data-turbo-frame")
+    if (turboFrame) form.setAttribute("data-turbo-frame", turboFrame)
+
     const turboConfirm = link.getAttribute("data-turbo-confirm")
     if (turboConfirm) form.setAttribute("data-turbo-confirm", turboConfirm)
 

diff --git a/src/tests/fixtures/pausable_rendering.html b/src/tests/fixtures/pausable_rendering.html
@@ -6,20 +6,26 @@
     <script src="/dist/turbo.es2017-umd.js" data-turbo-track="reload"></script>
     <script src="/src/tests/fixtures/test.js"></script>
     <script type="module">
-      addEventListener('turbo:before-render', function(event) {
-        event.preventDefault()
-        if (confirm('Continue rendering?')) {
-          event.detail.resume()
-        } else {
-          alert('Rendering aborted')
-        }
-      })
+      for (const event of ["turbo:before-render", "turbo:before-frame-render"]) {
+        addEventListener(event, function(event) {
+          event.preventDefault()
+          if (confirm("Continue rendering?")) {
+            event.detail.resume()
+          }
+        })
+      }
     </script>
   </head>
   <body>
     <section>
       <h1>Pausable Rendering</h1>
       <p><a id="link" href="/src/tests/fixtures/one.html">Link</a></p>
+
+      <turbo-frame id="hello">
+        <h2>Pausable Frame Rendering</h2>
+
+        <a id="frame-link" href="/src/tests/fixtures/frames/hello.html">#hello Frame Link</a>
+      </turbo-frame>
     </section>
   </body>
 </html>
diff --git a/src/tests/functional/pausable_rendering_tests.ts b/src/tests/functional/pausable_rendering_tests.ts
@@ -25,10 +25,26 @@ test("test aborts rendering", async ({ page }) => {
 
   firstDialog.dismiss()
 
-  const nextDialog = await page.waitForEvent("dialog")
+  assert.equal(await page.textContent("h1"), "Pausable Rendering")
+})
 
-  assert.strictEqual(nextDialog.message(), "Rendering aborted")
-  nextDialog.accept()
+test("test pauses and resumes rendering a Frame", async ({ page }) => {
+  page.on("dialog", (dialog) => {
+    assert.strictEqual(dialog.message(), "Continue rendering?")
+    dialog.accept()
+  })
 
-  assert.equal(await page.textContent("h1"), "Pausable Rendering")
+  await page.click("#frame-link")
+  await nextBeat()
+
+  assert.equal(await page.textContent("#hello h2"), "Hello from a frame")
+})
+
+test("test aborts rendering a Frame", async ({ page }) => {
+  page.on("dialog", (dialog) => {
+    assert.strictEqual(dialog.message(), "Continue rendering?")
+    dialog.dismiss()
+  })
+
+  assert.equal(await page.textContent("#hello h2"), "Pausable Frame Rendering")
 })