Skip to content

Commit 669e25b

Browse files
author
Mohsen Azimi
committed
Use Jest and emit CommonJS instead of UMD
1 parent 184a3b4 commit 669e25b

File tree

9 files changed

+324
-531
lines changed

9 files changed

+324
-531
lines changed

‎dist/json-formatter.js

Lines changed: 238 additions & 402 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/json-formatter.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,18 @@
55
"main": "dist/json-formatter.js",
66
"scripts": {
77
"build": "webpack",
8-
"test": "karma start --singleRun=true test/karma.conf.js"
8+
"test": "jest"
9+
},
10+
"jest": {
11+
"transform": {
12+
".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js"
13+
},
14+
"testRegex": "(test/.*|\\.(test|spec))\\.(ts|tsx|js)$",
15+
"moduleFileExtensions": [
16+
"ts",
17+
"tsx",
18+
"js"
19+
]
920
},
1021
"repository": {
1122
"type": "git",
@@ -21,22 +32,18 @@
2132
},
2233
"homepage": "https://github.com/mohsen1/json-formatter-js#readme",
2334
"devDependencies": {
35+
"@types/jest": "^19.2.2",
2436
"chai": "^3.2.0",
2537
"css-loader": "^0.26.1",
26-
"karma": "^1.3.0",
27-
"karma-chai": "^0.1.0",
28-
"karma-chrome-launcher": "^2.0.0",
29-
"karma-mocha": "^1.3.0",
30-
"karma-mocha-reporter": "^2.2.1",
31-
"karma-typescript-preprocessor": "^0.3.0",
32-
"karma-webpack": "^2.0.2",
38+
"jest": "^19.0.2",
3339
"less": "^2.7.1",
3440
"less-loader": "^2.2.3",
3541
"minimist": "^1.2.0",
3642
"mocha": "^3.2.0",
3743
"style-loader": "^0.13.1",
44+
"ts-jest": "^19.0.6",
3845
"ts-loader": "^2.0.0",
39-
"typescript": "^2.1.4",
46+
"typescript": "^2.2.2",
4047
"webpack": "^2.2.1",
4148
"webpack-dev-server": "^1.16.2"
4249
}

‎src/index.ts

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import './style.less';
2-
31
import {
42
isObject,
53
getObjectName,
@@ -8,8 +6,9 @@ import {
86
getPreview,
97
cssClass,
108
createElement
11-
} from './helpers.ts';
9+
} from './helpers';
1210

11+
import * as style from './style.less';
1312

1413
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)?$/;
1514
const PARTIAL_DATE_REGEX = /\d{2}:\d{2}:\d{2} GMT-\d{4}/;
@@ -21,12 +20,12 @@ const MAX_ANIMATED_TOGGLE_ITEMS = 10;
2120
const requestAnimationFrame = window.requestAnimationFrame || function(cb: ()=>void) { cb(); return 0; };
2221

2322
interface JSONFormatterConfiguration {
24-
hoverPreviewEnabled: boolean;
25-
hoverPreviewArrayCount: number;
26-
hoverPreviewFieldCount: number;
27-
animateOpen: boolean;
28-
animateClose: boolean;
29-
theme: string;
23+
hoverPreviewEnabled?: boolean;
24+
hoverPreviewArrayCount?: number;
25+
hoverPreviewFieldCount?: number;
26+
animateOpen?: boolean;
27+
animateClose?: boolean;
28+
theme?: string;
3029
};
3130

