Skip to content

Commit

Permalink
Use Jest and emit CommonJS instead of UMD
Browse files Browse the repository at this point in the history
  • Loading branch information
Mohsen Azimi committed Mar 30, 2017
1 parent 184a3b4 commit 669e25b
Show file tree
Hide file tree
Showing 9 changed files with 324 additions and 531 deletions.
640 changes: 238 additions & 402 deletions dist/json-formatter.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/json-formatter.js.map
View file

Large diffs are not rendered by default.

25 changes: 16 additions & 9 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,18 @@
"main": "dist/json-formatter.js",
"scripts": {
"build": "webpack",
"test": "karma start --singleRun=true test/karma.conf.js"
"test": "jest"
},
"jest": {
"transform": {
".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js"
},
"testRegex": "(test/.*|\\.(test|spec))\\.(ts|tsx|js)$",
"moduleFileExtensions": [
"ts",
"tsx",
"js"
]
},
"repository": {
"type": "git",
Expand All @@ -21,22 +32,18 @@
},
"homepage": "https://github.com/mohsen1/json-formatter-js#readme",
"devDependencies": {
"@types/jest": "^19.2.2",
"chai": "^3.2.0",
"css-loader": "^0.26.1",
"karma": "^1.3.0",
"karma-chai": "^0.1.0",
"karma-chrome-launcher": "^2.0.0",
"karma-mocha": "^1.3.0",
"karma-mocha-reporter": "^2.2.1",
"karma-typescript-preprocessor": "^0.3.0",
"karma-webpack": "^2.0.2",
"jest": "^19.0.2",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"minimist": "^1.2.0",
"mocha": "^3.2.0",
"style-loader": "^0.13.1",
"ts-jest": "^19.0.6",
"ts-loader": "^2.0.0",
"typescript": "^2.1.4",
"typescript": "^2.2.2",
"webpack": "^2.2.1",
"webpack-dev-server": "^1.16.2"
}
Expand Down
20 changes: 10 additions & 10 deletions src/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
import './style.less';

import {
isObject,
getObjectName,
Expand All @@ -8,8 +6,9 @@ import {
getPreview,
cssClass,
createElement
} from './helpers.ts';
} from './helpers';

import * as style from './style.less';

const DATE_STRING_REGEX = /(^\d{1,4}[\.|\\/|-]\d{1,2}[\.|\\/|-]\d{1,4})(\s*(?:0?[1-9]:[0-5]|1(?=[012])\d:[0-5])\d\s*[ap]m)?$/;
const PARTIAL_DATE_REGEX = /\d{2}:\d{2}:\d{2} GMT-\d{4}/;
Expand All @@ -21,12 +20,12 @@ const MAX_ANIMATED_TOGGLE_ITEMS = 10;
const requestAnimationFrame = window.requestAnimationFrame || function(cb: ()=>void) { cb(); return 0; };

interface JSONFormatterConfiguration {
hoverPreviewEnabled: boolean;
hoverPreviewArrayCount: number;
hoverPreviewFieldCount: number;
animateOpen: boolean;
animateClose: boolean;
theme: string;
hoverPreviewEnabled?: boolean;
hoverPreviewArrayCount?: number;
hoverPreviewFieldCount?: number;
animateOpen?: boolean;
animateClose?: boolean;
theme?: string;
};

