Merge pull request #311 from alphagov/report-a-problem-ajax-deal-with…

…-html-for-status-503

Report-a-problem: AJAX deal with html for status 503

app/assets/javascripts/application.js

@@ -8,6 +8,7 @@
 //= require user-satisfaction-survey
 //= require welcome
 //= require core
+//= require report-a-problem
 //= require popup
 //= require geo-locator
 //= require jquery.history

app/assets/javascripts/core.js

@@ -41,43 +41,6 @@ function recordOutboundLink(e) {
   return false;
 }
 
-var ReportAProblem = {
-  handleErrorInSubmission: function (jqXHR) {
-    var response = $.parseJSON(jqXHR.responseText);
-    if (response.message !== '') {
-      $('.report-a-problem-container').html(response.message);
-    }
-  },
-
-  submit: function() {
-    $('.report-a-problem-container .error-notification').remove();
-
-    var submitButton = $(this).find('.button');
-    submitButton.attr("disabled", true);
-    $.ajax({
-      type: "POST",
-      url: "/feedback",
-      dataType: "json",
-      data: $('.report-a-problem-container form').serialize(),
-      success: function(data) {
-        $('.report-a-problem-container').html(data.message);
-      },
-      error: function(jqXHR) {
-        if (jqXHR.status == 422) {
-          submitButton.attr("disabled", false);
-          $('<p class="error-notification">Please enter details of what you were doing.</p>').insertAfter('.report-a-problem-container p:first-child');
-        } else {
-          ReportAProblem.handleErrorInSubmission(jqXHR);
-        }
-      },
-      statusCode: {
-        500: ReportAProblem.handleErrorInSubmission
-      }
-    });
-    return false;
-  }
-}
-
 $(document).ready(function() {
   $('.print-link a').attr('target', '_blank');
 
@@ -117,19 +80,6 @@ $(document).ready(function() {
     }
   });
 
-  // toggle for reporting a problem (on all content pages)
-  $('.report-a-problem-toggle a').on('click', function() {
-    $('.report-a-problem-container').toggle();
-      return false;
-  });
-
-  // form submission for reporting a problem
-  var $forms = $('.report-a-problem-container form, .report-a-problem form');
-  $forms.append('<input type="hidden" name="javascript_enabled" value="true"/>');
-  $forms.append($('<input type="hidden" name="referrer">').val(document.referrer || "unknown"));
-
-  $('.report-a-problem-container form').submit(ReportAProblem.submit);
-
   // hover, active and focus states for buttons in IE<8
   if ($.browser.msie && $.browser.version < 8) {
     $('.button').not('a')

app/assets/javascripts/report-a-problem.js

@@ -0,0 +1,68 @@
+var ReportAProblem = {
+  showErrorMessage: function (jqXHR) {
+    var response = "<p>Sorry, we're unable to receive your message right now.</p> " +
+                   "<p>We have other ways for you to provide feedback on the " +
+                   "<a href='/feedback'>support page</a>.</p>"
+    $('.report-a-problem-container').html(response);
+  },
+
+  promptUserToEnterValidData: function() {
+    ReportAProblem.enableSubmitButton();
+    $('<p class="error-notification">Please enter details of what you were doing.</p>').insertAfter('.report-a-problem-container p:first-child');
+  },
+
+  disableSubmitButton: function() {
+    $('.report-a-problem-container .button').attr("disabled", true);
+  },  
+
+  enableSubmitButton: function() {
+    $('.report-a-problem-container .button').attr("disabled", false);
+  },
+
+  showConfirmation: function(data) {
+    $('.report-a-problem-container').html(data.message);
+  },
+
+  submit: function() {
+    $('.report-a-problem-container .error-notification').remove();
+
+    ReportAProblem.disableSubmitButton();
+    $.ajax({
+      type: "POST",
+      url: "/feedback",
+      dataType: "json",
+      data: $('.report-a-problem-container form').serialize(),
+      success: ReportAProblem.showConfirmation,
+      error: function(jqXHR, status) {
+        if (status === 'error' || !jqXHR.responseText) {
+          if (jqXHR.status == 422) {
+            ReportAProblem.promptUserToEnterValidData();
+          }
+          else {
+            ReportAProblem.showErrorMessage();
+          }
+        }
+      },
+      statusCode: {
+        500: ReportAProblem.showErrorMessage
+      }
+    });
+    return false;
+  }
+}
+
+$(document).ready(function() {
+  // toggle for reporting a problem (on all content pages)
+  $('.report-a-problem-toggle a').on('click', function() {
+    $('.report-a-problem-container').toggle();
+      return false;
+  });
+
+  // form submission for reporting a problem
+  var $forms = $('.report-a-problem-container form, .report-a-problem form');
+  $forms.append('<input type="hidden" name="javascript_enabled" value="true"/>');
+  $forms.append($('<input type="hidden" name="referrer">').val(document.referrer || "unknown"));
+
+  $('.report-a-problem-container form').submit(ReportAProblem.submit);
+
+});

spec/javascripts/ReportingAProblemSpec.js

@@ -35,7 +35,7 @@ describe("form submission for reporting a problem", function () {
     describe("if the request is invalid", function() {
         it("should re-enable the submit button, in order to allow the user to resubmit", function () {
             spyOn($, "ajax").andCallFake(function(options) {
-                options.error({status: 422});
+                options.error({status: 422}, 'error');
             });
 
             form.triggerHandler('submit');
@@ -46,15 +46,15 @@ describe("form submission for reporting a problem", function () {
     });
 
     describe("if the request has failed with a status 500", function() {
-        it("should replace the form with the error message from the AJAX call", function() {
+        it("should display an error message", function() {
             spyOn($, "ajax").andCallFake(function(options) {
-                options.statusCode[500]({responseText: '{"message": "big failure"}'});
+                options.statusCode[500]({responseText: 'this might not even be JSON because nginx intercepts the error'});
             });
 
             form.triggerHandler('submit');
 
             expect(form).not.toBeVisible();
-            expect($('.report-a-problem-container').html()).toEqual('big failure');
+            expect($('.report-a-problem-container').html()).toContain("Sorry, we're unable to receive your message");
         });
     });
 });

spec/javascripts/support/jasmine.yml

@@ -18,6 +18,7 @@ src_files:
   - app/assets/javascripts/cookie-functions.js
   - app/assets/javascripts/geo-locator.js
   - app/assets/javascripts/devolution.js
+  - app/assets/javascripts/report-a-problem.js
   - app/assets/javascripts/user-satisfaction-survey.js
   - app/assets/javascripts/analytics/tracking-strategies.js
   - app/assets/javascripts/analytics/events-cookie-handler.js