Skip to content

Commit 9cbb860

Browse files
jaywcjlovejaywcjlove
committed
fix: fix KeyName child issue & add test case.
1 parent bfb6dc7 commit 9cbb860

File tree

6 files changed

+230
-2
lines changed

6 files changed

+230
-2
lines changed

‎core/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -817,7 +817,7 @@ As always, thanks to our amazing contributors!
817817
<img src="https://uiwjs.github.io/react-json-view/CONTRIBUTORS.svg" />
818818
</a>
819819

820-
Made with [action-contributors](https://github.com/jaywcjlove/github-action-contributors).
820+
Made with [contributors](https://github.com/jaywcjlove/github-action-contributors).
821821

822822
## License
823823

‎core/src/comps/Key.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export const Key: FC<PropsWithChildren<KeyProps>> = (props) => {
1515
const { as, render, ...reset } = Comp;
1616
reset.style = { ...reset.style, ...style };
1717
const Elm = as || 'span';
18-
const child = render && typeof render === 'function' && render(reset, { value, keyName });
18+
const child = render && typeof render === 'function' && render({ ...reset, children }, { value, keyName });
1919
if (child) return child;
2020
return <Elm {...reset}>{children}</Elm>;
2121
};

‎core/src/index.test.tsx

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,18 @@
11
import renderer from 'react-test-renderer';
2+
import userEvent from '@testing-library/user-event';
3+
import { screen, render, waitFor } from '@testing-library/react';
24
import JsonView from './';
35

6+
const mySet = new Set();
7+
mySet.add(1); // Set(1) { 1 }
8+
mySet.add(5); // Set(2) { 1, 5 }
9+
mySet.add(5); // Set(2) { 1, 5 }
10+
mySet.add('some text'); // Set(3) { 1, 5, 'some text' }
11+
12+
const myMap = new Map();
13+
myMap.set('www', 'foo');
14+
myMap.set(1, 'bar');
15+
416
const avatar = 'https://i.imgur.com/MK3eW3As.jpg';
517
const longArray = new Array(1000).fill(1);
618
const example = {
@@ -47,3 +59,133 @@ it('renders <JsonView /> test case', () => {
4759
expect(tree).toHaveProperty('props.onMouseEnter');
4860
expect(tree).toHaveProperty('props.onMouseLeave');
4961
});
62+
63+
it('renders <JsonView.String /> test case', async () => {
64+
const demo = {
65+
string: 'Lorem ipsum dolor sit amet',
66+
};
67+
const { container } = render(
68+
<JsonView value={demo}>
69+
<JsonView.String
70+
render={(props, { type }) => {
71+
if (type === 'type') {
72+
expect(props.style).toHaveProperty('color', 'var(--w-rjv-type-string-color, #cb4b16)');
73+
return <em {...props} data-testid="str-type" />;
74+
}
75+
return <span {...props} data-testid="str-value" />;
76+
}}
77+
/>
78+
</JsonView>,
79+
);
80+
expect(container.firstElementChild).toBeInstanceOf(Element);
81+
await waitFor(() => {
82+
const type = screen.getByTestId('str-type');
83+
expect(type.className).toBe('w-rjv-type');
84+
expect(type.tagName).toBe('EM');
85+
expect(type.innerHTML).toBe('string');
86+
const value = screen.getByTestId('str-value');
87+
expect(value.className).toBe('w-rjv-value');
88+
expect(value.tagName).toBe('SPAN');
89+
expect(value).toHaveProperty('style.cursor', 'pointer');
90+
});
91+
});
92+
93+
[
94+
{
95+
name: 'Bigint',
96+
Comp: JsonView.Bigint,
97+
value: BigInt(10086),
98+
field: 'bigint',
99+
color: 'var(--w-rjv-type-bigint-color, #268bd2)',
100+
},
101+
// {
102+
// name: 'Date',
103+
// Comp: JsonView.Date,
104+
// value: new Date('2023/02/12'),
105+
// field: 'date',
106+
// color: 'var(--w-rjv-type-date-color, #268bd2)',
107+
// },
108+
{
109+
name: 'False',
110+
Comp: JsonView.False,
111+
value: false,
112+
field: 'bool',
113+
color: 'var(--w-rjv-type-boolean-color, #2aa198)',
114+
},
115+
{
116+
name: 'Float',
117+
Comp: JsonView.Float,
118+
value: 0.3,
119+
field: 'float',
120+
color: 'var(--w-rjv-type-float-color, #859900)',
121+
},
122+
{
123+
name: 'Int',
124+
Comp: JsonView.Int,
125+
value: 123,
126+
field: 'int',
127+
color: 'var(--w-rjv-type-int-color, #268bd2)',
128+
},
129+
{
130+
name: 'True',
131+
Comp: JsonView.True,
132+
value: true,
133+
field: 'bool',
134+
color: 'var(--w-rjv-type-boolean-color, #2aa198)',
135+
},
136+
{
137+
name: 'Null',
138+
Comp: JsonView.Null,
139+
value: null,
140+
field: 'null',
141+
color: 'var(--w-rjv-type-null-color, #d33682)',
142+
},
143+
{
144+
name: 'Undefined',
145+
Comp: JsonView.Undefined,
146+
value: undefined,
147+
field: 'undefined',
148+
color: 'var(--w-rjv-type-undefined-color, #586e75)',
149+
},
150+
// {
151+
// name: 'Url',
152+
// Comp: JsonView.Url,
153+
// value: new URL('https://www.google.com'),
154+
// field: 'url',
155+
// color: 'var(--w-rjv-type-url-color, #0969da)',
156+
// },
157+
// {
158+
// name: 'Map',
159+
// Comp: JsonView.Map,
160+
// value: myMap,
161+
// field: 'map',
162+
// color: 'var(--w-rjv-type-map-color, #268bd2)',
163+
// },
164+
].forEach(({ name, value: val, field, color, Comp }) => {
165+
it(`renders <JsonView.${name} /> test case`, async () => {
166+
const demo = {
167+
value: val,
168+
};
169+
const { container } = render(
170+
<JsonView value={demo}>
171+
<Comp
172+
render={(props, { type, value }) => {
173+
expect(value).toBe(val);
174+
expect(props.style).toHaveProperty('color', color);
175+
return <span {...props} data-testid={`${name}-${type}`} />;
176+
}}
177+
/>
178+
</JsonView>,
179+
);
180+
expect(container.firstElementChild).toBeInstanceOf(Element);
181+
await waitFor(() => {
182+
const type = screen.getByTestId(`${name}-type`);
183+
expect(type.className).toBe('w-rjv-type');
184+
expect(type.tagName).toBe('SPAN');
185+
expect(type.innerHTML).toBe(field);
186+
const value = screen.getByTestId(`${name}-value`);
187+
expect(value.className).toBe('w-rjv-value');
188+
expect(value.tagName).toBe('SPAN');
189+
});
190+
});
191+
});

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { screen, render, waitFor } from '@testing-library/react';
2+
import JsonView from '../';
3+
import React from 'react';
4+
5+
const avatar = 'https://i.imgur.com/MK3eW3As.jpg';
6+
const example = {
7+
avatar,
8+
};
9+
10+
it('renders <JsonView.CountInfo /> test case', async () => {
11+
const divref = React.createRef<HTMLDivElement>();
12+
const { container } = render(
13+
<JsonView value={example} ref={divref}>
14+
<JsonView.CountInfo data-testid="countInfo" />
15+
</JsonView>,
16+
);
17+
expect(container.firstElementChild).toBeInstanceOf(Element);
18+
const copied = screen.getByTestId('countInfo');
19+
expect(copied.className).toEqual('w-rjv-object-size');
20+
expect(copied.style).toHaveProperty('padding-left', '8px');
21+
expect(copied.style).toHaveProperty('font-style', 'italic');
22+
});

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import userEvent from '@testing-library/user-event';
2+
import { screen, render, waitFor } from '@testing-library/react';
3+
import JsonView from '../';
4+
import { Ellipsis } from './Ellipsis';
5+
6+
const avatar = 'https://i.imgur.com/MK3eW3As.jpg';
7+
const example = {
8+
avatar,
9+
};
10+
11+
it('renders <JsonView.Ellipsis /> test case', async () => {
12+
const user = userEvent.setup();
13+
const { container } = render(
14+
<JsonView value={example}>
15+
<Ellipsis
16+
as="span"
17+
data-testid="ellipsis"
18+
render={(props) => {
19+
expect(props.children).toEqual('...');
20+
expect(props.style).toHaveProperty('color', 'var(--w-rjv-ellipsis-color, #cb4b16)');
21+
return <span {...props} />;
22+
}}
23+
/>
24+
</JsonView>,
25+
);
26+
expect(container.firstElementChild).toBeInstanceOf(Element);
27+
await user.click(container.lastElementChild?.firstElementChild!);
28+
await waitFor(() => {
29+
const ellipsis = screen.getByTestId('ellipsis');
30+
expect(ellipsis.className).toEqual('w-rjv-ellipsis');
31+
expect(ellipsis.style).toHaveProperty('cursor', 'pointer');
32+
expect(ellipsis.style).toHaveProperty('user-select', 'none');
33+
});
34+
});

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import userEvent from '@testing-library/user-event';
2+
import { screen, render, waitFor } from '@testing-library/react';
3+
import JsonView from '../';
4+
import { KeyName } from './KeyName';
5+
6+
const example = {
7+
value: 'test2',
8+
};
9+
10+
it('renders <JsonView.KeyName /> test case', async () => {
11+
const user = userEvent.setup();
12+
const { container } = render(
13+
<JsonView value={example}>
14+
<KeyName
15+
as="span"
16+
data-testid="keyName"
17+
render={(props) => {
18+
expect(props.children).toEqual('value');
19+
expect(props.style).toHaveProperty('color', 'var(--w-rjv-key-string, #002b36)');
20+
return <span {...props} />;
21+
}}
22+
/>
23+
</JsonView>,
24+
);
25+
expect(container.firstElementChild).toBeInstanceOf(Element);
26+
await waitFor(() => {
27+
const keyName = screen.getByTestId('keyName');
28+
expect(keyName.className).toEqual('w-rjv-object-key');
29+
});
30+
});

0 commit comments

Comments
 (0)