const _defaultConfig: JSONFormatterConfiguration = {
Expand All @@ -38,13 +37,14 @@ const _defaultConfig: JSONFormatterConfiguration = {
theme: null
};


/**
* @class JSONFormatter
*
* JSONFormatter allows you to render JSON objects in HTML with a
* **collapsible** navigation.
*/
export = class JSONFormatter {
export default class JSONFormatter {

// Hold the open state after the toggler is used
private _isOpen : boolean = null;
Expand Down
1 change: 1 addition & 0 deletions src/style.less.d.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export const theme: string;
59 changes: 0 additions & 59 deletions test/karma.conf.js
View file

This file was deleted.

89 changes: 42 additions & 47 deletions test/spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,19 @@
'use strict';

declare const describe;
declare const it;
declare const expect;
declare const JSONFormatter;

import { default as JSONFormatter } from '../src/index';

describe('null', () => {
it('should render "null"', () => {
const formatter = new JSONFormatter(null);

expect(formatter.render().innerText).to.contain('null');
const el = formatter.render();
expect(el.textContent).toContain('null');
});
});

describe('undefined', () => {
it('should render "undefined"', () => {
const formatter = new JSONFormatter(undefined);

expect(formatter.render().innerText).to.contain('undefined');
expect(formatter.render().textContent).toContain('undefined');
});
});

Expand All @@ -29,14 +24,14 @@ describe('object function constructor', () => {
const obj = new Format();

const formatter = new JSONFormatter(obj);
expect(formatter.constructorName).to.equal('Format');
expect(formatter['constructorName']).toEqual('Format');
});

it('should output "BrokenFormat"', () => {
const failConstructor = 'function BrokenFormat() {Object.assign(}';
const funcNameRegex = /function ([^(]*)/;
const results = (funcNameRegex).exec(failConstructor.toString());
expect(results[1]).to.equal('BrokenFormat');
expect(results[1]).toEqual('BrokenFormat');
});
});

Expand All @@ -46,45 +41,45 @@ describe('function', () => {
const formatter = new JSONFormatter(function add(a, b) {
return a + b;
});
const elementText = formatter.render().innerText;
const elementText = formatter.render().textContent;

expect(elementText).to.contain('function');
expect(elementText).to.contain('add');
expect(elementText).to.contain('(a, b)');
expect(elementText.trim().match(/function\s[^\(]*\([^\)]*\)\s*(.*)/)[1]).to.equal('{…}');
expect(elementText).toContain('function');
expect(elementText).toContain('add');
expect(elementText).toContain('(a, b)');
expect(elementText.trim().match(/function\s[^\(]*\([^\)]*\)\s*(.*)/)[1]).toEqual('{…}');
});
});

describe('string', () => {
it('should render "Hello World!"', () => {
const formatter = new JSONFormatter('Hello World!');

expect(formatter.render().innerText).to.contain('Hello World');
expect(formatter.render().textContent).toContain('Hello World');
});
});

describe('date string', () => {
const formatter = new JSONFormatter(new Date(0).toString());

it('should render "' + (new Date(0)).toString() + '"', () => {
expect(formatter.render().innerText).to.contain('"' + (new Date(0)).toString() + '"');
expect(formatter.render().textContent).toContain('"' + (new Date(0)).toString() + '"');
});

it('should assing date class to date string', () => {
const formatter = new JSONFormatter('2015-12-05T18:58:53.727Z');
expect(formatter.render().querySelector('.json-formatter-date')).not.to.be.null;
expect(formatter.render().querySelector('.json-formatter-date')).not.toBeNull();
});
});

describe('url string', () => {
const formatter = new JSONFormatter('https://example.com');

it('should render "https://example.com"', () => {
expect(formatter.render().innerText).to.contain('"https://example.com"');
expect(formatter.render().textContent).toContain('"https://example.com"');
});

it('should make a link and add class "url"', () => {
expect(formatter.render().querySelector('a.json-formatter-url')).not.to.equal(null);
expect(formatter.render().querySelector('a.json-formatter-url')).not.toEqual(null);
});
});

