Fix https://github.com/readmeio/api-explorer/issues/9

readmeio · Sep 18, 2017 · 4e44d51 · 4e44d51
1 parent 8022aad
commit 4e44d51
Show file tree

Hide file tree

Showing 8 changed files with 10,261 additions and 7,199 deletions.
diff --git a/packages/api-explorer-ui/__tests__/Doc.test.jsx b/packages/api-explorer-ui/__tests__/Doc.test.jsx
@@ -16,10 +16,30 @@ const props = {
   setLanguage: () => {},
 };
 
+function assertDocElements(component, doc) {
+  expect(component.find(`#page-${doc.slug}`).length).toBe(1);
+  expect(component.find('a.anchor-page-title').length).toBe(1);
+  expect(component.find('h2').text()).toBe(doc.title);
+}
+
 test('should output a div', () => {
   const doc = shallow(<Doc {...props} />);
 
-  expect(doc.find('.hub-reference').length).toBe(1);
+  assertDocElements(doc, props.doc);
+  expect(doc.find('.hub-api').length).toBe(1);
+  expect(doc.find('PathUrl').length).toBe(1);
+  expect(doc.find('CodeSample').length).toBe(1);
+  expect(doc.find('Params').length).toBe(1);
+  expect(doc.find('Content').length).toBe(1);
+});
+
+test('should work without a doc.swagger/doc.path/oas', () => {
+  const doc = { title: 'title', slug: 'slug', type: 'basic' };
+  const docComponent = shallow(<Doc doc={doc} setLanguage={() => {}} />);
+
+  assertDocElements(docComponent, doc);
+  expect(docComponent.find('.hub-api').length).toBe(0);
+  expect(docComponent.find('Content').length).toBe(1);
 });
 
 describe('state.dirty', () => {

diff --git a/packages/api-explorer-ui/__tests__/SecurityInput.test.jsx b/packages/api-explorer-ui/__tests__/SecurityInput.test.jsx
@@ -34,6 +34,35 @@ describe('oauth2', () => {
   });
 });
 
+describe('apiKey', () => {
+  const props = {
+    scheme: { type: 'apiKey', name: 'api_key', _key: 'api_key' },
+    onChange: () => {},
+  };
+
+  test('should send auth apiKey into onChange()', () => {
+    const onChange = jest.fn();
+    const securityInput = mount(<SecurityInput {...props} onChange={onChange} />);
+
+    securityInput.find('input').node.value = 'user';
+    securityInput.find('input').simulate('change');
+
+    expect(onChange.mock.calls[0]).toEqual([
+      {
+        auth: {
+          api_key: 'user',
+        },
+      },
+    ]);
+  });
+  test('should display name inside label', () => {
+    const onChange = jest.fn();
+    const securityInput = mount(<SecurityInput {...props} onChange={onChange} />);
+
+    expect(securityInput.find('label').text()).toBe('api_key');
+  });
+});
+
 describe('basic', () => {
   const props = { scheme: { type: 'basic', _key: 'test-basic' }, onChange: () => {} };
 

diff --git a/packages/api-explorer-ui/__tests__/index.test.jsx b/packages/api-explorer-ui/__tests__/index.test.jsx
@@ -60,6 +60,7 @@ describe('selected language', () => {
 
   describe('Cookie', () => {
     test('the state of language should be set to Cookie value if provided', () => {
+      const languageCookie = Cookie.set('readme_language', 'javascript');
       const languages = ['node', 'curl'];
       const explorer = shallow(
         <ApiExplorer
@@ -72,8 +73,38 @@ describe('selected language', () => {
         />,
       );
 
-      explorer.instance().setLanguage('language');
-      expect(explorer.state('language')).toBe('language');
+      expect(explorer.state('language')).toBe('javascript');
     });
   });
+
+  test('the state of language should be the first language defined if cookie has not been set', () => {
+    const languageCookie = Cookie.remove('readme_language');
+    const languages = ['node', 'curl'];
+    const explorer = shallow(
+      <ApiExplorer
+        docs={docs}
+        oasFiles={{
+          'api-setting': Object.assign({}, oas, {
+            [extensions.SAMPLES_LANGUAGES]: languages,
+          }),
+        }}
+      />,
+    );
+
+    expect(explorer.state('language')).toBe('node');
+  });
+
+  test('the state of language should be defaulted to curl if no cookie is present and languages have not been defined', () => {
+    const languageCookie = Cookie.remove('readme_language');
+    const explorer = shallow(
+      <ApiExplorer
+        docs={docs}
+        oasFiles={{
+          'api-setting': Object.assign({}, oas),
+        }}
+      />,
+    );
+
+    expect(explorer.state('language')).toBe('curl');
+  });
 });
diff --git a/packages/api-explorer-ui/dist/index.js b/packages/api-explorer-ui/dist/index.js
diff --git a/packages/api-explorer-ui/lib/create-docs.js b/packages/api-explorer-ui/lib/create-docs.js
@@ -29,7 +29,8 @@ module.exports = (oas, apiSetting) => {
           category: { apiSetting },
           api: { method },
           swagger: { path },
-          body: ``,
+          body: '',
+          excerpt: operation.description,
         });
       }
     });

diff --git a/packages/api-explorer-ui/src/Doc.jsx b/packages/api-explorer-ui/src/Doc.jsx
@@ -27,11 +27,54 @@ class Doc extends React.Component {
     });
   }
 
