support json-api content type

packages/api-explorer/__tests__/lib/content-type-is-json.test.js

@@ -0,0 +1,18 @@
+const contentTypeIsJson = require('../../src/lib/content-type-is-json');
+
+describe('contentTypeIsJson', () => {
+  it('should return true if application/json', () => {
+    const contentType = 'application/json';
+    expect(contentTypeIsJson(contentType)).toBe(true);
+  });
+
+  it('should return true if application/vnd.api+json', () => {
+    const contentType = 'application/vnd.api+json';
+    expect(contentTypeIsJson(contentType)).toBe(true);
+  });
+
+  it('should return false otherwise', () => {
+    const contentType = 'text/html';
+    expect(contentTypeIsJson(contentType)).toBe(false);
+  });
+});

packages/api-explorer/__tests__/lib/parse-response.test.js

@@ -169,7 +169,12 @@ test('isBinary should be true if there is a content-disposition response header'
   );
 });
 
-test('should parse json response', async () => {
+test('should parse application/json response as json', async () => {
+  expect((await parseResponse(har, response)).responseBody).toEqual(JSON.parse(responseBody));
+});
+
+test('should parse application/vnd.api+json as json', async () => {
+  response.headers['Content-Type'] = 'application/vnd.api+json';
   expect((await parseResponse(har, response)).responseBody).toEqual(JSON.parse(responseBody));
 });
 

packages/api-explorer/src/Example.jsx

@@ -2,6 +2,7 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const ReactJson = require('react-json-view').default;
 const showCodeResults = require('./lib/show-code-results');
+const contentTypeIsJson = require('./lib/content-type-is-json');
 
 // const { replaceVars } = require('./lib/replace-vars');
 const syntaxHighlighter = require('@readme/syntax-highlighter');
@@ -25,7 +26,7 @@ function Example({ operation, result, oas, selected, setExampleTab, exampleRespo
           <ExampleTabs examples={examples} selected={selected} setExampleTab={setExampleTab} />
           <div className="code-sample-body">
             {examples.map((example, index) => {
-              const isJson = example.language && example.language === 'application/json';
+              const isJson = example.language && contentTypeIsJson(example.language);
               return (
                 <pre
                   className={`tomorrow-night tabber-body tabber-body-${index}`}

packages/api-explorer/src/ResponseBody.jsx

@@ -2,13 +2,13 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const syntaxHighlighter = require('@readme/syntax-highlighter');
 const ReactJson = require('react-json-view').default;
-
+const contentTypeIsJson = require('./lib/content-type-is-json');
 const oauthHref = require('./lib/oauth-href');
 
 function Authorized({ result }) {
   const isJson =
     result.type &&
-    result.type.includes('application/json') &&
+    contentTypeIsJson(result.type) &&
     typeof result.responseBody === 'object';
   return (
     <div>

packages/api-explorer/src/lib/content-type-is-json.js

@@ -0,0 +1,6 @@
+function contentTypeIsJson(contentType) {
+  const jsonContentTypes = ['application/json', 'application/vnd.api+json'];
+  return jsonContentTypes.some(ct => contentType.includes(ct));
+}
+
+module.exports = contentTypeIsJson;

packages/api-explorer/src/lib/parse-response.js

@@ -1,4 +1,5 @@
 const { stringify } = require('querystring');
+const contentTypeIsJson = require('./content-type-is-json');
 
 function getQuerystring(har) {
   // Converting [{ name: a, value: '123456' }] => { a: '123456' } so we can use querystring.stringify
@@ -11,7 +12,7 @@ function getQuerystring(har) {
 
 async function getResponseBody(response) {
   const contentType = response.headers.get('Content-Type');
-  const isJson = contentType && contentType.includes('application/json');
+  const isJson = contentType && contentTypeIsJson(contentType);
 
   // We have to clone it before reading, just incase
   // we cannot parse it as JSON later, then we can