Merge pull request #67 from hotwired/turbo-frame-disabled

Add test coverage for turbo-frame[disabled]

src/tests/fixtures/form.html

@@ -83,7 +83,7 @@
       </form>
     </div>
     <hr>
-    <div id="disabled">
+    <div id="turbo-false">
       <form action="/__turbo/redirect" method="post" data-turbo="false">
         <input type="hidden" name="path" value="/src/tests/fixtures/one.html">
         <input type="submit">
@@ -110,6 +110,12 @@
       </dialog>
     </div>
     <hr>
+    <div id="targets-frame">
+      <form action="/__turbo/redirect" method="post" data-turbo-frame="frame">
+        <input type="hidden" name="path" value="/src/tests/fixtures/one.html">
+        <button type="submit">Submit</button>
+      </form>
+    </div>
     <turbo-frame id="frame">
       <h2>Frame: Form</h2>
       <form action="/__turbo/redirect" method="post" class="redirect">

src/tests/fixtures/navigation.html

@@ -21,6 +21,9 @@ <h1>Navigation</h1>
       <p><a id="same-origin-download-link" href="/intentionally_missing_fake_download.html" download="x.html">Same-origin download link</a></p>
       <svg width="600" height="100" viewbox="-300 -50 600 100"><text><a id="same-origin-link-inside-svg-element" href="/src/tests/fixtures/one.html">Same-origin link inside SVG element</a></text></svg>
       <svg width="600" height="100" viewbox="-300 -50 600 100"><text><a id="cross-origin-link-inside-svg-element" href="about:blank">Cross-origin link inside SVG element</a></text></svg>
+      <p><a id="link-to-disabled-frame" href="/src/tests/fixtures/frames/hello.html" data-turbo-frame="hello">Disabled turbo-frame</a></p>
     </section>
+
+    <turbo-frame id="hello" disabled></turbo-frame>
   </body>
 </html>

src/tests/functional/form_submission_tests.ts

@@ -223,15 +223,15 @@ export class FormSubmissionTests extends TurboDriveTestCase {
   }
 
   async "test form submission with Turbo disabled on the form"() {
-    await this.clickSelector('#disabled form[data-turbo="false"] input[type=submit]')
+    await this.clickSelector('#turbo-false form[data-turbo="false"] input[type=submit]')
     await this.nextBody
     await this.querySelector("#element-id")
 
     this.assert.notOk(await this.formSubmitted)
   }
 
-  async "test form submission with Turbo disabled on the submitter"() {
-    await this.clickSelector('#disabled form:not([data-turbo]) input[data-turbo="false"]')
+  async "test form submission with [data-turbo=false] on the submitter"() {
+    await this.clickSelector('#turbo-false form:not([data-turbo]) input[data-turbo="false"]')
     await this.nextBody
     await this.querySelector("#element-id")
 
@@ -252,6 +252,14 @@ export class FormSubmissionTests extends TurboDriveTestCase {
     this.assert.notOk(await this.formSubmitted)
   }
 
+  async "test form submission targets disabled frame"() {
+    this.remote.execute(() => document.getElementById("frame")?.setAttribute("disabled", ""))
+    await this.clickSelector('#targets-frame [type="submit"]')
+    await this.nextBody
+
+    this.assert.equal(await this.pathname, "/src/tests/fixtures/one.html")
+  }
+
   get formSubmitted(): Promise<boolean> {
     return this.hasSelector("html[data-form-submitted]")
   }

src/tests/functional/navigation_tests.ts

@@ -116,6 +116,13 @@ export class NavigationTests extends TurboDriveTestCase {
     this.assert.equal(await this.pathname, "/src/tests/fixtures/one.html")
     this.assert.equal(await this.visitAction, "restore")
   }
+
+  async "test link targeting a disabled turbo-frame navigates the page"() {
+    await this.clickSelector("#link-to-disabled-frame")
+    await this.nextBody
+
+    this.assert.equal(await this.pathname, "/src/tests/fixtures/frames/hello.html")
+  }
 }
 
 NavigationTests.registerSuite()