test: add \semicolon` test case.

Author: jaywcjlove

core/src/copied.test.tsx

@@ -30,3 +30,36 @@ it('renders <Copied /> `show` test case', () => {
   expect(tree).toHaveProperty('props.className', 'w-rjv-copied');
   expect(tree).toHaveProperty('props.onClick');
 });
+
+it('renders <Copied /> `show` test case', () => {
+  function TriangleArrow(props: any) {
+    const { style, ...reset } = props;
+    const defaultStyle: React.CSSProperties = {
+      cursor: 'pointer',
+      height: '1em',
+      width: '1em',
+      ...style,
+    };
+    return (
+      <svg viewBox="0 0 24 24" fill="var(--w-rjv-arrow-color, currentColor)" style={defaultStyle} {...reset}>
+        <path d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"></path>
+      </svg>
+    );
+  }
+  
+  const component = renderer.create(
+    <Copied text={{ a: 1 }} show render={(props) => <TriangleArrow {...props}/>} />,
+  );
+  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 24 24');
+  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, height: '1em', width: '1em' });
+  expect(tree).toHaveProperty('props.className', 'w-rjv-copied');
+  expect(tree).toHaveProperty('props.onClick');
+});

core/src/semicolon.test.tsx

@@ -0,0 +1,40 @@
+import renderer from 'react-test-renderer';
+import { Semicolon } from './semicolon';
+
+it('renders <Semicolon /> test case', () => {
+  const component = renderer.create(
+    <Semicolon>name</Semicolon>,
+  );
+  let tree = component.toJSON();
+  expect(tree).toHaveProperty('type');
+  expect(tree).toHaveProperty('props');
+  expect(tree).toHaveProperty('children');
+  expect(tree).toHaveProperty('children', ['name']);
+  expect(tree).toHaveProperty('type', 'span');
+  expect(tree).toHaveProperty('props.className', 'w-rjv-object-key');
+  expect(tree).toHaveProperty('props.style', {
+    color: undefined,
+    fontSize: undefined,
+    opacity: undefined,
+    paddingRight: undefined
+  });
+});
+
+it('renders <Semicolon /> `render` test case', () => {
+  const component = renderer.create(
+    <Semicolon render={({ value, ...props }) => <del {...props} />}>name</Semicolon>,
+  );
+  let tree = component.toJSON();
+  expect(tree).toHaveProperty('type');
+  expect(tree).toHaveProperty('props');
+  expect(tree).toHaveProperty('children');
+  expect(tree).toHaveProperty('children', ['name']);
+  expect(tree).toHaveProperty('type', 'del');
+  expect(tree).toHaveProperty('props.className', 'w-rjv-object-key');
+  expect(tree).toHaveProperty('props.style', {
+    color: undefined,
+    fontSize: undefined,
+    opacity: undefined,
+    paddingRight: undefined
+  });
+});

core/src/semicolon.tsx

@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren, useId, cloneElement, useState, useMemo, useRef, useEffect } from 'react';
+import { FC, PropsWithChildren, useMemo, useRef, useEffect } from 'react';
 import { Label, LabelProps } from './value';
 import { JsonViewProps } from './';
 
@@ -26,6 +26,7 @@ export const Semicolon: FC<PropsWithChildren<SemicolonProps>> = ({
   show,
   highlightUpdates,
   quotes,
+  style,
   ...props
 }) => {
   const prevValue = usePrevious(value);
@@ -75,7 +76,7 @@ export const Semicolon: FC<PropsWithChildren<SemicolonProps>> = ({
   }, [isHighlight, value]);
 
   const content = show ? `${quotes}${children}${quotes}` : children;
-  if (render) return render({ className, ...props, value, style: { color }, children: content });
+  if (render) return render({ className, ...props, value, style: { ...style, color }, children: content });
   return (
     <Label className={className} color={color} {...props} ref={highlightContainer}>
       {content}