chore: instituting new code standards on prop ordering (#366)

* fix: resolving a bug where $ref responses weren't processed

* fix: resovling descriptions on $ref examples being missing

* chore: adding tests

* chore: instituting new code standards on prop ordering

Author: erunion

packages/api-explorer/.eslintrc

@@ -33,6 +33,9 @@
         "Params",
         "TextArea"
       ]
-    }]
+    }],
+    "react/jsx-sort-default-props": 2,
+    "react/jsx-sort-props": 2,
+    "react/sort-prop-types": 2
   }
 }

packages/api-explorer/__tests__/AuthBox.test.jsx

@@ -8,13 +8,13 @@ const multipleSecurities = require('./fixtures/multiple-securities/oas');
 const oas = new Oas(multipleSecurities);
 
 const props = {
+  auth: {},
+  oauth: false,
+  open: false,
   operation: oas.operation('/or-security', 'post'),
   onChange: () => {},
   onSubmit: () => {},
   toggle: () => {},
-  open: false,
-  oauth: false,
-  auth: {},
 };
 
 test('should not display if no auth', () => {

packages/api-explorer/__tests__/CodeSample.test.jsx

@@ -7,10 +7,10 @@ const Oas = require('../src/lib/Oas');
 
 const { Operation } = Oas;
 const props = {
-  setLanguage: () => {},
-  operation: new Operation({}, '/pet/{id}', 'get'),
   formData: {},
   language: 'node',
+  setLanguage: () => {},
+  operation: new Operation({}, '/pet/{id}', 'get'),
 };
 
 describe('tabs', () => {

packages/api-explorer/__tests__/Doc.test.jsx

@@ -10,22 +10,22 @@ const oas = require('./fixtures/petstore/circular-oas');
 const multipleSecurities = require('./fixtures/multiple-securities/oas');
 
 const props = {
+  auth: {},
   doc: {
-    title: 'Title',
-    slug: 'slug',
-    type: 'endpoint',
-    swagger: { path: '/pet/{petId}' },
     api: { method: 'get' },
     formData: { path: { petId: '1' }, auth: { api_key: '' } },
     onSubmit: () => {},
+    slug: 'slug',
+    swagger: { path: '/pet/{petId}' },
+    title: 'Title',
+    type: 'endpoint',
   },
-  oas,
-  setLanguage: () => {},
   language: 'node',
-  suggestedEdits: false,
+  oas,
   oauth: false,
   onAuthChange: () => {},
-  auth: {},
+  setLanguage: () => {},
+  suggestedEdits: false,
   tryItMetrics: () => {},
 };
 
@@ -100,14 +100,14 @@ test('should work without a doc.swagger/doc.path/oas', () => {
   const doc = { title: 'title', slug: 'slug', type: 'basic' };
   const docComponent = shallow(
     <Doc
+      auth={{}}
       doc={doc}
-      setLanguage={() => {}}
       language="node"
-      suggestedEdits
       oauth={false}
-      tryItMetrics={() => {}}
       onAuthChange={() => {}}
-      auth={{}}
+      setLanguage={() => {}}
+      suggestedEdits
+      tryItMetrics={() => {}}
     />,
   );
   expect(docComponent.find('Waypoint').length).toBe(1);
@@ -122,15 +122,15 @@ test('should still display `Content` with column-style layout', () => {
   const doc = { title: 'title', slug: 'slug', type: 'basic' };
   const docComponent = shallow(
     <Doc
+      appearance={{ referenceLayout: 'column' }}
+      auth={{}}
       doc={doc}
-      setLanguage={() => {}}
       language="node"
-      suggestedEdits
-      appearance={{ referenceLayout: 'column' }}
       oauth={false}
-      tryItMetrics={() => {}}
       onAuthChange={() => {}}
-      auth={{}}
+      setLanguage={() => {}}
+      suggestedEdits
+      tryItMetrics={() => {}}
     />,
   );
   docComponent.setState({ showEndpoint: true });
@@ -171,6 +171,7 @@ describe('onSubmit', () => {
 
   test('should make request on Submit', () => {
     const props2 = {
+      auth: { petstore_auth: 'api-key' },
       doc: {
         title: 'Title',
         slug: 'slug',
@@ -185,11 +186,10 @@ describe('onSubmit', () => {
         },
         onSubmit: () => {},
       },
-      oas,
-      setLanguage: () => {},
       language: 'node',
+      oas,
       oauth: false,
-      auth: { petstore_auth: 'api-key' },
+      setLanguage: () => {},
     };
 
     const { fetch } = window;
@@ -253,10 +253,10 @@ describe('onSubmit', () => {
     const doc = mount(
       <Doc
         {...props}
+        auth={{ api_key: 'api-key' }}
         tryItMetrics={() => {
           called = true;
         }}
-        auth={{ api_key: 'api-key' }}
       />,
     );
 
@@ -374,14 +374,14 @@ test('should output with an error message if the endpoint fails to load', () =>
   const doc = mount(
     <Doc
       {...props}
-      oas={brokenOas}
       doc={{
         title: 'title',
         slug: 'slug',
         type: 'endpoint',
         swagger: { path: '/path' },
         api: { method: 'post' },
       }}
+      oas={brokenOas}
     />,
   );
 

packages/api-explorer/__tests__/Params.test.jsx

@@ -19,11 +19,11 @@ const booleanOas = new Oas(boolean);
 const stringOas = new Oas(string);
 
 const props = {
-  oas,
-  operation,
   formData: {},
+  oas,
   onChange: () => {},
   onSubmit: () => {},
+  operation,
 };
 
 const Params = createParams(oas);
@@ -177,31 +177,30 @@ function renderParams(schema, customProps) {
   );
 }
 
-function testNumberClass(schema) {
-  const clonedSchema = JSON.parse(JSON.stringify(schema));
-  test(`${JSON.stringify(schema)} should have correct class`, () => {
-    const params = renderParams(schema);
-
-    expect(params.find(`.field-${clonedSchema.type}.field-${clonedSchema.format}`).length).toBe(1);
-  });
-}
-
 test('should convert `mixed type` to string', () => {
   const params = renderParams({ type: 'mixed type' });
 
   expect(params.find(`.field-string`).length).toBe(1);
 });
 
-testNumberClass({ type: 'integer', format: 'int8' });
-testNumberClass({ type: 'integer', format: 'uint8' });
-testNumberClass({ type: 'integer', format: 'int16' });
-testNumberClass({ type: 'integer', format: 'uint16' });
-testNumberClass({ type: 'integer', format: 'int32' });
-testNumberClass({ type: 'integer', format: 'uint32' });
-testNumberClass({ type: 'integer', format: 'int64' });
-testNumberClass({ type: 'integer', format: 'uint64' });
-testNumberClass({ type: 'number', format: 'float' });
-testNumberClass({ type: 'number', format: 'double' });
+test.each([
+  ['integer', 'int8'],
+  ['integer', 'uint8'],
+  ['integer', 'int16'],
+  ['integer', 'uint16'],
+  ['integer', 'int32'],
+  ['integer', 'uint32'],
+  ['integer', 'int64'],
+  ['integer', 'uint64'],
+  ['number', 'float'],
+  ['number', 'double'],
+])('{ type: %s, format: %s } should have correct class', (type, format) => {
+  const schema = { type, format };
+  const clonedSchema = JSON.parse(JSON.stringify(schema));
+  const params = renderParams(schema);
+
+  expect(params.find(`.field-${clonedSchema.type}.field-${clonedSchema.format}`).length).toBe(1);
+});
 
 test('should not error if `integer|number` are missing `format`', () => {
   expect(() => {

packages/api-explorer/__tests__/PathUrl.test.jsx

@@ -11,15 +11,15 @@ const petstore = require('./fixtures/petstore/oas');
 const oas = new Oas(petstore);
 
 const props = {
-  oas,
-  operation: oas.operation('/pet/{petId}', 'get'),
+  apiKey: '',
   dirty: false,
   loading: false,
+  oas,
+  oauth: false,
   onChange: () => {},
-  toggleAuth: () => {},
   onSubmit: () => {},
-  oauth: false,
-  apiKey: '',
+  operation: oas.operation('/pet/{petId}', 'get'),
+  toggleAuth: () => {},
 };
 
 test('should display the path', () => {
@@ -69,8 +69,8 @@ test('button click should call onSubmit', () => {
   shallow(
     <PathUrl
       {...props}
-      operation={new Operation({}, '/path', 'get', { operationId: '123' })}
       onSubmit={onSubmit}
+      operation={new Operation({}, '/path', 'get', { operationId: '123' })}
     />,
   )
     .find('button[type="submit"]')

packages/api-explorer/__tests__/Response.test.jsx

@@ -9,12 +9,12 @@ const { Operation } = Oas;
 const oas = new Oas(petstore);
 
 const props = {
-  result: null,
-  operation: new Operation({}, '/pet', 'post'),
   hideResults: () => {},
+  result: null,
   oas,
   oauth: false,
   onChange: () => {},
+  operation: new Operation({}, '/pet', 'post'),
 };
 
 describe('no result', () => {

packages/api-explorer/__tests__/ResponseBody.test.jsx

@@ -11,8 +11,8 @@ const Oas = require('../src/lib/Oas');
 const { Operation } = Oas;
 const oas = new Oas(petstore);
 const props = {
-  operation: new Operation({}, '/pet', 'post'),
   oauth: false,
+  operation: new Operation({}, '/pet', 'post'),
 };
 
 beforeEach(async () => {

packages/api-explorer/__tests__/ResponseExample.test.jsx

@@ -11,10 +11,10 @@ const Oas = require('../src/lib/Oas');
 const oas = new Oas(petstore);
 
 const props = {
-  result: null,
   oas,
-  operation: oas.operation('/pet', 'post'),
   onChange: () => {},
+  operation: oas.operation('/pet', 'post'),
+  result: null,
 };
 
 test('should show no examples if endpoint does not any', () => {

packages/api-explorer/__tests__/ResponseSchema.test.jsx

@@ -9,8 +9,8 @@ const { Operation } = Oas;
 const oas = new Oas(petstore);
 
 const props = {
-  operation: oas.operation('/pet/{petId}', 'get'),
   oas,
+  operation: oas.operation('/pet/{petId}', 'get'),
   theme: 'light',
 };
 

packages/api-explorer/__tests__/ResponseTabs.test.jsx

@@ -11,11 +11,11 @@ const Oas = require('../src/lib/Oas');
 
 const oas = new Oas(petstore);
 const props = {
+  hideResults: () => {},
   oas,
   operation: oas.operation('/pet', 'post'),
   responseTab: 'result',
   setTab: () => {},
-  hideResults: () => {},
 };
 
 beforeEach(async () => {
@@ -74,9 +74,9 @@ test('should call hideResults() on click', () => {
   const exampleTabs = shallow(
     <ResponseTabs
       {...props}
+      hideResults={hideResults}
       oas={exampleResultsOas}
       operation={exampleResultsOas.operation('/results', 'get')}
-      hideResults={hideResults}
     />,
   );
 

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

@@ -3,9 +3,9 @@ const { mount, shallow } = require('enzyme');
 const SecurityInput = require('../src/SecurityInput');
 
 const baseProps = {
-  onChange: () => {},
-  oauth: false,
   auth: {},
+  oauth: false,
+  onChange: () => {},
 };
 
 test('should render an Oauth2 component if type is oauth2', () => {
@@ -48,7 +48,7 @@ describe('oauth2', () => {
 
   test('should disable the input if `oauth=true`', () => {
     const securityInput = mount(
-      <SecurityInput {...props} {...baseProps} oauth auth={{ 'test-auth': 'test' }} />,
+      <SecurityInput {...props} {...baseProps} auth={{ 'test-auth': 'test' }} oauth />,
     );
     expect(securityInput.find('input').prop('disabled')).toBe(true);
   });
@@ -63,7 +63,7 @@ describe('oauth2', () => {
   test('should display api key if set', () => {
     const apiKey = '123456';
     const securityInput = mount(
-      <SecurityInput {...props} {...baseProps} oauth auth={{ 'test-auth': apiKey }} />,
+      <SecurityInput {...props} {...baseProps} auth={{ 'test-auth': apiKey }} oauth />,
     );
 
     expect(securityInput.find('input').prop('value')).toBe(apiKey);
@@ -151,7 +151,7 @@ describe('basic', () => {
     const user = 'user';
     const pass = 'pass';
     const securityInput = mount(
-      <SecurityInput {...props} {...baseProps} oauth auth={{ 'test-basic': { user, pass } }} />,
+      <SecurityInput {...props} {...baseProps} auth={{ 'test-basic': { user, pass } }} oauth />,
     );
 
     expect(securityInput.find('input[name="user"]').prop('value')).toBe(user);

packages/api-explorer/__tests__/block-types/Embed.test.jsx

@@ -59,7 +59,7 @@ describe('Embed', () => {
     };
     const embedInput = shallow(<Embed block={block} />);
     expect(embedInput.find('strong').html()).toBe(
-      '<strong><img src="http://static.jsbin.com/images/favicon.png" class="favicon" alt=""/><a href="http://jsbin.com/fewilipowi/edit?js,output" target="_new">http://jsbin.com/fewilipowi/edit?js,output</a></strong>',
+      '<strong><img alt="" class="favicon" src="http://static.jsbin.com/images/favicon.png"/><a href="http://jsbin.com/fewilipowi/edit?js,output" target="_new">http://jsbin.com/fewilipowi/edit?js,output</a></strong>',
     );
   });
 });