Skip to content

Commit 21ff0cc

Browse files
cjlanzocjlanzo
authored
refactor(adding data-test attributes): add data-test attributes (#233)
1 parent 5f2bbef commit 21ff0cc

File tree

9 files changed

+223
-214
lines changed

9 files changed

+223
-214
lines changed

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

Lines changed: 141 additions & 141 deletions
Large diffs are not rendered by default.

‎src/__tests__/index.spec.tsx‎

Lines changed: 48 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -262,13 +262,13 @@ describe('Expanded depth', () => {
262262
<div></div>
263263
<div>array of:</div>
264264
<div data-level=\\"0\\">
265-
<div data-id=\\"862ab7c3a6663\\">
265+
<div data-id=\\"862ab7c3a6663\\" data-test=\\"schema-row\\">
266266
<div>
267267
<div>
268268
<div role=\\"button\\"></div>
269269
<div>
270-
<div>foo</div>
271-
<span>array[object]</span>
270+
<div data-test=\\"property-name-foo\\">foo</div>
271+
<span data-test=\\"property-type\\">array[object]</span>
272272
</div>
273273
</div>
274274
</div>
@@ -291,13 +291,13 @@ describe('Expanded depth', () => {
291291
<div></div>
292292
<div>array of:</div>
293293
<div data-level=\\"0\\">
294-
<div data-id=\\"862ab7c3a6663\\">
294+
<div data-id=\\"862ab7c3a6663\\" data-test=\\"schema-row\\">
295295
<div>
296296
<div>
297297
<div role=\\"button\\"></div>
298298
<div>
299-
<div>foo</div>
300-
<span>array[object]</span>
299+
<div data-test=\\"property-name-foo\\">foo</div>
300+
<span data-test=\\"property-type\\">array[object]</span>
301301
</div>
302302
</div>
303303
</div>
@@ -320,26 +320,26 @@ describe('Expanded depth', () => {
320320
<div></div>
321321
<div>array of:</div>
322322
<div data-level=\\"0\\">
323-
<div data-id=\\"862ab7c3a6663\\">
323+
<div data-id=\\"862ab7c3a6663\\" data-test=\\"schema-row\\">
324324
<div>
325325
<div>
326326
<div role=\\"button\\"></div>
327327
<div>
328-
<div>foo</div>
329-
<span>array[object]</span>
328+
<div data-test=\\"property-name-foo\\">foo</div>
329+
<span data-test=\\"property-type\\">array[object]</span>
330330
</div>
331331
</div>
332332
</div>
333333
</div>
334334
<div data-level=\\"1\\">
335-
<div data-id=\\"f1c21cde4de6f\\">
335+
<div data-id=\\"f1c21cde4de6f\\" data-test=\\"schema-row\\">
336336
<div></div>
337337
<div>
338338
<div>
339339
<div role=\\"button\\"></div>
340340
<div>
341-
<div>bar</div>
342-
<span>object</span>
341+
<div data-test=\\"property-name-bar\\">bar</div>
342+
<span data-test=\\"property-type\\">object</span>
343343
</div>
344344
</div>
345345
</div>
@@ -397,23 +397,23 @@ describe('Expanded depth', () => {
397397
<div></div>
398398
<div>array of:</div>
399399
<div data-level=\\"0\\">
400-
<div data-id=\\"3cbab69efa81f\\">
400+
<div data-id=\\"3cbab69efa81f\\" data-test=\\"schema-row\\">
401401
<div>
402402
<div>
403403
<div>
404-
<div>bar</div>
405-
<span>integer</span>
404+
<div data-test=\\"property-name-bar\\">bar</div>
405+
<span data-test=\\"property-type\\">integer</span>
406406
</div>
407407
</div>
408408
</div>
409409
</div>
410-
<div data-id=\\"862ab7c3a6663\\">
410+
<div data-id=\\"862ab7c3a6663\\" data-test=\\"schema-row\\">
411411
<div>
412412
<div>
413413
<div role=\\"button\\"></div>
414414
<div>
415-
<div>foo</div>
416-
<span>array[object]</span>
415+
<div data-test=\\"property-name-foo\\">foo</div>
416+
<span data-test=\\"property-type\\">array[object]</span>
417417
</div>
418418
</div>
419419
</div>
@@ -436,23 +436,23 @@ describe('Expanded depth', () => {
436436
<div></div>
437437
<div>array of:</div>
438438
<div data-level=\\"0\\">
439-
<div data-id=\\"3cbab69efa81f\\">
439+
<div data-id=\\"3cbab69efa81f\\" data-test=\\"schema-row\\">
440440
<div>
441441
<div>
442442
<div>
443-
<div>bar</div>
444-
<span>integer</span>
443+
<div data-test=\\"property-name-bar\\">bar</div>
444+
<span data-test=\\"property-type\\">integer</span>
445445
</div>
446446
</div>
447447
</div>
448448
</div>
449-
<div data-id=\\"862ab7c3a6663\\">
449+
<div data-id=\\"862ab7c3a6663\\" data-test=\\"schema-row\\">
450450
<div>
451451
<div>
452452
<div role=\\"button\\"></div>
453453
<div>
454-
<div>foo</div>
455-
<span>array[object]</span>
454+
<div data-test=\\"property-name-foo\\">foo</div>
455+
<span data-test=\\"property-type\\">array[object]</span>
456456
</div>
457457
</div>
458458
</div>
@@ -475,46 +475,46 @@ describe('Expanded depth', () => {
475475
<div></div>
476476
<div>array of:</div>
477477
<div data-level=\\"0\\">
478-
<div data-id=\\"3cbab69efa81f\\">
478+
<div data-id=\\"3cbab69efa81f\\" data-test=\\"schema-row\\">
479479
<div>
480480
<div>
481481
<div>
482-
<div>bar</div>
483-
<span>integer</span>
482+
<div data-test=\\"property-name-bar\\">bar</div>
483+
<span data-test=\\"property-type\\">integer</span>
484484
</div>
485485
</div>
486486
</div>
487487
</div>
488-
<div data-id=\\"862ab7c3a6663\\">
488+
<div data-id=\\"862ab7c3a6663\\" data-test=\\"schema-row\\">
489489
<div>
490490
<div>
491491
<div role=\\"button\\"></div>
492492
<div>
493-
<div>foo</div>
494-
<span>array[object]</span>
493+
<div data-test=\\"property-name-foo\\">foo</div>
494+
<span data-test=\\"property-type\\">array[object]</span>
495495
</div>
496496
</div>
497497
</div>
498498
</div>
499499
<div data-level=\\"1\\">
500-
<div data-id=\\"f1c21cde4de6f\\">
500+
<div data-id=\\"f1c21cde4de6f\\" data-test=\\"schema-row\\">
501501
<div></div>
502502
<div>
503503
<div>
504504
<div>
505-
<div>bar</div>
506-
<span>string</span>
505+
<div data-test=\\"property-name-bar\\">bar</div>
506+
<span data-test=\\"property-type\\">string</span>
507507
</div>
508508
</div>
509509
</div>
510510
</div>
511-
<div data-id=\\"c6321b8d80105\\">
511+
<div data-id=\\"c6321b8d80105\\" data-test=\\"schema-row\\">
512512
<div></div>
513513
<div>
514514
<div>
515515
<div>
516-
<div>foo</div>
517-
<span>number</span>
516+
<div data-test=\\"property-name-foo\\">foo</div>
517+
<span data-test=\\"property-type\\">number</span>
518518
</div>
519519
</div>
520520
</div>
@@ -584,24 +584,24 @@ describe('Expanded depth', () => {
584584
<div class=\\"JsonSchemaViewer\\">
585585
<div></div>
586586
<div data-level=\\"0\\">
587-
<div data-id=\\"3cbab69efa81f\\">
587+
<div data-id=\\"3cbab69efa81f\\" data-test=\\"schema-row\\">
588588
<div>
589589
<div>
590590
<div role=\\"button\\"></div>
591591
<div>
592-
<div>bar</div>
593-
<span>object</span>
592+
<div data-test=\\"property-name-bar\\">bar</div>
593+
<span data-test=\\"property-type\\">object</span>
594594
</div>
595595
</div>
596596
</div>
597597
</div>
598-
<div data-id=\\"862ab7c3a6663\\">
598+
<div data-id=\\"862ab7c3a6663\\" data-test=\\"schema-row\\">
599599
<div>
600600
<div>
601601
<div role=\\"button\\"></div>
602602
<div>
603-
<div>foo</div>
604-
<span>array[object]</span>
603+
<div data-test=\\"property-name-foo\\">foo</div>
604+
<span data-test=\\"property-type\\">array[object]</span>
605605
</div>
606606
</div>
607607
</div>
@@ -651,10 +651,10 @@ describe('$ref resolving', () => {
651651
<div data-overlay-container=\\"true\\">
652652
<div class=\\"JsonSchemaViewer\\">
653653
<div></div>
654-
<div data-id=\\"bf8b96e78f11d\\">
654+
<div data-id=\\"bf8b96e78f11d\\" data-test=\\"schema-row\\">
655655
<div>
656656
<div>
657-
<div><span>string</span></div>
657+
<div><span data-test=\\"property-type\\">string</span></div>
658658
</div>
659659
</div>
660660
</div>
@@ -678,20 +678,20 @@ describe('$ref resolving', () => {
678678
<div data-overlay-container=\\"true\\">
679679
<div class=\\"JsonSchemaViewer\\">
680680
<div></div>
681-
<div data-id=\\"bf8b96e78f11d\\">
681+
<div data-id=\\"bf8b96e78f11d\\" data-test=\\"schema-row\\">
682682
<div>
683683
<div>
684684
<div role=\\"button\\"></div>
685-
<div><span>$ref(#/foo)[]</span></div>
685+
<div><span data-test=\\"property-type\\">$ref(#/foo)[]</span></div>
686686
</div>
687687
</div>
688688
<span></span>
689689
</div>
690690
<div data-level=\\"0\\">
691-
<div data-id=\\"98538b996305d\\">
691+
<div data-id=\\"98538b996305d\\" data-test=\\"schema-row\\">
692692
<div>
693693
<div>
694-
<div><span>#/foo</span></div>
694+
<div><span data-test=\\"property-type-ref\\">#/foo</span></div>
695695
</div>
696696
</div>
697697
<span></span>

‎src/components/SchemaRow/SchemaRow.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,7 @@ export const SchemaRow: React.FunctionComponent<SchemaRowProps> = React.memo(
9292
pl={pl}
9393
py={2}
9494
data-id={originalNodeId}
95+
data-test="schema-row"
9596
pos="relative"
9697
onMouseEnter={(e: any) => {
9798
e.stopPropagation();
@@ -115,7 +116,12 @@ export const SchemaRow: React.FunctionComponent<SchemaRowProps> = React.memo(
115116

116117
<Flex alignItems="baseline" fontSize="base">
117118
{schemaNode.subpath.length > 0 && shouldShowPropertyName(schemaNode) && (
118-
<Box mr={2} fontFamily="mono" fontWeight="semibold">
119+
<Box
120+
mr={2}
121+
fontFamily="mono"
122+
fontWeight="semibold"
123+
data-test={`property-name-${last(schemaNode.subpath)}`}
124+
>
119125
{last(schemaNode.subpath)}
120126
</Box>
121127
)}

‎src/components/shared/Description.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ export const Description: React.FunctionComponent<{ value: unknown }> = ({ value
2626
return (
2727
<Box
2828
as={MarkdownViewer}
29+
data-test="property-description"
2930
markdown={firstParagraph}
3031
parseOptions={{
3132
components: {

‎src/components/shared/Format.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,5 @@ type FormatProps = {
66
};
77

88
export const Format: React.FunctionComponent<FormatProps> = ({ format }) => {
9-
return <Box as="span" color="muted">{`<${format}>`}</Box>;
9+
return <Box as="span" color="muted" data-test="property-type-format">{`<${format}>`}</Box>;
1010
};

‎src/components/shared/Properties.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,11 +29,11 @@ export const Properties: React.FunctionComponent<IProperties> = ({
2929
const showVisibilityValidations = viewMode === 'standalone' && !!readOnly !== !!writeOnly;
3030
const visibility = showVisibilityValidations ? (
3131
readOnly ? (
32-
<Box as="span" ml={2} color="muted">
32+
<Box as="span" ml={2} color="muted" data-test="property-read-only">
3333
read-only
3434
</Box>
3535
) : (
36-
<Box as="span" ml={2} color="muted">
36+
<Box as="span" ml={2} color="muted" data-test="property-write-only">
3737
write-only
3838
</Box>
3939
)
@@ -42,13 +42,13 @@ export const Properties: React.FunctionComponent<IProperties> = ({
4242
return (
4343
<>
4444
{deprecated ? (
45-
<Box as="span" ml={2} color="warning">
45+
<Box as="span" ml={2} color="warning" data-test="property-deprecated">
4646
deprecated
4747
</Box>
4848
) : null}
4949
{visibility}
5050
{required && (
51-
<Box as="span" ml={2} color="warning">
51+
<Box as="span" ml={2} color="warning" data-test="property-required">
5252
required
5353
</Box>
5454
)}

‎src/components/shared/Types.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ function getFormats(schemaNode: RegularNode): Partial<Record<SchemaNodeKind, str
6161
export const Types: React.FunctionComponent<{ schemaNode: SchemaNode }> = ({ schemaNode }) => {
6262
if (isReferenceNode(schemaNode)) {
6363
return (
64-
<Box as="span" textOverflow="truncate">
64+
<Box as="span" textOverflow="truncate" data-test="property-type-ref">
6565
{schemaNode.value ?? '$ref'}
6666
</Box>
6767
);
@@ -80,7 +80,7 @@ export const Types: React.FunctionComponent<{ schemaNode: SchemaNode }> = ({ sch
8080

8181
const rendered = types.map((type, i, { length }) => (
8282
<React.Fragment key={type}>
83-
<Box as="span" textOverflow="truncate" color="muted">
83+
<Box as="span" textOverflow="truncate" color="muted" data-test="property-type">
8484
{shouldRenderName(type) ? printName(schemaNode) ?? type : type}
8585
</Box>
8686

‎src/components/shared/Validations.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,7 @@ const NumberValidations = ({
132132
return null;
133133
}
134134
return (
135-
<HStack color="muted" maxW="full" spacing={1}>
135+
<HStack color="muted" maxW="full" spacing={1} data-test="property-validation">
136136
{entries
137137
.map(([key, value]) => numberValidationFormatters[key](value))
138138
.map((value, i) => (
@@ -159,7 +159,7 @@ const KeyValueValidations = ({ validations }: { validations: Dictionary<unknown>
159159

160160
const KeyValueValidation = ({ name, values }: { name: string; values: string[] }) => {
161161
return (
162-
<HStack color="muted" spacing={2} alignItems="baseline">
162+
<HStack color="muted" spacing={2} alignItems="baseline" data-test="property-validation">
163163
<Text>{capitalize(name)}:</Text>
164164

165165
<Flex flexWrap flex={1} style={{ gap: 4 }}>

0 commit comments

Comments
 (0)