Skip to content

Commit

Permalink
refactor(adding data-test attributes): add data-test attributes (#233)
Browse files Browse the repository at this point in the history
  • Loading branch information
@cjlanzo
cjlanzo authored Aug 18, 2023
1 parent 5f2bbef commit 21ff0cc
Show file tree
Hide file tree
Showing 9 changed files with 223 additions and 214 deletions.
282 changes: 141 additions & 141 deletions src/__tests__/__snapshots__/index.spec.tsx.snap
View file

Large diffs are not rendered by default.

96 changes: 48 additions & 48 deletions src/__tests__/index.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -262,13 +262,13 @@ describe('Expanded depth', () => {
<div></div>
<div>array of:</div>
<div data-level=\\"0\\">
<div data-id=\\"862ab7c3a6663\\">
<div data-id=\\"862ab7c3a6663\\" data-test=\\"schema-row\\">
<div>
<div>
<div role=\\"button\\"></div>
<div>
<div>foo</div>
<span>array[object]</span>
<div data-test=\\"property-name-foo\\">foo</div>
<span data-test=\\"property-type\\">array[object]</span>
</div>
</div>
</div>
Expand All @@ -291,13 +291,13 @@ describe('Expanded depth', () => {
<div></div>
<div>array of:</div>
<div data-level=\\"0\\">
<div data-id=\\"862ab7c3a6663\\">
<div data-id=\\"862ab7c3a6663\\" data-test=\\"schema-row\\">
<div>
<div>
<div role=\\"button\\"></div>
<div>
<div>foo</div>
<span>array[object]</span>
<div data-test=\\"property-name-foo\\">foo</div>
<span data-test=\\"property-type\\">array[object]</span>
</div>
</div>
</div>
Expand All @@ -320,26 +320,26 @@ describe('Expanded depth', () => {
<div></div>
<div>array of:</div>
<div data-level=\\"0\\">
<div data-id=\\"862ab7c3a6663\\">
<div data-id=\\"862ab7c3a6663\\" data-test=\\"schema-row\\">
<div>
<div>
<div role=\\"button\\"></div>
<div>
<div>foo</div>
<span>array[object]</span>
<div data-test=\\"property-name-foo\\">foo</div>
<span data-test=\\"property-type\\">array[object]</span>
</div>
</div>
</div>
</div>
<div data-level=\\"1\\">
<div data-id=\\"f1c21cde4de6f\\">
<div data-id=\\"f1c21cde4de6f\\" data-test=\\"schema-row\\">
<div></div>
<div>
<div>
<div role=\\"button\\"></div>
<div>
<div>bar</div>
<span>object</span>
<div data-test=\\"property-name-bar\\">bar</div>
<span data-test=\\"property-type\\">object</span>
</div>
</div>
</div>
Expand Down Expand Up @@ -397,23 +397,23 @@ describe('Expanded depth', () => {
<div></div>
<div>array of:</div>
<div data-level=\\"0\\">
<div data-id=\\"3cbab69efa81f\\">
<div data-id=\\"3cbab69efa81f\\" data-test=\\"schema-row\\">
<div>
<div>
<div>
<div>bar</div>
<span>integer</span>
<div data-test=\\"property-name-bar\\">bar</div>
<span data-test=\\"property-type\\">integer</span>
</div>
</div>
</div>
</div>
<div data-id=\\"862ab7c3a6663\\">
<div data-id=\\"862ab7c3a6663\\" data-test=\\"schema-row\\">
<div>
<div>
<div role=\\"button\\"></div>
<div>
<div>foo</div>
<span>array[object]</span>
<div data-test=\\"property-name-foo\\">foo</div>
<span data-test=\\"property-type\\">array[object]</span>
</div>
</div>
</div>
Expand All @@ -436,23 +436,23 @@ describe('Expanded depth', () => {
<div></div>
<div>array of:</div>
<div data-level=\\"0\\">
<div data-id=\\"3cbab69efa81f\\">
<div data-id=\\"3cbab69efa81f\\" data-test=\\"schema-row\\">
<div>
<div>
<div>
<div>bar</div>
<span>integer</span>
<div data-test=\\"property-name-bar\\">bar</div>
<span data-test=\\"property-type\\">integer</span>
</div>
</div>
</div>
</div>
<div data-id=\\"862ab7c3a6663\\">
<div data-id=\\"862ab7c3a6663\\" data-test=\\"schema-row\\">
<div>
<div>
<div role=\\"button\\"></div>
<div>
<div>foo</div>
<span>array[object]</span>
<div data-test=\\"property-name-foo\\">foo</div>
<span data-test=\\"property-type\\">array[object]</span>
</div>
</div>
</div>
Expand All @@ -475,46 +475,46 @@ describe('Expanded depth', () => {
<div></div>
<div>array of:</div>
<div data-level=\\"0\\">
<div data-id=\\"3cbab69efa81f\\">
<div data-id=\\"3cbab69efa81f\\" data-test=\\"schema-row\\">
<div>
<div>
<div>
<div>bar</div>
<span>integer</span>
<div data-test=\\"property-name-bar\\">bar</div>
<span data-test=\\"property-type\\">integer</span>
</div>
</div>
</div>
</div>
<div data-id=\\"862ab7c3a6663\\">
<div data-id=\\"862ab7c3a6663\\" data-test=\\"schema-row\\">
<div>
<div>
<div role=\\"button\\"></div>
<div>
<div>foo</div>
<span>array[object]</span>
<div data-test=\\"property-name-foo\\">foo</div>
<span data-test=\\"property-type\\">array[object]</span>
</div>
</div>
</div>
</div>
<div data-level=\\"1\\">
<div data-id=\\"f1c21cde4de6f\\">
<div data-id=\\"f1c21cde4de6f\\" data-test=\\"schema-row\\">
<div></div>
<div>
<div>
<div>
<div>bar</div>
<span>string</span>
<div data-test=\\"property-name-bar\\">bar</div>
<span data-test=\\"property-type\\">string</span>
</div>
</div>
</div>
</div>
<div data-id=\\"c6321b8d80105\\">
<div data-id=\\"c6321b8d80105\\" data-test=\\"schema-row\\">
<div></div>
<div>
<div>
<div>
<div>foo</div>
<span>number</span>
<div data-test=\\"property-name-foo\\">foo</div>
<span data-test=\\"property-type\\">number</span>
</div>
</div>
</div>
Expand Down Expand Up @@ -584,24 +584,24 @@ describe('Expanded depth', () => {
<div class=\\"JsonSchemaViewer\\">
<div></div>
<div data-level=\\"0\\">
<div data-id=\\"3cbab69efa81f\\">
<div data-id=\\"3cbab69efa81f\\" data-test=\\"schema-row\\">
<div>
<div>
<div role=\\"button\\"></div>
<div>
<div>bar</div>
<span>object</span>
<div data-test=\\"property-name-bar\\">bar</div>
<span data-test=\\"property-type\\">object</span>
</div>
</div>
</div>
</div>
<div data-id=\\"862ab7c3a6663\\">
<div data-id=\\"862ab7c3a6663\\" data-test=\\"schema-row\\">
<div>
<div>
<div role=\\"button\\"></div>
<div>
<div>foo</div>
<span>array[object]</span>
<div data-test=\\"property-name-foo\\">foo</div>
<span data-test=\\"property-type\\">array[object]</span>
</div>
</div>
</div>
Expand Down Expand Up @@ -651,10 +651,10 @@ describe('$ref resolving', () => {
<div data-overlay-container=\\"true\\">
<div class=\\"JsonSchemaViewer\\">
<div></div>
<div data-id=\\"bf8b96e78f11d\\">
<div data-id=\\"bf8b96e78f11d\\" data-test=\\"schema-row\\">
<div>
<div>
<div><span>string</span></div>
<div><span data-test=\\"property-type\\">string</span></div>
</div>
</div>
</div>
Expand All @@ -678,20 +678,20 @@ describe('$ref resolving', () => {
<div data-overlay-container=\\"true\\">
<div class=\\"JsonSchemaViewer\\">
<div></div>
<div data-id=\\"bf8b96e78f11d\\">
<div data-id=\\"bf8b96e78f11d\\" data-test=\\"schema-row\\">
<div>
<div>
<div role=\\"button\\"></div>
<div><span>$ref(#/foo)[]</span></div>
<div><span data-test=\\"property-type\\">$ref(#/foo)[]</span></div>
</div>
</div>
<span></span>
</div>
<div data-level=\\"0\\">
<div data-id=\\"98538b996305d\\">
<div data-id=\\"98538b996305d\\" data-test=\\"schema-row\\">
<div>
<div>
<div><span>#/foo</span></div>
<div><span data-test=\\"property-type-ref\\">#/foo</span></div>
</div>
</div>
<span></span>
Expand Down
8 changes: 7 additions & 1 deletion src/components/SchemaRow/SchemaRow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,7 @@ export const SchemaRow: React.FunctionComponent<SchemaRowProps> = React.memo(
pl={pl}
py={2}
data-id={originalNodeId}
data-test="schema-row"
pos="relative"
onMouseEnter={(e: any) => {
e.stopPropagation();
Expand All @@ -115,7 +116,12 @@ export const SchemaRow: React.FunctionComponent<SchemaRowProps> = React.memo(

<Flex alignItems="baseline" fontSize="base">
{schemaNode.subpath.length > 0 && shouldShowPropertyName(schemaNode) && (
<Box mr={2} fontFamily="mono" fontWeight="semibold">
<Box
mr={2}
fontFamily="mono"
fontWeight="semibold"
data-test={`property-name-${last(schemaNode.subpath)}`}
>
{last(schemaNode.subpath)}
</Box>
)}
Expand Down
1 change: 1 addition & 0 deletions src/components/shared/Description.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ export const Description: React.FunctionComponent<{ value: unknown }> = ({ value
return (
<Box
as={MarkdownViewer}
data-test="property-description"
markdown={firstParagraph}
parseOptions={{
components: {
Expand Down
2 changes: 1 addition & 1 deletion src/components/shared/Format.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,5 +6,5 @@ type FormatProps = {
};

export const Format: React.FunctionComponent<FormatProps> = ({ format }) => {
return <Box as="span" color="muted">{`<${format}>`}</Box>;
return <Box as="span" color="muted" data-test="property-type-format">{`<${format}>`}</Box>;
};
8 changes: 4 additions & 4 deletions src/components/shared/Properties.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,11 +29,11 @@ export const Properties: React.FunctionComponent<IProperties> = ({
const showVisibilityValidations = viewMode === 'standalone' && !!readOnly !== !!writeOnly;
const visibility = showVisibilityValidations ? (
readOnly ? (
<Box as="span" ml={2} color="muted">
<Box as="span" ml={2} color="muted" data-test="property-read-only">
read-only
</Box>
) : (
<Box as="span" ml={2} color="muted">
<Box as="span" ml={2} color="muted" data-test="property-write-only">
write-only
</Box>
)
Expand All @@ -42,13 +42,13 @@ export const Properties: React.FunctionComponent<IProperties> = ({
return (
<>
{deprecated ? (
<Box as="span" ml={2} color="warning">
<Box as="span" ml={2} color="warning" data-test="property-deprecated">
deprecated
</Box>
) : null}
{visibility}
{required && (
<Box as="span" ml={2} color="warning">
<Box as="span" ml={2} color="warning" data-test="property-required">
required
</Box>
)}
Expand Down
4 changes: 2 additions & 2 deletions src/components/shared/Types.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ function getFormats(schemaNode: RegularNode): Partial<Record<SchemaNodeKind, str
export const Types: React.FunctionComponent<{ schemaNode: SchemaNode }> = ({ schemaNode }) => {
if (isReferenceNode(schemaNode)) {
return (
<Box as="span" textOverflow="truncate">
<Box as="span" textOverflow="truncate" data-test="property-type-ref">
{schemaNode.value ?? '$ref'}
</Box>
);
Expand All @@ -80,7 +80,7 @@ export const Types: React.FunctionComponent<{ schemaNode: SchemaNode }> = ({ sch

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

Expand Down
4 changes: 2 additions & 2 deletions src/components/shared/Validations.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ const NumberValidations = ({
return null;
}
return (
<HStack color="muted" maxW="full" spacing={1}>
<HStack color="muted" maxW="full" spacing={1} data-test="property-validation">
{entries
.map(([key, value]) => numberValidationFormatters[key](value))
.map((value, i) => (
Expand All @@ -159,7 +159,7 @@ const KeyValueValidations = ({ validations }: { validations: Dictionary<unknown>

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

<Flex flexWrap flex={1} style={{ gap: 4 }}>
Expand Down
Loading

0 comments on commit 21ff0cc

Please sign in to comment.