fix: adding in support for handling legacy manual api multi-examples (#…

…479)
readmeio · Feb 17, 2020 · 3701f6c · 3701f6c
1 parent ae1652e
commit 3701f6c
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 25 deletions.
diff --git a/example/swagger-files/examples.json b/example/swagger-files/examples.json
@@ -38,8 +38,7 @@
                 "examples": {
                   "cat" : {
                     "summary": "An example of a cat",
-                    "value":
-                    {
+                    "value": {
                       "name": "Fluffy",
                       "petType": "Cat",
                       "color": "White",

diff --git a/packages/api-explorer/__tests__/ResponseExample.test.jsx b/packages/api-explorer/__tests__/ResponseExample.test.jsx
@@ -103,7 +103,7 @@ test('should show select for multiple examples on a single media type', () => {
   const html = example.html();
 
   expect(html).not.toContain('>Response type');
-  expect(html).toContain('>Set an example');
+  expect(html).toContain('>Choose an example');
 });
 
 test('should not show a select if a media type has a single example', () => {
@@ -119,6 +119,35 @@ test('should not show a select if a media type has a single example', () => {
   expect(example.html()).not.toContain('<select');
 });
 
+test('should correctly handle non-json legacy manual api examples', () => {
+  const exampleResponses = [
+    {
+      status: 200,
+      language: 'xml',
+      code: '<?xml version="1.0" encoding="UTF-8"?><message>OK</message>',
+      name: '',
+    },
+    {
+      name: 'Invalid Credentials',
+      status: 200,
+      language: 'xml',
+      code: '<?xml version="1.0" encoding="UTF-8"?><message>Invalid Credentials</message>',
+    },
+    {
+      status: 404,
+      language: 'xml',
+      code: '<?xml version="1.0" encoding="UTF-8"?><detail>404 Erroror</detail>',
+    },
+  ];
+
+  const example = shallow(<ResponseExample {...props} exampleResponses={exampleResponses} />);
+
+  const html = example.html();
+
+  expect(html).not.toContain('>Response type');
+  expect(html).toContain('>Choose an example');
+});
+
 describe('exampleTab', () => {
   it('exampleTab should change state of exampleTab', () => {
     const doc = shallow(<ResponseExample {...props} />);

diff --git a/packages/api-explorer/src/ResponseExample.jsx b/packages/api-explorer/src/ResponseExample.jsx
@@ -121,7 +121,7 @@ class ResponseExample extends React.Component {
     );
   }
 
-  showExamples(examples, mediaTypes, ex, responseMediaType) {
+  showExamples(language, examples, mediaTypes, ex, responseMediaType) {
     const { responseExample } = this.state;
     let responseExampleCopy = responseExample;
     if (!responseExampleCopy && examples[0]) responseExampleCopy = examples[0].label;
@@ -132,7 +132,7 @@ class ResponseExample extends React.Component {
           {mediaTypes.length > 1 && this.showMediaTypes(ex, responseMediaType)}
 
           <span className="tabber-select-row">
-            <h3>Set an example</h3>
+            <h3>Choose an example</h3>
             <span className="select-wrapper">
               <select
                 className="response-select"
@@ -149,8 +149,24 @@ class ResponseExample extends React.Component {
           </span>
         </div>
 
-        {examples.map(example => {
-          return getReactJson(example, responseExampleCopy);
+        {examples.map((example, index) => {
+          try {
+            return (
+              <div key={index} className="example example_json">
+                {getReactJson(example, responseExampleCopy)}
+              </div>
+            );
+          } catch (e) {
+            return (
+              <div key={index} className="example">
+                <div style={{ display: isDisplayable(example, responseExampleCopy) ? 'block' : 'none' }}>
+                  {syntaxHighlighter(example.code, language, {
+                    dark: true,
+                  })}
+                </div>
+              </div>
+            );
+          }
         })}
       </div>
     );
@@ -175,6 +191,24 @@ class ResponseExample extends React.Component {
       return e.languages.find(ee => (ee.code && ee.code !== '{}') || 'multipleExamples' in ee);
     });
 
+    const getHighlightedExample = hx => {
+      return (
+        <div className="example">
+          {syntaxHighlighter(hx.code, hx.language, {
+            dark: true,
+          })}
+        </div>
+      );
+    };
+
+    const transformExampleIntoReactJson = rx => {
+      try {
+        return <div className="example example_json">{getReactJson(rx)}</div>;
+      } catch (e) {
+        return getHighlightedExample(rx);
+      }
+    };
+
     return (
       <div className="hub-reference-results-examples code-sample">
         {examples && examples.length > 0 && hasExamples && (
@@ -194,20 +228,6 @@ class ResponseExample extends React.Component {
 
                 const isJson = example.language && contentTypeIsJson(example.language);
 
-                const getHighlightedExample = hx => {
-                  return syntaxHighlighter(hx.code, hx.language, {
-                    dark: true,
-                  });
-                };
-
-                const transformExampleIntoReactJson = rx => {
-                  try {
-                    return getReactJson(rx);
-                  } catch (e) {
-                    return getHighlightedExample(rx);
-                  }
-                };
-
                 return (
                   <div key={index}>
                     <pre
@@ -217,15 +237,19 @@ class ResponseExample extends React.Component {
                       {!example.multipleExamples && this.showMediaTypes(ex, responseMediaType, true)}
 
                       {example.multipleExamples &&
-                        this.showExamples(example.multipleExamples, mediaTypes, ex, responseMediaType)}
+                        this.showExamples(
+                          example.language,
+                          example.multipleExamples,
+                          mediaTypes,
+                          ex,
+                          responseMediaType
+                        )}
 
                       {isJson && !example.multipleExamples ? (
                         <div className="example example_json">{transformExampleIntoReactJson(example)}</div>
                       ) : (
                         // json + multiple examples is already handled in `showExamples`.
-                        <div className="example">
-                          {isJson && example.multipleExamples ? null : getHighlightedExample(example)}
-                        </div>
+                        <>{isJson && example.multipleExamples ? null : getHighlightedExample(example)}</>
                       )}
                     </pre>
                   </div>