3231
const _defaultConfig: JSONFormatterConfiguration = {
@@ -38,13 +37,14 @@ const _defaultConfig: JSONFormatterConfiguration = {
3837
theme: null
3938
};
4039

40+
4141
/**
4242
* @class JSONFormatter
4343
*
4444
* JSONFormatter allows you to render JSON objects in HTML with a
4545
* **collapsible** navigation.
4646
*/
47-
export = class JSONFormatter {
47+
export default class JSONFormatter {
4848

4949
// Hold the open state after the toggler is used
5050
private _isOpen : boolean = null;

‎src/style.less.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const theme: string;

‎test/karma.conf.js

Lines changed: 0 additions & 59 deletions
This file was deleted.

‎test/spec.ts

Lines changed: 42 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,19 @@
11
'use strict';
2-
3-
declare const describe;
4-
declare const it;
5-
declare const expect;
6-
declare const JSONFormatter;
7-
2+
import { default as JSONFormatter } from '../src/index';
83

94
describe('null', () => {
105
it('should render "null"', () => {
116
const formatter = new JSONFormatter(null);
12-
13-
expect(formatter.render().innerText).to.contain('null');
7+
const el = formatter.render();
8+
expect(el.textContent).toContain('null');
149
});
1510
});
1611

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

21-
expect(formatter.render().innerText).to.contain('undefined');
16+
expect(formatter.render().textContent).toContain('undefined');
2217
});
2318
});
2419

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

3126
const formatter = new JSONFormatter(obj);
32-
expect(formatter.constructorName).to.equal('Format');
27+
expect(formatter['constructorName']).toEqual('Format');
3328
});
3429

3530
it('should output "BrokenFormat"', () => {
3631
const failConstructor = 'function BrokenFormat() {Object.assign(}';
3732
const funcNameRegex = /function ([^(]*)/;
3833
const results = (funcNameRegex).exec(failConstructor.toString());
39-
expect(results[1]).to.equal('BrokenFormat');
34+
expect(results[1]).toEqual('BrokenFormat');
4035
});
4136
});
4237

@@ -46,45 +41,45 @@ describe('function', () => {
4641
const formatter = new JSONFormatter(function add(a, b) {
4742
return a + b;
4843
});
49-
const elementText = formatter.render().innerText;
44+
const elementText = formatter.render().textContent;
5045

51-
expect(elementText).to.contain('function');
52-
expect(elementText).to.contain('add');
53-
expect(elementText).to.contain('(a, b)');
54-
expect(elementText.trim().match(/function\s[^\(]*\([^\)]*\)\s*(.*)/)[1]).to.equal('{…}');
46+
expect(elementText).toContain('function');
47+
expect(elementText).toContain('add');
48+
expect(elementText).toContain('(a, b)');
49+
expect(elementText.trim().match(/function\s[^\(]*\([^\)]*\)\s*(.*)/)[1]).toEqual('{…}');
5550
});
5651
});
5752

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

62-
expect(formatter.render().innerText).to.contain('Hello World');
57+
expect(formatter.render().textContent).toContain('Hello World');
6358
});
6459
});
6560

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

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

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

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

8277
it('should render "https://example.com"', () => {
83-
expect(formatter.render().innerText).to.contain('"https://example.com"');
78+
expect(formatter.render().textContent).toContain('"https://example.com"');
8479
});
8580

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

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

9893
it('should open at depth 1', () => {
9994
formatter.openAtDepth();
100-
expect(element.outerHTML).to.contain('depth1');
101-
expect(element.outerHTML).to.not.contain('depth2');
102-
expect(element.outerHTML).to.not.contain('depth3');
103-
expect(element.outerHTML).to.not.contain('depth4');
95+
expect(element.outerHTML).toContain('depth1');
96+
expect(element.outerHTML).not.toContain('depth2');
97+
expect(element.outerHTML).not.toContain('depth3');
98+
expect(element.outerHTML).not.toContain('depth4');
10499
});
105100

106101
it('should collapses all', () => {
107102
formatter.openAtDepth(0);
108-
expect(element.outerHTML).to.not.contain('depth1');
103+
expect(element.outerHTML).not.toContain('depth1');
109104
});
110105

