@W-23748890 feat(query): add QUERY method color badge (OAS 3.2)

demo/apis.json

@@ -20,5 +20,6 @@
   "streetlights/streetlights.yaml": "ASYNC 2.0",
   "W-11383870/W-11383870.json": { "type": "OAS 3.0", "mime": "application/json" },
   "agents-api/agents-api.yaml": { "type": "OAS 3.0", "mime": "application/yaml" },
-  "oas31-webhooks/oas31-webhooks.yaml": { "type": "OAS 3.1", "mime": "application/yaml" }
+  "oas31-webhooks/oas31-webhooks.yaml": { "type": "OAS 3.1", "mime": "application/yaml" },
+  "oas32-query/oas32-query.yaml": { "type": "OAS 3.2", "mime": "application/yaml" }
 }

demo/index.js

@@ -170,6 +170,7 @@ class ComponentDemo extends ApiDemoPage {
       ['multiple-messages', 'multiple-messages'],
       ['streetlights', 'streetlights'],
       ['oas31-webhooks', 'OAS 3.1 webhooks'],
+      ['oas32-query', 'OAS 3.2 (QUERY)'],
     ].map(([file, label]) => html`
       <anypoint-item data-src="${file}-compact.json">${label} - compact model</anypoint-item>
       <anypoint-item data-src="${file}.json">${label}</anypoint-item>

demo/oas32-query/oas32-query.yaml

@@ -0,0 +1,55 @@
+openapi: 3.2.0
+info:
+  title: OAS 3.2 QUERY method
+  version: 1.0.0
+paths:
+  /pets:
+    # `query` is a Path Item Object fixed field (sibling to get/post/etc.),
+    # added in OAS 3.2.0 for the QUERY HTTP method (a safe/idempotent method
+    # that carries a request body). amf-client-js 5.11 parses it as a real
+    # operation, which is what the QUERY method-label test drives from.
+    query:
+      operationId: queryPets
+      summary: Search pets using a structured filter body
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              type: object
+              properties:
+                kind:
+                  type: string
+                maxAge:
+                  type: integer
+      responses:
+        "200":
+          description: Matching pets
+          content:
+            application/json:
+              schema:
+                type: array
+                items:
+                  type: object
+                  properties:
+                    id:
+                      type: integer
+                    name:
+                      type: string
+    get:
+      operationId: listPets
+      summary: List pets (contrast operation for the QUERY label test)
+      responses:
+        "200":
+          description: All pets
+          content:
+            application/json:
+              schema:
+                type: array
+                items:
+                  type: object
+                  properties:
+                    id:
+                      type: integer
+                    name:
+                      type: string

package.json

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

src/Styles.js

@@ -190,6 +190,33 @@ arc-marked {
   min-width: var(--api-method-documentation-http-method-label-min-width, inherit);
 }
 
+.method-label[data-method='query'],
+.method-label[data-method='QUERY'] {
+  background-color: var(
+    --http-method-label-query-background-color,
+    rgba(15, 157, 157, 0.12)
+  );
+  color: var(--http-method-label-query-color, #0f9d9d);
+}
+
+.method-label[data-method='copy'],
+.method-label[data-method='COPY'] {
+  background-color: var(
+    --http-method-label-copy-background-color,
+    rgba(92, 107, 192, 0.12)
+  );
+  color: var(--http-method-label-copy-color, #5c6bc0);
+}
+
+.method-label[data-method='move'],
+.method-label[data-method='MOVE'] {
+  background-color: var(
+    --http-method-label-move-background-color,
+    rgba(184, 134, 11, 0.12)
+  );
+  color: var(--http-method-label-move-color, #b8860b);
+}
+
 .bottom-nav,
 .bottom-link {
   display: flex;

test/api-url.test.js

@@ -184,4 +184,82 @@ describe('<api-url>', () => {
 		});
 	});
   });
+
+  describe('QUERY method (from a real generated OAS 3.2 model)', () => {
+	// OAS 3.2 adds the QUERY HTTP method. amf-client-js 5.11 PARSES `query:` from
+	// an OAS 3.2 pathItem and emits its method as "QUERY" (upper case), so the
+	// QUERY label is driven from a real generated model —
+	// demo/oas32-query/oas32-query.yaml — not hand-built AMF. `_computeMethod`
+	// keeps the raw upper-case value for display and the color hook is
+	// lower-cased to `data-method="query"`.
+	let amf;
+	let element;
+
+	before(async () => {
+	  amf = await AmfLoader.load('oas32-query', true);
+	});
+
+	beforeEach(async () => {
+	  const [endpoint, operation] = AmfLoader.lookupEndpointOperation(amf, '/pets', 'QUERY');
+	  element = await operationFixture({ amf, endpoint, operation });
+	  await nextFrame();
+	});
+
+	it('computes the method in upper case', () => {
+	  assert.equal(element._method, 'QUERY');
+	});
+
+	it('renders the method label with the lower-cased color hook', () => {
+	  const label = element.shadowRoot.querySelector('.method-label');
+	  assert.exists(label, 'the method label is rendered');
+	  assert.equal(label.getAttribute('data-method'), 'query', 'color hook is lower-cased');
+	});
+
+	it('displays the method name in upper case', () => {
+	  const label = element.shadowRoot.querySelector('.method-label');
+	  assert.equal(label.textContent.trim(), 'QUERY');
+	});
+  });
+
+  ['COPY', 'MOVE'].forEach((verb) => {
+	describe(`${verb} method (OAS 3.2)`, () => {
+	  // OAS 3.2 also adds the COPY and MOVE HTTP methods. Same casing contract
+	  // as QUERY: displayed upper case, color hook lower-cased. Inline expanded
+	  // operation keeps this independent of the model generator.
+	  const METHOD = 'http://a.ml/vocabularies/apiContract#method';
+	  const OPERATION_T = 'http://a.ml/vocabularies/apiContract#Operation';
+
+	  let element;
+
+	  beforeEach(async () => {
+		element = await operationFixture({
+		  operation: {
+			'@id': 'amf://id#12',
+			'@type': [OPERATION_T],
+			[METHOD]: [{ '@value': verb }],
+		  },
+		});
+		await nextFrame();
+	  });
+
+	  it('computes the method in upper case', () => {
+		assert.equal(element._method, verb);
+	  });
+
+	  it('renders the method label with the lower-cased color hook', () => {
+		const label = element.shadowRoot.querySelector('.method-label');
+		assert.exists(label, 'the method label is rendered');
+		assert.equal(
+		  label.getAttribute('data-method'),
+		  verb.toLowerCase(),
+		  'color hook is lower-cased'
+		);
+	  });
+
+	  it('displays the method name in upper case', () => {
+		const label = element.shadowRoot.querySelector('.method-label');
+		assert.equal(label.textContent.trim(), verb);
+	  });
+	});
+  });
 });