From 578aa8d8aeb68636c8a58d7c9533440fa35bd914 Mon Sep 17 00:00:00 2001
From: Sean Doyle <sean.p.doyle24@gmail.com>
Date: Sun, 3 Jan 2021 11:25:54 -0500
Subject: [PATCH] Add test coverage for turbo-frame[disabled]

Support for the `[disabled]` attribute pre-dates this commit, but is
largely untested. Prior to [hotwired/turbo-site#32][] and
[hotwired/turbo-site#36][], there were no mentions of the attribute in
the Turbo [Handbook][] or [Reference][] documentation.

This commit adds functional test-level coverage for the existing
behavior. When an `<a>` or `<form>` element targets a `<turbo-frame
disabled>` element, Turbo skips intercepting and intervening, and
instead navigates the page.

Testing
---

In addition, to avoid conflating `[data-turbo="false"]` and
`<turbo-frame disabled>`, this commit also renames test and test fixture
mentions of "disabled" to more accurately reflect which manner of
skipping behavior is being tested.

[Handbook]: https://github.com/hotwired/turbo-site/blob/52d5e7f1dfc26ac7a6e01c6a715857ccf5ed5081/docs/handbook/03_frames.md
[Reference]: https://github.com/hotwired/turbo-site/blob/52d5e7f1dfc26ac7a6e01c6a715857ccf5ed5081/docs/reference/frames.md
[hotwired/turbo-site#32]: https://github.com/hotwired/turbo-site/pull/32
[hotwired/turbo-site#36]: https://github.com/hotwired/turbo-site/pull/36
---
 src/tests/fixtures/form.html                  |  8 +++++++-
 src/tests/fixtures/navigation.html            |  3 +++
 src/tests/functional/form_submission_tests.ts | 14 +++++++++++---
 src/tests/functional/navigation_tests.ts      |  7 +++++++
 4 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/tests/fixtures/form.html b/src/tests/fixtures/form.html
index 9b572c650..ae2a97824 100644
--- a/src/tests/fixtures/form.html
+++ b/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">
diff --git a/src/tests/fixtures/navigation.html b/src/tests/fixtures/navigation.html
index b706c0f7b..c5fffb668 100644
--- a/src/tests/fixtures/navigation.html
+++ b/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>
diff --git a/src/tests/functional/form_submission_tests.ts b/src/tests/functional/form_submission_tests.ts
index 147a6459c..fe90a07cb 100644
--- a/src/tests/functional/form_submission_tests.ts
+++ b/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]")
   }
diff --git a/src/tests/functional/navigation_tests.ts b/src/tests/functional/navigation_tests.ts
index fb267298b..1e5b7db37 100644
--- a/src/tests/functional/navigation_tests.ts
+++ b/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()