Add some more tests and reduce duplication a little bit

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

@@ -67,14 +67,13 @@ describe('code examples', () => {
         },
       ],
     };
-    const languages = ['node', 'curl'];
     const codeSample = shallow(
       <CodeSample
         {...docProps}
         oas={
           new Oas({
             [extensions.SAMPLES_ENABLED]: true,
-            [extensions.SAMPLES_LANGUAGES]: languages,
+            [extensions.SAMPLES_LANGUAGES]: ['node', 'curl'],
             servers: [{ url: 'http://example.com' }],
           })
         }
@@ -84,6 +83,66 @@ describe('code examples', () => {
     expect(codeSample.find('.code-sample-body').length).toBe(1);
     expect(codeSample.find('pre.tomorrow-night.tabber-body').length).toBe(1);
   });
+
+  test('should not error if no code given', () => {
+    const docProps = {
+      setLanguage: () => {},
+      operation: new Operation({}, '/pet/{id}', 'get'),
+      formData: {},
+      language: 'node',
+      customCodeSamples: [
+        {
+          language: 'javascript',
+        },
+      ],
+    };
+    expect(() => shallow(
+      <CodeSample
+        {...docProps}
+        oas={
+          new Oas({
+            [extensions.SAMPLES_ENABLED]: true,
+            [extensions.SAMPLES_LANGUAGES]: ['node', 'curl'],
+            servers: [{ url: 'http://example.com' }],
+          })
+        }
+      />,
+    )).not.toThrow(/Cannot read property 'split' of undefined/);
+  });
+
+  test('should not render sample if language is missing', () => {
+    const docProps = {
+      setLanguage: () => {},
+      operation: new Operation({}, '/pet/{id}', 'get'),
+      formData: {},
+      language: 'node',
+      customCodeSamples: [
+        {
+          code: 'console.log(1);',
+        },
+        {
+          language: 'curl',
+          code: 'curl example.com',
+        },
+      ],
+    };
+
+    const codeSample = shallow(
+      <CodeSample
+        {...docProps}
+        oas={
+          new Oas({
+            [extensions.SAMPLES_ENABLED]: true,
+            [extensions.SAMPLES_LANGUAGES]: ['node', 'curl'],
+            servers: [{ url: 'http://example.com' }],
+          })
+        }
+      />,
+    );
+
+    expect(codeSample.find('.code-sample-tabs a').length).toBe(1);
+    expect(codeSample.find('.code-sample-body pre').length).toBe(1);
+  });
 });
 
 describe('code examples', () => {

packages/api-explorer/src/CodeSample.jsx

@@ -24,20 +24,20 @@ class CodeSample extends React.Component {
   render() {
     const { oas, setLanguage, operation, formData, language, customCodeSamples } = this.props;
 
+    const codeSamplesWithLanguages = customCodeSamples.filter(example => example.language);
+
     return (
       <div className="code-sample tabber-parent">
         {(() => {
           if (!oas[extensions.SAMPLES_ENABLED]) {
             return <div className="hub-no-code">No code samples available</div>;
           }
 
-          const snippet = generateCodeSnippet(oas, operation, formData, language);
-
           if (customCodeSamples.length) {
             return (
               <div>
                 <ul className="code-sample-tabs">
-                  {customCodeSamples.map((example, index) => (
+                  {codeSamplesWithLanguages.map((example, index) => (
                     <li key={example.language}>
                       {
                         // eslint-disable-next-line jsx-a11y/href-no-hash
@@ -57,15 +57,15 @@ class CodeSample extends React.Component {
                   ))}
                 </ul>
                 <div className="code-sample-body">
-                  {customCodeSamples.map((example, index) => {
+                  {codeSamplesWithLanguages.map((example, index) => {
                     return (
                       <pre
                         className="tomorrow-night tabber-body"
                         style={{ display: index === this.state.customCodeSampleTab ? 'block' : '' }}
                         key={index} // eslint-disable-line react/no-array-index-key
                         // eslint-disable-next-line react/no-danger
                         dangerouslySetInnerHTML={{
-                          __html: syntaxHighlighter(example.code, example.language, true),
+                          __html: syntaxHighlighter(example.code || '', example.language, true),
                         }}
                       />
                     );
@@ -74,6 +74,9 @@ class CodeSample extends React.Component {
               </div>
             );
           }
+
+          const snippet = generateCodeSnippet(oas, operation, formData, language);
+
           return (
             <div>
               <ul className="code-sample-tabs">
@@ -117,7 +120,10 @@ CodeSample.propTypes = {
   setLanguage: PropTypes.func.isRequired,
   operation: PropTypes.instanceOf(Operation).isRequired,
   formData: PropTypes.shape({}).isRequired,
-  customCodeSamples: PropTypes.shape([]),
+  customCodeSamples: PropTypes.arrayOf(PropTypes.shape({
+    language: PropTypes.string.isRequired,
+    code: PropTypes.string.isRequired,
+  })),
   language: PropTypes.string.isRequired,
 };
 

packages/api-explorer/src/Doc.jsx

@@ -173,25 +173,21 @@ class Doc extends React.Component {
   }
 
   renderCodeSample() {
-    if (this.props.doc.api.examples) {
-      return (
-        <CodeSample
-          oas={this.oas}
-          setLanguage={this.props.setLanguage}
-          operation={this.getOperation()}
-          formData={this.state.formData}
-          language={this.props.language}
-          customCodeSamples={this.props.doc.api.examples.codes}
-        />
-      );
+    let examples;
+    try {
+      examples = this.props.doc.api.examples.codes
+    } catch(e) {
+      examples = [];
     }
+
     return (
       <CodeSample
         oas={this.oas}
         setLanguage={this.props.setLanguage}
         operation={this.getOperation()}
         formData={this.state.formData}
         language={this.props.language}
+        customCodeSamples={examples}
       />
     );
   }
@@ -319,7 +315,10 @@ Doc.propTypes = {
     api: PropTypes.shape({
       method: PropTypes.string.isRequired,
       examples: PropTypes.shape({
-        codes: PropTypes.arrayOf(PropTypes.shape({})),
+        codes: PropTypes.arrayOf(PropTypes.shape({
+          language: PropTypes.string.isRequired,
+          code: PropTypes.string.isRequired,
+        })),
       }),
     }),
     swagger: PropTypes.shape({