Add tests for pausable Frame Rendering

Follow-up to hotwired#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 [hotwired#431][] excluded test coverage for that behavior. This commit adds that coverage to guard against regressions in that behvaior. [hotwired#431]: hotwired#431
seanpdoyle · Jul 18, 2022 · 59c9520 · 59c9520
1 parent 837e977
commit 59c9520
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 12 deletions.
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")
 })