From a90bde570c7778b9180549be79e7cc209c802226 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=98=8E=E6=89=AC?= Date: Sat, 15 Aug 2015 22:58:01 +0800 Subject: [PATCH] New feature Hover over a row, show this object's code thumbnail remove unreferenced attribute compile new dist more useful Thumbnail information like Chrome Developer Tools Remove json key double quotes configurable of thumbnail default is turned off update demo.html thumbnail -> provider config provider enable thumbnail in demo Simplify test case deal with other issues demo.html thumbnail default is disabled json-formatter.js parseInt add radix value setEnabled -> .enabled (use setter) --- dist/json-formatter.css | 18 ++++- dist/json-formatter.js | 128 ++++++++++++++++++++++++++++++------ dist/json-formatter.min.css | 4 +- dist/json-formatter.min.js | 4 +- src/json-formatter.html | 3 + src/json-formatter.js | 124 ++++++++++++++++++++++++++++------ src/json-formatter.less | 10 +++ test/json-formatter.spec.js | 72 ++++++++++++++++++-- 8 files changed, 313 insertions(+), 50 deletions(-) diff --git a/dist/json-formatter.css b/dist/json-formatter.css index e350b78..837c7b7 100644 --- a/dist/json-formatter.css +++ b/dist/json-formatter.css @@ -1,7 +1,7 @@ /*! * jsonformatter * - * Version: 0.3.0 - 2015-07-09T13:22:11.385Z + * Version: 0.3.1 - 2015-08-13T05:50:21.236Z * License: MIT */ @@ -81,6 +81,14 @@ .json-formatter-row .toggler.open:after { transform: rotate(90deg); } +.json-formatter-row > a > .thumbnail-text { + opacity: 0; + transition: opacity 0.15s ease-in; + font-style: italic; +} +.json-formatter-row:hover > a > .thumbnail-text { + opacity: 0.6; +} .json-formatter-dark.json-formatter-row { font-family: monospace; } @@ -156,3 +164,11 @@ .json-formatter-dark.json-formatter-row .toggler.open:after { transform: rotate(90deg); } +.json-formatter-dark.json-formatter-row > a > .thumbnail-text { + opacity: 0; + transition: opacity 0.15s ease-in; + font-style: italic; +} +.json-formatter-dark.json-formatter-row:hover > a > .thumbnail-text { + opacity: 0.6; +} diff --git a/dist/json-formatter.js b/dist/json-formatter.js index a81917c..2abdde4 100644 --- a/dist/json-formatter.js +++ b/dist/json-formatter.js @@ -1,7 +1,7 @@ /*! * jsonformatter * - * Version: 0.3.0 - 2015-07-09T13:22:11.371Z + * Version: 0.3.1 - 2015-08-13T05:50:21.229Z * License: MIT */ @@ -9,7 +9,44 @@ 'use strict'; angular.module('jsonFormatter', ['RecursionHelper']) -.directive('jsonFormatter', ['RecursionHelper', function (RecursionHelper) { +.provider('thumbnail', function thumbnailProvider() { + + var enabled = false; + var arrayCount = 100; + var fieldCount = 5; + return { + + get enabled() { + return enabled; + }, + set enabled(value) { + enabled = !!value; + }, + + get arrayCount() { + return arrayCount; + }, + set arrayCount(value) { + arrayCount = parseInt(value, 10); + }, + + get fieldCount() { + return fieldCount; + }, + set fieldCount(value) { + fieldCount = parseInt(value, 10); + }, + + $get: function () { + return { + enabled: enabled, + arrayCount: arrayCount, + fieldCount: fieldCount + }; + } + }; +}) +.directive('jsonFormatter', ['RecursionHelper', 'thumbnail', function (RecursionHelper, thumbnail) { function escapeString(str) { return str.replace('"', '\"'); } @@ -39,13 +76,44 @@ angular.module('jsonFormatter', ['RecursionHelper']) return typeof object; } + function getValuePreview (object, value) { + var type = getType(object); + + if (type === 'null' || type === 'undefined') { return type; } + + if (type === 'string') { + value = '"' + escapeString(value) + '"'; + } + if (type === 'function'){ + + // Remove content of the function + return object.toString() + .replace(/[\r\n]/g, '') + .replace(/\{.*\}/, '') + '{ ... }'; + + } + return value; + } + + function getPreview(object) { + var value = ''; + if (angular.isObject(object)) { + value = getObjectName(object); + if (angular.isArray(object)) + value += '[' + object.length + ']'; + } else { + value = getValuePreview(object, object); + } + return value; + } + function link(scope, element, attributes) { scope.isArray = function () { - return Array.isArray(scope.json); + return angular.isArray(scope.json); }; scope.isObject = function() { - return scope.json && typeof scope.json === 'object'; + return angular.isObject(scope.json); }; scope.getKeys = function (){ @@ -100,25 +168,43 @@ angular.module('jsonFormatter', ['RecursionHelper']) }; scope.parseValue = function (value){ - scope.type = getType(scope.json); - if (scope.type === 'null') { - return 'null'; - } - if (scope.type === 'undefined') { - return 'undefined'; - } - if (scope.type === 'string') { - value = '"' + escapeString(value) + '"'; - } - if (scope.type === 'function'){ + return getValuePreview(scope.json, value); + }; - // Remove content of the function - return scope.json.toString() - .replace(/[\r\n]/g, '') - .replace(/\{.*\}/, '') + '{ ... }'; + scope.showThumbnail = function () { + return !!thumbnail.enabled && scope.isObject() && !scope.isOpen; + }; + + scope.getThumbnail = function () { + if (scope.isArray()) { + // + // if array length is 256, greater then 100 + // show "Array[256]" + if (scope.json.length > thumbnail.arrayCount) { + return 'Array[' + scope.json.length + ']'; + } else { + return '[' + scope.json.map(getPreview).join(', ') + ']'; + } + } else { + + var keys = scope.getKeys(); + // + // the first five keys (like Chrome Developer Tool) + var narrowKeys = keys.slice(0, thumbnail.fieldCount); + + + // + // json value schematic information + var kvs = narrowKeys + .map(function (key) { return key + ':' + getPreview(scope.json[key]); }); + + // + // if keys count greater then 5 + // then show ellipsis + var ellipsis = keys.length >= 5 ? "…" : ''; + return '{' + kvs.join(', ') + ellipsis + '}'; } - return value; }; } @@ -186,4 +272,4 @@ angular.module('RecursionHelper', []).factory('RecursionHelper', ['$compile', fu }; }]); -angular.module("jsonFormatter").run(["$templateCache", function($templateCache) {$templateCache.put("json-formatter.html","
0\" class=\"json-formatter-row\"> {{key}}: {{getConstructorName(json)}} [{{json.length}}] {{parseValue(json)}}
");}]); \ No newline at end of file +angular.module("jsonFormatter").run(["$templateCache", function($templateCache) {$templateCache.put("json-formatter.html","
0\" class=\"json-formatter-row\"> {{key}}: {{getConstructorName(json)}} [{{json.length}}] {{parseValue(json)}} {{getThumbnail()}}
");}]); \ No newline at end of file diff --git a/dist/json-formatter.min.css b/dist/json-formatter.min.css index 2aa209a..9c82528 100644 --- a/dist/json-formatter.min.css +++ b/dist/json-formatter.min.css @@ -1,6 +1,6 @@ /*! * jsonformatter * - * Version: 0.3.0 - 2015-07-09T13:22:11.385Z + * Version: 0.3.1 - 2015-08-13T05:50:21.236Z * License: MIT - */.json-formatter-dark.json-formatter-row,.json-formatter-row{font-family:monospace}.json-formatter-dark.json-formatter-row .toggler.open:after,.json-formatter-row .toggler.open:after{transform:rotate(90deg)}.json-formatter-row,.json-formatter-row a,.json-formatter-row a:hover{color:#000;text-decoration:none}.json-formatter-row .json-formatter-row{margin-left:1em}.json-formatter-row .children.empty{opacity:.5;margin-left:1em}.json-formatter-row .children.empty.object:after{content:"No properties"}.json-formatter-row .children.empty.array:after{content:"[]"}.json-formatter-row .string{color:green;white-space:pre;word-wrap:break-word}.json-formatter-row .number{color:#00f}.json-formatter-row .boolean{color:red}.json-formatter-row .null{color:#855a00}.json-formatter-row .undefined{color:#ca0b69}.json-formatter-row .function{color:#ff20ed}.json-formatter-row .date{background-color:rgba(0,0,0,.05)}.json-formatter-row .url{text-decoration:underline;color:#00f;cursor:pointer}.json-formatter-row .bracket{color:#00f}.json-formatter-row .key{color:#00008b;cursor:pointer}.json-formatter-row .constructor-name{cursor:pointer}.json-formatter-row .toggler{font-size:.8em;line-height:1.2em;vertical-align:middle;opacity:.6;cursor:pointer}.json-formatter-row .toggler:after{display:inline-block;transition:transform 100ms ease-in;content:"►"}.json-formatter-dark.json-formatter-row,.json-formatter-dark.json-formatter-row a,.json-formatter-dark.json-formatter-row a:hover{color:#fff;text-decoration:none}.json-formatter-dark.json-formatter-row .json-formatter-row{margin-left:1em}.json-formatter-dark.json-formatter-row .children.empty{opacity:.5;margin-left:1em}.json-formatter-dark.json-formatter-row .children.empty.object:after{content:"No properties"}.json-formatter-dark.json-formatter-row .children.empty.array:after{content:"[]"}.json-formatter-dark.json-formatter-row .string{color:#31f031;white-space:pre;word-wrap:break-word}.json-formatter-dark.json-formatter-row .number{color:#66c2ff}.json-formatter-dark.json-formatter-row .boolean{color:#ec4242}.json-formatter-dark.json-formatter-row .null{color:#eec97d}.json-formatter-dark.json-formatter-row .undefined{color:#ef8fbe}.json-formatter-dark.json-formatter-row .function{color:#fd48cb}.json-formatter-dark.json-formatter-row .date{background-color:rgba(255,255,255,.05)}.json-formatter-dark.json-formatter-row .url{text-decoration:underline;color:#027bff;cursor:pointer}.json-formatter-dark.json-formatter-row .bracket{color:#9494ff}.json-formatter-dark.json-formatter-row .key{color:#23a0db;cursor:pointer}.json-formatter-dark.json-formatter-row .constructor-name{cursor:pointer}.json-formatter-dark.json-formatter-row .toggler{font-size:.8em;line-height:1.2em;vertical-align:middle;opacity:.6;cursor:pointer}.json-formatter-dark.json-formatter-row .toggler:after{display:inline-block;transition:transform 100ms ease-in;content:"►"} \ No newline at end of file + */.json-formatter-dark.json-formatter-row,.json-formatter-row{font-family:monospace}.json-formatter-dark.json-formatter-row .toggler.open:after,.json-formatter-row .toggler.open:after{transform:rotate(90deg)}.json-formatter-row,.json-formatter-row a,.json-formatter-row a:hover{color:#000;text-decoration:none}.json-formatter-row .json-formatter-row{margin-left:1em}.json-formatter-row .children.empty{opacity:.5;margin-left:1em}.json-formatter-row .children.empty.object:after{content:"No properties"}.json-formatter-row .children.empty.array:after{content:"[]"}.json-formatter-row .string{color:green;white-space:pre;word-wrap:break-word}.json-formatter-row .number{color:#00f}.json-formatter-row .boolean{color:red}.json-formatter-row .null{color:#855a00}.json-formatter-row .undefined{color:#ca0b69}.json-formatter-row .function{color:#ff20ed}.json-formatter-row .date{background-color:rgba(0,0,0,.05)}.json-formatter-row .url{text-decoration:underline;color:#00f;cursor:pointer}.json-formatter-row .bracket{color:#00f}.json-formatter-row .key{color:#00008b;cursor:pointer}.json-formatter-row .constructor-name{cursor:pointer}.json-formatter-row .toggler{font-size:.8em;line-height:1.2em;vertical-align:middle;opacity:.6;cursor:pointer}.json-formatter-row .toggler:after{display:inline-block;transition:transform 100ms ease-in;content:"►"}.json-formatter-row>a>.thumbnail-text{opacity:0;transition:opacity .15s ease-in;font-style:italic}.json-formatter-row:hover>a>.thumbnail-text{opacity:.6}.json-formatter-dark.json-formatter-row,.json-formatter-dark.json-formatter-row a,.json-formatter-dark.json-formatter-row a:hover{color:#fff;text-decoration:none}.json-formatter-dark.json-formatter-row .json-formatter-row{margin-left:1em}.json-formatter-dark.json-formatter-row .children.empty{opacity:.5;margin-left:1em}.json-formatter-dark.json-formatter-row .children.empty.object:after{content:"No properties"}.json-formatter-dark.json-formatter-row .children.empty.array:after{content:"[]"}.json-formatter-dark.json-formatter-row .string{color:#31f031;white-space:pre;word-wrap:break-word}.json-formatter-dark.json-formatter-row .number{color:#66c2ff}.json-formatter-dark.json-formatter-row .boolean{color:#ec4242}.json-formatter-dark.json-formatter-row .null{color:#eec97d}.json-formatter-dark.json-formatter-row .undefined{color:#ef8fbe}.json-formatter-dark.json-formatter-row .function{color:#fd48cb}.json-formatter-dark.json-formatter-row .date{background-color:rgba(255,255,255,.05)}.json-formatter-dark.json-formatter-row .url{text-decoration:underline;color:#027bff;cursor:pointer}.json-formatter-dark.json-formatter-row .bracket{color:#9494ff}.json-formatter-dark.json-formatter-row .key{color:#23a0db;cursor:pointer}.json-formatter-dark.json-formatter-row .constructor-name{cursor:pointer}.json-formatter-dark.json-formatter-row .toggler{font-size:.8em;line-height:1.2em;vertical-align:middle;opacity:.6;cursor:pointer}.json-formatter-dark.json-formatter-row .toggler:after{display:inline-block;transition:transform 100ms ease-in;content:"►"}.json-formatter-dark.json-formatter-row>a>.thumbnail-text{opacity:0;transition:opacity .15s ease-in;font-style:italic}.json-formatter-dark.json-formatter-row:hover>a>.thumbnail-text{opacity:.6} \ No newline at end of file diff --git a/dist/json-formatter.min.js b/dist/json-formatter.min.js index b0f1cc1..5839c7f 100644 --- a/dist/json-formatter.min.js +++ b/dist/json-formatter.min.js @@ -1,7 +1,7 @@ /*! * jsonformatter * - * Version: 0.3.0 - 2015-07-09T13:22:11.371Z + * Version: 0.3.1 - 2015-08-13T05:50:21.229Z * License: MIT */ -"use strict";angular.module("jsonFormatter",["RecursionHelper"]).directive("jsonFormatter",["RecursionHelper",function(n){function e(n){return n.replace('"','"')}function t(n){if(void 0===n)return"";if(null===n)return"Object";if("object"==typeof n&&!n.constructor)return"Object";var e=/function (.{1,})\(/,t=e.exec(n.constructor.toString());return t&&t.length>1?t[1]:""}function r(n){return null===n?"null":typeof n}function s(n,s,o){n.isArray=function(){return Array.isArray(n.json)},n.isObject=function(){return n.json&&"object"==typeof n.json},n.getKeys=function(){return n.isObject()?Object.keys(n.json).map(function(n){return""===n?'""':n}):void 0},n.type=r(n.json),n.hasKey="undefined"!=typeof n.key,n.getConstructorName=function(){return t(n.json)},"string"===n.type&&("Invalid Date"!==new Date(n.json).toString()&&(n.isDate=!0),0===n.json.indexOf("http")&&(n.isUrl=!0)),n.isEmptyObject=function(){return n.getKeys()&&!n.getKeys().length&&n.isOpen&&!n.isArray()},n.isOpen=!!n.open,n.toggleOpen=function(){n.isOpen=!n.isOpen},n.childrenOpen=function(){return n.open>1?n.open-1:0},n.openLink=function(e){e&&(window.location.href=n.json)},n.parseValue=function(t){return n.type=r(n.json),"null"===n.type?"null":"undefined"===n.type?"undefined":("string"===n.type&&(t='"'+e(t)+'"'),"function"===n.type?n.json.toString().replace(/[\r\n]/g,"").replace(/\{.*\}/,"")+"{ ... }":t)}}return{templateUrl:"json-formatter.html",restrict:"E",replace:!0,scope:{json:"=",key:"=",open:"="},compile:function(e){return n.compile(e,s)}}}]),angular.module("RecursionHelper",[]).factory("RecursionHelper",["$compile",function(n){return{compile:function(e,t){angular.isFunction(t)&&(t={post:t});var r,s=e.contents().remove();return{pre:t&&t.pre?t.pre:null,post:function(e,o){r||(r=n(s)),r(e,function(n){o.append(n)}),t&&t.post&&t.post.apply(null,arguments)}}}}}]),angular.module("jsonFormatter").run(["$templateCache",function(n){n.put("json-formatter.html",'
{{key}}: {{getConstructorName(json)}} [{{json.length}}] {{parseValue(json)}}
')}]); \ No newline at end of file +"use strict";angular.module("jsonFormatter",["RecursionHelper"]).provider("thumbnail",function(){var n=!1,e=100,t=5;return{get enabled(){return n},set enabled(e){n=!!e},get arrayCount(){return e},set arrayCount(n){e=parseInt(n,10)},get fieldCount(){return t},set fieldCount(n){t=parseInt(n,10)},$get:function(){return{enabled:n,arrayCount:e,fieldCount:t}}}}).directive("jsonFormatter",["RecursionHelper","thumbnail",function(n,e){function t(n){return n.replace('"','"')}function r(n){if(void 0===n)return"";if(null===n)return"Object";if("object"==typeof n&&!n.constructor)return"Object";var e=/function (.{1,})\(/,t=e.exec(n.constructor.toString());return t&&t.length>1?t[1]:""}function s(n){return null===n?"null":typeof n}function o(n,e){var r=s(n);return"null"===r||"undefined"===r?r:("string"===r&&(e='"'+t(e)+'"'),"function"===r?n.toString().replace(/[\r\n]/g,"").replace(/\{.*\}/,"")+"{ ... }":e)}function i(n){var e="";return angular.isObject(n)?(e=r(n),angular.isArray(n)&&(e+="["+n.length+"]")):e=o(n,n),e}function a(n,t,a){n.isArray=function(){return angular.isArray(n.json)},n.isObject=function(){return angular.isObject(n.json)},n.getKeys=function(){return n.isObject()?Object.keys(n.json).map(function(n){return""===n?'""':n}):void 0},n.type=s(n.json),n.hasKey="undefined"!=typeof n.key,n.getConstructorName=function(){return r(n.json)},"string"===n.type&&("Invalid Date"!==new Date(n.json).toString()&&(n.isDate=!0),0===n.json.indexOf("http")&&(n.isUrl=!0)),n.isEmptyObject=function(){return n.getKeys()&&!n.getKeys().length&&n.isOpen&&!n.isArray()},n.isOpen=!!n.open,n.toggleOpen=function(){n.isOpen=!n.isOpen},n.childrenOpen=function(){return n.open>1?n.open-1:0},n.openLink=function(e){e&&(window.location.href=n.json)},n.parseValue=function(e){return o(n.json,e)},n.showThumbnail=function(){return!!e.enabled&&n.isObject()&&!n.isOpen},n.getThumbnail=function(){if(n.isArray())return n.json.length>e.arrayCount?"Array["+n.json.length+"]":"["+n.json.map(i).join(", ")+"]";var t=n.getKeys(),r=t.slice(0,e.fieldCount),s=r.map(function(e){return e+":"+i(n.json[e])}),o=t.length>=5?"…":"";return"{"+s.join(", ")+o+"}"}}return{templateUrl:"json-formatter.html",restrict:"E",replace:!0,scope:{json:"=",key:"=",open:"="},compile:function(e){return n.compile(e,a)}}}]),angular.module("RecursionHelper",[]).factory("RecursionHelper",["$compile",function(n){return{compile:function(e,t){angular.isFunction(t)&&(t={post:t});var r,s=e.contents().remove();return{pre:t&&t.pre?t.pre:null,post:function(e,o){r||(r=n(s)),r(e,function(n){o.append(n)}),t&&t.post&&t.post.apply(null,arguments)}}}}}]),angular.module("jsonFormatter").run(["$templateCache",function(n){n.put("json-formatter.html",'
{{key}}: {{getConstructorName(json)}} [{{json.length}}] {{parseValue(json)}} {{getThumbnail()}}
')}]); \ No newline at end of file diff --git a/src/json-formatter.html b/src/json-formatter.html index 9617da1..604c35e 100644 --- a/src/json-formatter.html +++ b/src/json-formatter.html @@ -9,6 +9,9 @@ {{parseValue(json)}} + + {{getThumbnail()}} +
diff --git a/src/json-formatter.js b/src/json-formatter.js index 24eb6f2..fee3675 100644 --- a/src/json-formatter.js +++ b/src/json-formatter.js @@ -1,7 +1,44 @@ 'use strict'; angular.module('jsonFormatter', ['RecursionHelper']) -.directive('jsonFormatter', ['RecursionHelper', function (RecursionHelper) { +.provider('thumbnail', function thumbnailProvider() { + + var enabled = false; + var arrayCount = 100; + var fieldCount = 5; + return { + + get enabled() { + return enabled; + }, + set enabled(value) { + enabled = !!value; + }, + + get arrayCount() { + return arrayCount; + }, + set arrayCount(value) { + arrayCount = parseInt(value, 10); + }, + + get fieldCount() { + return fieldCount; + }, + set fieldCount(value) { + fieldCount = parseInt(value, 10); + }, + + $get: function () { + return { + enabled: enabled, + arrayCount: arrayCount, + fieldCount: fieldCount + }; + } + }; +}) +.directive('jsonFormatter', ['RecursionHelper', 'thumbnail', function (RecursionHelper, thumbnail) { function escapeString(str) { return str.replace('"', '\"'); } @@ -31,13 +68,44 @@ angular.module('jsonFormatter', ['RecursionHelper']) return typeof object; } + function getValuePreview (object, value) { + var type = getType(object); + + if (type === 'null' || type === 'undefined') { return type; } + + if (type === 'string') { + value = '"' + escapeString(value) + '"'; + } + if (type === 'function'){ + + // Remove content of the function + return object.toString() + .replace(/[\r\n]/g, '') + .replace(/\{.*\}/, '') + '{ ... }'; + + } + return value; + } + + function getPreview(object) { + var value = ''; + if (angular.isObject(object)) { + value = getObjectName(object); + if (angular.isArray(object)) + value += '[' + object.length + ']'; + } else { + value = getValuePreview(object, object); + } + return value; + } + function link(scope, element, attributes) { scope.isArray = function () { - return Array.isArray(scope.json); + return angular.isArray(scope.json); }; scope.isObject = function() { - return scope.json && typeof scope.json === 'object'; + return angular.isObject(scope.json); }; scope.getKeys = function (){ @@ -92,25 +160,43 @@ angular.module('jsonFormatter', ['RecursionHelper']) }; scope.parseValue = function (value){ - scope.type = getType(scope.json); - if (scope.type === 'null') { - return 'null'; - } - if (scope.type === 'undefined') { - return 'undefined'; - } - if (scope.type === 'string') { - value = '"' + escapeString(value) + '"'; - } - if (scope.type === 'function'){ + return getValuePreview(scope.json, value); + }; - // Remove content of the function - return scope.json.toString() - .replace(/[\r\n]/g, '') - .replace(/\{.*\}/, '') + '{ ... }'; + scope.showThumbnail = function () { + return !!thumbnail.enabled && scope.isObject() && !scope.isOpen; + }; + scope.getThumbnail = function () { + if (scope.isArray()) { + // + // if array length is 256, greater then 100 + // show "Array[256]" + if (scope.json.length > thumbnail.arrayCount) { + return 'Array[' + scope.json.length + ']'; + } else { + return '[' + scope.json.map(getPreview).join(', ') + ']'; + } + } else { + + var keys = scope.getKeys(); + // + // the first five keys (like Chrome Developer Tool) + var narrowKeys = keys.slice(0, thumbnail.fieldCount); + + + // + // json value schematic information + var kvs = narrowKeys + .map(function (key) { return key + ':' + getPreview(scope.json[key]); }); + + // + // if keys count greater then 5 + // then show ellipsis + var ellipsis = keys.length >= 5 ? "…" : ''; + + return '{' + kvs.join(', ') + ellipsis + '}'; } - return value; }; } diff --git a/src/json-formatter.less b/src/json-formatter.less index 6382ff9..ef6d9fa 100644 --- a/src/json-formatter.less +++ b/src/json-formatter.less @@ -76,6 +76,16 @@ transform: rotate(90deg); } } + + > a >.thumbnail-text { + opacity: 0; + transition: opacity .15s ease-in; + font-style:italic; + } + + &:hover > a > .thumbnail-text { + opacity: 0.6; + } } diff --git a/test/json-formatter.spec.js b/test/json-formatter.spec.js index ba87f8f..913fbe0 100644 --- a/test/json-formatter.spec.js +++ b/test/json-formatter.spec.js @@ -1,7 +1,7 @@ 'use strict'; describe('json-formatter', function () { - var scope, $compile, $rootScope, element; + var scope, $compile, $rootScope, element, fakeModule, thumbnailProviderConfig; function createDirective(key, open) { open = open === undefined ? 0 : open; @@ -31,6 +31,26 @@ describe('json-formatter', function () { scope.emptyArray = []; scope.array = ['one', 'two', 'three']; scope.simpleObject = {me: 1}; + scope.longerObject = { + numbers: [ + 1, + 2, + 3 + ], + boolean: true, + 'null': null, + number: 123, + anObject: { + a: 'b', + c: 'd', + e: 'f\"' + }, + string: 'Hello World', + url: 'https://github.com/mohsen1/json-formatter', + date: 'Sun Aug 03 2014 20:46:55 GMT-0700 (PDT)', + func: function add(a,b){return a + b; } + }; + scope.mixArray = [1, '2', {number: 3}]; $compile(elm)(scope); scope.$digest(); @@ -38,7 +58,14 @@ describe('json-formatter', function () { return elm; } - beforeEach(module('ngSanitize', 'jsonFormatter')); + beforeEach(function () { + fakeModule = angular + .module('test.jsonFormatter', ['jsonFormatter', 'ngSanitize']) + .config(['thumbnailProvider', function (thumbnailProvider) { + thumbnailProviderConfig = thumbnailProvider; + }]); + module('test.jsonFormatter', 'jsonFormatter', 'ngSanitize'); + }); beforeEach(inject(function(_$rootScope_, _$compile_) { $rootScope = _$rootScope_; scope = $rootScope.$new(); @@ -73,7 +100,7 @@ describe('json-formatter', function () { expect(element.text()).toContain('function'); expect(element.text()).toContain('add'); expect(element.text()).toContain('(a, b)'); - expect(element.text().match(/function\s[^\(]*\([^\)]*\)\s*(.*)/)[1]).toBe('{ ... }'); + expect(element.text().trim().match(/function\s[^\(]*\([^\)]*\)\s*(.*)/)[1]).toBe('{ ... }'); }); }); @@ -83,7 +110,7 @@ describe('json-formatter', function () { expect(element.text()).toContain('function'); expect(element.text()).toContain('getAdd'); expect(element.text()).toContain('(service, a)'); - expect(element.text().match(/function\s[^\(]*\([^\)]*\)\s*(.*)/)[1]).toBe('{ ... }'); + expect(element.text().trim().match(/function\s[^\(]*\([^\)]*\)\s*(.*)/)[1]).toBe('{ ... }'); }); }); @@ -196,6 +223,41 @@ describe('json-formatter', function () { expect(element.find('.toggler').hasClass('open')).toBe(true); }); }); + + describe('thumbnail', function() { + + it('default is disabled', function () { + element = createDirective('mixArray'); + expect(element.find('.thumbnail-text').length).toBe(0); + }); + + describe('set enable', function () { + beforeEach(function () { + thumbnailProviderConfig.enabled = true; + }); + + it('should render "simple object"', function () { + element = createDirective('simpleObject', 0); + expect(element.find('.thumbnail-text').text().trim()).toBe('{me:1}'); + }); + + it('should render "longer object"', function () { + element = createDirective('longerObject', 0); + expect(element.find('.thumbnail-text').text().trim()).toBe('{numbers:Array[3], boolean:true, null:null, number:123, anObject:Object…}'); + }); + + it('should render "array"', function () { + element = createDirective('array', 0); + expect(element.find('.thumbnail-text').text().trim()).toBe('["one", "two", "three"]'); + }); + + it('should render "mixArray"', function () { + element = createDirective('mixArray', 0); + expect(element.find('.thumbnail-text').text().trim()).toBe('[1, "2", Object]'); + }); + }); + + }); }); -}); +}); \ No newline at end of file