feat(headers): add headers support (#5)

api-explorer/src/RequestForm.js

@@ -14,6 +14,7 @@ export default class RequestForm extends PureComponent {
   state = {
     paramValues: {},
     queryValues: {},
+    headerValues: {},
     method: '',
     payload: ''
   }
@@ -36,12 +37,17 @@ export default class RequestForm extends PureComponent {
     utils.getQueryParams(route).forEach(param => {
       queryValues[param.name] = param.value || ''
     })
+    const headerValues = {}
+    Object.values(utils.normalizeParams(route.headers)).forEach(param => {
+      headerValues[param.name] = param.value || ''
+    })
     const method = methods[0]
     const payload = utils.getMethodPayload(route, method)
     this.setState({
       method,
       paramValues,
       queryValues,
+      headerValues,
       payload,
       sending: false
     })
@@ -81,7 +87,12 @@ export default class RequestForm extends PureComponent {
 
     this.setState({sending: true})
     this.props.setResponse(null)
-    axios[method](`${config.api}${path}`, payload).then(res => {
+    axios({
+      url: `${config.api}${path}`,
+      method,
+      data: payload,
+      headers: this.state.headerValues
+    }).then(res => {
       this.setState({sending: false})
       this.props.setResponse(res)
     })
@@ -95,10 +106,12 @@ export default class RequestForm extends PureComponent {
     const availableMethods = utils.getAvailableMethods(route)
     const params = utils.getPathParams(route)
     const query = utils.getQueryParams(route)
+    const headers = Object.values(utils.normalizeParams(route.headers))
     const {
       method,
       paramValues,
       queryValues,
+      headerValues,
       payload,
       sending
     } = this.state
@@ -156,6 +169,33 @@ export default class RequestForm extends PureComponent {
             </div>
           )}
         </div>
+        {headers.length > 0 && (
+          <div className='row'>
+            <div className='col'>
+              <h6>Headers</h6>
+              {headers.map(param => (
+                <div key={param.name} className='form-group'>
+                  <label>{param.name}</label>
+                  <input
+                    className='form-control'
+                    value={headerValues[param.name] || ''}
+                    onChange={e => {
+                      this.setState({
+                        headerValues: {
+                          ...headerValues,
+                          [param.name]: e.target.value
+                        }
+                      })
+                    }}
+                  />
+                  {param.help && (
+                    <small>{param.help}</small>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
         <div className='form-group'>
           <label>Method</label>
           <select

readme.md

@@ -47,6 +47,13 @@ shine(app, {
     path.resolve(__dirname, '..', 'src', 'redux', 'server')
   ],
   hidePath: path.resolve(__dirname, '..'),
+  headers: {
+      Authorization: {
+          value: 'foobar',
+          help: 'jwt auth token'
+      },
+      'X-Custom-Thing': 'abc'
+  },
   responses: [
     {
       title: 'Invalid request',
@@ -98,6 +105,9 @@ The mock server path. Can be a single path or array of paths.
 #### `hidePath`
 Removes the path from the file names in the api explorer.
 
+#### `headers`
+Headers to send for every request. See `params` documentation below for similar formatting.
+
 #### `responses`
 Default responses that will be associated with every file route. Useful for documenting error responses. Should be an array of
 response objects. These will only be applied to routes defined via route files. See the `responses` documentation below.
@@ -218,6 +228,9 @@ export default {
 }
 ```
 
+#### `headers`
+Headers to send with this request. Same format as `params` and `query`.
+
 #### `payload`
 `POST`, `PUT`, and `PATCH` methods allow for example payloads. These payloads will populate the payload input in the api explorer.
 ```js
@@ -352,8 +365,11 @@ These responses will be displayed in the api explorer. Because of that, they do
 express `req` or `res` objects. Zero arguments are passed to functional responses. If you need to add a delay or dynamically
 generate a response based on the request, use `response`.
 
+#### `globalHeaders`
+Boolean to determine whether to merge the globally defined `headers` to this route. Defaults `true`.
+
 #### `globalResponses`
-Boolean to determine whether to concat the globally defined responses to this route. Defaults `true`.
+Boolean to determine whether to concat the globally defined `responses` to this route. Defaults `true`.
 
 ### Response objects
 Static responses must either be an object or a function that returns an object. Static response objects have the following fields:

src/api-route-provider.js

@@ -69,7 +69,8 @@ export default function (app, options = {}) {
           filename: routeFile.filename,
           lastModified: routeFile.lastModified,
           payload: routeFile.payload,
-          routeFile: Object.keys(routeFile).length > 0
+          routeFile: Object.keys(routeFile).length > 0,
+          headers: getRouteHeaders(options, routeFile)
         }
       })
 
@@ -297,6 +298,15 @@ function getRouteResponses (options, route) {
     .map(r => callIfFunc(r))
 }
 
+function getRouteHeaders (options, route) {
+  const routeHeaders = typeof route.headers === 'object' ? route.headers : {}
+  const globalHeaders = typeof options.headers === 'object' ? options.headers : {}
+  if (globalHeaders === false) {
+    return routeHeaders
+  }
+  return Object.assign({}, globalHeaders, routeHeaders)
+}
+
 function callIfFunc (subject) {
   return typeof subject === 'function' ? subject() : subject
 }

test-api/routes/get-people.js

@@ -13,6 +13,13 @@ module.exports = {
     }
   },
   methods: ['post', 'put', 'get'],
+  headers: {
+    authorization: {
+      help: 'auth help text',
+      value: 'foobar'
+    },
+    token: 'a-token-here'
+  },
   title: 'Get all people',
   payload: {
     data: {

test-api/server.js

@@ -28,6 +28,9 @@ document(app, {
   // title: 'Example API Docs',
   description: String(fs.readFileSync(path.resolve(__dirname, '..', 'readme.md'))),
   hidePath: path.resolve(__dirname, '..'),
+  headers: {
+    authorization: 'bar'
+  },
   responses: [
     {
       title: 'Error',