From 96c30fa763be933d27b7eee4f3e10c5f54fa8c36 Mon Sep 17 00:00:00 2001
From: Alex Erling <alex.erling@gmail.com>
Date: Tue, 8 May 2018 16:48:51 -0500
Subject: [PATCH] Shorten commit messages

---
 src/Components/CommitComponent.js             | 15 +++++--
 .../__tests__/CommitComponent.test.js         | 15 ++++++-
 .../CommitComponent.test.js.snap              | 45 +++++++++++++------
 3 files changed, 57 insertions(+), 18 deletions(-)

diff --git a/src/Components/CommitComponent.js b/src/Components/CommitComponent.js
index 5d1400e..1f7bcd0 100644
--- a/src/Components/CommitComponent.js
+++ b/src/Components/CommitComponent.js
@@ -6,10 +6,18 @@ const CommitComponent = ({committedDate, abbreviatedOid, message}) => {
 
     const date = moment(committedDate).fromNow();
 
+    function shortenMessage(message) {
+    message.length > 40 ? message = message.substring(0,37) + "..." : message
+    return message
+    };
+
     return (
-        <div style={{paddingLeft: "1em"}}>
-            {abbreviatedOid}: {message} ({date})
-        </div>
+      <div>
+      <span>{abbreviatedOid + ": "} </span>
+      <span>{shortenMessage(message)} </span>
+      <span>({date})</span>
+      </div>
+
     )
 };
 
@@ -20,4 +28,3 @@ CommitComponent.propTypes = {
 };
 
 export default CommitComponent;
-
diff --git a/src/Components/__tests__/CommitComponent.test.js b/src/Components/__tests__/CommitComponent.test.js
index 479ea09..7926f38 100644
--- a/src/Components/__tests__/CommitComponent.test.js
+++ b/src/Components/__tests__/CommitComponent.test.js
@@ -4,6 +4,7 @@ import React from "react";
 
 const abbreviatedOid = 'AAAAAA';
 const message = 'This is a commit message';
+const longMessage = 'This is a very long commit message, which will need to be shortened'
 const committedDate = '2018-05-04T19:59:54Z';
 
 // Return a fixed timestamp when moment().format() is called
@@ -19,4 +20,16 @@ it('renders commit correctly', () => {
     );
     const tree = renderer.getRenderOutput();
     expect(tree).toMatchSnapshot();
-});
\ No newline at end of file
+});
+
+it('shortens long commit messages correctly', () => {
+  const renderer = new ShallowRenderer();
+  renderer.render(
+      <CommitComponent
+          message={longMessage}
+          abbreviatedOid={abbreviatedOid}
+          committedDate={committedDate} />
+  );
+  const tree = renderer.getRenderOutput();
+  expect(tree).toMatchSnapshot();
+});
diff --git a/src/Components/__tests__/__snapshots__/CommitComponent.test.js.snap b/src/Components/__tests__/__snapshots__/CommitComponent.test.js.snap
index 0cefe95..c2c1311 100644
--- a/src/Components/__tests__/__snapshots__/CommitComponent.test.js.snap
+++ b/src/Components/__tests__/__snapshots__/CommitComponent.test.js.snap
@@ -1,18 +1,37 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders commit correctly 1`] = `
-<div
-  style={
-    Object {
-      "paddingLeft": "1em",
-    }
-  }
->
-  AAAAAA
-  : 
-  This is a commit message
-   (
-  3 days ago
-  )
+<div>
+  <span>
+    AAAAAA: 
+     
+  </span>
+  <span>
+    This is a commit message
+     
+  </span>
+  <span>
+    (
+    3 days ago
+    )
+  </span>
+</div>
+`;
+
+exports[`shortens long commit messages correctly 1`] = `
+<div>
+  <span>
+    AAAAAA: 
+     
+  </span>
+  <span>
+    This is a very long commit message, w...
+     
+  </span>
+  <span>
+    (
+    3 days ago
+    )
+  </span>
 </div>
 `;