From 3e2d64fad7152b1a588d83dd0f092847c9178ff4 Mon Sep 17 00:00:00 2001
From: Ritesh Kumar <rkritesh078@gmail.com>
Date: Tue, 19 Apr 2016 11:02:56 +0530
Subject: [PATCH] added tests for highlight

---
 dist/client/ui/highlight.js          |  8 ++++++++
 src/client/ui/__tests__/highlight.js | 21 +++++++++++++++++++++
 src/client/ui/foldable.js            |  1 -
 src/client/ui/highlight.js           |  8 ++++++++
 4 files changed, 37 insertions(+), 1 deletion(-)
 create mode 100644 src/client/ui/__tests__/highlight.js

diff --git a/dist/client/ui/highlight.js b/dist/client/ui/highlight.js
index f60116569a68..233b59b71b51 100644
--- a/dist/client/ui/highlight.js
+++ b/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
diff --git a/src/client/ui/__tests__/highlight.js b/src/client/ui/__tests__/highlight.js
new file mode 100644
index 000000000000..c7ed3e24d966
--- /dev/null
+++ b/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);
+  });
+});
diff --git a/src/client/ui/foldable.js b/src/client/ui/foldable.js
index d038c8fc46db..49b10d3bd456 100644
--- a/src/client/ui/foldable.js
+++ b/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) } }
         >
diff --git a/src/client/ui/highlight.js b/src/client/ui/highlight.js
index 94267e7d771f..bba93bd35aa6 100644
--- a/src/client/ui/highlight.js
+++ b/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