test: add String test case.

Author: jaywcjlove

core/src/comps/ReRender/Symbols.tsx

@@ -16,10 +16,9 @@ export const Quote = (props: { isNumber?: boolean } & React.HTMLAttributes<HTMLE
 
 Quote.displayName = 'JVR.Quote';
 
-export const ValueQuote = (props: { isNumber?: boolean } & React.HTMLAttributes<HTMLElement>) => {
+export const ValueQuote = (props: React.HTMLAttributes<HTMLElement>) => {
   const { ValueQuote: Comp = {} } = useSymbolsStore();
-  const { isNumber, ...other } = props;
-  if (isNumber) return null;
+  const { ...other } = props;
   const { as, render, ...reset } = Comp;
   const Elm = as || 'span';
   const elmProps = { ...other, ...reset };

core/src/comps/ReRender/Types.tsx

@@ -63,7 +63,6 @@ export const TypeString: FC<TypeProps> = ({ children = '', expandKey, keyName })
     };
     if (childrenStr.length > length) {
       reset.onClick = () => {
-        if (length && childrenStr.length <= length) return setShorten(false);
         setShorten(!shorten);
       };
     }
@@ -378,28 +377,3 @@ export const TypeNan: FC<TypeProps> = ({ children, expandKey, keyName }) => {
 };
 
 TypeNan.displayName = 'JVR.TypeNan';
-
-export const TypeEmptyValue: FC<TypeProps> = ({ children, expandKey, keyName }) => {
-  const { Nan = {}, displayDataTypes } = useTypesStore();
-  const { as, render, ...reset } = Nan;
-  const Comp = as || 'span';
-  const style: React.CSSProperties = {
-    ...defalutStyle,
-    ...(Nan.style || {}),
-  };
-
-  const isRender = render && typeof render === 'function';
-  const type = isRender && render({ ...reset, style }, { type: 'type', value: children });
-  const child =
-    isRender && render({ ...reset, children, className: 'w-rjv-value' }, { type: 'value', value: children });
-
-  return (
-    <Fragment>
-      {displayDataTypes && (type || <Comp {...reset} style={style} />)}
-      {child}
-      <Copied keyName={keyName} value={children as object} expandKey={expandKey} />
-    </Fragment>
-  );
-};
-
-TypeEmptyValue.displayName = 'JVR.TypeEmptyValue';

core/src/symbol/Arrow.test.tsx

@@ -20,3 +20,24 @@ it('renders <JsonView.Arrow /> test case', async () => {
     expect(arrow.tagName).toBe('svg');
   });
 });
+
+it('renders <JsonView.Arrow /> test case', async () => {
+  const demo = {
+    value: '123',
+  };
+  const { container } = render(
+    <JsonView value={demo}>
+      <JsonView.Arrow
+        render={() => {
+          return <span data-testid="arrow">x</span>;
+        }}
+      />
+    </JsonView>,
+  );
+  expect(container.firstElementChild).toBeInstanceOf(Element);
+  await waitFor(() => {
+    const arrow = screen.getByTestId('arrow');
+    expect(arrow.tagName).toBe('SPAN');
+    expect(arrow.innerHTML).toBe('x');
+  });
+});

core/src/types/String.test.tsx

@@ -0,0 +1,39 @@
+import userEvent from '@testing-library/user-event';
+import { screen, render, waitFor } from '@testing-library/react';
+import JsonView from '..';
+
+it('renders <JsonView.String /> test case', async () => {
+  const user = userEvent.setup();
+  const demo = {
+    string: 'Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet',
+  };
+  const { container } = render(
+    <JsonView value={demo}>
+      <JsonView.String
+        as="span"
+        render={(props, { type, value }) => {
+          expect(props.style).toHaveProperty('color', 'var(--w-rjv-type-string-color, #cb4b16)');
+          if (type === 'type') {
+            return <span {...props} data-testid="type" />;
+          }
+          return <span {...props} data-testid="value" />;
+        }}
+      />
+    </JsonView>,
+  );
+  expect(container.firstElementChild).toBeInstanceOf(Element);
+  await waitFor(async () => {
+    const type = screen.getByTestId('type');
+    expect(type.className).toBe('w-rjv-type');
+    expect(type.tagName).toBe('SPAN');
+    expect(type.innerHTML).toBe('string');
+    const value = screen.getByTestId('value');
+    expect(value.className).toBe('w-rjv-value');
+    expect(value.tagName).toBe('SPAN');
+    expect(value.innerHTML).toBe('Lorem ipsum dolor si...');
+    await user.click(value);
+    expect(value.innerHTML).toBe(demo.string);
+    await user.click(value);
+    expect(value.innerHTML).toBe('Lorem ipsum dolor si...');
+  });
+});