Skip to content

Commit d685016

Browse files
P0lipP0lip
authored
refactor: move Format component out of Validations (#98)
1 parent f46d115 commit d685016

File tree

6 files changed

+87
-78
lines changed

6 files changed

+87
-78
lines changed

‎src/__tests__/__snapshots__/index.spec.tsx.snap‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1564,7 +1564,7 @@ exports[`HTML Output should match combiner-schema.json 1`] = `
15641564
<span class=\\"text-darken-7 dark:text-lighten-6\\">or</span>
15651565
<span class=\\"text-orange-5\\">null</span>
15661566
</div>
1567-
<div>&lt;date-time&gt;</div>
1567+
<span>&lt;date-time&gt;</span>
15681568
</div>
15691569
<div></div>
15701570
</div>
@@ -1576,7 +1576,7 @@ exports[`HTML Output should match combiner-schema.json 1`] = `
15761576
<div>
15771577
<div>created_at</div>
15781578
<span class=\\"text-green-7 dark:text-green-5\\">string</span>
1579-
<div class=\\"text-green-7 dark:text-green-5\\">&lt;date-time&gt;</div>
1579+
<span class=\\"text-green-7 dark:text-green-5\\">&lt;date-time&gt;</span>
15801580
</div>
15811581
<div></div>
15821582
</div>
@@ -1588,7 +1588,7 @@ exports[`HTML Output should match combiner-schema.json 1`] = `
15881588
<div>
15891589
<div>updated_at</div>
15901590
<span class=\\"text-green-7 dark:text-green-5\\">string</span>
1591-
<div class=\\"text-green-7 dark:text-green-5\\">&lt;date-time&gt;</div>
1591+
<span class=\\"text-green-7 dark:text-green-5\\">&lt;date-time&gt;</span>
15921592
</div>
15931593
<div></div>
15941594
</div>
@@ -1927,7 +1927,7 @@ exports[`HTML Output should match default-schema.json 1`] = `
19271927
<div>
19281928
<div>completed_at</div>
19291929
<span class=\\"text-green-7 dark:text-green-5\\">string</span>
1930-
<div class=\\"text-green-7 dark:text-green-5\\">&lt;date-time&gt;</div>
1930+
<span class=\\"text-green-7 dark:text-green-5\\">&lt;date-time&gt;</span>
19311931
</div>
19321932
<span class=\\"text-darken-7 dark:text-lighten-6\\">write-only</span>
19331933
<div><span class=\\"text-orange-7 dark:text-orange-6\\">required</span></div>
@@ -1963,7 +1963,7 @@ exports[`HTML Output should match default-schema.json 1`] = `
19631963
<div>
19641964
<div>email</div>
19651965
<span class=\\"text-green-7 dark:text-green-5\\">string</span>
1966-
<div class=\\"text-green-7 dark:text-green-5\\">&lt;email&gt;</div>
1966+
<span class=\\"text-green-7 dark:text-green-5\\">&lt;email&gt;</span>
19671967
</div>
19681968
<span class=\\"text-orange-7 dark:text-orange-6\\">deprecated</span>
19691969
<span class=\\"bp3-popover-wrapper\\">
@@ -2149,7 +2149,7 @@ exports[`HTML Output should match formats-schema.json 1`] = `
21492149
<span class=\\"text-darken-7 dark:text-lighten-6\\">or</span>
21502150
<span class=\\"text-green-6 dark:text-green-4\\">array</span>
21512151
</div>
2152-
<div>&lt;date-time&gt;</div>
2152+
<span>&lt;date-time&gt;</span>
21532153
</div>
21542154
<div></div>
21552155
</div>
@@ -2172,7 +2172,7 @@ exports[`HTML Output should match formats-schema.json 1`] = `
21722172
<div>
21732173
<div>id</div>
21742174
<span class=\\"text-red-7 dark:text-red-6\\">number</span>
2175-
<div class=\\"text-red-7 dark:text-red-6\\">&lt;float&gt;</div>
2175+
<span class=\\"text-red-7 dark:text-red-6\\">&lt;float&gt;</span>
21762176
</div>
21772177
<div></div>
21782178
</div>
@@ -2200,7 +2200,7 @@ exports[`HTML Output should match formats-schema.json 1`] = `
22002200
<span class=\\"text-blue-6 dark:text-blue-4\\">object</span>
22012201
</div>
22022202
<div class=\\"text-darken-7 dark:text-lighten-7\\">{1}</div>
2203-
<div>&lt;password&gt;</div>
2203+
<span>&lt;password&gt;</span>
22042204
</div>
22052205
<div></div>
22062206
</div>
@@ -2518,7 +2518,7 @@ exports[`HTML Output should match tickets.schema.json 1`] = `
25182518
<div>
25192519
<div>orderItemId</div>
25202520
<span class=\\"text-green-7 dark:text-green-5\\">string</span>
2521-
<div class=\\"text-green-7 dark:text-green-5\\">&lt;uuid&gt;</div>
2521+
<span class=\\"text-green-7 dark:text-green-5\\">&lt;uuid&gt;</span>
25222522
</div>
25232523
<div></div>
25242524
</div>
@@ -2653,7 +2653,7 @@ exports[`HTML Output should match tickets.schema.json 1`] = `
26532653
<div>
26542654
<div>ccEmail</div>
26552655
<span class=\\"text-green-7 dark:text-green-5\\">string</span>
2656-
<div class=\\"text-green-7 dark:text-green-5\\">&lt;email&gt;</div>
2656+
<span class=\\"text-green-7 dark:text-green-5\\">&lt;email&gt;</span>
26572657
</div>
26582658
<div></div>
26592659
</div>
@@ -2756,7 +2756,7 @@ exports[`HTML Output should match todo-allof.schema.json 1`] = `
27562756
<span class=\\"text-darken-7 dark:text-lighten-6\\">or</span>
27572757
<span class=\\"text-orange-5\\">null</span>
27582758
</div>
2759-
<div>&lt;date-time&gt;</div>
2759+
<span>&lt;date-time&gt;</span>
27602760
</div>
27612761
<div></div>
27622762
</div>
@@ -2768,7 +2768,7 @@ exports[`HTML Output should match todo-allof.schema.json 1`] = `
27682768
<div>
27692769
<div>created_at</div>
27702770
<span class=\\"text-green-7 dark:text-green-5\\">string</span>
2771-
<div class=\\"text-green-7 dark:text-green-5\\">&lt;date-time&gt;</div>
2771+
<span class=\\"text-green-7 dark:text-green-5\\">&lt;date-time&gt;</span>
27722772
</div>
27732773
<div></div>
27742774
</div>
@@ -2780,7 +2780,7 @@ exports[`HTML Output should match todo-allof.schema.json 1`] = `
27802780
<div>
27812781
<div>updated_at</div>
27822782
<span class=\\"text-green-7 dark:text-green-5\\">string</span>
2783-
<div class=\\"text-green-7 dark:text-green-5\\">&lt;date-time&gt;</div>
2783+
<span class=\\"text-green-7 dark:text-green-5\\">&lt;date-time&gt;</span>
27842784
</div>
27852785
<div></div>
27862786
</div>

‎src/components/__tests__/Format.spec.tsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import 'jest-enzyme';
2+
3+
import { TreeState } from '@stoplight/tree-list';
4+
import { shallow } from 'enzyme';
5+
import { JSONSchema4 } from 'json-schema';
6+
import * as React from 'react';
7+
8+
import { SchemaTree } from '../../tree';
9+
import { SchemaPropertyRow, SchemaRow } from '../SchemaRow';
10+
import { Format } from '../shared/Format';
11+
12+
describe('Format component', () => {
13+
let tree: SchemaTree;
14+
15+
beforeEach(() => {
16+
const schema: JSONSchema4 = require('../../__fixtures__/formats-schema.json');
17+
18+
tree = new SchemaTree(schema, new TreeState(), {
19+
expandedDepth: Infinity,
20+
mergeAllOf: false,
21+
resolveRef: void 0,
22+
shouldResolveEagerly: false,
23+
onPopulate: void 0,
24+
});
25+
26+
tree.populate();
27+
});
28+
29+
it('should render next to a single type with and inherit its color', () => {
30+
const wrapper = shallow(<SchemaRow node={tree.itemAt(3)!} rowOptions={{}} />)
31+
.find(SchemaPropertyRow)
32+
.shallow()
33+
.find(Format)
34+
.shallow();
35+
36+
expect(wrapper).toHaveProp('className', 'ml-2 text-red-7 dark:text-red-6');
37+
});
38+
39+
it('should render next to an array of types in default (black) color', () => {
40+
const wrapper = shallow(<SchemaRow node={tree.itemAt(1)!} rowOptions={{}} />)
41+
.find(SchemaPropertyRow)
42+
.shallow()
43+
.find(Format)
44+
.shallow();
45+
46+
expect(wrapper).toHaveProp('className', 'ml-2');
47+
});
48+
49+
it('should not render when the type(s) is/are missing', () => {
50+
const wrapper = shallow(<SchemaRow node={tree.itemAt(4)!} rowOptions={{}} />)
51+
.find(SchemaPropertyRow)
52+
.shallow();
53+
54+
expect(wrapper).not.toContain(Format);
55+
});
56+
});

‎src/components/__tests__/Validations.spec.tsx‎

Lines changed: 1 addition & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,12 @@
11
import 'jest-enzyme';
22

3-
import { TreeState } from '@stoplight/tree-list';
43
import { Dictionary } from '@stoplight/types';
54
import { Popover } from '@stoplight/ui-kit';
65
import { shallow } from 'enzyme';
7-
import { JSONSchema4 } from 'json-schema';
86
import * as React from 'react';
97

10-
import { SchemaTree } from '../../tree';
118
import { getValidations } from '../../utils/getValidations';
12-
import { SchemaPropertyRow, SchemaRow } from '../SchemaRow';
13-
import { Format, Validations } from '../shared/Validations';
9+
import { Validations } from '../shared/Validations';
1410

1511
describe('Validations component', () => {
1612
describe('when property is deprecated', () => {
@@ -34,49 +30,3 @@ describe('Validations component', () => {
3430
});
3531
});
3632
});
37-
38-
describe('Format', () => {
39-
let tree: SchemaTree;
40-
41-
beforeEach(() => {
42-
const schema: JSONSchema4 = require('../../__fixtures__/formats-schema.json');
43-
44-
tree = new SchemaTree(schema, new TreeState(), {
45-
expandedDepth: Infinity,
46-
mergeAllOf: false,
47-
resolveRef: void 0,
48-
shouldResolveEagerly: false,
49-
onPopulate: void 0,
50-
});
51-
52-
tree.populate();
53-
});
54-
55-
it('should render next to a single type with and inherit its color', () => {
56-
const wrapper = shallow(<SchemaRow node={tree.itemAt(3)!} rowOptions={{}} />)
57-
.find(SchemaPropertyRow)
58-
.shallow()
59-
.find(Format)
60-
.shallow();
61-
62-
expect(wrapper).toHaveProp('className', 'ml-2 text-red-7 dark:text-red-6');
63-
});
64-
65-
it('should render next to an array of types in default (black) color', () => {
66-
const wrapper = shallow(<SchemaRow node={tree.itemAt(1)!} rowOptions={{}} />)
67-
.find(SchemaPropertyRow)
68-
.shallow()
69-
.find(Format)
70-
.shallow();
71-
72-
expect(wrapper).toHaveProp('className', 'ml-2');
73-
});
74-
75-
it('should not render when the type(s) is/are missing', () => {
76-
const wrapper = shallow(<SchemaRow node={tree.itemAt(4)!} rowOptions={{}} />)
77-
.find(SchemaPropertyRow)
78-
.shallow();
79-
80-
expect(wrapper).not.toContain(Format);
81-
});
82-
});

‎src/components/shared/Format.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { JSONSchema4 } from 'json-schema';
2+
import * as React from 'react';
3+
4+
import { PropertyTypeColors } from './Types';
5+
6+
export const Format: React.FunctionComponent<{ schema: JSONSchema4 }> = ({ schema }) => {
7+
return (
8+
<span
9+
{...(typeof schema.type === 'string' && schema.type in PropertyTypeColors
10+
? { className: `ml-2 ${PropertyTypeColors[schema.type as string]}` }
11+
: { className: 'ml-2' })}
12+
>
13+
{`<${schema.format}>`}
14+
</span>
15+
);
16+
};

‎src/components/shared/Validations.tsx‎

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
import { safeStringify } from '@stoplight/json';
22
import { Dictionary } from '@stoplight/types';
33
import { Popover } from '@stoplight/ui-kit';
4-
import { JSONSchema4 } from 'json-schema';
54
import * as React from 'react';
65

76
import { ViewModeContext } from '../JsonSchemaViewer';
8-
import { PropertyTypeColors } from './Types';
97

108
export interface IValidations {
119
required: boolean;
@@ -93,15 +91,3 @@ export const Validations: React.FunctionComponent<IValidations> = ({
9391
</>
9492
);
9593
};
96-
97-
export const Format: React.FunctionComponent<{ schema: JSONSchema4 }> = ({ schema }) => {
98-
return (
99-
<div
100-
{...(typeof schema.type === 'string' && schema.type in PropertyTypeColors
101-
? { className: `ml-2 ${PropertyTypeColors[schema.type as string]}` }
102-
: { className: 'ml-2' })}
103-
>
104-
{`<${schema.format}>`}
105-
</div>
106-
);
107-
};

‎src/components/shared/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
export * from './Caret';
22
export * from './Description';
33
export * from './Divider';
4+
export * from './Format';
45
export * from './Property';
56
export * from './Types';
67
export * from './Validations';

0 commit comments

Comments
 (0)