Add focus test for ApiKey component

packages/api-explorer-ui/__tests__/SecurityInput.test.jsx

@@ -66,24 +66,12 @@ describe('apiKey', () => {
     expect(securityInput.find('label').text()).toBe('api_key');
   });
 
-  test('should focus on input if auth is not provided', () => {
-    let securityInput = mount(<SecurityInput {...props} />);
-    const input = securityInput.find('input');
-    // const focusedElement = document.activeElement;
-    const focusedElement = input.simulate('focus');
-    console.log(focusedElement.html());
-    // expect(securityInput.ref('input')).toHaveBeenCalledTimes(1);
-
-    // expect(input.matchesElement(focusedElement)).toBe(true);
-
-    expect(input === focusedElement).toBe(true);
-
-    const onChange = jest.fn();
-    securityInput = mount(<SecurityInput {...props} onChange={onChange} />);
-    input.simulate('change');
-    console.log('unfocused', input.html());
+  test('should focus if focus is passed through', () => {
+    const securityInput = mount(<SecurityInput {...props} focus />);
+    securityInput.find('input').instance().value = 'api-key';
+    securityInput.find('input').simulate('change');
 
-    expect(input !== focusedElement).toBe(true);
+    expect(document.activeElement.value).toBe(securityInput.find('input').instance().value)
   });
 });
 

packages/api-explorer-ui/__tests__/fixtures/petstore/circular-oas.json

@@ -1013,8 +1013,9 @@
         }
       },
       "api_key": {
-        "type": "http",
-        "scheme": "basic"
+        "type": "apiKey",
+        "name": "api_key",
+        "in": "header"
       }
     },
     "headers": {}

packages/api-explorer-ui/src/SecurityInput.jsx

@@ -63,19 +63,19 @@ Oauth2.defaultProps = {
   oauthUrl: '',
 };
 
-function ApiKey(apiKey, focus) {
+function ApiKey({ scheme, focus, change }) {
   const apiKeyCookie = Cookie.get('api_key');
   // apiKeyCookie = apiKeyCookie || {e => apiKey.change(e.currentTarget.value)};
   return (
     <div className="row">
       <div className="col-xs-5">
-        <label htmlFor="apiKey">{apiKey.scheme.name}</label>
+        <label htmlFor="apiKey">{scheme.name}</label>
       </div>
       <div className="col-xs-7">
         <input
           ref={input => input && focus && input.focus()}
           type="text"
-          onChange={e => apiKey.change(e.currentTarget.value)}
+          onChange={e => change(e.currentTarget.value)}
           value={apiKeyCookie}
         />
       </div>
@@ -88,6 +88,7 @@ ApiKey.propTypes = {
     name: PropTypes.string.isRequired,
   }).isRequired,
   focus: PropTypes.bool.isRequired,
+  change: PropTypes.func.isRequired,
 };
 
 class Basic extends React.Component {