Merge pull request #581 from alphagov/report-a-problem-refactoring

Report-a-problem JS refactoring
alphagov · Apr 23, 2015 · fb6ffeb · fb6ffeb
2 parents 5ce7382 + de79558
commit fb6ffeb
Show file tree

Hide file tree

Showing 4 changed files with 145 additions and 75 deletions.
diff --git a/app/assets/javascripts/header-footer-only.js b/app/assets/javascripts/header-footer-only.js
@@ -3,6 +3,7 @@
 //= require analytics
 //= require user-satisfaction-survey
 //= require core
+//= require report-a-problem-form
 //= require report-a-problem
 //= require govuk/selection-buttons
 //= require govuk-component/govspeak-enhance-youtube-video-links

diff --git a/app/assets/javascripts/report-a-problem-form.js b/app/assets/javascripts/report-a-problem-form.js
@@ -0,0 +1,83 @@
+(function() {
+  "use strict";
+  window.GOVUK = window.GOVUK || {};
+
+  var ReportAProblemForm = function($form) {
+    this.$form = $form;
+
+    $form.on('submit', this.submit.bind(this));
+
+    this.appendHiddenContextInformation();
+  }
+
+  ReportAProblemForm.prototype.appendHiddenContextInformation = function() {
+    // form submission for reporting a problem
+    this.$form.append('<input type="hidden" name="javascript_enabled" value="true"/>');
+    this.$form.append($('<input type="hidden" name="referrer">').val(document.referrer || "unknown"));
+  };
+
+  ReportAProblemForm.prototype.hidePrompt = function() {
+    this.$form.find('.error-notification').remove();
+  };
+
+  ReportAProblemForm.prototype.disableSubmitButton = function() {
+    this.$form.find('.button').attr("disabled", true);
+  };
+
+  ReportAProblemForm.prototype.enableSubmitButton = function() {
+    this.$form.find('.button').attr("disabled", false);
+  };
+
+  ReportAProblemForm.prototype.promptUserToEnterValidData = function() {
+    this.enableSubmitButton();
+    var $prompt = $('<p class="error-notification">Please enter details of what you were doing.</p>');
+    this.$form.prepend($prompt);
+  };
+
+  ReportAProblemForm.prototype.handleError = function(jqXHR, status) {
+    if (status === 'error' || !jqXHR.responseText) {
+      if (jqXHR.status == 422) {
+        this.promptUserToEnterValidData();
+      } else {
+        this.triggerError();
+      }
+    }
+  };
+
+  ReportAProblemForm.prototype.setUrl = function() {
+    this.$form.find('input#url').val(window.location);
+  }
+
+  ReportAProblemForm.prototype.postFormViaAjax = function() {
+    $.ajax({
+      type: "POST",
+      url: "/contact/govuk/problem_reports",
+      dataType: "json",
+      data: this.$form.serialize(),
+      success: this.triggerSuccess.bind(this),
+      error: this.handleError.bind(this),
+      statusCode: {
+        500: this.triggerError.bind(this),
+      }
+    });
+  };
+
+  ReportAProblemForm.prototype.submit = function(evt) {
+    this.hidePrompt();
+    this.setUrl();
+    this.disableSubmitButton();
+    this.postFormViaAjax();
+
+    evt.preventDefault();
+  };
+
+  ReportAProblemForm.prototype.triggerError = function() {
+    this.$form.trigger('reportAProblemForm.error');
+  };
+
+  ReportAProblemForm.prototype.triggerSuccess = function(data) {
+    this.$form.trigger('reportAProblemForm.success', data);
+  };
+
+  GOVUK.ReportAProblemForm = ReportAProblemForm;
+}());
diff --git a/app/assets/javascripts/report-a-problem.js b/app/assets/javascripts/report-a-problem.js
@@ -1,84 +1,48 @@
 (function() {
   "use strict";
-
   window.GOVUK = window.GOVUK || {};
 
-  window.GOVUK.reportAProblem = {
-    showErrorMessage: function (jqXHR) {
-      var response = "<h2>Sorry, we're unable to receive your message right now.</h2> " +
-                     "<p>We have other ways for you to provide feedback on the " +
-                     "<a href='/contact'>contact page</a>.</p>"
-      $('.report-a-problem-content').html(response);
-    },
-
-    promptUserToEnterValidData: function() {
-      GOVUK.reportAProblem.enableSubmitButton();
-      $('<p class="error-notification">Please enter details of what you were doing.</p>').insertAfter('.report-a-problem-container h2');
-    },
-
-    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-content').html(data.message);
-    },
-
-    submit: function() {
-      $('.report-a-problem-container .error-notification').remove();
-      $('input#url').val(window.location);
-
-      GOVUK.reportAProblem.disableSubmitButton();
-      $.ajax({
-        type: "POST",
-        url: "/contact/govuk/problem_reports",
-        dataType: "json",
-        data: $('.report-a-problem-container form').serialize(),
-        success: GOVUK.reportAProblem.showConfirmation,
-        error: function(jqXHR, status) {
-          if (status === 'error' || !jqXHR.responseText) {
-            if (jqXHR.status == 422) {
-              GOVUK.reportAProblem.promptUserToEnterValidData();
-            }
-            else {
-              GOVUK.reportAProblem.showErrorMessage();
-            }
-          }
-        },
-        statusCode: {
-          500: GOVUK.reportAProblem.showErrorMessage
-        }
-      });
-      return false;
-    }
+  var ReportAProblem = function ($container) {
+    this.$container = $container;
+    var $form = $container.find('form'),
+        form = new GOVUK.ReportAProblemForm($form);
+
+    this.addToggleLink();
+    $form.on('reportAProblemForm.success', this.showConfirmation.bind(this));
+    $form.on('reportAProblemForm.error', this.showError.bind(this));
+  };
+
+  ReportAProblem.prototype.addToggleLink = function() {
+    var $toggle = $('\
+      <div class="report-a-problem-toggle-wrapper js-footer">\
+        <p class="report-a-problem-toggle">\
+          <a href="">Is there anything wrong with this page?</a>\
+        </p>\
+      </div>');
+
+    this.$container.before($toggle);
+    $toggle.on("click", ".report-a-problem-toggle a", function(evt) {
+      this.$container.toggle();
+      evt.preventDefault();
+    }.bind(this));
+  };
+
+  ReportAProblem.prototype.showConfirmation = function(evt, data) {
+    this.$container.find('.report-a-problem-content').html(data.message);
   }
 
-  $(document).ready(function() {
-    // Add in the toggle link for reporting a problem at the bottom of the page
-    var toggleBlock = '<div class="report-a-problem-toggle-wrapper js-footer">' +
-                        '<p class="report-a-problem-toggle">' +
-                          '<a href="">Is there anything wrong with this page?</a>' +
-                        '</p>' +
-                      '</div>';
-    var $container = $('.report-a-problem-container')
-    $container.before(toggleBlock);
+  ReportAProblem.prototype.showError = function() {
+    var response = "\
+      <h2>Sorry, we’re unable to receive your message right now.</h2>\
+      <p>We have other ways for you to provide feedback on the \
+      <a href='/contact'>contact page</a>.</p>";
 
-    // Add a click handler for the toggle
-    $('.report-a-problem-toggle a').on('click', function() {
-      $container.toggle();
-      return false;
-    });
+    this.$container.find('.report-a-problem-content').html(response);
+  }
 
-    // form submission for reporting a problem
-    var $form = $container.find('form');
-    $form.append('<input type="hidden" name="javascript_enabled" value="true"/>');
-    $form.append($('<input type="hidden" name="referrer">').val(document.referrer || "unknown"));
-    $form.submit(GOVUK.reportAProblem.submit);
+  GOVUK.ReportAProblem = ReportAProblem;
 
+  $(document).ready(function() {
+    new GOVUK.ReportAProblem($('.report-a-problem-container'));
   });
-
 }());
diff --git a/spec/javascripts/report-a-problem-spec.js b/spec/javascripts/report-a-problem-spec.js
@@ -9,7 +9,29 @@ describe("form submission for reporting a problem", function () {
     beforeEach(function() {
         setFixtures(FORM_TEXT);
         form = $('form');
-        form.submit(GOVUK.reportAProblem.submit);
+        new GOVUK.ReportAProblem($('.report-a-problem-container'));
+    });
+
+    it("should append a hidden 'javascript_enabled' field to the form", function() {
+        expect(form.find("[name=javascript_enabled]").val()).toBe("true");
+    });
+
+    it("should append a hidden 'referrer' field to the form", function() {
+        expect(form.find("[name=referrer]").val()).toBe("unknown");
+    });
+
+    describe("clicking on the toggle", function(){
+        it("should toggle the visibility of the form", function() {
+            expect(form).toBeVisible();
+
+            $('a').click();
+
+            expect(form).toBeHidden();
+
+            $('a').click();
+
+            expect(form).toBeVisible();
+        });
     });
 
     describe("while the request is being handled", function() {
@@ -57,7 +79,7 @@ describe("form submission for reporting a problem", function () {
             form.triggerHandler('submit');
 
             expect(form).not.toBeVisible();
-            expect($('.report-a-problem-content').html()).toContain("Sorry, we're unable to receive your message");
+            expect($('.report-a-problem-content').html()).toContain("Sorry, we’re unable to receive your message");
         });
     });
 });