Expand All @@ -97,24 +92,24 @@ describe('openAtDepth after rendering', () => {

it('should open at depth 1', () => {
formatter.openAtDepth();
expect(element.outerHTML).to.contain('depth1');
expect(element.outerHTML).to.not.contain('depth2');
expect(element.outerHTML).to.not.contain('depth3');
expect(element.outerHTML).to.not.contain('depth4');
expect(element.outerHTML).toContain('depth1');
expect(element.outerHTML).not.toContain('depth2');
expect(element.outerHTML).not.toContain('depth3');
expect(element.outerHTML).not.toContain('depth4');
});

it('should collapses all', () => {
formatter.openAtDepth(0);
expect(element.outerHTML).to.not.contain('depth1');
expect(element.outerHTML).not.toContain('depth1');
});

it('should expand all', () => {
formatter.openAtDepth(Infinity);
expect(element.outerHTML).to.contain('depth1');
expect(element.outerHTML).to.contain('depth2');
expect(element.outerHTML).to.contain('depth3');
expect(element.outerHTML).to.contain('depth4');
expect(element.outerHTML).to.contain('21');
expect(element.outerHTML).toContain('depth1');
expect(element.outerHTML).toContain('depth2');
expect(element.outerHTML).toContain('depth3');
expect(element.outerHTML).toContain('depth4');
expect(element.outerHTML).toContain('21');
});
});

Expand All @@ -127,10 +122,10 @@ describe('openAtDepth before any rendering', () => {
it('should open at depth 1', () => {
formatter.openAtDepth();
const element = formatter.render();
expect(element.outerHTML).to.contain('depth1');
expect(element.outerHTML).to.not.contain('depth2');
expect(element.outerHTML).to.not.contain('depth3');
expect(element.outerHTML).to.not.contain('depth4');
expect(element.outerHTML).toContain('depth1');
expect(element.outerHTML).not.toContain('depth2');
expect(element.outerHTML).not.toContain('depth3');
expect(element.outerHTML).not.toContain('depth4');
});
});

Expand All @@ -143,16 +138,16 @@ describe('toggleOpen after rendering', () => {
});
const element = formatter.render();

expect(element.outerHTML).to.contain('Object');
expect(element.outerHTML).to.contain('depth1');
expect(element.outerHTML).toContain('Object');
expect(element.outerHTML).toContain('depth1');

formatter.toggleOpen();

expect(element.outerHTML).to.contain('Object');
expect(element.outerHTML).to.not.contain('depth1');
expect(element.outerHTML).to.not.contain('depth2');
expect(element.outerHTML).to.not.contain('depth3');
expect(element.outerHTML).to.not.contain('depth4');
expect(element.outerHTML).toContain('Object');
expect(element.outerHTML).not.toContain('depth1');
expect(element.outerHTML).not.toContain('depth2');
expect(element.outerHTML).not.toContain('depth3');
expect(element.outerHTML).not.toContain('depth4');
});
});

Expand All @@ -164,10 +159,10 @@ describe('toggleOpen before any rendering', () => {
});
formatter.toggleOpen();
const element = formatter.render();
expect(element.outerHTML).to.contain('Object');
expect(element.outerHTML).to.not.contain('depth1');
expect(element.outerHTML).to.not.contain('depth2');
expect(element.outerHTML).to.not.contain('depth3');
expect(element.outerHTML).to.not.contain('depth4');
expect(element.outerHTML).toContain('Object');
expect(element.outerHTML).not.toContain('depth1');
expect(element.outerHTML).not.toContain('depth2');
expect(element.outerHTML).not.toContain('depth3');
expect(element.outerHTML).not.toContain('depth4');
});
});
14 changes: 12 additions & 2 deletions tsconfig.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,17 @@
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"allowJs": true
"module": "es2015",
"allowJs": true,
"allowSyntheticDefaultImports": false,
"moduleResolution": "node",
"sourceMap": true,
"lib": [
"dom",
"es2015"
],
"types": [
"jest"
]
}
}
5 changes: 4 additions & 1 deletion webpack.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,12 @@ module.exports = {
publicPath: 'dist',
filename: 'json-formatter.js',
library: 'JSONFormatter',
libraryTarget: 'umd',
libraryTarget: 'commonjs2',
umdNamedDefine: true
},
resolve: {
extensions: ['.ts', '.less']
},
module: {
rules: [
{
Expand Down

0 comments on commit 669e25b

Please sign in to comment.