From 9900d40521fea52f2853e9e192c5213dcd422f0e Mon Sep 17 00:00:00 2001
From: zeotuan <48720253+zeotuan@users.noreply.github.com>
Date: Thu, 15 Jul 2021 19:24:32 +1000
Subject: [PATCH] Add error handling and UI feedback when submitting comment
 resulting in a 503 error (#14233)

* add catch to response.json promise to handle 503 service unavailable error

* fix typo in error message

* make error message more generic

* add test for comment when server response with 503
---
 .../initializeCommentsPage.js.erb             |  2 ++
 .../articleFlows/commentOnArticle.spec.js     | 25 +++++++++++++++++++
 2 files changed, 27 insertions(+)

diff --git a/app/assets/javascripts/initializers/initializeCommentsPage.js.erb b/app/assets/javascripts/initializers/initializeCommentsPage.js.erb
index 66836e952..03f514ba9 100644
--- a/app/assets/javascripts/initializers/initializeCommentsPage.js.erb
+++ b/app/assets/javascripts/initializers/initializeCommentsPage.js.erb
@@ -297,6 +297,8 @@ function handleCommentSubmit(event) {
           } else {
             showUserAlertModal('Error posting comment', 'Your comment could not be posted due to an error: ' + errorReponse.error, 'OK')
           }
+        }).catch(function parseError(error){
+            showUserAlertModal('Error posting comment', 'Your comment could not be posted due to a server error', 'OK') 
         });
         return false;
       }
diff --git a/cypress/integration/articleFlows/commentOnArticle.spec.js b/cypress/integration/articleFlows/commentOnArticle.spec.js
index 510047998..3b7a1f9fe 100644
--- a/cypress/integration/articleFlows/commentOnArticle.spec.js
+++ b/cypress/integration/articleFlows/commentOnArticle.spec.js
@@ -516,6 +516,31 @@ describe('Comment on articles', () => {
     cy.findByRole('button', { name: /^Submit$/i }).should('have.focus');
   });
 
+  it('server error that return empty body should show error modal', () => {
+    cy.intercept('POST', '/comments', {
+      statusCode: 503,
+    });
+    cy.findByRole('main').within(() => {
+      cy.findByRole('textbox', { name: /^Add a comment to the discussion$/i })
+        .focus() // Focus activates the Submit button and mini toolbar below a comment textbox
+        .type('this is a comment');
+
+      cy.findByRole('button', { name: /^Submit$/i }).click();
+    });
+
+    cy.findByTestId('modal-container').within(() => {
+      cy.findByRole('button', { name: /Close/ }).should('have.focus');
+      cy.findByRole('heading', { name: 'Error posting comment' }).should(
+        'exist',
+      );
+      cy.findByText('Your comment could not be posted due to a server error');
+      cy.findByRole('button', { name: 'OK' }).click();
+    });
+
+    cy.findByTestId('modal-container').should('not.exist');
+    cy.findByRole('button', { name: /^Submit$/i }).should('have.focus');
+  });
+
   it('should add a comment with a gist embed', () => {
     cy.findByRole('main').within(() => {
       cy.findByRole('textbox', {