Use non-normalized operationId for layout management, if it is available (#4410)

* test(e2e): modify e2e hot server to peacefully coexist with dev server

* tests: add failing e2e test case

* fix: use originalOperationId for layout targeting, if available

package.json

@@ -36,7 +36,7 @@
     "test-e2e": "sleep 3 && nightwatch test/e2e/scenarios/ --config test/e2e/nightwatch.json",
     "e2e-initial-render": "nightwatch test/e2e/scenarios/ --config test/e2e/nightwatch.json --group initial-render",
     "mock-api": "json-server --watch test/e2e/db.json --port 3204",
-    "hot-e2e-server": "webpack-dev-server --content-base test/e2e/helpers --host 0.0.0.0 --config webpack-hot-dev-server.config.js --inline --hot --progress",
+    "hot-e2e-server": "webpack-dev-server --port 3230 --content-base test/e2e/helpers --host 0.0.0.0 --config webpack-hot-dev-server.config.js --inline --hot --progress",
     "e2e": "npm-run-all --parallel -r hot-e2e-server mock-api test-e2e"
   },
   "dependencies": {

src/core/components/operation.jsx

@@ -72,6 +72,7 @@ export default class Operation extends PureComponent {
       tag,
       showSummary,
       operationId,
+      originalOperationId,
       allowTryItOut,
       displayOperationId,
       displayRequestDuration,
@@ -140,7 +141,7 @@ export default class Operation extends PureComponent {
                 </div>
             }
 
-            { displayOperationId && operationId ? <span className="opblock-summary-operation-id">{operationId}</span> : null }
+            { displayOperationId && (originalOperationId || operationId) ? <span className="opblock-summary-operation-id">{originalOperationId || operationId}</span> : null } 
 
             {
               (!security || !security.count()) ? null :

src/core/containers/OperationContainer.jsx

@@ -58,7 +58,7 @@ export default class OperationContainer extends PureComponent {
     const { op, layoutSelectors, getConfigs } = props
     const { docExpansion, deepLinking, displayOperationId, displayRequestDuration, supportedSubmitMethods } = getConfigs()
     const showSummary = layoutSelectors.showSummary()
-    const operationId = op.getIn(["operation", "operationId"]) || op.getIn(["operation", "__originalOperationId"]) || opId(op.get("operation"), props.path, props.method) || op.get("id")
+    const operationId = op.getIn(["operation", "__originalOperationId"]) || op.getIn(["operation", "operationId"]) || opId(op.get("operation"), props.path, props.method) || op.get("id")
     const isShownKey = ["operations", props.tag, operationId]
     const isDeepLinkingEnabled = deepLinking && deepLinking !== "false"
     const allowTryItOut = supportedSubmitMethods.indexOf(props.method) >= 0 && (typeof props.allowTryItOut === "undefined" ?
@@ -204,6 +204,7 @@ export default class OperationContainer extends PureComponent {
       security,
       isAuthorized,
       operationId,
+      originalOperationId: resolvedSubtree.getIn(["operation", "__originalOperationId"]),
       showSummary,
       isShown,
       jumpToKey,

test/e2e/scenarios/bugs/4409.js

@@ -0,0 +1,29 @@
+describe("bug #4409: operationId normalization and layout tracking", function () {
+    let mainPage
+    beforeEach(function (client, done) {
+        mainPage = client
+            .url("localhost:3230")
+            .page.main()
+
+        client.waitForElementVisible(".download-url-input", 5000)
+            .pause(5000)
+            .clearValue(".download-url-input")
+            .setValue(".download-url-input", "http://localhost:3230/test-specs/bugs/4409.yaml")
+            .click("button.download-url-button")
+            .pause(1000)
+
+        done()
+    })
+    afterEach(function (client, done) {
+        done()
+    })
+    it("expands an operation that has a normalizable operationId", function (client) {
+        client.waitForElementVisible(".opblock-tag-section", 10000)
+            .assert.containsText(".opblock-summary-path span", "/myApi")
+            .click(".opblock")
+            .waitForElementVisible(".opblock-body", 5000)
+            .assert.cssClassPresent(".opblock", "is-open")
+
+        client.end()
+    })
+})

test/e2e/scenarios/informationContainer.js

@@ -4,12 +4,12 @@ describe("render informationContainer", function () {
     beforeEach(function (client, done) {
         
         mainPage = client
-        .url("localhost:3200")
+        .url("localhost:3230")
         .page.main()
         client.waitForElementVisible(".download-url-input", 5000)
         .pause(5000)
         .clearValue(".download-url-input")
-        .setValue(".download-url-input", "http://localhost:3200/test-specs/petstore.json")
+        .setValue(".download-url-input", "http://localhost:3230/test-specs/petstore.json")
         .click("button.download-url-button")
         .pause(1000)
 
@@ -29,8 +29,8 @@ describe("render informationContainer", function () {
             .assert.containsText("@title", "Swagger Petstore")
             .assert.containsText("@version", "1.0.0")
             .assert.containsText("@baseUrl", "[ Base URL: localhost:3204/ ]")
-            .assert.attributeEquals("@mainUrl", "href", "http://localhost:3200/test-specs/petstore.json")
+            .assert.attributeEquals("@mainUrl", "href", "http://localhost:3230/test-specs/petstore.json")
-            .assert.containsText("@mainUrlContent", "http://localhost:3200/test-specs/petstore.json")
+            .assert.containsText("@mainUrlContent", "http://localhost:3230/test-specs/petstore.json")
             .assert.containsText("@description", "This is a sample server Petstore server. You can find out more about Swagger at http://swagger.io or on irc.freenode.net, #swagger. For this sample, you can use the api key special-key to test the authorization filters.")
             .assert.attributeEquals("@swaggerUrl", "href", "http://swagger.io/")
             .assert.attributeEquals("@swaggerircUrl", "href", "http://swagger.io/irc/")

test/e2e/scenarios/models.js

@@ -3,12 +3,12 @@ describe("Render Model Wrapper", function () {
 
     beforeEach(function (client, done) {
         mainPage = client
-            .url("localhost:3200")
+            .url("localhost:3230")
             .page.main()
         client.waitForElementVisible(".download-url-input", 5000)
             .pause(5000)
             .clearValue(".download-url-input")
-            .setValue(".download-url-input", "http://localhost:3200/test-specs/petstore.json")
+            .setValue(".download-url-input", "http://localhost:3230/test-specs/petstore.json")
             .click("button.download-url-button")
             .pause(1000)
 

test/e2e/scenarios/oas3/callbacks.js

@@ -3,13 +3,13 @@ describe("render pet api container", function () {
   let apiWrapper
   beforeEach(function (client, done) {
     mainPage = client
-    .url("localhost:3200")
+    .url("localhost:3230")
     .page.main()
 
     client.waitForElementVisible(".download-url-input", 5000)
     .pause(5000)
     .clearValue(".download-url-input")
-    .setValue(".download-url-input", "http://localhost:3200/test-specs/callbacks.openapi.yaml")
+    .setValue(".download-url-input", "http://localhost:3230/test-specs/callbacks.openapi.yaml")
     .click("button.download-url-button")
     .pause(1000)
 

test/e2e/scenarios/oas3/pet.js

@@ -3,13 +3,13 @@ describe("render pet api container", function () {
   let apiWrapper
   beforeEach(function (client, done) {
     mainPage = client
-    .url("localhost:3200")
+    .url("localhost:3230")
     .page.main()
 
     client.waitForElementVisible(".download-url-input", 5000)
     .pause(5000)
     .clearValue(".download-url-input")
-    .setValue(".download-url-input", "http://localhost:3200/test-specs/petstore.openapi.yaml")
+    .setValue(".download-url-input", "http://localhost:3230/test-specs/petstore.openapi.yaml")
     .click("button.download-url-button")
     .pause(1000)
 

test/e2e/scenarios/on-complete.js

@@ -4,7 +4,7 @@ describe("onComplete option", function () {
   let mainPage
   beforeEach(function (client, done) {
     mainPage = client
-      .url("localhost:3200")
+      .url("localhost:3230")
       .page.main()
 
     client.waitForElementVisible(".opblock-tag-section", 5000)

test/e2e/scenarios/operations/pet.js

@@ -3,13 +3,13 @@ describe("render pet api container", function () {
     let apiWrapper
     beforeEach(function (client, done) {
         mainPage = client
-            .url("localhost:3200")
+            .url("localhost:3230")
             .page.main()
 
         client.waitForElementVisible(".download-url-input", 5000)
             .pause(5000)
             .clearValue(".download-url-input")
-            .setValue(".download-url-input", "http://localhost:3200/test-specs/petstore.json")
+            .setValue(".download-url-input", "http://localhost:3230/test-specs/petstore.json")
             .click("button.download-url-button")
             .pause(1000)
 

test/e2e/scenarios/operations/store.js

@@ -3,13 +3,13 @@ describe("render store api container", function(){
     let apiWrapper
     beforeEach( function(client, done){
         mainPage = client
-            .url("localhost:3200")
+            .url("localhost:3230")
             .page.main()
 
         client.waitForElementVisible(".download-url-input", 5000)
             .pause(3000)
             .clearValue(".download-url-input")
-            .setValue(".download-url-input", "http://localhost:3200/test-specs/petstore.json")
+            .setValue(".download-url-input", "http://localhost:3230/test-specs/petstore.json")
             .click("button.download-url-button")
             .pause(1000)
 

test/e2e/scenarios/operations/user.js

@@ -3,13 +3,13 @@ describe("render user api container", function(){
     let apiWrapper
     beforeEach( function(client, done){
         mainPage = client
-            .url("localhost:3200")
+            .url("localhost:3230")
             .page.main()
 
         client.waitForElementVisible(".download-url-input", 5000)
             .pause(5000)
             .clearValue(".download-url-input")
-            .setValue(".download-url-input", "http://localhost:3200/test-specs/petstore.json")
+            .setValue(".download-url-input", "http://localhost:3230/test-specs/petstore.json")
             .click("button.download-url-button")
             .pause(1000)
 

test/e2e/scenarios/refs.js

@@ -4,13 +4,13 @@ describe("Remote $ref rendering", function () {
 
     mainPage = client
     // expand the models so we don't have to manually do it
-    .url("localhost:3200?defaultModelsExpandDepth=5")
+    .url("localhost:3230?defaultModelsExpandDepth=5")
     .page.main()
 
     client.waitForElementVisible(".download-url-input", 5000)
     .pause(2000)
     .clearValue(".download-url-input")
-    .setValue(".download-url-input", "http://localhost:3200/test-specs/refs/api1.yaml")
+    .setValue(".download-url-input", "http://localhost:3230/test-specs/refs/api1.yaml")
     .click("button.download-url-button")
     .pause(1000)
 

test/e2e/scenarios/schemeContainer.js

@@ -4,7 +4,7 @@ describe("Render scheme", function () {
     beforeEach(function (client, done) {
 
         mainPage = client
-        .url("localhost:3200")
+        .url("localhost:3230")
         .page.main()
 
         schemeContainer = mainPage.section.schemeContainer
@@ -12,7 +12,7 @@ describe("Render scheme", function () {
         client.waitForElementVisible(".download-url-input", 5000)
         .pause(5000)
         .clearValue(".download-url-input")
-        .setValue(".download-url-input", "http://localhost:3200/test-specs/petstore.json")
+        .setValue(".download-url-input", "http://localhost:3230/test-specs/petstore.json")
         .click("button.download-url-button")
         .pause(1000)
 

test/e2e/scenarios/topbar.js

@@ -18,7 +18,7 @@ describe("initial render", function () {
 
         beforeEach(function (client, done) {
         mainPage = client
-            .url("localhost:3200")
+            .url("localhost:3230")
             .page.main()
 
         topbar = mainPage.section.topbar
@@ -26,7 +26,7 @@ describe("initial render", function () {
         client.waitForElementVisible(".download-url-input", 10000)
             .pause(5000)
             .clearValue(".download-url-input")
-            .setValue(".download-url-input", "http://localhost:3200/test-specs/petstore.json")
+            .setValue(".download-url-input", "http://localhost:3230/test-specs/petstore.json")
             .click("button.download-url-button")
             .pause(1000)
 

test/e2e/specs/bugs/4409.yaml

@@ -0,0 +1,24 @@
+openapi: 3.0.0
+servers:
+  - url: 'https://__host__/'
+info:
+  description: Test API
+  version: '1.0'
+  title: Test API
+  contact:
+    name: Sample Person
+    email: Sample.Person@adp.com
+tags:
+  - name: Test API with Schema
+    description: Test API with Schema
+paths:
+  /myApi:
+    get:
+      operationId: some guid
+      responses:
+        '200':
+          description: Returns documents
+      description: Returns documents
+      tags:
+        - Test API with Schema
+      summary: Test API with Schema