From d7b393fea8303bd8ef4f86a7447bf0a7f6f0d61a Mon Sep 17 00:00:00 2001
From: Jean-Baptiste WATENBERG <jeanbaptiste.watenberg@gmail.com>
Date: Sun, 23 Sep 2018 16:48:44 +0200
Subject: [PATCH] (feat) add length preview in json previewer

---
 demo/src/index.js                   | 2 +-
 package.json                        | 2 +-
 src/components/JsonPathPreviewer.js | 5 ++++-
 tests/JsonPathPreviewer-test.js     | 8 ++++++++
 4 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/demo/src/index.js b/demo/src/index.js
index 96b774b..c2af270 100644
--- a/demo/src/index.js
+++ b/demo/src/index.js
@@ -63,7 +63,7 @@ class Demo extends Component {
                         'price': 19.95
                     }
                 }
-            }} jsonPath='$.store' />
+            }} jsonPath='$.store.book.length' />
 
         </div>;
     }
diff --git a/package.json b/package.json
index 3f621e2..20e9921 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-jsonpath-editor",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "react-jsonpath-editor React component",
   "main": "lib/index.js",
   "module": "es/index.js",
diff --git a/src/components/JsonPathPreviewer.js b/src/components/JsonPathPreviewer.js
index 663b869..3a60fb8 100644
--- a/src/components/JsonPathPreviewer.js
+++ b/src/components/JsonPathPreviewer.js
@@ -24,9 +24,12 @@ class JsonPathPreviewer extends Component {
     tagPartOfJsonToHighlight(jsonAsObject, paths, traversedPath = ['$']) {
         if (Array.isArray(jsonAsObject)) {
             const doesTraversingPathMatch = paths.filter(oneOfPathsToRetrieve => oneOfPathsToRetrieve.join(',') === traversedPath.join(',')).length > 0;
+            const isALengthPathMatchingThisCollection = paths.filter(oneOfPathsToRetrieve => oneOfPathsToRetrieve.join(',') === [...traversedPath, 'length'].join(',')).length > 0;
             return `${carriageReturnTag + indentationIncrementationTag}${doesTraversingPathMatch ? highlightingTags.start : ''}[${carriageReturnTag + indentationIncrementationTag}${jsonAsObject.map((item, index) => 
                 this.tagPartOfJsonToHighlight(item, paths, [...traversedPath, index])
-            ).join(',' + carriageReturnTag)}${indentationDecrementationTag + carriageReturnTag}]${doesTraversingPathMatch ? highlightingTags.end  : ''}${indentationDecrementationTag}`;
+            ).join(',' + carriageReturnTag)}${indentationDecrementationTag + carriageReturnTag}]${
+                doesTraversingPathMatch ? highlightingTags.end  : ''
+            }${isALengthPathMatchingThisCollection ? highlightingTags.start + '.length = ' + jsonAsObject.length + highlightingTags.end : ''}${indentationDecrementationTag}`;
         }
 
         if (typeof jsonAsObject === 'object') {
diff --git a/tests/JsonPathPreviewer-test.js b/tests/JsonPathPreviewer-test.js
index d48e36f..fe04e77 100644
--- a/tests/JsonPathPreviewer-test.js
+++ b/tests/JsonPathPreviewer-test.js
@@ -81,6 +81,14 @@ describe('Json path preview component', () => {
         expect(taggedJSON).toContain('£CR££INC£££TAGGED£[£CR££INC£{£CR££INC£"category": "reference",£CR£"author": "Nigel Rees",£CR£"title": "Sayings of the Century",£CR£"price": 8.95£DEC££CR£},£CR£{£CR££INC£"category": "fiction",£CR£"author": "Evelyn Waugh",£CR£"title": "Sword of Honour",£CR£"price": 12.99£DEC££CR£},£CR£{£CR££INC£"category": "fiction",£CR£"author": "Herman Melville",£CR£"title": "Moby Dick",£CR£"isbn": "0-553-21311-3",£CR£"price": 8.99£DEC££CR£},£CR£{£CR££INC£"category": "fiction",£CR£"author": "J. R. R. Tolkien",£CR£"title": "The Lord of the Rings",£CR£"isbn": "0-395-19395-8",£CR£"price": 22.99£DEC££CR£}£DEC££CR£]£TAGGED£££DEC£');
     });
 
+    it('should display length preview', () => {
+        const wraper = mount(<Previewer json={defaultJson} jsonPath='$..book.length' />);
+        const paths = wraper.instance().evalJsonPath(defaultJson, '$..book.length');
+        const taggedJSON = wraper.instance().tagPartOfJsonToHighlight(defaultJson, paths);
+
+        expect(taggedJSON).toContain('.length = 4');
+    });
+
     it ('should not tag anything', () => {
         const wraper = mount(<Previewer json={defaultJson} jsonPath='$..books' />);
         const paths = wraper.instance().evalJsonPath(defaultJson, '$..books');