Some more styling tweaks and added jasmine test

5 files changed, 74 insertions, 8 deletions

diff --git a/app/assets/javascripts/abuse_reports.js.es6 b/app/assets/javascripts/abuse_reports.js.es6
index a85ba2006d7..ecafa1dee8d 100644
--- a/app/assets/javascripts/abuse_reports.js.es6
+++ b/app/assets/javascripts/abuse_reports.js.es6
@@ -1,3 +1,4 @@
+window.gl = window.gl || {};
 ((global) => {
   const MAX_MESSAGE_LENGTH = 500;
   const MESSAGE_CELL_SELECTOR = '.abuse-reports .message';
@@ -16,7 +17,7 @@
       if (reportMessage.length > MAX_MESSAGE_LENGTH) {
         $messageCellElement.data('original-message', reportMessage);
         $messageCellElement.data('message-truncated', 'true');
-        $messageCellElement.text(`${reportMessage.substr(0, MAX_MESSAGE_LENGTH)}...`);
+        $messageCellElement.text(`${reportMessage.substr(0, (MAX_MESSAGE_LENGTH - 3))}...`);
       }
     }
 
@@ -29,7 +30,7 @@
         $messageCellElement.text(originalMessage);
       } else {
         $messageCellElement.data('message-truncated', 'true');
-        $messageCellElement.text(`${originalMessage.substr(0, MAX_MESSAGE_LENGTH)}...`);
+        $messageCellElement.text(`${originalMessage.substr(0, (MAX_MESSAGE_LENGTH - 3))}...`);
       }
     }
   }
diff --git a/app/assets/stylesheets/pages/admin.scss b/app/assets/stylesheets/pages/admin.scss
index caf68308cc2..265ca3da3e6 100644
--- a/app/assets/stylesheets/pages/admin.scss
+++ b/app/assets/stylesheets/pages/admin.scss
@@ -99,10 +99,16 @@
 }
 
 .abuse-reports {
-  table-layout: fixed;
-  .action-buttons a {
-    white-space: normal;
+  .table {
+    table-layout: fixed;
   }
+  .subheading {
+    padding-bottom: $gl-padding;
+  }
+  .message {
+    word-wrap: break-word;
+  }
+
   th {
     width: 15%;
     &.wide {
@@ -118,6 +124,7 @@
       float: left;
     }
   }
+
   .no-reports {
     .emoji-icon {
       margin-left: $btn-side-margin;
diff --git a/app/views/admin/abuse_reports/_abuse_report.html.haml b/app/views/admin/abuse_reports/_abuse_report.html.haml
index 1feec221d2c..56bf6194914 100644
--- a/app/views/admin/abuse_reports/_abuse_report.html.haml
+++ b/app/views/admin/abuse_reports/_abuse_report.html.haml
@@ -1,7 +1,8 @@
 - reporter = abuse_report.reporter
 - user = abuse_report.user
 %tr
-  %th.visible-xs-block.visible-sm-block User
+  %th.visible-xs-block.visible-sm-block
+    %strong User
   %td
     - if user
       = link_to user.name, user
@@ -10,7 +11,7 @@
     - else
       (removed)
   %td
-    %strong.visible-xs-block.visible-sm-block Reported by
+    %strong.subheading.visible-xs-block.visible-sm-block Reported by
     - if reporter
       = link_to reporter.name, reporter
     - else
@@ -18,7 +19,7 @@
     .light.small
       = time_ago_with_tooltip(abuse_report.created_at)
   %td
-    %strong.visible-xs-block.visible-sm-block Message
+    %strong.subheading.visible-xs-block.visible-sm-block Message
     .message
       = markdown(abuse_report.message.squish!, pipeline: :single_line, author: reporter)
   %td
diff --git a/spec/javascripts/abuse_reports_spec.js.es6 b/spec/javascripts/abuse_reports_spec.js.es6
new file mode 100644
index 00000000000..6bcfdf191c2
--- /dev/null
+++ b/spec/javascripts/abuse_reports_spec.js.es6
@@ -0,0 +1,41 @@
+/*= require abuse_reports */
+
+/*= require jquery */
+
+((global) => {
+  const FIXTURE = 'abuse_reports.html';
+  const MAX_MESSAGE_LENGTH = 500;
+
+  function assertMaxLength($message) {
+    expect($message.text().length).toEqual(MAX_MESSAGE_LENGTH);
+  }
+
+  describe('Abuse Reports', function() {
+    fixture.preload(FIXTURE);
+
+    beforeEach(function() {
+      fixture.load(FIXTURE);
+      new global.AbuseReports();
+    });
+
+    it('should truncate long messages', function() {
+      const $longMessage = $('#long');
+      expect($longMessage.data('original-message')).toEqual(jasmine.anything());
+      assertMaxLength($longMessage);
+    });
+
+    it('should not truncate short messages', function() {
+      const $shortMessage = $('#short');
+      expect($shortMessage.data('original-message')).not.toEqual(jasmine.anything());
+    });
+
+    it('should allow clicking a truncated message to expand and collapse the full message', function() {
+      const $longMessage = $('#long');
+      $longMessage.click();
+      expect($longMessage.data('original-message').length).toEqual($longMessage.text().length);
+      $longMessage.click();
+      assertMaxLength($longMessage);
+    });
+  });
+
+})(window.gl);
diff --git a/spec/javascripts/fixtures/abuse_reports.html.haml b/spec/javascripts/fixtures/abuse_reports.html.haml
new file mode 100644
index 00000000000..2ec302abcb7
--- /dev/null
+++ b/spec/javascripts/fixtures/abuse_reports.html.haml
@@ -0,0 +1,16 @@
+.abuse-reports
+  .message#long
+    Cat ipsum dolor sit amet, hide head under blanket so no one can see.
+    Gate keepers of hell eat and than sleep on your face but hunt by meowing
+    loudly at 5am next to human slave food dispenser cats go for world
+    domination or chase laser, yet poop on grasses chirp at birds. Cat is love,
+    cat is life chase after silly colored fish toys around the house climb a
+    tree, wait for a fireman jump to fireman then scratch his face fall asleep
+    on the washing machine lies down always hungry so caticus cuteicus. Sit on
+    human. Spot something, big eyes, big eyes, crouch, shake butt, prepare to
+    pounce sleep in the bathroom sink hiss at vacuum cleaner hide head under
+    blanket so no one can see throwup on your pillow.
+  .message#short
+    Cat ipsum dolor sit amet, groom yourself 4 hours - checked, have your
+    beauty sleep 18 hours - checked, be fabulous for the rest of the day -
+    checked! for shake treat bag.