added tests for highlight

dist/client/ui/highlight.js

@@ -4,6 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = highlight;
+/**
+ * Parses the JSON string and adds styling and class based on whether
+ * a part is string, number, undefined, null or key. Also removes quotes
+ * from keys.
+ *
+ * @param data A stringified JSON
+ * @returns {string} String with styling
+ */
 function highlight(data) {
   var json = data.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
   var regex = /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g; // eslint-disable-line

src/client/ui/__tests__/highlight.js

@@ -0,0 +1,21 @@
+const { describe, it } = global;
+import { expect } from 'chai';
+import highlight from '../highlight';
+
+describe('highlight', function () {
+  it('should remove quotes from keys and add correct colour', function () {
+    const data = '{ "name": "react-storybook" }';
+    const expected = '{ <span class="key" style="color:#800080">name:</span> <span class="string" style="color:#a31515">"react-storybook"</span> }'; // eslint-disable-line
+    expect(highlight(data)).to.equal(expected);
+  });
+
+  it('should preserve new lines also', function () {
+    const data = '{\n  "name": "test action",\n  "args": "things"\n}';
+    const expected = '{\n  ' +
+      '<span class="key" style="color:#800080">name:</span> ' +
+      '<span class="string" style="color:#a31515">"test action"</span>,\n  ' +
+      '<span class="key" style="color:#800080">args:</span> ' +
+      '<span class="string" style="color:#a31515">"things"</span>\n}';
+    expect(highlight(data)).to.equal(expected);
+  });
+});

src/client/ui/foldable.js

@@ -71,7 +71,6 @@ class Foldable extends React.Component {
             { this.state.collapsed ? '►' : '▼' }
           </span>
         </div>
-
         <div ref="foldable-content" style={ folderContentStyle }
           dangerouslySetInnerHTML={ { __html: highlight(content) } }
         >

src/client/ui/highlight.js

@@ -1,3 +1,11 @@
+/**
+ * Parses the JSON string and adds styling and class based on whether
+ * a part is string, number, undefined, null or key. Also removes quotes
+ * from keys.
+ *
+ * @param data A stringified JSON
+ * @returns {string} String with styling
+ */
 export default function highlight(data) {
   const json = data.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
   const regex = /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g; // eslint-disable-line