From b604bd8da874f07e9e9f8b193ad10117a5f5059c Mon Sep 17 00:00:00 2001 From: Oprysk Vyacheslav Date: Wed, 24 Nov 2021 16:47:24 +0200 Subject: [PATCH] fix: exclusiveMin/Max shows incorect range (#1799) * fix: exclusiveMin/Max shows incorect range * cover all number range cases & add unit tests * add more tests * fix maximum value * simplify humanizeNumberRange function * simplify exclusive checks * Update src/utils/openapi.ts Co-authored-by: Roman Hotsiy * update test coverage * linting * revert weird prettier changes * add md files to prettier ignore Co-authored-by: Roman Hotsiy --- .prettierignore | 1 + config/docker/index.tpl.html | 47 ++++++------ docs/deployment/intro.md | 12 ++-- docs/quickstart.md | 16 +++-- src/common-elements/dropdown.ts | 16 ++--- src/components/Callbacks/CallbackTitle.tsx | 4 +- src/components/JsonViewer/JsonViewer.tsx | 4 +- src/components/JsonViewer/style.ts | 8 +-- src/components/Operation/Operation.tsx | 2 +- src/components/Responses/styled.elements.ts | 8 +-- .../SecurityRequirement.tsx | 10 +-- src/services/RedocNormalizedOptions.ts | 6 +- src/utils/__tests__/openapi.test.ts | 71 +++++++++++++++++++ src/utils/openapi.ts | 53 +++++++------- 14 files changed, 164 insertions(+), 94 deletions(-) create mode 100644 .prettierignore diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 00000000..dd449725 --- /dev/null +++ b/.prettierignore @@ -0,0 +1 @@ +*.md diff --git a/config/docker/index.tpl.html b/config/docker/index.tpl.html index 50d1e959..15171edc 100644 --- a/config/docker/index.tpl.html +++ b/config/docker/index.tpl.html @@ -1,27 +1,28 @@ + + + + %PAGE_TITLE% + + + + - redoc { - display: block; - } - - - - - - - - - - \ No newline at end of file + + + + + diff --git a/docs/deployment/intro.md b/docs/deployment/intro.md index cbe39aeb..43eea451 100644 --- a/docs/deployment/intro.md +++ b/docs/deployment/intro.md @@ -29,13 +29,13 @@ The following options are supported: ### OpenAPI definition You will need an OpenAPI definition. For testing purposes, you can use one of the following sample OpenAPI definitions: -- OpenAPI 3.0 - - [Rebilly Users OpenAPI Definition](https://raw.githubusercontent.com/Rebilly/api-definitions/main/openapi/users.yaml) - - [Swagger Petstore Sample OpenAPI Definition](https://petstore3.swagger.io/api/v3/openapi.json) -- OpenAPI 2.0 - - [Thingful OpenAPI Definition](https://raw.githubusercontent.com/thingful/openapi-spec/master/spec/swagger.yaml) - - [Fitbit Plus OpenAPI Definition](https://raw.githubusercontent.com/TwineHealth/TwineDeveloperDocs/master/spec/swagger.yaml) +- OpenAPI 3.0 + - [Rebilly Users OpenAPI Definition](https://raw.githubusercontent.com/Rebilly/api-definitions/main/openapi/users.yaml) + - [Swagger Petstore Sample OpenAPI Definition](https://petstore3.swagger.io/api/v3/openapi.json) +- OpenAPI 2.0 + - [Thingful OpenAPI Definition](https://raw.githubusercontent.com/thingful/openapi-spec/master/spec/swagger.yaml) + - [Fitbit Plus OpenAPI Definition](https://raw.githubusercontent.com/TwineHealth/TwineDeveloperDocs/master/spec/swagger.yaml) :::info OpenAPI specification For more information on the OpenAPI specification, refer to the [Learning OpenAPI 3](https://redoc.ly/docs/resources/learning-openapi/) diff --git a/docs/quickstart.md b/docs/quickstart.md index 8f22a5c0..2dba080d 100644 --- a/docs/quickstart.md +++ b/docs/quickstart.md @@ -13,9 +13,12 @@ replace the `spec-url` attribute with the URL or local file address to your defi Redoc - - - + + + - + - + - ``` :::attention Running Redoc locally requires an HTTP server diff --git a/src/common-elements/dropdown.ts b/src/common-elements/dropdown.ts index f4bcc281..4fba9a55 100644 --- a/src/common-elements/dropdown.ts +++ b/src/common-elements/dropdown.ts @@ -28,16 +28,16 @@ export const StyledDropdown = styled(Dropdown)` width: auto; background: white; color: #263238; - font-family: ${(props) => props.theme.typography.headings.fontFamily}; + font-family: ${props => props.theme.typography.headings.fontFamily}; font-size: 0.929em; line-height: 1.5em; cursor: pointer; transition: border 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; &:hover, &:focus-within { - border: 1px solid ${(props) => props.theme.colors.primary.main}; - color: ${(props) => props.theme.colors.primary.main}; - box-shadow: 0px 0px 0px 1px ${(props) => props.theme.colors.primary.main}; + border: 1px solid ${props => props.theme.colors.primary.main}; + color: ${props => props.theme.colors.primary.main}; + box-shadow: 0px 0px 0px 1px ${props => props.theme.colors.primary.main}; } .dropdown-selector { display: inline-flex; @@ -48,7 +48,7 @@ export const StyledDropdown = styled(Dropdown)` margin-bottom: 5px; } .dropdown-selector-value { - font-family: ${(props) => props.theme.typography.headings.fontFamily}; + font-family: ${props => props.theme.typography.headings.fontFamily}; position: relative; font-size: 0.929em; width: 100%; @@ -63,7 +63,7 @@ export const StyledDropdown = styled(Dropdown)` right: 3px; top: 50%; transform: translateY(-50%); - border-color: ${(props) => props.theme.colors.primary.main} transparent transparent; + border-color: ${props => props.theme.colors.primary.main} transparent transparent; border-style: solid; border-width: 0.35em 0.35em 0; width: 0; @@ -128,8 +128,8 @@ export const SimpleDropdown = styled(StyledDropdown)` border: none; box-shadow: none; .dropdown-selector-value { - color: ${(props) => props.theme.colors.primary.main}; - text-shadow: 0px 0px 0px ${(props) => props.theme.colors.primary.main}; + color: ${props => props.theme.colors.primary.main}; + text-shadow: 0px 0px 0px ${props => props.theme.colors.primary.main}; } } } diff --git a/src/components/Callbacks/CallbackTitle.tsx b/src/components/Callbacks/CallbackTitle.tsx index 10b888f3..d6c34ff8 100644 --- a/src/components/Callbacks/CallbackTitle.tsx +++ b/src/components/Callbacks/CallbackTitle.tsx @@ -48,10 +48,10 @@ const CallbackTitleWrapper = styled.button` `; const CallbackName = styled.span<{ deprecated?: boolean }>` - text-decoration: ${(props) => (props.deprecated ? 'line-through' : 'none')}; + text-decoration: ${props => (props.deprecated ? 'line-through' : 'none')}; margin-right: 8px; `; const OperationBadgeStyled = styled(OperationBadge)` - margin: 0px 5px 0px 0px; + margin: 0 5px 0 0; `; diff --git a/src/components/JsonViewer/JsonViewer.tsx b/src/components/JsonViewer/JsonViewer.tsx index ba9f20f1..2bcfc146 100644 --- a/src/components/JsonViewer/JsonViewer.tsx +++ b/src/components/JsonViewer/JsonViewer.tsx @@ -34,11 +34,11 @@ class Json extends React.PureComponent { - {(options) => ( + {options => ( (this.node = node!)} + ref={node => (this.node = node!)} dangerouslySetInnerHTML={{ __html: jsonToHTML(this.props.data, options.jsonSampleExpandLevel), }} diff --git a/src/components/JsonViewer/style.ts b/src/components/JsonViewer/style.ts index 82b1677a..4fcb9ea4 100644 --- a/src/components/JsonViewer/style.ts +++ b/src/components/JsonViewer/style.ts @@ -6,8 +6,8 @@ export const jsonStyles = css` pointer-events: none; } - font-family: ${(props) => props.theme.typography.code.fontFamily}; - font-size: ${(props) => props.theme.typography.code.fontSize}; + font-family: ${props => props.theme.typography.code.fontFamily}; + font-size: ${props => props.theme.typography.code.fontSize}; white-space: ${({ theme }) => (theme.typography.code.wrap ? 'pre-wrap' : 'pre')}; contain: content; @@ -51,8 +51,8 @@ export const jsonStyles = css` background-color: transparent; border: 0; color: #fff; - font-family: ${(props) => props.theme.typography.code.fontFamily}; - font-size: ${(props) => props.theme.typography.code.fontSize}; + font-family: ${props => props.theme.typography.code.fontFamily}; + font-size: ${props => props.theme.typography.code.fontSize}; padding-right: 6px; padding-left: 6px; padding-top: 0; diff --git a/src/components/Operation/Operation.tsx b/src/components/Operation/Operation.tsx index 57776cf0..3d970aa2 100644 --- a/src/components/Operation/Operation.tsx +++ b/src/components/Operation/Operation.tsx @@ -42,7 +42,7 @@ export class Operation extends React.Component { return ( - {(options) => ( + {options => (

diff --git a/src/components/Responses/styled.elements.ts b/src/components/Responses/styled.elements.ts index 92b790c2..531236dd 100644 --- a/src/components/Responses/styled.elements.ts +++ b/src/components/Responses/styled.elements.ts @@ -14,13 +14,13 @@ export const StyledResponseTitle = styled(ResponseTitle)` background-color: #f2f2f2; cursor: pointer; - color: ${(props) => props.theme.colors.responses[props.type].color}; - background-color: ${(props) => props.theme.colors.responses[props.type].backgroundColor}; + color: ${props => props.theme.colors.responses[props.type].color}; + background-color: ${props => props.theme.colors.responses[props.type].backgroundColor}; &:focus { outline: auto; - outline-color: ${(props) => props.theme.colors.responses[props.type].color}; + outline-color: ${props => props.theme.colors.responses[props.type].color}; } - ${(props) => + ${props => (props.empty && ` cursor: default; diff --git a/src/components/SecurityRequirement/SecurityRequirement.tsx b/src/components/SecurityRequirement/SecurityRequirement.tsx index fb45fed2..b7f7bc4c 100644 --- a/src/components/SecurityRequirement/SecurityRequirement.tsx +++ b/src/components/SecurityRequirement/SecurityRequirement.tsx @@ -7,8 +7,8 @@ import { SecurityRequirementModel } from '../../services/models/SecurityRequirem import { linksCss } from '../Markdown/styled.elements'; const ScopeName = styled.code` - font-size: ${(props) => props.theme.typography.code.fontSize}; - font-family: ${(props) => props.theme.typography.code.fontFamily}; + font-size: ${props => props.theme.typography.code.fontSize}; + font-family: ${props => props.theme.typography.code.fontFamily}; border: 1px solid ${({ theme }) => theme.colors.border.dark}; margin: 0 3px; padding: 0.2em; @@ -67,12 +67,12 @@ export class SecurityRequirement extends React.PureComponent {security.schemes.length ? ( - security.schemes.map((scheme) => { + security.schemes.map(scheme => { return ( {scheme.id} {scheme.scopes.length > 0 && ' ('} - {scheme.scopes.map((scope) => ( + {scheme.scopes.map(scope => ( {scope} ))} {scheme.scopes.length > 0 && ') '} @@ -92,7 +92,7 @@ const AuthHeaderColumn = styled.div` `; const SecuritiesColumn = styled.div` - width: ${(props) => props.theme.schema.defaultDetailsWidth}; + width: ${props => props.theme.schema.defaultDetailsWidth}; ${media.lessThan('small')` margin-top: 10px; `} diff --git a/src/services/RedocNormalizedOptions.ts b/src/services/RedocNormalizedOptions.ts index be1df279..fcba8784 100644 --- a/src/services/RedocNormalizedOptions.ts +++ b/src/services/RedocNormalizedOptions.ts @@ -72,7 +72,7 @@ export class RedocNormalizedOptions { } if (typeof value === 'string') { const res = {}; - value.split(',').forEach((code) => { + value.split(',').forEach(code => { res[code.trim()] = true; }); return res; @@ -138,7 +138,7 @@ export class RedocNormalizedOptions { case 'false': return false; default: - return value.split(',').map((ext) => ext.trim()); + return value.split(',').map(ext => ext.trim()); } } @@ -266,7 +266,7 @@ export class RedocNormalizedOptions { this.maxDisplayedEnumValues = argValueToNumber(raw.maxDisplayedEnumValues); const ignoreNamedSchemas = Array.isArray(raw.ignoreNamedSchemas) ? raw.ignoreNamedSchemas - : raw.ignoreNamedSchemas?.split(',').map((s) => s.trim()); + : raw.ignoreNamedSchemas?.split(',').map(s => s.trim()); this.ignoreNamedSchemas = new Set(ignoreNamedSchemas); this.hideSchemaPattern = argValueToBoolean(raw.hideSchemaPattern); this.generatedPayloadSamplesMaxDepth = diff --git a/src/utils/__tests__/openapi.test.ts b/src/utils/__tests__/openapi.test.ts index 85a63e9e..e2ed3db4 100644 --- a/src/utils/__tests__/openapi.test.ts +++ b/src/utils/__tests__/openapi.test.ts @@ -10,6 +10,7 @@ import { pluralizeType, serializeParameterValue, sortByRequired, + humanizeNumberRange, } from '../'; import { FieldModel, OpenAPIParser, RedocNormalizedOptions } from '../../services'; @@ -410,6 +411,76 @@ describe('Utils', () => { }); }); + describe('openapi humanizeNumberRange', () => { + it('should return `>=` when only minimum value present or exclusiveMinimum = false', () => { + const expected = '>= 0'; + expect(humanizeNumberRange({ minimum: 0 })).toEqual(expected); + expect(humanizeNumberRange({ minimum: 0, exclusiveMinimum: false })).toEqual(expected); + }); + + it('should return `>` when minimum value present and exclusiveMinimum set to true', () => { + expect(humanizeNumberRange({ minimum: 0, exclusiveMinimum: true })).toEqual('> 0'); + }); + + it('should return `<=` when only maximum value present or exclusiveMinimum = false', () => { + const expected = '<= 10'; + expect(humanizeNumberRange({ maximum: 10 })).toEqual(expected); + expect(humanizeNumberRange({ maximum: 10, exclusiveMaximum: false })).toEqual(expected); + }); + + it('should return `<` when maximum value present and exclusiveMaximum set to true', () => { + expect(humanizeNumberRange({ maximum: 10, exclusiveMaximum: true })).toEqual('< 10'); + }); + + it('should return correct range for minimum and maximum values and with different exclusive set', () => { + expect(humanizeNumberRange({ minimum: 0, maximum: 10 })).toEqual('[ 0 .. 10 ]'); + expect( + humanizeNumberRange({ + minimum: 0, + exclusiveMinimum: true, + maximum: 10, + exclusiveMaximum: true, + }), + ).toEqual('( 0 .. 10 )'); + expect( + humanizeNumberRange({ + minimum: 0, + maximum: 10, + exclusiveMaximum: true, + }), + ).toEqual('[ 0 .. 10 )'); + expect( + humanizeNumberRange({ + minimum: 0, + exclusiveMinimum: true, + maximum: 10, + }), + ).toEqual('( 0 .. 10 ]'); + }); + + it('should return correct range exclusive values only', () => { + expect(humanizeNumberRange({ exclusiveMinimum: 0 })).toEqual('> 0'); + expect(humanizeNumberRange({ exclusiveMaximum: 10 })).toEqual('< 10'); + expect(humanizeNumberRange({ exclusiveMinimum: 0, exclusiveMaximum: 10 })).toEqual( + '( 0 .. 10 )', + ); + }); + + it('should return correct min value', () => { + expect(humanizeNumberRange({ minimum: 5, exclusiveMinimum: 10 })).toEqual('> 5'); + expect(humanizeNumberRange({ minimum: -5, exclusiveMinimum: -10 })).toEqual('> -10'); + }); + + it('should return correct max value', () => { + expect(humanizeNumberRange({ maximum: 10, exclusiveMaximum: 15 })).toEqual('< 15'); + expect(humanizeNumberRange({ maximum: -10, exclusiveMaximum: -15 })).toEqual('< -10'); + }); + + it('should return undefined', () => { + expect(humanizeNumberRange({})).toEqual(undefined); + }); + }); + describe('openapi humanizeConstraints', () => { const itemConstraintSchema = ( min?: number, diff --git a/src/utils/openapi.ts b/src/utils/openapi.ts index b356b8aa..6c4cb952 100644 --- a/src/utils/openapi.ts +++ b/src/utils/openapi.ts @@ -419,6 +419,29 @@ function humanizeRangeConstraint( return stringRange; } +export function humanizeNumberRange(schema: OpenAPISchema): string | undefined { + const minimum = + typeof schema.exclusiveMinimum === 'number' + ? Math.min(schema.exclusiveMinimum, schema.minimum ?? Infinity) + : schema.minimum; + const maximum = + typeof schema.exclusiveMaximum === 'number' + ? Math.max(schema.exclusiveMaximum, schema.maximum ?? -Infinity) + : schema.maximum; + const exclusiveMinimum = typeof schema.exclusiveMinimum === 'number' || schema.exclusiveMinimum; + const exclusiveMaximum = typeof schema.exclusiveMaximum === 'number' || schema.exclusiveMaximum; + + if (minimum !== undefined && maximum !== undefined) { + return `${exclusiveMinimum ? '( ' : '[ '}${minimum} .. ${maximum}${ + exclusiveMaximum ? ' )' : ' ]' + }`; + } else if (maximum !== undefined) { + return `${exclusiveMaximum ? '< ' : '<= '}${maximum}`; + } else if (minimum !== undefined) { + return `${exclusiveMinimum ? '> ' : '>= '}${minimum}`; + } +} + export function humanizeConstraints(schema: OpenAPISchema): string[] { const res: string[] = []; @@ -437,35 +460,7 @@ export function humanizeConstraints(schema: OpenAPISchema): string[] { res.push(multipleOfConstraint); } - let numberRange; - if (schema.minimum !== undefined && schema.maximum !== undefined) { - numberRange = schema.exclusiveMinimum ? '( ' : '[ '; - numberRange += schema.minimum; - numberRange += ' .. '; - numberRange += schema.maximum; - numberRange += schema.exclusiveMaximum ? ' )' : ' ]'; - } else if (schema.maximum !== undefined) { - numberRange = schema.exclusiveMaximum ? '< ' : '<= '; - numberRange += schema.maximum; - } else if (schema.minimum !== undefined) { - numberRange = schema.exclusiveMinimum ? '> ' : '>= '; - numberRange += schema.minimum; - } - - if (typeof schema.exclusiveMinimum === 'number' || typeof schema.exclusiveMaximum === 'number') { - let minimum = 0; - let maximum = 0; - if (schema.minimum) minimum = schema.minimum; - if (typeof schema.exclusiveMinimum === 'number') - minimum = minimum <= schema.exclusiveMinimum ? minimum : schema.exclusiveMinimum; - - if (schema.maximum) maximum = schema.maximum; - if (typeof schema.exclusiveMaximum === 'number') - maximum = maximum > schema.exclusiveMaximum ? maximum : schema.exclusiveMaximum; - - numberRange = `[${minimum} .. ${maximum}]`; - } - + const numberRange = humanizeNumberRange(schema); if (numberRange !== undefined) { res.push(numberRange); }