Render 422 Response HTML

Related to hotwired/turbo-rails#12 Related to hotwired/turbo-rails#34 Typically, Turbo expects each FormSubmission request to result in a redirect to a new Location. When a FormSubmission request fails with an [unprocessable entity][422] response, render the response HTML. This commit brings the same behavior to `<turbo-frame>` elements. [422]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/422
hotwired · Dec 26, 2020 · eb7ff38 · eb7ff38
1 parent 35ce4aa
commit eb7ff38
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 4 deletions.
diff --git a/src/core/drive/form_submission.ts b/src/core/drive/form_submission.ts
@@ -99,7 +99,9 @@ export class FormSubmission {
   }
 
   requestSucceededWithResponse(request: FetchRequest, response: FetchResponse) {
-    if (this.requestMustRedirect(request) && !response.redirected) {
+    if (response.unprocessableEntity) {
+      this.delegate.formSubmissionFailedWithResponse(this, response)
+    } else if (this.requestMustRedirect(request) && !response.redirected) {
       const error = new Error("Form responses must redirect to another location")
       this.delegate.formSubmissionErrored(this, error)
     } else {

diff --git a/src/core/drive/navigator.ts b/src/core/drive/navigator.ts
@@ -87,8 +87,12 @@ export class Navigator {
     }
   }
 
-  formSubmissionFailedWithResponse(formSubmission: FormSubmission, fetchResponse: FetchResponse) {
-    console.error("Form submission failed", formSubmission, fetchResponse)
+  async formSubmissionFailedWithResponse(formSubmission: FormSubmission, fetchResponse: FetchResponse) {
+    const responseHTML = await fetchResponse.responseHTML
+
+    this.view.clearSnapshotCache()
+
+    this.proposeVisit(this.location, { response: { statusCode: fetchResponse.statusCode, responseHTML } })
   }
 
   formSubmissionErrored(formSubmission: FormSubmission, error: Error) {

diff --git a/src/core/frames/frame_controller.ts b/src/core/frames/frame_controller.ts
@@ -109,7 +109,7 @@ export class FrameController implements FetchRequestDelegate, FormInterceptorDel
   }
 
   formSubmissionFailedWithResponse(formSubmission: FormSubmission, fetchResponse: FetchResponse) {
-
+    this.element.controller.loadResponse(fetchResponse)
   }
 
   formSubmissionErrored(formSubmission: FormSubmission, error: Error) {

diff --git a/src/http/fetch_response.ts b/src/http/fetch_response.ts
@@ -15,6 +15,10 @@ export class FetchResponse {
     return !this.succeeded
   }
 
+  get unprocessableEntity() {
+    return this.statusCode == 422
+  }
+
   get redirected() {
     return this.response.redirected
   }

diff --git a/src/tests/fixtures/422.html b/src/tests/fixtures/422.html
@@ -0,0 +1,12 @@
+<html>
+  <head>
+    <title>Unprocessable Entity</title>
+  </head>
+  <body>
+    <h1>Unprocessable Entity</h1>
+
+    <turbo-frame id="frame">
+      <h2>Frame: Unprocessable Entity</h2>
+    </turbo-frame>
+  </body>
+</html>
diff --git a/src/tests/fixtures/form.html b/src/tests/fixtures/form.html
@@ -12,6 +12,12 @@
         <input type="submit">
       </form>
     </div>
+    <div id="reject">
+      <form action="/__turbo/reject" method="post">
+        <input type="hidden" name="status" value="422">
+        <input type="submit">
+      </form>
+    </div>
     <div id="submitter">
       <form action="/src/tests/fixtures/one.html" method="get">
         <button type="submit" formmethod="post" formaction="/__turbo/redirect"
@@ -24,6 +30,10 @@
         <input type="hidden" name="path" value="/src/tests/fixtures/frames/form.html">
         <input type="submit">
       </form>
+      <form class="reject" action="/__turbo/reject" method="post">
+        <input type="hidden" name="status" value="422">
+        <input type="submit">
+      </form>
       <form action="/__turbo/messages" method="post" class="stream">
         <input type="hidden" name="type" value="stream">
         <input type="hidden" name="content" value="Hello!">

diff --git a/src/tests/functional/form_submission_tests.ts b/src/tests/functional/form_submission_tests.ts
@@ -14,6 +14,15 @@ export class FormSubmissionTests extends TurboDriveTestCase {
     this.assert.equal(await this.visitAction, "advance")
   }
 
+  async "test invalid form submission with unprocessable entity status"() {
+    await this.clickSelector("#reject form input[type=submit]")
+    await this.nextBody
+
+    const title = await this.querySelector("h1")
+    this.assert.equal(await title.getVisibleText(), "Unprocessable Entity", "renders the response HTML")
+    this.assert.notOk(await this.hasSelector("#frame form.reject"), "replaces entire page")
+  }
+
   async "test submitter form submission reads button attributes"() {
     const button = await this.querySelector("#submitter form button[type=submit]")
     await button.click()
@@ -34,6 +43,15 @@ export class FormSubmissionTests extends TurboDriveTestCase {
     this.assert.equal(await this.pathname, "/src/tests/fixtures/form.html")
   }
 
+  async "test invalid frame form submission with unprocessable entity status"() {
+    await this.clickSelector("#frame form.reject input[type=submit]")
+    await this.nextBeat
+
+    const title = await this.querySelector("#frame h2")
+    this.assert.ok(await this.hasSelector("#reject form"), "only replaces frame")
+    this.assert.equal(await title.getVisibleText(), "Frame: Unprocessable Entity")
+  }
+
   async "test frame form submission with stream response"() {
     const button = await this.querySelector("#frame form.stream input[type=submit]")
     await button.click()

diff --git a/src/tests/server.ts b/src/tests/server.ts
@@ -1,5 +1,6 @@
 import { Response, Router } from "express"
 import multer from "multer"
+import path from "path"
 
 const router = Router()
 const streamResponses: Set<Response> = new Set
@@ -11,6 +12,13 @@ router.post("/redirect", (request, response) => {
   response.redirect(303, path)
 })
 
+router.post("/reject", (request, response) => {
+  const { status } = request.body
+  const fixture = path.join(__dirname, `../../src/tests/fixtures/${status}.html`)
+
+  response.status(parseInt(status || "422", 10)).sendFile(fixture)
+})
+
 router.post("/messages", (request, response) => {
   const { content, type } = request.body
   if (typeof content == "string") {
-Original file line number
+Diff line change
@@ Expand Up @@
       }
       formSubmissionFailedWithResponse(formSubmission: FormSubmission, fetchResponse: FetchResponse) {
+        this.element.controller.loadResponse(fetchResponse)
       }
       formSubmissionErrored(formSubmission: FormSubmission, error: Error) {
@@ Expand Down @@