test: add index test case.

Author: jaywcjlove

core/src/Container.tsx

@@ -18,7 +18,7 @@ export const Container = forwardRef(<T extends object>(props: ContainerProps<T>,
   const dispatch = useShowToolsDispatch();
   useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(ref, () => $ref.current, [$ref]);
   const subkeyid = useId();
-  const defaultClassNames = `w-rjv-inner ${className}`;
+  const defaultClassNames = [className, 'w-rjv-inner'].filter(Boolean).join(' ');
   const reset: React.HTMLAttributes<HTMLDivElement> = {
     onMouseEnter: () => dispatch({ [subkeyid]: true }),
     onMouseLeave: () => dispatch({ [subkeyid]: false }),

core/src/index.test.tsx

@@ -0,0 +1,49 @@
+import renderer from 'react-test-renderer';
+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,
+    fontSize: 13,
+    fontFamily: 'var(--w-rjv-font-family, Menlo, 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/index.tsx

@@ -123,7 +123,7 @@ const JsonView: JsonViewComponent = forwardRef<HTMLDivElement, JsonViewProps<obj
     fontSize: 13,
     ...style,
   } as React.CSSProperties;
-  const cls = `w-json-view-container w-rjv ${className || ''}`;
+  const cls = ['w-json-view-container', 'w-rjv', className].filter(Boolean).join(' ');
   return (
     <Provider
       initialState={{