test: add Copied test case.

core/README.md

@@ -7,7 +7,7 @@ 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://uiwjs.github.io/react-json-view/badges.svg)](https://uiwjs.github.io/react-json-view/lcov-report/)
 
-A React component for displaying and editing javascript arrays and JSON objects. Preview of v1 documentation is available [here](https://raw.githack.com/uiwjs/react-json-view/v1-docs/index.html).
+A React component for displaying and editing javascript arrays and JSON objects. Preview of [**v1 documentation**](https://raw.githack.com/uiwjs/react-json-view/v1-docs/index.html) is available [here](https://raw.githack.com/uiwjs/react-json-view/v1-docs/index.html).
 
 <!--rehype:ignore:start-->
 <a href="https://uiwjs.github.io/react-json-view/" target="_blank">
@@ -26,7 +26,7 @@ A React component for displaying and editing javascript arrays and JSON objects.
 ✏️ Support editing and adding features  
 ♻️ Whether to highlight updates.
 
-The new version [**v2**](https://raw.githack.com/uiwjs/react-json-view/v2-docs/index.html) has redesigned the API to make the code more maintainable and introduced a simpler and more flexible component customization rendering API. Each component can now have custom rendering, and the new API resembles React more closely. Preview [v2 documentation](https://raw.githack.com/uiwjs/react-json-view/v2-docs/index.html) and [examples](https://raw.githack.com/uiwjs/react-json-view/v2-docs/index.html). 
+The new version [**v2**](https://uiwjs.github.io/react-json-view/) has redesigned the API to make the code more maintainable and introduced a simpler and more flexible component customization rendering API. Each component can now have custom rendering, and the new API resembles React more closely. Preview [v2 documentation](https://uiwjs.github.io/react-json-view/) and [examples](https://uiwjs.github.io/react-json-view/). 
 
 - [x] Complete all features of displaying JSON in v1.
 - [ ] Add editing functionality to v2.

core/src/comps/KeyValues.tsx

@@ -3,7 +3,7 @@ import { useStore } from '../store';
 import { useExpandsStore } from '../store/Expands';
 import { useShowToolsDispatch } from '../store/ShowTools';
 import { Value } from './Value';
-import { Key } from './Key';
+import { KeyNameComp } from '../section/KeyName';
 import { Container } from '../Container';
 import { Quote, Colon } from '../symbol';
 import { useHighlight } from '../utils/useHighlight';
@@ -65,9 +65,9 @@ export const KayName = <T extends object>(props: KayNameProps<T>) => {
     <Fragment>
       <span ref={highlightContainer}>
         <Quote isNumber={isNumber} data-placement="left" />
-        <Key keyName={keyName!} value={value}>
+        <KeyNameComp keyName={keyName!} value={value}>
           {keyName}
-        </Key>
+        </KeyNameComp>
         <Quote isNumber={isNumber} data-placement="right" />
       </span>
       <Colon />

core/src/section/Copied.test.tsx

@@ -0,0 +1,174 @@
+import userEvent from '@testing-library/user-event';
+import { screen, render, waitFor, fireEvent } from '@testing-library/react';
+import JsonView from '../';
+import React from 'react';
+import { act } from 'react-test-renderer';
+
+const avatar = 'https://i.imgur.com/MK3eW3As.jpg';
+const example = {
+  avatar,
+};
+
+it('renders <JsonView /> Copied test case', async () => {
+  const user = userEvent.setup();
+
+  // Mock the necessary functions and values
+  const writeTextMock = jest.fn().mockResolvedValue(undefined);
+  jest.spyOn(navigator.clipboard, 'writeText').mockImplementation(writeTextMock);
+  const divref = React.createRef<HTMLDivElement>();
+  const { container } = render(
+    <JsonView
+      value={example}
+      ref={divref}
+      // onCopied={(copyText, value) => {
+      //   console.log('>>>', copyText, value)
+      // }}
+    >
+      <JsonView.Copied data-testid="copied" />
+      <JsonView.CountInfo data-testid="countInfo" />
+    </JsonView>,
+  );
+  expect(container.firstElementChild).toBeInstanceOf(Element);
+  // await user.hover(container.lastElementChild!);
+  fireEvent.mouseEnter(container.lastElementChild!);
+  const copied = screen.getByTestId('copied');
+  expect(copied.style).toHaveProperty('height', '1em');
+  expect(copied.style).toHaveProperty('width', '1em');
+  expect(copied.style).toHaveProperty('cursor', 'pointer');
+  expect(copied.style).toHaveProperty('vertical-align', 'middle');
+  expect(copied.style).toHaveProperty('margin-left', '5px');
+  expect(copied.getAttribute('fill')).toEqual('var(--w-rjv-copied-color, currentColor)');
+  expect(copied.tagName).toEqual('svg');
+  await user.click(copied);
+  act(() => {
+    expect(copied.getAttribute('fill')).toEqual('var(--w-rjv-copied-success-color, #28a745)');
+  });
+  // Assertions
+  expect(navigator.clipboard.writeText).toHaveBeenCalledWith(JSON.stringify(example, null, 2));
+  await user.unhover(container.lastElementChild!);
+  const countInfo = screen.getByTestId('countInfo');
+  expect(countInfo.nextElementSibling).toBeNull();
+  await waitFor(() => {
+    expect(divref.current instanceof HTMLDivElement).toBeTruthy();
+  });
+  // Restore the original implementation
+  jest.restoreAllMocks();
+});
+
+it('renders <JsonView /> Copy number test case', async () => {
+  const user = userEvent.setup();
+
+  // Mock the necessary functions and values
+  const writeTextMock = jest.fn().mockResolvedValue(undefined);
+  jest.spyOn(navigator.clipboard, 'writeText').mockImplementation(writeTextMock);
+  const { container } = render(
+    <JsonView value={{ value: 123 }}>
+      <JsonView.Copied data-testid="copied" />
+      <JsonView.Quote data-testid="quote" />
+    </JsonView>,
+  );
+  expect(container.firstElementChild).toBeInstanceOf(Element);
+  const quote = screen.getAllByTestId('quote')[0];
+  const lineDom = quote.parentElement?.parentElement!;
+  fireEvent.mouseEnter(lineDom);
+  const copied = screen.getAllByTestId('copied')[1];
+  expect(copied.tagName).toEqual('svg');
+  await user.click(copied);
+  expect(navigator.clipboard.writeText).toHaveBeenCalledWith('123');
+  jest.restoreAllMocks();
+});
+
+it('renders <JsonView.Copied /> render test case', async () => {
+  const user = userEvent.setup();
+
+  // Mock the necessary functions and values
+  const writeTextMock = jest.fn().mockResolvedValue(undefined);
+  jest.spyOn(navigator.clipboard, 'writeText').mockImplementation(writeTextMock);
+  const { container } = render(
+    <JsonView value={{ value: 123 }}>
+      <JsonView.Copied
+        data-testid="copied"
+        render={(props) => {
+          return <span {...props}>xx</span>;
+        }}
+      />
+      <JsonView.Quote data-testid="quote" />
+    </JsonView>,
+  );
+  expect(container.firstElementChild).toBeInstanceOf(Element);
+  const quote = screen.getAllByTestId('quote')[0];
+  const lineDom = quote.parentElement?.parentElement!;
+  fireEvent.mouseEnter(lineDom);
+  const copied = screen.getAllByTestId('copied')[1];
+  expect(copied.tagName).toEqual('SPAN');
+  expect(copied.innerHTML).toEqual('xx');
+  await user.click(copied);
+  expect(navigator.clipboard.writeText).toHaveBeenCalledWith('123');
+  jest.restoreAllMocks();
+});
+
+it('renders <JsonView.Copied /> copy NaN test case', async () => {
+  const user = userEvent.setup();
+
+  // Mock the necessary functions and values
+  const writeTextMock = jest.fn().mockResolvedValue(undefined);
+  jest.spyOn(navigator.clipboard, 'writeText').mockImplementation(writeTextMock);
+  const { container } = render(
+    <JsonView value={{ value: NaN }}>
+      <JsonView.Copied data-testid="copied" />
+      <JsonView.Quote data-testid="quote" />
+    </JsonView>,
+  );
+  expect(container.firstElementChild).toBeInstanceOf(Element);
+  const quote = screen.getAllByTestId('quote')[0];
+  const lineDom = quote.parentElement?.parentElement!;
+  fireEvent.mouseEnter(lineDom);
+  const copied = screen.getAllByTestId('copied')[1];
+  await user.click(copied);
+  expect(navigator.clipboard.writeText).toHaveBeenCalledWith('NaN');
+  jest.restoreAllMocks();
+});
+
+it('renders <JsonView.Copied /> copy Infinity test case', async () => {
+  const user = userEvent.setup();
+
+  // Mock the necessary functions and values
+  const writeTextMock = jest.fn().mockResolvedValue(undefined);
+  jest.spyOn(navigator.clipboard, 'writeText').mockImplementation(writeTextMock);
+  const { container } = render(
+    <JsonView value={{ value: Infinity }}>
+      <JsonView.Copied data-testid="copied" />
+      <JsonView.Quote data-testid="quote" />
+    </JsonView>,
+  );
+  expect(container.firstElementChild).toBeInstanceOf(Element);
+  const quote = screen.getAllByTestId('quote')[0];
+  const lineDom = quote.parentElement?.parentElement!;
+  fireEvent.mouseEnter(lineDom);
+  const copied = screen.getAllByTestId('copied')[1];
+  await user.click(copied);
+  expect(navigator.clipboard.writeText).toHaveBeenCalledWith('Infinity');
+  jest.restoreAllMocks();
+});
+
+it('renders <JsonView.Copied /> copy Infinity test case', async () => {
+  const user = userEvent.setup();
+
+  // Mock the necessary functions and values
+  const writeTextMock = jest.fn().mockResolvedValue(undefined);
+  jest.spyOn(navigator.clipboard, 'writeText').mockImplementation(writeTextMock);
+  const { container, debug } = render(
+    <JsonView value={{ value: BigInt(1000) }}>
+      <JsonView.Copied data-testid="copied" />
+      <JsonView.Quote data-testid="quote" />
+    </JsonView>,
+  );
+  expect(container.firstElementChild).toBeInstanceOf(Element);
+  const quote = screen.getAllByTestId('quote')[0];
+  const lineDom = quote.parentElement?.parentElement!;
+  fireEvent.mouseEnter(lineDom);
+  const copied = screen.getAllByTestId('copied')[1];
+  await user.click(copied);
+  expect(navigator.clipboard.writeText).toHaveBeenCalledWith('1000n');
+  jest.restoreAllMocks();
+});

core/src/utils/useHighlight.tsx

@@ -41,8 +41,6 @@ export function useHighlight({ value, highlightUpdates, highlightContainer }: Us
     if (value !== prevValue) {
       return true;
     }
-
-    return false;
   }, [highlightUpdates, value]);
 
   useEffect(() => {