Skip to content

Commit f8df42f

Browse files
jaywcjlovejaywcjlove
committed
test: add useHighlight test case.
1 parent 20ec9de commit f8df42f

17 files changed

+382
-245
lines changed

‎core/src/Container.test.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ it('renders <JsonView /> Container test case', async () => {
1414
const { container } = render(
1515
<JsonView value={example} ref={divref}>
1616
<JsonView.Copied data-testid="copied" />
17-
<JsonView.CountInfoExtra data-testid="infoExtra" />
17+
<JsonView.CountInfo data-testid="countInfo" />
1818
</JsonView>,
1919
);
2020
expect(container.firstElementChild).toBeInstanceOf(Element);
@@ -26,8 +26,8 @@ it('renders <JsonView /> Container test case', async () => {
2626
expect(copied.style).toHaveProperty('vertical-align', 'middle');
2727
expect(copied.style).toHaveProperty('margin-left', '5px');
2828
await user.unhover(container.lastElementChild!);
29-
const uncopied = screen.getByTestId('infoExtra');
30-
expect(uncopied.nextElementSibling).toBeNull();
29+
const countInfo = screen.getByTestId('countInfo');
30+
expect(countInfo.nextElementSibling).toBeNull();
3131
await waitFor(() => {
3232
expect(divref.current instanceof HTMLDivElement).toBeTruthy();
3333
});

‎core/src/comps/CountInfo.tsx‎

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

‎core/src/comps/Ellipsis.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import { useSectionStore } from '../store/Section';
22

3-
export interface CountInfoProps<T extends object> {
3+
export interface EllipsisProps<T extends object> {
44
value?: T;
55
keyName: string | number;
66
isExpanded: boolean;
77
}
88

9-
export const Ellipsis = <T extends object>({ isExpanded, value, keyName }: CountInfoProps<T>) => {
9+
export const Ellipsis = <T extends object>({ isExpanded, value, keyName }: EllipsisProps<T>) => {
1010
const { Ellipsis: Comp = {} } = useSectionStore();
1111
const { as, render, ...reset } = Comp;
1212
const Elm = as || 'span';

‎core/src/comps/KeyValues.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { useShowToolsDispatch } from '../store/ShowTools';
55
import { Value } from './Value';
66
import { Key } from './Key';
77
import { Container } from '../Container';
8-
import { Quote, Colon } from './ReRender/Symbols';
8+
import { Quote, Colon } from '../symbol';
99
import { useHighlight } from '../utils/useHighlight';
1010

1111
interface KeyValuesProps<T extends object> {

‎core/src/comps/NestedClose.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useStore } from '../store';
22
import { useExpandsStore } from '../store/Expands';
3-
import { BracketsClose } from './ReRender/Symbols';
3+
import { BracketsClose } from '../symbol';
44

55
interface NestedCloseProps<T extends object> {
66
value?: T;

‎core/src/comps/NestedOpen.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import { KayName } from './KeyValues';
2-
import { useExpandsStore, useExpandsDispatch, useExpands } from '../store/Expands';
2+
import { useExpandsStore, useExpandsDispatch } from '../store/Expands';
33
import { useStore } from '../store';
44
import { Copied } from './Copied';
5-
import { CountInfo, CountInfoExtra } from './CountInfo';
6-
import { Arrow, BracketsOpen, BracketsClose } from './ReRender/Symbols';
5+
import { CountInfoExtraComps } from '../section/CountInfoExtra';
6+
import { CountInfoComp } from '../section/CountInfo';
7+
import { Arrow, BracketsOpen, BracketsClose } from '../symbol';
78
import { Ellipsis } from './Ellipsis';
8-
import { SetComp, MapComp } from './ReRender/Types';
9+
import { SetComp, MapComp } from '../types';
910

1011
export interface NestedOpenProps<T extends object> {
1112
keyName?: string | number;
@@ -49,8 +50,8 @@ export const NestedOpen = <T extends object>(props: NestedOpenProps<T>) => {
4950
<BracketsOpen isBrackets={isArray || isMySet} />
5051
<Ellipsis keyName={keyName!} value={value} isExpanded={isExpanded} />
5152
<BracketsClose isVisiable={isExpanded || !showArrow} isBrackets={isArray || isMySet} />
52-
<CountInfo value={value} keyName={keyName!} />
53-
<CountInfoExtra value={value} keyName={keyName!} />
53+
<CountInfoComp value={value} keyName={keyName!} />
54+
<CountInfoExtraComps value={value} keyName={keyName!} />
5455
<Copied keyName={keyName!} value={value} expandKey={expandKey} />
5556
</span>
5657
);

‎core/src/comps/Value.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
TypeUndefined,
1111
TypeNan,
1212
TypeUrl,
13-
} from './ReRender/Types';
13+
} from '../types';
1414

1515
export const isFloat = (n: number) => (Number(n) === n && n % 1 !== 0) || isNaN(n);
1616

‎core/src/index.test.tsx‎

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

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-
164
const avatar = 'https://i.imgur.com/MK3eW3As.jpg';
175
const longArray = new Array(1000).fill(1);
186
const example = {
@@ -59,140 +47,3 @@ it('renders <JsonView /> test case', () => {
5947
expect(tree).toHaveProperty('props.onMouseEnter');
6048
expect(tree).toHaveProperty('props.onMouseLeave');
6149
});
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: 'False',
103-
Comp: JsonView.False,
104-
value: false,
105-
field: 'bool',
106-
color: 'var(--w-rjv-type-boolean-color, #2aa198)',
107-
},
108-
{
109-
name: 'Float',
110-
Comp: JsonView.Float,
111-
value: 0.3,
112-
field: 'float',
113-
color: 'var(--w-rjv-type-float-color, #859900)',
114-
},
115-
{
116-
name: 'Int',
117-
Comp: JsonView.Int,
118-
value: 123,
119-
field: 'int',
120-
color: 'var(--w-rjv-type-int-color, #268bd2)',
121-
},
122-
{
123-
name: 'True',
124-
Comp: JsonView.True,
125-
value: true,
126-
field: 'bool',
127-
color: 'var(--w-rjv-type-boolean-color, #2aa198)',
128-
},
129-
{
130-
name: 'Null',
131-
Comp: JsonView.Null,
132-
value: null,
133-
field: 'null',
134-
color: 'var(--w-rjv-type-null-color, #d33682)',
135-
},
136-
{
137-
name: 'Undefined',
138-
Comp: JsonView.Undefined,
139-
value: undefined,
140-
field: 'undefined',
141-
color: 'var(--w-rjv-type-undefined-color, #586e75)',
142-
},
143-
// {
144-
// name: 'Nan',
145-
// Comp: JsonView.Nan,
146-
// value: NaN,
147-
// field: 'NaN',
148-
// color: 'var(--w-rjv-type-nan-color, #859900)',
149-
// },
150-
// {
151-
// name: 'Date',
152-
// Comp: JsonView.Date,
153-
// value: new Date('2023/02/12'),
154-
// field: 'date',
155-
// color: 'var(--w-rjv-type-date-color, #268bd2)',
156-
// },
157-
// {
158-
// name: 'Url',
159-
// Comp: JsonView.Url,
160-
// value: new URL('https://www.google.com'),
161-
// field: 'url',
162-
// color: 'var(--w-rjv-type-url-color, #0969da)',
163-
// },
164-
// {
165-
// name: 'Map',
166-
// Comp: JsonView.Map,
167-
// value: myMap,
168-
// field: 'map',
169-
// color: 'var(--w-rjv-type-map-color, #268bd2)',
170-
// },
171-
].forEach(({ name, value: val, field, color, Comp }) => {
172-
it(`renders <JsonView.${name} /> test case`, async () => {
173-
const demo = {
174-
value: val,
175-
};
176-
const { container } = render(
177-
<JsonView value={demo}>
178-
<Comp
179-
render={(props, { type, value }) => {
180-
expect(value).toBe(val);
181-
expect(props.style).toHaveProperty('color', color);
182-
return <span {...props} data-testid={`${name}-${type}`} />;
183-
}}
184-
/>
185-
</JsonView>,
186-
);
187-
expect(container.firstElementChild).toBeInstanceOf(Element);
188-
await waitFor(() => {
189-
const type = screen.getByTestId(`${name}-type`);
190-
expect(type.className).toBe('w-rjv-type');
191-
expect(type.tagName).toBe('SPAN');
192-
expect(type.innerHTML).toBe(field);
193-
const value = screen.getByTestId(`${name}-value`);
194-
expect(value.className).toBe('w-rjv-value');
195-
expect(value.tagName).toBe('SPAN');
196-
});
197-
});
198-
});

‎core/src/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export * from './store/Expands';
3636
export * from './store/ShowTools';
3737
export * from './store/Symbols';
3838
export * from './store/Types';
39-
export * from './comps/ReRender/Symbols';
39+
export * from './symbol';
4040

4141
export interface JsonViewProps<T extends object>
4242
extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {

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

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,8 @@ const example = {
88
};
99

1010
it('renders <JsonView.CountInfo /> test case', async () => {
11-
const divref = React.createRef<HTMLDivElement>();
1211
const { container } = render(
13-
<JsonView value={example} ref={divref}>
12+
<JsonView value={example}>
1413
<JsonView.CountInfo data-testid="countInfo" />
1514
</JsonView>,
1615
);
@@ -20,3 +19,33 @@ it('renders <JsonView.CountInfo /> test case', async () => {
2019
expect(copied.style).toHaveProperty('padding-left', '8px');
2120
expect(copied.style).toHaveProperty('font-style', 'italic');
2221
});
22+
23+
it('renders <JsonView.CountInfo /> test case', async () => {
24+
const { container } = render(
25+
<JsonView value={example}>
26+
<JsonView.CountInfo
27+
data-testid="countInfo"
28+
render={(props) => {
29+
return <span {...props}>xxx</span>;
30+
}}
31+
/>
32+
</JsonView>,
33+
);
34+
expect(container.firstElementChild).toBeInstanceOf(Element);
35+
const copied = screen.getByTestId('countInfo');
36+
expect(copied.className).toEqual('w-rjv-object-size');
37+
expect(copied.style).toHaveProperty('padding-left', '8px');
38+
expect(copied.style).toHaveProperty('font-style', 'italic');
39+
});
40+
41+
it('renders <JsonView.CountInfo /> displayObjectSize test case', async () => {
42+
const { container } = render(
43+
<JsonView value={example} displayObjectSize={false}>
44+
<JsonView.CountInfo data-testid="countInfo" />
45+
<JsonView.BraceLeft data-testid="brace" />
46+
</JsonView>,
47+
);
48+
expect(container.firstElementChild).toBeInstanceOf(Element);
49+
const brace = screen.getByTestId('brace');
50+
expect(brace.nextElementSibling).toBeNull();
51+
});

0 commit comments

Comments
 (0)