Shorten commit messages

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;
-

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();
-});
+});
+
+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();
+});

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>
 `;