move tests to tests directory

client/coral-plugin-history/Comment.css

@@ -1,5 +1,6 @@
 .assetURL {
-
+  font-size: 16px;
+  color: black;
 }
 
 .commentBody {

client/coral-plugin-history/Comment.js

@@ -5,8 +5,10 @@ import styles from './Comment.css';
 const Comment = props => {
   return (
     <div>
-      <p><a className={styles.assetURL} href={props.asset.url}>{props.asset.url}</a></p>
-      <p className={styles.commentBody}>{props.comment.body}</p>
+      <p className="myCommentAsset">
+        <a className={`${styles.assetURL} myCommentAnchor`} href={props.asset.url}>{props.asset.url}</a>
+      </p>
+      <p className={`${styles.commentBody} myCommentBody`}>{props.comment.body}</p>
     </div>
   );
 };

package.json

@@ -93,6 +93,7 @@
     "copy-webpack-plugin": "^4.0.0",
     "css-loader": "^0.25.0",
     "dialog-polyfill": "^0.4.4",
+    "enzyme": "^2.6.0",
     "eslint": "^3.12.1",
     "eslint-config-postcss": "^2.0.2",
     "eslint-config-standard": "^6.2.1",
@@ -122,6 +123,7 @@
     "precss": "^1.4.0",
     "pym.js": "^1.1.1",
     "react": "15.3.2",
+    "react-addons-test-utils": "^15.3.1",
     "react-dom": "15.3.2",
     "react-linkify": "^0.1.3",
     "react-mdl": "^1.7.2",

tests/client/coral-plugin-history/Comment.spec.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import {shallow, mount} from 'enzyme';
+import {expect} from 'chai';
+import Comment from '../Comment';
+
+describe('coral-plugin-history/Comment', () => {
+  let render;
+  beforeEach(() => {
+
+    const comment = {body: 'this is a comment'};
+    const asset = {url: 'https://google.com'};
+
+    render = shallow(<Comment />);
+  });
+
+  it('should render the provided comment body', () => {
+    const wrapper = mount(<Comment />);
+    expect(wrapper.find('.myCommentBody')).to.have.length(1);
+    expect(wrapper.find('.myCommentBody').text()).to.equal('this is a comment');
+  });
+
+  it('should render the asset url as a link', () => {
+    const wrapper = mount(<Comment />);
+    expect(wrapper.find('.myCommentAnchor')).to.have.length(1);
+    expect(wrapper.find('.myCommentAnchor').text()).to.equal('https://google.com');
+  });
+
+  it('should render the comment with styles', () => {
+    expect(render.props().style).to.be.defined;
+  });
+});