Fix message schema rendering for Subscribe operations (#35)

* chore(model): add APIC-582 API

* chore(deps): regenerate package-lock.json

* test(api-url): fix test after AMF bug fix

* fix: message schema not being shown for subscribe operation

For AsyncAPI, only return or expects is defined
Always set the message object to the expects node
Do not render response section for AsyncAPI

* test: ensure message schema is rendered as body document

* 5.1.10

* chore: remove unused _getMessagesTemplate method

Author: twoplustwoone

demo/APIC-582/APIC-582.yaml

@@ -0,0 +1,23 @@
+asyncapi: 2.0.0
+info:
+  title: Account service
+  version: 1.0.0
+  description: This service is in charge of processing user signups
+channels: 
+  user/signedup:
+    subscribe:
+      message:
+        $ref: '#/components/messages/UserSignedUp'
+components:
+  messages:
+    UserSignedUp:
+      payload:
+        type: object
+        properties:
+          displayName:
+            type: string
+            description: Name of the user
+          email:
+            type: string
+            format: email
+            description: Email of user

demo/apis.json

@@ -12,5 +12,6 @@
   "multi-server/multi-server.yaml": { "type": "OAS 3.0", "mime": "application/yaml" },
   "async-api/async-api.yaml": "ASYNC 2.0",
   "APIC-553/APIC-553.raml": "RAML 1.0",
-  "APIC-560/APIC-560.yaml": "ASYNC 2.0"
+  "APIC-560/APIC-560.yaml": "ASYNC 2.0",
+  "APIC-582/APIC-582.yaml": "ASYNC 2.0"
 }

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "@api-components/api-method-documentation",
   "description": "A HTTP method documentation build from AMF model",
-  "version": "5.1.9",
+  "version": "5.1.10",
   "license": "Apache-2.0",
   "main": "index.js",
   "module": "index.js",

package.json

@@ -321,6 +321,10 @@ export class ApiMethodDocumentation extends AmfHelperMixin(LitElement) {
     return this.endpointUri + this._computeMethodParametersUri(this.method);
   }
 
