fix(oas31): fix re-rendering of the Webhooks component (#9938)

Refs #9937

Author: glowcloud

src/core/plugins/oas31/components/webhooks.jsx

@@ -3,6 +3,7 @@
  */
 import React from "react"
 import PropTypes from "prop-types"
+import { List } from "immutable"
 
 const Webhooks = ({ specSelectors, getComponent }) => {
   const operationDTOs = specSelectors.selectWebhooksOperations()
@@ -25,7 +26,7 @@ const Webhooks = ({ specSelectors, getComponent }) => {
               tag="webhooks"
               method={operationDTO.method}
               path={pathItemName}
-              specPath={operationDTO.specPath}
+              specPath={List(operationDTO.specPath)}
               allowTryItOut={false}
             />
           ))}

src/core/plugins/oas31/spec-extensions/selectors.js

@@ -42,7 +42,7 @@ export const selectWebhooksOperations = createSelector(
             operation: Map({ operation }),
             method,
             path: pathItemName,
-            specPath: List(["webhooks", pathItemName, method]),
+            specPath: ["webhooks", pathItemName, method],
           }))
 
         return allOperations.concat(pathItemOperations)

test/e2e-cypress/e2e/features/plugins/oas31/oas31-webhook-examples.cy.js

@@ -0,0 +1,35 @@
+/**
+ * @prettier
+ */
+
+describe("OpenAPI 3.1.0 webhook", () => {
+  it("should render the correct example for the request body", () => {
+    cy.visit("/?url=/documents/features/oas31-webhook-examples.yaml")
+      .get("#operations-webhooks-test-webhook")
+      .click()
+      .get(".body-param__example")
+      .should("contain", '"userId": "userId example from examples"')
+      .and("contain", '"orderId": "orderId example from examples"')
+      .get(".examples-select-element")
+      .eq(0)
+      .select("TestExample2")
+      .get(".body-param__example")
+      .should("contain", '"userId": "second userId example from examples"')
+      .and("contain", '"orderId": "second orderId example from examples"')
+  })
+
+  it("should render the correct example for the response", () => {
+    cy.visit("/?url=/documents/features/oas31-webhook-examples.yaml")
+      .get("#operations-webhooks-test-webhook")
+      .click()
+      .get(".example.microlight")
+      .should("contain", '"userId": "userId example from examples"')
+      .and("contain", '"orderId": "orderId example from examples"')
+      .get(".examples-select-element")
+      .eq(1)
+      .select("TestExample2")
+      .get(".example.microlight")
+      .should("contain", '"userId": "second userId example from examples"')
+      .and("contain", '"orderId": "second orderId example from examples"')
+  })
+})

test/e2e-cypress/static/documents/features/oas31-webhook-examples.yaml

@@ -0,0 +1,59 @@
+openapi: 3.1.0
+info:
+  version: 1.0.0
+  title: Examples
+  description: ''
+webhooks:
+  test-webhook:
+    post:
+      operationId: test-webhook
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/TestSchema'
+            examples:
+              TestExample1:
+                $ref: '#/components/examples/TestExample1'
+              TestExample2:
+                $ref: '#/components/examples/TestExample2'
+      responses:
+        '200':
+          description: OK
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/TestSchema'
+              examples:
+                TestExample1:
+                  $ref: '#/components/examples/TestExample1'
+                TestExample2:
+                  $ref: '#/components/examples/TestExample2'
+components:
+  schemas:
+    TestSchema:
+      type: object
+      properties:
+        userId:
+          type: string
+          examples: ['userId example from schema']
+        orders:
+          type: array
+          items:
+            type: object
+            properties:
+              orderId:
+                type: string
+                examples: ['orderId example from schema']
+  examples:
+    TestExample1:
+      value:
+        userId: 'userId example from examples'
+        orders:
+          - orderId: 'orderId example from examples'
+    TestExample2:
+      value:
+        userId: 'second userId example from examples'
+        orders:
+          - orderId: 'second orderId example from examples'