Fix #105 Example test is failing and so is js-inspect due to the way …

…Code Sample is rendered
readmeio · Mar 9, 2018 · 76211d7 · 76211d7
1 parent 310f039
commit 76211d7
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 2 deletions.
diff --git a/packages/api-explorer/__tests__/CodeSample.test.jsx b/packages/api-explorer/__tests__/CodeSample.test.jsx
@@ -53,6 +53,39 @@ describe('tabs', () => {
   });
 });
 
+describe('code examples', () => {
+  test('should display custom examples over pre-filled examples', () => {
+    const docProps = {
+      setLanguage: () => {},
+      operation: new Operation({}, '/pet/{id}', 'get'),
+      formData: {},
+      language: 'node',
+      customCodeSamples: [
+        {
+          language: 'javascript',
+          code: 'console.log(1);',
+        },
+      ],
+    };
+    const languages = ['node', 'curl'];
+    const codeSample = shallow(
+      <CodeSample
+        {...docProps}
+        oas={
+          new Oas({
+            [extensions.SAMPLES_ENABLED]: true,
+            [extensions.SAMPLES_LANGUAGES]: languages,
+            servers: [{ url: 'http://example.com' }],
+          })
+        }
+      />,
+    );
+
+    expect(codeSample.find('.code-sample-body').length).toBe(1);
+    expect(codeSample.find('pre.tomorrow-night.tabber-body').length).toBe(1);
+  });
+});
+
 describe('code examples', () => {
   test('should display examples if SAMPLES_ENABLED is true', () => {
     const languages = ['node', 'curl'];

diff --git a/packages/api-explorer/src/CodeSample.jsx b/packages/api-explorer/src/CodeSample.jsx
@@ -37,7 +37,7 @@ class CodeSample extends React.Component {
             return (
               <div>
                 <ul className="code-sample-tabs">
-                  {customCodeSamples.map(example => (
+                  {customCodeSamples.map((example, index) => (
                     <li key={example.language}>
                       {
                         // eslint-disable-next-line jsx-a11y/href-no-hash
@@ -47,6 +47,7 @@ class CodeSample extends React.Component {
                           onClick={e => {
                             e.preventDefault();
                             setLanguage(example.language);
+                            this.setCustomCodeSampleTab(index);
                           }}
                         >
                           {generateCodeSnippet.getLangName(example.language)}

diff --git a/packages/api-explorer/src/Doc.jsx b/packages/api-explorer/src/Doc.jsx
@@ -173,14 +173,25 @@ 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}
+        />
+      );
+    }
     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}
       />
     );
   }