Add test coverage for submitting form[data-turbo-frame="_top"]

Closes [hotwired#901][] Add test coverage for submitting `<form>` elements with `[data-turbo-frame="_top"]`. Coverage includes both `<form>` elements outside of `<turbo-frame>` *and* `<form>` elements that are descendants of `<turbo-frame>` elements. [hotwired#901]: hotwired#901
seanpdoyle · Oct 12, 2023 · f79b050 · f79b050
1 parent c207f5b
commit f79b050
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 0 deletions.
diff --git a/src/tests/fixtures/form.html b/src/tests/fixtures/form.html
@@ -25,6 +25,10 @@ <h1>Form</h1>
         <input type="hidden" name="greeting" value="Hello from a redirect">
         <input id="standard-get-form-submit" type="submit" value="form[method=get]">
       </form>
+      <form action="/__turbo/redirect" method="post" class="redirect" data-turbo-frame="_top">
+        <input type="hidden" name="path" value="/src/tests/fixtures/one.html">
+        <button>form[data-turbo-frame=_top]</button>
+      </form>
       <form action="/__turbo/redirect" method="get" data-turbo-stream class="redirect">
         <input type="hidden" name="path" value="/src/tests/fixtures/form.html">
         <input type="hidden" name="greeting" value="Hello from a redirect">
@@ -246,6 +250,10 @@ <h2>Frame: Form</h2>
         <input type="hidden" name="path" value="/src/tests/fixtures/frames/form.html">
         <input type="submit">
       </form>
+      <form action="/__turbo/redirect" method="post" class="redirect" data-turbo-frame="_top">
+        <input type="hidden" name="path" value="/src/tests/fixtures/frames/form.html">
+        <button>#frame form[data-turbo-frame=_top]</button>
+      </form>
       <form action="/__turbo/messages" method="post" class="created">
         <input type="hidden" name="content" value="Hello!">
         <input type="submit" style="">

diff --git a/src/tests/fixtures/frames/form.html b/src/tests/fixtures/frames/form.html
@@ -7,6 +7,8 @@
     <script src="/src/tests/fixtures/test.js"></script>
   </head>
   <body>
+    <h1>Frames: Form</h1>
+
     <turbo-frame id="frame">
       <form action="/__turbo/messages" method="post" class="stream">
         <input type="hidden" name="content" value="Hello!">

diff --git a/src/tests/functional/form_submission_tests.js b/src/tests/functional/form_submission_tests.js
@@ -599,6 +599,25 @@ test("test submitter POST submission from submitter with data-turbo-frame", asyn
   assert.equal(await message.textContent(), "Frame redirected")
 })
 
+test("test form[data-turbo-frame=_top] submission", async ({ page }) => {
+  const form = await page.locator("#standard form.redirect[data-turbo-frame=_top]")
+
+  await form.locator("button").click()
+  await nextEventNamed(page, "turbo:load")
+
+  assert.equal(await page.textContent("h1"), "One")
+})
+
+test("test form[data-turbo-frame=_top] submission within frame", async ({ page }) => {
+  const frame = await page.locator("turbo-frame#frame")
+  const form = await frame.locator("form.redirect[data-turbo-frame=_top]")
+
+  await form.locator("button").click()
+  await nextEventNamed(page, "turbo:load")
+
+  assert.equal(await page.textContent("h1"), "Frames: Form")
+})
+
 test("test frame form GET submission from submitter with data-turbo-frame=_top", async ({ page }) => {
   await page.click("#frame form[method=get] [type=submit][data-turbo-frame=_top]")
   await nextBody(page)