Merge pull request #7 from advanced-rest-client/fix/APIC-348

Fix/apic 348

Author: carowright

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "@api-components/api-resource-example-document",
   "description": "A viewer for examples in a resource based on AMF model",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "license": "Apache-2.0",
   "main": "api-resource-example-document.js",
   "keywords": [

package.json

@@ -264,7 +264,7 @@ export class ApiExampleRender extends LitElement {
     return true;
   }
   /**
-   * Computes whether passed value is a valig JSON object, when component is
+   * Computes whether passed value is a valid JSON object, when component is
    * marked to parse JSON data.
    * @param {Boolean} isJson [description]
    * @param {String} value Current example value
@@ -525,10 +525,14 @@ export class ApiExampleRender extends LitElement {
   }
 
   _renderExample(example) {
+    const exampleValue = example.value;
+    const isJsonExampleValue = this._computeIsJson(this.isJson, exampleValue);
+    const renderJsonTable = this.renderTable && isJsonExampleValue;
+
     return html`
     ${this._headerTemplate(example)}
-    ${this.renderTable ? html`<json-table .json="${example.value}"></json-table>`: ''}
-    <div class="code-wrapper ${example.isScalar ? 'scalar': ''}" part="code-wrapper, example-code-wrapper" ?hidden="${this.renderTable}">
+    ${renderJsonTable ? html`<json-table .json="${exampleValue}"></json-table>`: ''}
+    <div class="code-wrapper ${example.isScalar ? 'scalar': ''}" part="code-wrapper, example-code-wrapper" ?hidden="${renderJsonTable}">
       <code id="output" class="markdown-html" part="markdown-html" language-xml=""></code>
     </div>`;
   }

src/ApiExampleRender.js

@@ -666,4 +666,35 @@ describe('<api-example-render>', () => {
       });
     });
   });
+
+  describe('_renderExample()', () => {
+    let element;
+    let nodes;
+
+    beforeEach(async () => {
+      element = await basicFixture();
+    });
+
+    it('Sets json table example', async () => {
+      element.isJson = true;
+      element.renderTable = true;
+      element.example = {
+        value: '{"a":"b"}'
+      };
+      await nextFrame();
+      nodes = element.shadowRoot.querySelector('json-table');
+      assert.isNotNull(nodes);
+    });
+
+    it('Sets code example', async () => {
+      element.isJson = true;
+      element.renderTable = true;
+      element.example = {
+        value: 'a'
+      };
+      await nextFrame();
+      nodes = element.shadowRoot.querySelector('.code-wrapper');
+      assert.isNotNull(nodes);
+    });
+  });
 });