+  get message() {
+    return this._getMessageForMethod(this.methodName);
+  }
+
   constructor() {
     super();
     this.callbacksOpened = false;
@@ -376,6 +380,9 @@ export class ApiMethodDocumentation extends AmfHelperMixin(LitElement) {
     this.hasCustomProperties = this._computeHasCustomProperties(method);
     this.expects = this._computeExpects(method);
     this.returns = this._computeReturns(method);
+    if (this._isAsyncAPI(this.amf)) {
+      this._overwriteExpects();
+    }
     this.security = this._computeSecurity(method) || this._computeSecurity(this.server);
     const extendsTypes = this._computeExtends(method);
     this.extendsTypes = extendsTypes;
@@ -385,6 +392,14 @@ export class ApiMethodDocumentation extends AmfHelperMixin(LitElement) {
     this.callbacks = this._computeCallbacks(method);
   }
 
+  _overwriteExpects() {
+    let expects = this.message;
+    if (Array.isArray(expects)) {
+      [expects] = expects;
+    }
+    this.expects = expects;
+  }
+
   _processEndpointChange() {
     this.__endpointProcessingDebouncer = false;
     this._processServerInfo();
@@ -733,14 +748,7 @@ export class ApiMethodDocumentation extends AmfHelperMixin(LitElement) {
     ${this._getTraitsTemplate()}
     ${hasCustomProperties ? html`<api-annotation-document .shape="${method}"></api-annotation-document>` : ''}
     ${this._getDescriptionTemplate()}
-    <section class="request-documentation">
-      ${this._getCodeSnippetsTemplate()}
-      ${this._getSecurityTemplate()}
-      ${this._getParametersTemplate()}
-      ${this._getHeadersTemplate()}
-      ${this._getBodyTemplate()}
-      ${this._callbacksTemplate()}
-    </section>
+    ${this._getRequestTemplate()}
     ${this._getReturnsTemplate()}
     ${this._getNavigationTemplate()}`;
   }
@@ -955,9 +963,20 @@ export class ApiMethodDocumentation extends AmfHelperMixin(LitElement) {
       .body="${payload}"></api-body-document>`;
   }
 
+  _getRequestTemplate() {
+    return html`<section class="request-documentation">
+      ${this._getCodeSnippetsTemplate()}
+      ${this._getSecurityTemplate()}
+      ${this._getParametersTemplate()}
+      ${this._getHeadersTemplate()}
+      ${this._getBodyTemplate()}
+      ${this._callbacksTemplate()}
+    </section>`
+  }
+
   _getReturnsTemplate() {
     const { returns } = this;
-    if (!returns || !returns.length) {
+    if (!returns || !returns.length || this._isAsyncAPI(this.amf)) {
       return '';
     }
     const {
@@ -1135,6 +1154,27 @@ export class ApiMethodDocumentation extends AmfHelperMixin(LitElement) {
     return undefined;
   }
 
+  /**
+   * Returns message value depending on operation node method
+   * Subscribe -> returns
+   * Publish -> expects
+   * `undefined` otherwise
+   * @param {String} method Operation method
+   */
+  _getMessageForMethod(method) {
+    if (!method) {
+      return undefined;
+    }
+    switch(method.toLowerCase()) {
+      case 'subscribe':
+        return this.returns;
+      case 'publish':
+        return this.expects;
+      default:
+        return undefined;
+    }
+  }
+
   /**
    * Dispatched when the user requested the "Try it" view.
    * @event tryit-requested

src/ApiMethodDocumentation.js

@@ -282,6 +282,7 @@ describe('<api-method-documentation>', () => {
       const callbacksApi = 'oas-callbacks';
       const asyncApi = 'async-api';
       const apic553 = 'APIC-553';
+      const apic582 = 'APIC-582';
 
       describe('Basic AMF computations', () => {
         let amf;
@@ -888,7 +889,27 @@ describe('<api-method-documentation>', () => {
             assert.equal(newLocal.url, 'http://domain.org/cmt-with-qp-example?orx=foo');
           });
         });
-      })
+      });
+
+      describe('APIC-582', () => {
+        let amf;
+        let element;
+
+        before(async () => {
+          amf = await AmfLoader.load(apic582, compact);
+        });
+
+        beforeEach(async () => {
+          const [endpoint, method] = AmfLoader.lookupEndpointOperation(amf, 'user/signedup', 'subscribe');
+          element = await modelFixture(amf, endpoint, method);
+          await nextFrame();
+        });
+
+        it('should render channel message in request documentation section', async () => {
+          await waitUntil(() => !!element.shadowRoot.querySelector('.request-documentation'), 'request documentation section not rendered');
+          await waitUntil(() => !!element.shadowRoot.querySelector('api-body-document'), 'api-body-document not rendered');
+        });
+      });
     });
   });
 });

test/api-method-documentation.test.js

@@ -2,7 +2,7 @@ import { fixture, assert, nextFrame, html, waitUntil } from '@open-wc/testing';
 import { AmfLoader } from './amf-loader.js';
 import '../api-url.js';
 
-describe('<api-url>', function () {
+describe('<api-url>', () => {
   async function basicFixture() {
 	return fixture(`<api-url></api-url>`);
   }
@@ -50,7 +50,7 @@ describe('<api-url>', function () {
 		  element.amf = amf;
 		  server = AmfLoader.getEncodes(amf)[element._getAmfKey(element.ns.aml.vocabularies.apiContract.server)];
 		  if (Array.isArray(server)) {
-			server = server[0];
+			[server] = server;
 		  }
 		  element = await operationFixture({ amf, endpoint, operation, server });
 		  // model change debouncer
@@ -100,7 +100,7 @@ describe('<api-url>', function () {
 		  element.amf = amf;
 		  server = AmfLoader.getEncodes(amf)[element._getAmfKey(element.ns.aml.vocabularies.apiContract.server)];
 		  if (Array.isArray(server)) {
-			server = server[0];
+			[server] = server;
 		  }
 		  element = await operationFixture({ amf, endpoint, operation, server });
 		  // model change debouncer
@@ -131,12 +131,12 @@ describe('<api-url>', function () {
 
 			beforeEach(async () => {
 				const endpointName = 'smartylighting/streetlights/1/0/event/{streetlightId}/lighting/measured'
-				const [endpoint, operation] = AmfLoader.lookupEndpointOperation(amf, endpointName, 'kafka');
+				const [endpoint, operation] = AmfLoader.lookupEndpointOperation(amf, endpointName, 'subscribe');
 				element = await basicFixture();
 				element.amf = amf;
 				server = AmfLoader.getEncodes(amf)[element._getAmfKey(element.ns.aml.vocabularies.apiContract.server)];
 				if (Array.isArray(server)) {
-					server = server[0];
+					[server] = server;
 				}
 				element = await operationFixture({ amf, endpoint, operation, server });
 				// model change debouncer
@@ -150,9 +150,9 @@ describe('<api-url>', function () {
 			});
 
 			it('should render server', async () => {
-				const server = 'Servermqtt://api.streetlights.smartylighting.com:{port}'
+				const expectedServer = 'Servermqtt://api.streetlights.smartylighting.com:{port}'
 				await waitUntil(() => element.shadowRoot.querySelector('.url-server-value'));
-				assert.equal(element.shadowRoot.querySelector('.url-server-value').textContent, server);
+				assert.equal(element.shadowRoot.querySelector('.url-server-value').textContent, expectedServer);
 			});
 
 			it('should only render url value when no operation selected', async () => {