Add test coverage for turbo-frame[busy]

During the request lifecycle, `<turbo-frame>` elements will toggle the
`[busy]` boolean attribute to true when the request starts, and then
remove it when the request ends.

This commit adds functional test coverage for that behavior.

src/core/frames/frame_controller.ts

@@ -158,7 +158,8 @@ export class FrameController implements AppearanceObserverDelegate, FetchRequest
   // Form submission delegate
 
   formSubmissionStarted(formSubmission: FormSubmission) {
-
+    const frame = this.findFrameElement(formSubmission.formElement)
+    frame.setAttribute("busy", "")
   }
 
   formSubmissionSucceededWithResponse(formSubmission: FormSubmission, response: FetchResponse) {
@@ -175,7 +176,8 @@ export class FrameController implements AppearanceObserverDelegate, FetchRequest
   }
 
   formSubmissionFinished(formSubmission: FormSubmission) {
-
+    const frame = this.findFrameElement(formSubmission.formElement)
+    frame.removeAttribute("busy")
   }
 
   // View delegate

src/tests/fixtures/form.html

@@ -111,10 +111,15 @@
     </div>
     <hr>
     <div id="targets-frame">
-      <form action="/__turbo/redirect" method="post" data-turbo-frame="frame">
+      <form action="/__turbo/redirect" method="post" data-turbo-frame="frame" class="one">
         <input type="hidden" name="path" value="/src/tests/fixtures/one.html">
         <button type="submit">Submit</button>
       </form>
+
+      <form action="/__turbo/redirect" method="post" data-turbo-frame="frame" class="frame">
+        <input type="hidden" name="path" value="/src/tests/fixtures/frames/frame.html">
+        <button type="submit">Submit</button>
+      </form>
     </div>
     <turbo-frame id="frame">
       <h2>Frame: Form</h2>

src/tests/functional/form_submission_tests.ts

@@ -163,6 +163,26 @@ export class FormSubmissionTests extends TurboDriveTestCase {
     this.assert.equal(await this.pathname, "/src/tests/fixtures/form.html")
   }
 
+  async "test frame form submission toggles the ancestor frame's [busy] attribute"() {
+    this.observeAttributeChanges("frame", "busy")
+    await this.clickSelector("#frame form.redirect input[type=submit]")
+    await this.nextBeat
+
+    this.assert.ok(await this.hasSelector("turbo-frame[id=frame][data-was-busy=true]"))
+    this.assert.notOk(await this.hasSelector("turbo-frame[id=frame][busy]"))
+  }
+
+  async "test frame form submission toggles the target frame's [busy] attribute"() {
+    this.observeAttributeChanges("frame", "busy")
+    await this.clickSelector('#targets-frame form.frame [type="submit"]')
+    await this.nextBeat
+
+    const title = await this.querySelector("#frame h2")
+    this.assert.equal(await title.getVisibleText(), "Frame: Loaded")
+    this.assert.ok(await this.hasSelector("turbo-frame[id=frame][data-was-busy=true]"))
+    this.assert.notOk(await this.hasSelector("turbo-frame[id=frame][busy]"))
+  }
+
   async "test frame form submission with empty created response"() {
     const htmlBefore = await this.outerHTMLForSelector("#frame")
     const button = await this.querySelector("#frame form.created input[type=submit]")
@@ -254,7 +274,7 @@ export class FormSubmissionTests extends TurboDriveTestCase {
 
   async "test form submission targets disabled frame"() {
     this.remote.execute(() => document.getElementById("frame")?.setAttribute("disabled", ""))
-    await this.clickSelector('#targets-frame [type="submit"]')
+    await this.clickSelector('#targets-frame form.one [type="submit"]')
     await this.nextBody
 
     this.assert.equal(await this.pathname, "/src/tests/fixtures/one.html")

src/tests/functional/frame_tests.ts

@@ -5,6 +5,15 @@ export class FrameTests extends FunctionalTestCase {
     await this.goToLocation("/src/tests/fixtures/frames.html")
   }
 
+  async "test following a link driving a frame toggles the [busy] attribute"() {
+    await this.observeAttributeChanges("frame", "busy")
+    await this.clickSelector("#hello a")
+    await this.nextBeat
+
+    this.assert.ok(await this.hasSelector("turbo-frame[id=frame][data-was-busy=true]"))
+    this.assert.notOk(await this.hasSelector("turbo-frame[id=frame][busy]"))
+  }
+
   async "test following a link to a page without a matching frame results in an empty frame"() {
     await this.clickSelector("#missing a")
     await this.nextBeat

src/tests/helpers/functional_test_case.ts

@@ -62,6 +62,26 @@ export class FunctionalTestCase extends InternTestCase {
     return offset > -1 && offset < 1
   }
 
+  async observeAttributeChanges(elementId: string, attribute: string) {
+    await this.remote.execute((id: string, attributeName: string) => {
+      const element = document.getElementById(id)
+
+      if (element) {
+        new MutationObserver((mutations) => {
+          for (const { target } of mutations) {
+            if (target instanceof HTMLElement) {
+              const value = target.getAttribute(attributeName)
+              const booleanValue = value == "" || value == "true"
+              if (booleanValue) {
+                target.setAttribute(`data-was-${attributeName}`, booleanValue.toString())
+              }
+            }
+          }
+        }).observe(element, { attributeFilter: [attributeName] })
+      }
+    }, [elementId, attribute])
+  }
+
   get nextBeat(): Promise<void> {
     return new Promise(resolve => setTimeout(resolve, 100))
   }