Recursively prepare fetch headers

Closes hotwired#86 Recursively walk the tree of dependent FetchRequestDelegates so that they all have an opportunity to modify the fetch request headers. Testing adds listeners for `turbo:before-fetch-request` and `turbo:before-fetch-response` so that the event logs can drain. Co-authored-by: tleish <[email protected]>
seanpdoyle · Feb 7, 2021 · 3186c35 · 3186c35
1 parent 57a118e
commit 3186c35
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 4 deletions.
diff --git a/src/http/fetch_request.ts b/src/http/fetch_request.ts
@@ -118,8 +118,12 @@ export class FetchRequest {
 
   get headers() {
     const headers = { ...this.defaultHeaders }
-    if (typeof this.delegate.prepareHeadersForRequest == "function") {
-      this.delegate.prepareHeadersForRequest(headers, this)
+
+    let fetchRequest: any = this;
+    while(fetchRequest = fetchRequest.delegate) {
+      if (typeof fetchRequest.prepareHeadersForRequest == "function") {
+        fetchRequest.prepareHeadersForRequest(headers, this);
+      }
     }
     return headers
   }

diff --git a/src/tests/fixtures/test.js b/src/tests/fixtures/test.js
@@ -16,6 +16,7 @@
   "turbo:before-visit",
   "turbo:load",
   "turbo:render",
-  "turbo:request-end",
-  "turbo:visit"
+  "turbo:visit",
+  "turbo:before-fetch-request",
+  "turbo:before-fetch-response",
 ])
diff --git a/src/tests/functional/form_submission_tests.ts b/src/tests/functional/form_submission_tests.ts
@@ -183,6 +183,14 @@ export class FormSubmissionTests extends TurboDriveTestCase {
     this.assert.equal(htmlAfter, htmlBefore)
   }
 
+  async "test frame form submission within a frame submits the Turbo-Frame header"() {
+    await this.clickSelector("#frame form.redirect input[type=submit]")
+
+    const { fetchOptions } = await this.nextEventNamed("turbo:before-fetch-request")
+
+    this.assert.ok(fetchOptions.headers["Turbo-Frame"], "submits with the Turbo-Frame header")
+  }
+
   async "test invalid frame form submission with unprocessable entity status"() {
     await this.clickSelector("#frame form.unprocessable_entity input[type=submit]")
     await this.nextBeat
@@ -260,6 +268,14 @@ export class FormSubmissionTests extends TurboDriveTestCase {
     this.assert.equal(await this.pathname, "/src/tests/fixtures/one.html")
   }
 
+  async "test form submission targeting a frame submits the Turbo-Frame header"() {
+    await this.clickSelector('#targets-frame [type="submit"]')
+
+    const { fetchOptions } = await this.nextEventNamed("turbo:before-fetch-request")
+
+    this.assert.ok(fetchOptions.headers["Turbo-Frame"], "submits with the Turbo-Frame header")
+  }
+
   get formSubmitted(): Promise<boolean> {
     return this.hasSelector("html[data-form-submitted]")
   }