fix: do not refresh page on auth submit (#63)

mia-platform · May 26, 2020 · a51022b · a51022b
1 parent 5b5a1af
commit a51022b
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 10 deletions.
diff --git a/packages/api-explorer/__tests__/AuthForm.test.jsx b/packages/api-explorer/__tests__/AuthForm.test.jsx
@@ -5,7 +5,7 @@ import AuthForm from '../src/components/AuthForm'
 
 const props = {
   onChange: () => {},
-  onSubmit: () => {},
+  onSubmit: jest.fn(),
   toggle: () => {},
   open: false,
   oauth: false,
@@ -65,3 +65,14 @@ test('should display multiple securities', () => {
   expect(authForm.find('SecurityInput').length).toBe(1);
   expect(authForm.find('SecurityInput').prop('scheme')).toEqual(securitySchemes.Basic[0]);
 });
+
+test('on form submits calls onSubmit', () => {
+  const securitySchemes = {
+    "Header Auth":[{"type":"auth","flows":{"implicit":{"authorizationUrl":"http://petstore.swagger.io/oauth/dialog","scopes":{"write:pets":"modify pets in your account","read:pets":"read your pets"}}},"_key":"petstore_auth"}],  
+  }
+  const authForm = shallowWithIntl(<AuthForm {...props} securitySchemes={securitySchemes} />);
+  const eventMock = {preventDefault: jest.fn()}
+  authForm.find("form").prop('onSubmit')(eventMock)
+  expect(eventMock.preventDefault).toHaveBeenCalledTimes(1)
+  expect(props.onSubmit).toHaveBeenCalledTimes(1)
+})
diff --git a/packages/api-explorer/src/components/AuthForm/index.jsx b/packages/api-explorer/src/components/AuthForm/index.jsx
@@ -34,7 +34,12 @@ function omitOrMerge (current, value, key) {
 function getSecuritySections(securityTypes, config, onChange, onSubmit, schemeName) {
   const {authInputRef, oauth, auth} = config
   return (
-    <form onSubmit={onSubmit}>
+    <form 
+      onSubmit={(e) => {
+        e.preventDefault() 
+        onSubmit()
+      }}
+    >
       <div>
         {
           Object.keys(securityTypes).map((type, index) => {
@@ -79,14 +84,8 @@ class AuthForm extends Component {
     onChange(mergeAuths)
   }
 
-  onSecuritySectionSubmit (e) {
-    const {onSubmit} = this.props
-    e.preventDefault();
-    onSubmit();
-  }
-
   render () {
-    const {securitySchemes, onChange, auth, oauth, authInputRef} = this.props
+    const {securitySchemes, onChange, auth, oauth, authInputRef, onSubmit} = this.props
     const schemeKeys = Object.keys(securitySchemes)
 
     return (
@@ -101,7 +100,7 @@ class AuthForm extends Component {
                       pick(securitySchemes, schemeName),
                       { authInputRef, oauth, auth },
                       onChange, 
-                      this.onSecuritySectionSubmit,
+                      onSubmit,
                       schemeName
                       )}
                   </div>