fix: handle empty object in security array (#1678)

src/components/SecurityRequirement/SecurityRequirement.tsx

@@ -8,8 +8,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,18 +67,22 @@ export class SecurityRequirement extends React.PureComponent<SecurityRequirement
     const security = this.props.security;
     return (
       <SecurityRequirementOrWrap>
-        {security.schemes.map(scheme => {
-          return (
-            <SecurityRequirementAndWrap key={scheme.id}>
-              <Link to={scheme.sectionId}>{scheme.id}</Link>
-              {scheme.scopes.length > 0 && ' ('}
-              {scheme.scopes.map(scope => (
-                <ScopeName key={scope}>{scope}</ScopeName>
-              ))}
-              {scheme.scopes.length > 0 && ') '}
-            </SecurityRequirementAndWrap>
-          );
-        })}
+        {security.schemes.length ? (
+          security.schemes.map((scheme) => {
+            return (
+              <SecurityRequirementAndWrap key={scheme.id}>
+                <Link to={scheme.sectionId}>{scheme.id}</Link>
+                {scheme.scopes.length > 0 && ' ('}
+                {scheme.scopes.map((scope) => (
+                  <ScopeName key={scope}>{scope}</ScopeName>
+                ))}
+                {scheme.scopes.length > 0 && ') '}
+              </SecurityRequirementAndWrap>
+            );
+          })
+        ) : (
+          <SecurityRequirementAndWrap>None</SecurityRequirementAndWrap>
+        )}
       </SecurityRequirementOrWrap>
     );
   }
@@ -89,7 +93,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;
   `}

src/components/__tests__/SecurityRequirement.test.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { shallow } from 'enzyme';
+
+import { OpenAPIParser } from '../../services';
+import { SecurityRequirementModel } from '../../services/models/SecurityRequirement';
+import { SecurityRequirement } from '../SecurityRequirement/SecurityRequirement';
+import { RedocNormalizedOptions } from '../../services/RedocNormalizedOptions';
+
+const options = new RedocNormalizedOptions({});
+describe('Components', () => {
+  describe('SecurityRequirement', () => {
+    describe('SecurityRequirement', () => {
+      it('should render \'None\' when empty object in security open api', () => {
+        const parser = new OpenAPIParser({ openapi: '3.0', info: { title: 'test', version: '0' }, paths: {} },
+          undefined,
+          options,
+        );
+        const securityRequirement = new SecurityRequirementModel({}, parser);
+        const securityElement = shallow(
+          <SecurityRequirement key={1} security={securityRequirement} />
+        ).getElement();
+        expect(securityElement.props.children.type.target).toEqual('span');
+        expect(securityElement.props.children.props.children).toEqual('None');
+      });
+    });
+  });
+});