-  render() {
-    const { doc, setLanguage, language } = this.props;
+  renderEndpoint() {
+    const { doc, setLanguage } = this.props;
     const oas = this.oas;
     const operation = oas.operation(doc.swagger.path, doc.api.method);
 
+    return (
+      <div className="hub-api">
+        <PathUrl
+          oas={oas}
+          operation={operation}
+          dirty={this.state.dirty}
+          loading={this.state.loading}
+          onChange={this.onChange}
+        />
+
+        {showCode(oas, operation) && (
+          <div className="hub-reference-section hub-reference-section-code">
+            <div className="hub-reference-left">
+              <CodeSample
+                oas={oas}
+                setLanguage={setLanguage}
+                operation={operation}
+                formData={this.state.formData}
+              />
+            </div>
+            <div className="hub-reference-right" />
+          </div>
+        )}
+
+        <div className="hub-reference-section">
+          <div className="hub-reference-left">
+            <Params
+              oas={oas}
+              operation={operation}
+              formData={this.state.formData}
+              onChange={this.onChange}
+            />
+          </div>
+          <div className="hub-reference-right switcher" />
+        </div>
+      </div>
+    );
+  }
+
+  render() {
+    const { doc } = this.props;
+    const oas = this.oas;
+
     return (
       <div className="hub-reference" id={`page-${doc.slug}`}>
         {
@@ -47,54 +90,21 @@ class Doc extends React.Component {
               }
               <h2>{doc.title}</h2>
               {doc.excerpt && (
-                // eslint-disable-next-line react/no-danger
-                <div className="excerpt" dangerouslySetInnerHTML={{ __html: doc.excerpt }} />
+                <div className="excerpt">
+                  {
+                    // eslint-disable-next-line react/no-danger
+                    <p dangerouslySetInnerHTML={{ __html: doc.excerpt }} />
+                  }
+                </div>
               )}
             </header>
           </div>
           <div className="hub-reference-right">&nbsp;</div>
         </div>
 
-        {doc.type === 'endpoint' && (
-          <div className="hub-api">
-            <PathUrl
-              oas={oas}
-              operation={operation}
-              dirty={this.state.dirty}
-              loading={this.state.loading}
-              onChange={this.onChange}
-            />
-
-            {showCode(oas, operation) && (
-              <div className="hub-reference-section hub-reference-section-code">
-                <div className="hub-reference-left">
-                  <CodeSample
-                    oas={oas}
-                    setLanguage={setLanguage}
-                    operation={operation}
-                    formData={this.state.formData}
-                    language={language}
-                  />
-                </div>
-                <div className="hub-reference-right" />
-              </div>
-            )}
-
-            <div className="hub-reference-section">
-              <div className="hub-reference-left">
-                <Params
-                  oas={oas}
-                  operation={operation}
-                  formData={this.state.formData}
-                  onChange={this.onChange}
-                />
-              </div>
-              <div className="hub-reference-right switcher" />
-            </div>
-            <Content body={doc.body} is-three-column />
-          </div>
-        )}
+        {doc.type === 'endpoint' && this.renderEndpoint()}
 
+        <Content body={doc.body} is-three-column />
         {
           // TODO maybe we dont need to do this with a hidden input now
           // cos we can just pass it around?
@@ -119,16 +129,20 @@ Doc.propTypes = {
     type: PropTypes.string.isRequired,
     api: PropTypes.shape({
       method: PropTypes.string.isRequired,
-    }).isRequired,
+    }),
     swagger: PropTypes.shape({
       path: PropTypes.string.isRequired,
-    }).isRequired,
+    }),
   }).isRequired,
-  oas: PropTypes.shape({}).isRequired,
+  oas: PropTypes.shape({}),
   setLanguage: PropTypes.func.isRequired,
   language: PropTypes.string,
 };
 
 Doc.defaultProps = {
   language: 'curl',
 };
+
+Doc.defaultProps = {
+  oas: {},
+};
diff --git a/packages/api-explorer-ui/src/SecurityInput.jsx b/packages/api-explorer-ui/src/SecurityInput.jsx
@@ -56,6 +56,25 @@ Oauth2.defaultProps = {
   oauthUrl: '',
 };
 
+function ApiKey(apiKey) {
+  return (
+    <div className="row">
+      <div className="col-xs-5">
+        <label htmlFor="apiKey">{apiKey.scheme.name}</label>
+      </div>
+      <div className="col-xs-7">
+        <input type="text" onChange={e => apiKey.change(e.currentTarget.value)} />
+      </div>
+    </div>
+  );
+}
+
+ApiKey.propTypes = {
+  scheme: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+  }).isRequired,
+};
+
 class Basic extends React.Component {
   constructor(props) {
     super(props);
@@ -109,6 +128,8 @@ function SecurityInput(props) {
       return <Oauth2 {...props} change={change} />;
     case 'basic':
       return <Basic {...props} change={change} />;
+    case 'apiKey':
+      return <ApiKey {...props} change={change} />;
     default:
       return <span />;
   }

diff --git a/packages/api-explorer-ui/src/index.jsx b/packages/api-explorer-ui/src/index.jsx
@@ -35,7 +35,7 @@ class ApiExplorer extends React.Component {
             <Doc
               key={doc._id}
               doc={doc}
-              oas={doc.category.apiSetting ? this.props.oasFiles[doc.category.apiSetting] : {}}
+              oas={doc.category.apiSetting && this.props.oasFiles[doc.category.apiSetting]}
               setLanguage={this.setLanguage}
             />
           ))}