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