From 60680d9322f4bea4a9c10aa6d4514d02be5924d4 Mon Sep 17 00:00:00 2001
From: Valdir Mendes <valdir.mfjesus@hotmail.com>
Date: Wed, 7 Jul 2021 16:22:26 -0300
Subject: [PATCH 1/3] fix: Handle emtpy object in security array

---
 .../SecurityRequirement.tsx                   | 34 +++++++++++--------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/components/SecurityRequirement/SecurityRequirement.tsx b/src/components/SecurityRequirement/SecurityRequirement.tsx
index 3a52ad810b..ebda3bd16d 100644
--- a/src/components/SecurityRequirement/SecurityRequirement.tsx
+++ b/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>Anonymous</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;
   `}

From a8a4c854812c04b2ad9f22e6fd60921f067b19ba Mon Sep 17 00:00:00 2001
From: Valdir Mendes <valdir.mfjesus@yahoo.com.br>
Date: Sat, 10 Jul 2021 15:12:04 -0300
Subject: [PATCH 2/3] Update
 src/components/SecurityRequirement/SecurityRequirement.tsx

Co-authored-by: Adam Altman <adam@rebilly.com>
---
 src/components/SecurityRequirement/SecurityRequirement.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SecurityRequirement/SecurityRequirement.tsx b/src/components/SecurityRequirement/SecurityRequirement.tsx
index ebda3bd16d..91bf9f434b 100644
--- a/src/components/SecurityRequirement/SecurityRequirement.tsx
+++ b/src/components/SecurityRequirement/SecurityRequirement.tsx
@@ -81,7 +81,7 @@ export class SecurityRequirement extends React.PureComponent<SecurityRequirement
             );
           })
         ) : (
-          <SecurityRequirementAndWrap>Anonymous</SecurityRequirementAndWrap>
+          <SecurityRequirementAndWrap>None</SecurityRequirementAndWrap>
         )}
       </SecurityRequirementOrWrap>
     );

From a93d53c6bcdc73dd039ddc438946eddf1813b58e Mon Sep 17 00:00:00 2001
From: Valdir Mendes <valdir.mfjesus@hotmail.com>
Date: Thu, 15 Jul 2021 23:18:18 -0300
Subject: [PATCH 3/3] test: SecurityRequirement component with empty obj

---
 .../__tests__/SecurityRequirement.test.tsx    | 27 +++++++++++++++++++
 1 file changed, 27 insertions(+)
 create mode 100644 src/components/__tests__/SecurityRequirement.test.tsx

diff --git a/src/components/__tests__/SecurityRequirement.test.tsx b/src/components/__tests__/SecurityRequirement.test.tsx
new file mode 100644
index 0000000000..723c050565
--- /dev/null
+++ b/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');
+      });
+    });
+  });
+});