test: add test case.

Author: jaywcjlove

.github/workflows/ci.yml

@@ -16,9 +16,19 @@ jobs:
 
       - run: npm install
       - run: npm run build
+      - run: npm run coverage
       - run: npm run build
         working-directory: ./www
 
+      - name: Create Coverage Badges
+        uses: jaywcjlove/coverage-badges-cli@main
+        with:
+          style: flat
+          source: core/coverage/coverage-summary.json
+          output: ./www/build/badges.svg
+          
+      - run: cp -rp core/coverage/lcov-report ./www/build/
+
       - name: Generate Contributors Images
         uses: jaywcjlove/github-action-contributors@main
         with:

.gitignore

@@ -1,9 +1,11 @@
+coverage
 cjs
 esm
 build
 node_modules
 npm-debug.log*
 package-lock.json
+__snapshots__
 
 .eslintcache
 .DS_Store

core/README.md

@@ -4,6 +4,7 @@ react-json-view
 [![CI](https://github.com/uiwjs/react-json-view/actions/workflows/ci.yml/badge.svg)](https://github.com/uiwjs/react-json-view/actions/workflows/ci.yml)
 [![npm version](https://img.shields.io/npm/v/@uiw/react-json-view.svg)](https://www.npmjs.com/package/@uiw/react-json-view)
 [![react@^18](https://shields.io/badge/react-^18-green?style=flat&logo=react)](https://github.com/facebook/react/releases)
+[![Coverage Status](https://www.npmjs.com/package/@uiw/react-json-view/badges.svg)](https://www.npmjs.com/package/@uiw/react-json-view/lcov-report/)
 
 A React component for displaying and editing javascript arrays and JSON objects.
 

core/package.json

@@ -74,7 +74,10 @@
     "treeview"
   ],
   "devDependencies": {
+    "@types/react-test-renderer": "^18.0.0",
+    "@testing-library/react": "^14.0.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-test-renderer": "^18.2.0"
   }
 }

core/src/arrow/TriangleSolidArrow.test.tsx

@@ -0,0 +1,19 @@
+import renderer from 'react-test-renderer';
+import { TriangleSolidArrow } from './TriangleSolidArrow';
+
+
+it('renders <JsonView /> test case', () => {
+  const component = renderer.create(
+    <TriangleSolidArrow />,
+  );
+  let tree = component.toJSON();
+  expect(tree).toHaveProperty('type');
+  expect(tree).toHaveProperty('props');
+  expect(tree).toHaveProperty('children');
+  expect(tree).toHaveProperty('type', 'svg');
+  expect(tree).toHaveProperty('props', {
+    viewBox: '0 0 15 15',
+    fill: 'var(--w-rjv-arrow-color, currentColor)',
+    style: { cursor: 'pointer', height: '1em', width: '1em' }
+  });
+});

core/src/copied.test.tsx

@@ -0,0 +1,32 @@
+import renderer from 'react-test-renderer';
+import {cleanup, screen, fireEvent, render} from '@testing-library/react';
+import { act } from 'react-dom/test-utils';
+import ReactDOM from 'react-dom/client';
+import userEvent from '@testing-library/user-event'
+import { Copied } from './copied';
+
+it('renders <Copied /> test case', () => {
+  const component = renderer.create(
+    <Copied />,
+  );
+  let tree = component.toJSON();
+  expect(tree).toBeNull();
+});
+
+it('renders <Copied /> `show` test case', () => {
+  const component = renderer.create(
+    <Copied text={{ a: 1 }} show />,
+  );
+  let tree = component.toJSON();
+  expect(tree).toHaveProperty('type');
+  expect(tree).toHaveProperty('props');
+  expect(tree).toHaveProperty('children');
+  expect(tree).toHaveProperty('type', 'svg');
+  expect(tree).toHaveProperty('props.viewBox', '0 0 38 38');
+  expect(tree).toHaveProperty('props.height', '1em');
+  expect(tree).toHaveProperty('props.width', '1em');
+  expect(tree).toHaveProperty('props.fill', 'var(--w-rjv-copied-color, currentColor)');
+  expect(tree).toHaveProperty('props.style', { cursor: 'pointer', marginLeft: 5 });
+  expect(tree).toHaveProperty('props.className', 'w-rjv-copied');
+  expect(tree).toHaveProperty('props.onClick');
+});

core/src/index.test.tsx

@@ -0,0 +1,52 @@
+import renderer from 'react-test-renderer';
+import {cleanup, fireEvent, render} from '@testing-library/react';
+import JsonView from './';
+
+
+const avatar = 'https://i.imgur.com/MK3eW3As.jpg';
+const longArray = new Array(1000).fill(1);
+const example = {
+  avatar,
+  string: 'Lorem ipsum dolor sit amet',
+  integer: 42,
+  float: 114.514,
+  // @ts-ignore
+  bigint: 10086n,
+  null: null,
+  undefined,
+  timer: 0,
+  date: new Date('Tue Sep 13 2022 14:07:44 GMT-0500 (Central Daylight Time)'),
+  array: [19, 100.86, 'test', NaN, Infinity],
+  nestedArray: [
+    [1, 2],
+    [3, 4],
+  ],
+  object: {
+    'first-child': true,
+    'second-child': false,
+    'last-child': null,
+  },
+  longArray,
+  string_number: '1234',
+};
+
+it('renders <JsonView /> test case', () => {
+  const component = renderer.create(
+    <JsonView value={example} />,
+  );
+  let tree = component.toJSON();
+  expect(tree).toHaveProperty('type');
+  expect(tree).toHaveProperty('props');
+  expect(tree).toHaveProperty('children');
+  expect(tree).toHaveProperty('type', 'div');
+  expect(tree).toHaveProperty('props.className', 'w-json-view-container w-rjv  w-rjv-inner');
+  expect(tree).toHaveProperty('props.style.backgroundColor', 'var(--w-rjv-background-color, #00000000)');
+  expect(tree).toHaveProperty('props.style', {
+    lineHeight: 1.4,
+    fontFamily: 'monospace',
+    color: 'var(--w-rjv-color, #002b36)',
+    backgroundColor: 'var(--w-rjv-background-color, #00000000)'
+  });
+  expect(tree).toHaveProperty('props.onMouseEnter');
+  expect(tree).toHaveProperty('props.onMouseLeave');
+});

core/src/node.tsx

@@ -87,6 +87,7 @@ export function RooNode<T extends object>(props: RooNodeProps<T>) {
   const {
     value = {},
     keyName,
+    className,
     displayDataTypes = true,
     components = {},
     displayObjectSize = true,
@@ -145,7 +146,7 @@ export function RooNode<T extends object>(props: RooNodeProps<T>) {
     eventProps.onMouseLeave = () => setShowTools(false);
   }
   return (
-    <div {...reset} className="w-rjv-inner" {...eventProps}>
+    <div {...reset} className={`${className} w-rjv-inner`} {...eventProps}>
       <Line style={{ display: 'inline-flex', alignItems: 'center' }} onClick={handle}>
         {arrowView}
         {(typeof keyName === 'string' || typeof keyName === 'number') && (

core/src/theme/dark.test.tsx

@@ -0,0 +1,25 @@
+import { darkTheme } from './dark';
+
+it('darkTheme test case', () => {
+  expect(darkTheme).toHaveProperty('--w-rjv-font-family', 'monospace');
+  expect(Object.keys(darkTheme)).toMatchObject(['--w-rjv-font-family',
+    '--w-rjv-color',
+    '--w-rjv-background-color',
+    '--w-rjv-line-color',
+    '--w-rjv-arrow-color',
+    '--w-rjv-info-color',
+    '--w-rjv-copied-color',
+    '--w-rjv-copied-success-color',
+    '--w-rjv-curlybraces-color',
+    '--w-rjv-brackets-color',
+    '--w-rjv-type-string-color',
+    '--w-rjv-type-int-color',
+    '--w-rjv-type-float-color',
+    '--w-rjv-type-bigint-color',
+    '--w-rjv-type-boolean-color',
+    '--w-rjv-type-date-color',
+    '--w-rjv-type-null-color',
+    '--w-rjv-type-nan-color',
+    '--w-rjv-type-undefined-color',
+  ]);
+});

core/src/theme/light.test.tsx

@@ -0,0 +1,25 @@
+import { lightTheme } from './light';
+
+it('lightTheme test case', () => {
+  expect(lightTheme).toHaveProperty('--w-rjv-font-family', 'monospace');
+  expect(Object.keys(lightTheme)).toMatchObject(['--w-rjv-font-family',
+    '--w-rjv-color',
+    '--w-rjv-background-color',
+    '--w-rjv-line-color',
+    '--w-rjv-arrow-color',
+    '--w-rjv-info-color',
+    '--w-rjv-copied-color',
+    '--w-rjv-copied-success-color',
+    '--w-rjv-curlybraces-color',
+    '--w-rjv-brackets-color',
+    '--w-rjv-type-string-color',
+    '--w-rjv-type-int-color',
+    '--w-rjv-type-float-color',
+    '--w-rjv-type-bigint-color',
+    '--w-rjv-type-boolean-color',
+    '--w-rjv-type-date-color',
+    '--w-rjv-type-null-color',
+    '--w-rjv-type-nan-color',
+    '--w-rjv-type-undefined-color',
+  ]);
+});