From 477816182e331917e5184c726b05ab064866db9e Mon Sep 17 00:00:00 2001
From: Steve Kaliski <sjkaliski@gmail.com>
Date: Mon, 18 Feb 2019 10:33:08 -0500
Subject: [PATCH] support json-api content type

---
 .../__tests__/lib/content-type-is-json.test.js | 18 ++++++++++++++++++
 .../__tests__/lib/parse-response.test.js       |  7 ++++++-
 packages/api-explorer/src/Example.jsx          |  3 ++-
 packages/api-explorer/src/ResponseBody.jsx     |  4 ++--
 .../src/lib/content-type-is-json.js            |  6 ++++++
 .../api-explorer/src/lib/parse-response.js     |  3 ++-
 6 files changed, 36 insertions(+), 5 deletions(-)
 create mode 100644 packages/api-explorer/__tests__/lib/content-type-is-json.test.js
 create mode 100644 packages/api-explorer/src/lib/content-type-is-json.js

diff --git a/packages/api-explorer/__tests__/lib/content-type-is-json.test.js b/packages/api-explorer/__tests__/lib/content-type-is-json.test.js
new file mode 100644
index 000000000..a136d4d24
--- /dev/null
+++ b/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);
+  });
+});
diff --git a/packages/api-explorer/__tests__/lib/parse-response.test.js b/packages/api-explorer/__tests__/lib/parse-response.test.js
index 219054681..b03c05198 100644
--- a/packages/api-explorer/__tests__/lib/parse-response.test.js
+++ b/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));
 });
 
diff --git a/packages/api-explorer/src/Example.jsx b/packages/api-explorer/src/Example.jsx
index 665e05b2e..0cca02b65 100644
--- a/packages/api-explorer/src/Example.jsx
+++ b/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}`}
diff --git a/packages/api-explorer/src/ResponseBody.jsx b/packages/api-explorer/src/ResponseBody.jsx
index 04b1eb952..a2e10abd4 100644
--- a/packages/api-explorer/src/ResponseBody.jsx
+++ b/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>
diff --git a/packages/api-explorer/src/lib/content-type-is-json.js b/packages/api-explorer/src/lib/content-type-is-json.js
new file mode 100644
index 000000000..10566bae3
--- /dev/null
+++ b/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;
diff --git a/packages/api-explorer/src/lib/parse-response.js b/packages/api-explorer/src/lib/parse-response.js
index 8cd9457db..a33954a33 100644
--- a/packages/api-explorer/src/lib/parse-response.js
+++ b/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