111106
it('should expand all', () => {
112107
formatter.openAtDepth(Infinity);
113-
expect(element.outerHTML).to.contain('depth1');
114-
expect(element.outerHTML).to.contain('depth2');
115-
expect(element.outerHTML).to.contain('depth3');
116-
expect(element.outerHTML).to.contain('depth4');
117-
expect(element.outerHTML).to.contain('21');
108+
expect(element.outerHTML).toContain('depth1');
109+
expect(element.outerHTML).toContain('depth2');
110+
expect(element.outerHTML).toContain('depth3');
111+
expect(element.outerHTML).toContain('depth4');
112+
expect(element.outerHTML).toContain('21');
118113
});
119114
});
120115

@@ -127,10 +122,10 @@ describe('openAtDepth before any rendering', () => {
127122
it('should open at depth 1', () => {
128123
formatter.openAtDepth();
129124
const element = formatter.render();
130-
expect(element.outerHTML).to.contain('depth1');
131-
expect(element.outerHTML).to.not.contain('depth2');
132-
expect(element.outerHTML).to.not.contain('depth3');
133-
expect(element.outerHTML).to.not.contain('depth4');
125+
expect(element.outerHTML).toContain('depth1');
126+
expect(element.outerHTML).not.toContain('depth2');
127+
expect(element.outerHTML).not.toContain('depth3');
128+
expect(element.outerHTML).not.toContain('depth4');
134129
});
135130
});
136131

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

146-
expect(element.outerHTML).to.contain('Object');
147-
expect(element.outerHTML).to.contain('depth1');
141+
expect(element.outerHTML).toContain('Object');
142+
expect(element.outerHTML).toContain('depth1');
148143

149144
formatter.toggleOpen();
150145

151-
expect(element.outerHTML).to.contain('Object');
152-
expect(element.outerHTML).to.not.contain('depth1');
153-
expect(element.outerHTML).to.not.contain('depth2');
154-
expect(element.outerHTML).to.not.contain('depth3');
155-
expect(element.outerHTML).to.not.contain('depth4');
146+
expect(element.outerHTML).toContain('Object');
147+
expect(element.outerHTML).not.toContain('depth1');
148+
expect(element.outerHTML).not.toContain('depth2');
149+
expect(element.outerHTML).not.toContain('depth3');
150+
expect(element.outerHTML).not.toContain('depth4');
156151
});
157152
});
158153

@@ -164,10 +159,10 @@ describe('toggleOpen before any rendering', () => {
164159
});
165160
formatter.toggleOpen();
166161
const element = formatter.render();
167-
expect(element.outerHTML).to.contain('Object');
168-
expect(element.outerHTML).to.not.contain('depth1');
169-
expect(element.outerHTML).to.not.contain('depth2');
170-
expect(element.outerHTML).to.not.contain('depth3');
171-
expect(element.outerHTML).to.not.contain('depth4');
162+
expect(element.outerHTML).toContain('Object');
163+
expect(element.outerHTML).not.toContain('depth1');
164+
expect(element.outerHTML).not.toContain('depth2');
165+
expect(element.outerHTML).not.toContain('depth3');
166+
expect(element.outerHTML).not.toContain('depth4');
172167
});
173168
});

‎tsconfig.json

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,17 @@
11
{
22
"compilerOptions": {
33
"target": "es5",
4-
"module": "commonjs",
5-
"allowJs": true
4+
"module": "es2015",
5+
"allowJs": true,
6+
"allowSyntheticDefaultImports": false,
7+
"moduleResolution": "node",
8+
"sourceMap": true,
9+
"lib": [
10+
"dom",
11+
"es2015"
12+
],
13+
"types": [
14+
"jest"
15+
]
616
}
717
}

‎webpack.config.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,12 @@ module.exports = {
1313
publicPath: 'dist',
1414
filename: 'json-formatter.js',
1515
library: 'JSONFormatter',
16-
libraryTarget: 'umd',
16+
libraryTarget: 'commonjs2',
1717
umdNamedDefine: true
1818
},
19+
resolve: {
20+
extensions: ['.ts', '.less']
21+
},
1922
module: {
2023
rules: [
2124
{

0 commit comments

Comments
 (0)