Skip to content

Commit dafe800

Browse files
jaywcjlovejaywcjlove
committed
test: add Copied test case.
1 parent f37551f commit dafe800

File tree

5 files changed

+179
-30
lines changed

5 files changed

+179
-30
lines changed

‎core/README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ react-json-view
77
[![react@^18](https://shields.io/badge/react-^18-green?style=flat&logo=react)](https://github.com/facebook/react/releases)
88
[![Coverage Status](https://uiwjs.github.io/react-json-view/badges.svg)](https://uiwjs.github.io/react-json-view/lcov-report/)
99

10-
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).
10+
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).
1111

1212
<!--rehype:ignore:start-->
1313
<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.
2626
✏️ Support editing and adding features
2727
♻️ Whether to highlight updates.
2828

29-
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).
29+
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/).
3030

3131
- [x] Complete all features of displaying JSON in v1.
3232
- [ ] Add editing functionality to v2.

‎core/src/comps/Key.tsx

Lines changed: 0 additions & 23 deletions
This file was deleted.

‎core/src/comps/KeyValues.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { useStore } from '../store';
33
import { useExpandsStore } from '../store/Expands';
44
import { useShowToolsDispatch } from '../store/ShowTools';
55
import { Value } from './Value';
6-
import { Key } from './Key';
6+
import { KeyNameComp } from '../section/KeyName';
77
import { Container } from '../Container';
88
import { Quote, Colon } from '../symbol';
99
import { useHighlight } from '../utils/useHighlight';
@@ -65,9 +65,9 @@ export const KayName = <T extends object>(props: KayNameProps<T>) => {
6565
<Fragment>
6666
<span ref={highlightContainer}>
6767
<Quote isNumber={isNumber} data-placement="left" />
68-
<Key keyName={keyName!} value={value}>
68+
<KeyNameComp keyName={keyName!} value={value}>
6969
{keyName}
70-
</Key>
70+
</KeyNameComp>
7171
<Quote isNumber={isNumber} data-placement="right" />
7272
</span>
7373
<Colon />

‎core/src/section/Copied.test.tsx

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
import userEvent from '@testing-library/user-event';
2+
import { screen, render, waitFor, fireEvent } from '@testing-library/react';
3+
import JsonView from '../';
4+
import React from 'react';
5+
import { act } from 'react-test-renderer';
6+
7+
const avatar = 'https://i.imgur.com/MK3eW3As.jpg';
8+
const example = {
9+
avatar,
10+
};
11+
12+
it('renders <JsonView /> Copied test case', async () => {
13+
const user = userEvent.setup();
14+
15+
// Mock the necessary functions and values
16+
const writeTextMock = jest.fn().mockResolvedValue(undefined);
17+
jest.spyOn(navigator.clipboard, 'writeText').mockImplementation(writeTextMock);
18+
const divref = React.createRef<HTMLDivElement>();
19+
const { container } = render(
20+
<JsonView
21+
value={example}
22+
ref={divref}
23+
// onCopied={(copyText, value) => {
24+
// console.log('>>>', copyText, value)
25+
// }}
26+
>
27+
<JsonView.Copied data-testid="copied" />
28+
<JsonView.CountInfo data-testid="countInfo" />
29+
</JsonView>,
30+
);
31+
expect(container.firstElementChild).toBeInstanceOf(Element);
32+
// await user.hover(container.lastElementChild!);
33+
fireEvent.mouseEnter(container.lastElementChild!);
34+
const copied = screen.getByTestId('copied');
35+
expect(copied.style).toHaveProperty('height', '1em');
36+
expect(copied.style).toHaveProperty('width', '1em');
37+
expect(copied.style).toHaveProperty('cursor', 'pointer');
38+
expect(copied.style).toHaveProperty('vertical-align', 'middle');
39+
expect(copied.style).toHaveProperty('margin-left', '5px');
40+
expect(copied.getAttribute('fill')).toEqual('var(--w-rjv-copied-color, currentColor)');
41+
expect(copied.tagName).toEqual('svg');
42+
await user.click(copied);
43+
act(() => {
44+
expect(copied.getAttribute('fill')).toEqual('var(--w-rjv-copied-success-color, #28a745)');
45+
});
46+
// Assertions
47+
expect(navigator.clipboard.writeText).toHaveBeenCalledWith(JSON.stringify(example, null, 2));
48+
await user.unhover(container.lastElementChild!);
49+
const countInfo = screen.getByTestId('countInfo');
50+
expect(countInfo.nextElementSibling).toBeNull();
51+
await waitFor(() => {
52+
expect(divref.current instanceof HTMLDivElement).toBeTruthy();
53+
});
54+
// Restore the original implementation
55+
jest.restoreAllMocks();
56+
});
57+
58+
it('renders <JsonView /> Copy number test case', async () => {
59+
const user = userEvent.setup();
60+
61+
// Mock the necessary functions and values
62+
const writeTextMock = jest.fn().mockResolvedValue(undefined);
63+
jest.spyOn(navigator.clipboard, 'writeText').mockImplementation(writeTextMock);
64+
const { container } = render(
65+
<JsonView value={{ value: 123 }}>
66+
<JsonView.Copied data-testid="copied" />
67+
<JsonView.Quote data-testid="quote" />
68+
</JsonView>,
69+
);
70+
expect(container.firstElementChild).toBeInstanceOf(Element);
71+
const quote = screen.getAllByTestId('quote')[0];
72+
const lineDom = quote.parentElement?.parentElement!;
73+
fireEvent.mouseEnter(lineDom);
74+
const copied = screen.getAllByTestId('copied')[1];
75+
expect(copied.tagName).toEqual('svg');
76+
await user.click(copied);
77+
expect(navigator.clipboard.writeText).toHaveBeenCalledWith('123');
78+
jest.restoreAllMocks();
79+
});
80+
81+
it('renders <JsonView.Copied /> render test case', async () => {
82+
const user = userEvent.setup();
83+
84+
// Mock the necessary functions and values
85+
const writeTextMock = jest.fn().mockResolvedValue(undefined);
86+
jest.spyOn(navigator.clipboard, 'writeText').mockImplementation(writeTextMock);
87+
const { container } = render(
88+
<JsonView value={{ value: 123 }}>
89+
<JsonView.Copied
90+
data-testid="copied"
91+
render={(props) => {
92+
return <span {...props}>xx</span>;
93+
}}
94+
/>
95+
<JsonView.Quote data-testid="quote" />
96+
</JsonView>,
97+
);
98+
expect(container.firstElementChild).toBeInstanceOf(Element);
99+
const quote = screen.getAllByTestId('quote')[0];
100+
const lineDom = quote.parentElement?.parentElement!;
101+
fireEvent.mouseEnter(lineDom);
102+
const copied = screen.getAllByTestId('copied')[1];
103+
expect(copied.tagName).toEqual('SPAN');
104+
expect(copied.innerHTML).toEqual('xx');
105+
await user.click(copied);
106+
expect(navigator.clipboard.writeText).toHaveBeenCalledWith('123');
107+
jest.restoreAllMocks();
108+
});
109+
110+
it('renders <JsonView.Copied /> copy NaN test case', async () => {
111+
const user = userEvent.setup();
112+
113+
// Mock the necessary functions and values
114+
const writeTextMock = jest.fn().mockResolvedValue(undefined);
115+
jest.spyOn(navigator.clipboard, 'writeText').mockImplementation(writeTextMock);
116+
const { container } = render(
117+
<JsonView value={{ value: NaN }}>
118+
<JsonView.Copied data-testid="copied" />
119+
<JsonView.Quote data-testid="quote" />
120+
</JsonView>,
121+
);
122+
expect(container.firstElementChild).toBeInstanceOf(Element);
123+
const quote = screen.getAllByTestId('quote')[0];
124+
const lineDom = quote.parentElement?.parentElement!;
125+
fireEvent.mouseEnter(lineDom);
126+
const copied = screen.getAllByTestId('copied')[1];
127+
await user.click(copied);
128+
expect(navigator.clipboard.writeText).toHaveBeenCalledWith('NaN');
129+
jest.restoreAllMocks();
130+
});
131+
132+
it('renders <JsonView.Copied /> copy Infinity test case', async () => {
133+
const user = userEvent.setup();
134+
135+
// Mock the necessary functions and values
136+
const writeTextMock = jest.fn().mockResolvedValue(undefined);
137+
jest.spyOn(navigator.clipboard, 'writeText').mockImplementation(writeTextMock);
138+
const { container } = render(
139+
<JsonView value={{ value: Infinity }}>
140+
<JsonView.Copied data-testid="copied" />
141+
<JsonView.Quote data-testid="quote" />
142+
</JsonView>,
143+
);
144+
expect(container.firstElementChild).toBeInstanceOf(Element);
145+
const quote = screen.getAllByTestId('quote')[0];
146+
const lineDom = quote.parentElement?.parentElement!;
147+
fireEvent.mouseEnter(lineDom);
148+
const copied = screen.getAllByTestId('copied')[1];
149+
await user.click(copied);
150+
expect(navigator.clipboard.writeText).toHaveBeenCalledWith('Infinity');
151+
jest.restoreAllMocks();
152+
});
153+
154+
it('renders <JsonView.Copied /> copy Infinity test case', async () => {
155+
const user = userEvent.setup();
156+
157+
// Mock the necessary functions and values
158+
const writeTextMock = jest.fn().mockResolvedValue(undefined);
159+
jest.spyOn(navigator.clipboard, 'writeText').mockImplementation(writeTextMock);
160+
const { container, debug } = render(
161+
<JsonView value={{ value: BigInt(1000) }}>
162+
<JsonView.Copied data-testid="copied" />
163+
<JsonView.Quote data-testid="quote" />
164+
</JsonView>,
165+
);
166+
expect(container.firstElementChild).toBeInstanceOf(Element);
167+
const quote = screen.getAllByTestId('quote')[0];
168+
const lineDom = quote.parentElement?.parentElement!;
169+
fireEvent.mouseEnter(lineDom);
170+
const copied = screen.getAllByTestId('copied')[1];
171+
await user.click(copied);
172+
expect(navigator.clipboard.writeText).toHaveBeenCalledWith('1000n');
173+
jest.restoreAllMocks();
174+
});

‎core/src/utils/useHighlight.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,6 @@ export function useHighlight({ value, highlightUpdates, highlightContainer }: Us
4141
if (value !== prevValue) {
4242
return true;
4343
}
44-
45-
return false;
4644
}, [highlightUpdates, value]);
4745

4846
useEffect(() => {

0 commit comments

Comments
 (0)