test: add useHighlight test case.

Author: jaywcjlove

core/src/Container.test.tsx

@@ -14,7 +14,7 @@ it('renders <JsonView /> Container test case', async () => {
   const { container } = render(
     <JsonView value={example} ref={divref}>
       <JsonView.Copied data-testid="copied" />
-      <JsonView.CountInfoExtra data-testid="infoExtra" />
+      <JsonView.CountInfo data-testid="countInfo" />
     </JsonView>,
   );
   expect(container.firstElementChild).toBeInstanceOf(Element);
@@ -26,8 +26,8 @@ it('renders <JsonView /> Container test case', async () => {
   expect(copied.style).toHaveProperty('vertical-align', 'middle');
   expect(copied.style).toHaveProperty('margin-left', '5px');
   await user.unhover(container.lastElementChild!);
-  const uncopied = screen.getByTestId('infoExtra');
-  expect(uncopied.nextElementSibling).toBeNull();
+  const countInfo = screen.getByTestId('countInfo');
+  expect(countInfo.nextElementSibling).toBeNull();
   await waitFor(() => {
     expect(divref.current instanceof HTMLDivElement).toBeTruthy();
   });

core/src/comps/CountInfo.tsx

@@ -1,12 +1,12 @@
 import { useSectionStore } from '../store/Section';
 
-export interface CountInfoProps<T extends object> {
+export interface EllipsisProps<T extends object> {
   value?: T;
   keyName: string | number;
   isExpanded: boolean;
 }
 
-export const Ellipsis = <T extends object>({ isExpanded, value, keyName }: CountInfoProps<T>) => {
+export const Ellipsis = <T extends object>({ isExpanded, value, keyName }: EllipsisProps<T>) => {
   const { Ellipsis: Comp = {} } = useSectionStore();
   const { as, render, ...reset } = Comp;
   const Elm = as || 'span';

core/src/comps/Ellipsis.tsx

@@ -5,7 +5,7 @@ import { useShowToolsDispatch } from '../store/ShowTools';
 import { Value } from './Value';
 import { Key } from './Key';
 import { Container } from '../Container';
-import { Quote, Colon } from './ReRender/Symbols';
+import { Quote, Colon } from '../symbol';
 import { useHighlight } from '../utils/useHighlight';
 
 interface KeyValuesProps<T extends object> {

core/src/comps/KeyValues.tsx

@@ -1,6 +1,6 @@
 import { useStore } from '../store';
 import { useExpandsStore } from '../store/Expands';
-import { BracketsClose } from './ReRender/Symbols';
+import { BracketsClose } from '../symbol';
 
 interface NestedCloseProps<T extends object> {
   value?: T;

core/src/comps/NestedClose.tsx

@@ -1,11 +1,12 @@
 import { KayName } from './KeyValues';
-import { useExpandsStore, useExpandsDispatch, useExpands } from '../store/Expands';
+import { useExpandsStore, useExpandsDispatch } from '../store/Expands';
 import { useStore } from '../store';
 import { Copied } from './Copied';
-import { CountInfo, CountInfoExtra } from './CountInfo';
-import { Arrow, BracketsOpen, BracketsClose } from './ReRender/Symbols';
+import { CountInfoExtraComps } from '../section/CountInfoExtra';
+import { CountInfoComp } from '../section/CountInfo';
+import { Arrow, BracketsOpen, BracketsClose } from '../symbol';
 import { Ellipsis } from './Ellipsis';
-import { SetComp, MapComp } from './ReRender/Types';
+import { SetComp, MapComp } from '../types';
 
 export interface NestedOpenProps<T extends object> {
   keyName?: string | number;
@@ -49,8 +50,8 @@ export const NestedOpen = <T extends object>(props: NestedOpenProps<T>) => {
       <BracketsOpen isBrackets={isArray || isMySet} />
       <Ellipsis keyName={keyName!} value={value} isExpanded={isExpanded} />
       <BracketsClose isVisiable={isExpanded || !showArrow} isBrackets={isArray || isMySet} />
-      <CountInfo value={value} keyName={keyName!} />
-      <CountInfoExtra value={value} keyName={keyName!} />
+      <CountInfoComp value={value} keyName={keyName!} />
+      <CountInfoExtraComps value={value} keyName={keyName!} />
       <Copied keyName={keyName!} value={value} expandKey={expandKey} />
     </span>
   );

core/src/comps/NestedOpen.tsx

@@ -10,7 +10,7 @@ import {
   TypeUndefined,
   TypeNan,
   TypeUrl,
-} from './ReRender/Types';
+} from '../types';
 
 export const isFloat = (n: number) => (Number(n) === n && n % 1 !== 0) || isNaN(n);
 

core/src/comps/Value.tsx

@@ -1,18 +1,6 @@
 import renderer from 'react-test-renderer';
-import userEvent from '@testing-library/user-event';
-import { screen, render, waitFor } from '@testing-library/react';
 import JsonView from './';
 
-const mySet = new Set();
-mySet.add(1); // Set(1) { 1 }
-mySet.add(5); // Set(2) { 1, 5 }
-mySet.add(5); // Set(2) { 1, 5 }
-mySet.add('some text'); // Set(3) { 1, 5, 'some text' }
-
-const myMap = new Map();
-myMap.set('www', 'foo');
-myMap.set(1, 'bar');
-
 const avatar = 'https://i.imgur.com/MK3eW3As.jpg';
 const longArray = new Array(1000).fill(1);
 const example = {
@@ -59,140 +47,3 @@ it('renders <JsonView /> test case', () => {
   expect(tree).toHaveProperty('props.onMouseEnter');
   expect(tree).toHaveProperty('props.onMouseLeave');
 });
-
-it('renders <JsonView.String /> test case', async () => {
-  const demo = {
-    string: 'Lorem ipsum dolor sit amet',
-  };
-  const { container } = render(
-    <JsonView value={demo}>
-      <JsonView.String
-        render={(props, { type }) => {
-          if (type === 'type') {
-            expect(props.style).toHaveProperty('color', 'var(--w-rjv-type-string-color, #cb4b16)');
-            return <em {...props} data-testid="str-type" />;
-          }
-          return <span {...props} data-testid="str-value" />;
-        }}
-      />
-    </JsonView>,
-  );
-  expect(container.firstElementChild).toBeInstanceOf(Element);
-  await waitFor(() => {
-    const type = screen.getByTestId('str-type');
-    expect(type.className).toBe('w-rjv-type');
-    expect(type.tagName).toBe('EM');
-    expect(type.innerHTML).toBe('string');
-    const value = screen.getByTestId('str-value');
-    expect(value.className).toBe('w-rjv-value');
-    expect(value.tagName).toBe('SPAN');
-    expect(value).toHaveProperty('style.cursor', 'pointer');
-  });
-});
-
-[
-  {
-    name: 'Bigint',
-    Comp: JsonView.Bigint,
-    value: BigInt(10086),
-    field: 'bigint',
-    color: 'var(--w-rjv-type-bigint-color, #268bd2)',
-  },
-  {
-    name: 'False',
-    Comp: JsonView.False,
-    value: false,
-    field: 'bool',
-    color: 'var(--w-rjv-type-boolean-color, #2aa198)',
-  },
-  {
-    name: 'Float',
-    Comp: JsonView.Float,
-    value: 0.3,
-    field: 'float',
-    color: 'var(--w-rjv-type-float-color, #859900)',
-  },
-  {
-    name: 'Int',
-    Comp: JsonView.Int,
-    value: 123,
-    field: 'int',
-    color: 'var(--w-rjv-type-int-color, #268bd2)',
-  },
-  {
-    name: 'True',
-    Comp: JsonView.True,
-    value: true,
-    field: 'bool',
-    color: 'var(--w-rjv-type-boolean-color, #2aa198)',
-  },
-  {
-    name: 'Null',
-    Comp: JsonView.Null,
-    value: null,
-    field: 'null',
-    color: 'var(--w-rjv-type-null-color, #d33682)',
-  },
-  {
-    name: 'Undefined',
-    Comp: JsonView.Undefined,
-    value: undefined,
-    field: 'undefined',
-    color: 'var(--w-rjv-type-undefined-color, #586e75)',
-  },
-  // {
-  //   name: 'Nan',
-  //   Comp: JsonView.Nan,
-  //   value: NaN,
-  //   field: 'NaN',
-  //   color: 'var(--w-rjv-type-nan-color, #859900)',
-  // },
-  // {
-  //   name: 'Date',
-  //   Comp: JsonView.Date,
-  //   value: new Date('2023/02/12'),
-  //   field: 'date',
-  //   color: 'var(--w-rjv-type-date-color, #268bd2)',
-  // },
-  // {
-  //   name: 'Url',
-  //   Comp: JsonView.Url,
-  //   value: new URL('https://www.google.com'),
-  //   field: 'url',
-  //   color: 'var(--w-rjv-type-url-color, #0969da)',
-  // },
-  // {
-  //   name: 'Map',
-  //   Comp: JsonView.Map,
-  //   value: myMap,
-  //   field: 'map',
-  //   color: 'var(--w-rjv-type-map-color, #268bd2)',
-  // },
-].forEach(({ name, value: val, field, color, Comp }) => {
-  it(`renders <JsonView.${name} /> test case`, async () => {
-    const demo = {
-      value: val,
-    };
-    const { container } = render(
-      <JsonView value={demo}>
-        <Comp
-          render={(props, { type, value }) => {
-            expect(value).toBe(val);
-            expect(props.style).toHaveProperty('color', color);
-            return <span {...props} data-testid={`${name}-${type}`} />;
-          }}
-        />
-      </JsonView>,
-    );
-    expect(container.firstElementChild).toBeInstanceOf(Element);
-    await waitFor(() => {
-      const type = screen.getByTestId(`${name}-type`);
-      expect(type.className).toBe('w-rjv-type');
-      expect(type.tagName).toBe('SPAN');
-      expect(type.innerHTML).toBe(field);
-      const value = screen.getByTestId(`${name}-value`);
-      expect(value.className).toBe('w-rjv-value');
-      expect(value.tagName).toBe('SPAN');
-    });
-  });
-});

core/src/index.test.tsx

@@ -36,7 +36,7 @@ export * from './store/Expands';
 export * from './store/ShowTools';
 export * from './store/Symbols';
 export * from './store/Types';
-export * from './comps/ReRender/Symbols';
+export * from './symbol';
 
 export interface JsonViewProps<T extends object>
   extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {

core/src/index.tsx

@@ -8,9 +8,8 @@ const example = {
 };
 
 it('renders <JsonView.CountInfo /> test case', async () => {
-  const divref = React.createRef<HTMLDivElement>();
   const { container } = render(
-    <JsonView value={example} ref={divref}>
+    <JsonView value={example}>
       <JsonView.CountInfo data-testid="countInfo" />
     </JsonView>,
   );
@@ -20,3 +19,33 @@ it('renders <JsonView.CountInfo /> test case', async () => {
   expect(copied.style).toHaveProperty('padding-left', '8px');
   expect(copied.style).toHaveProperty('font-style', 'italic');
 });
+
+it('renders <JsonView.CountInfo /> test case', async () => {
+  const { container } = render(
+    <JsonView value={example}>
+      <JsonView.CountInfo
+        data-testid="countInfo"
+        render={(props) => {
+          return <span {...props}>xxx</span>;
+        }}
+      />
+    </JsonView>,
+  );
+  expect(container.firstElementChild).toBeInstanceOf(Element);
+  const copied = screen.getByTestId('countInfo');
+  expect(copied.className).toEqual('w-rjv-object-size');
+  expect(copied.style).toHaveProperty('padding-left', '8px');
+  expect(copied.style).toHaveProperty('font-style', 'italic');
+});
+
+it('renders <JsonView.CountInfo /> displayObjectSize test case', async () => {
+  const { container } = render(
+    <JsonView value={example} displayObjectSize={false}>
+      <JsonView.CountInfo data-testid="countInfo" />
+      <JsonView.BraceLeft data-testid="brace" />
+    </JsonView>,
+  );
+  expect(container.firstElementChild).toBeInstanceOf(Element);
+  const brace = screen.getByTestId('brace');
+  expect(brace.nextElementSibling).toBeNull();
+});