Add a responses counter (mockoon#1539)

Closes mockoon#1528
pks-os · Oct 7, 2024 · e0a9e5e · e0a9e5e
1 parent 97de73f
commit e0a9e5e
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 28 deletions.
diff --git a/.../desktop/src/renderer/app/components/environment-routes/environment-routes.component.html b/.../desktop/src/renderer/app/components/environment-routes/environment-routes.component.html
@@ -182,33 +182,44 @@
                   *ngIf="data.activeRouteResponse"
                   class="dropdown-toggle-label"
                 >
-                  <span *ngIf="data.activeRoute.type === 'ws'" class="pe-2"
-                    >Response {{ data.activeRouteResponseIndex + 1 }}
-                  </span>
-                  <span *ngIf="data.activeRoute?.type === 'http'" class="pe-2"
-                    >Response {{ data.activeRouteResponseIndex + 1 }} ({{
-                      data.activeRouteResponse?.statusCode
-                    }})
-                  </span>
-                  <span
-                    *ngIf="
-                      data.activeRoute?.type === 'crud' &&
-                      !data.activeRouteResponse?.default
-                    "
-                    class="pe-2"
-                    >Response {{ data.activeRouteResponseIndex }} ({{
-                      data.activeRouteResponse?.statusCode
-                    }})
-                  </span>
-                  <span
-                    *ngIf="
-                      data.activeRoute?.type === 'crud' &&
-                      data.activeRouteResponse?.default
-                    "
-                    class="pe-2"
-                    >CRUD operations
-                  </span>
-                  {{ data.activeRouteResponse?.label }}
+                  <div class="d-flex">
+                    <div class="text-truncate me-2">
+                      <span *ngIf="data.activeRoute.type === 'ws'" class="pe-2"
+                        >Response {{ data.activeRouteResponseIndex + 1 }}
+                      </span>
+                      <span
+                        *ngIf="data.activeRoute?.type === 'http'"
+                        class="pe-2"
+                        >Response {{ data.activeRouteResponseIndex + 1 }} ({{
+                          data.activeRouteResponse?.statusCode
+                        }})
+                      </span>
+                      <span
+                        *ngIf="
+                          data.activeRoute?.type === 'crud' &&
+                          !data.activeRouteResponse?.default
+                        "
+                        class="pe-2"
+                        >Response {{ data.activeRouteResponseIndex }} ({{
+                          data.activeRouteResponse?.statusCode
+                        }})
+                      </span>
+                      <span
+                        *ngIf="
+                          data.activeRoute?.type === 'crud' &&
+                          data.activeRouteResponse?.default
+                        "
+                        class="pe-2"
+                        >CRUD operations
+                      </span>
+                      {{ data.activeRouteResponse?.label }}
+                    </div>
+                    <div
+                      class="d-flex align-items-center badge badge-hollow fw-bold ms-auto"
+                    >
+                      {{ data.activeRoute?.responses.length }}
+                    </div>
+                  </div>
                 </div>
               </button>
 

diff --git a/packages/desktop/src/renderer/styles/boostrap-overrides.scss b/packages/desktop/src/renderer/styles/boostrap-overrides.scss
@@ -105,6 +105,12 @@ label {
   }
 }
 
+// remove bootstrap fix for badges in buttons (it's not working when using flex)
+.btn .badge {
+  position: initial;
+  top: 0;
+}
+
 .btn.btn-icon {
   text-decoration: none;
 

diff --git a/packages/desktop/test/libs/routes.ts b/packages/desktop/test/libs/routes.ts
@@ -478,7 +478,10 @@ class Routes {
   }
 
   public async assertSelectedRouteResponseLabel(expected: string) {
-    await utils.assertElementText(this.routeResponseDropdownlabel, expected);
+    await utils.assertElementTextContains(
+      this.routeResponseDropdownlabel,
+      expected
+    );
   }
 
   public async assertDefaultRouteResponseClass(

diff --git a/packages/desktop/test/libs/utils.ts b/packages/desktop/test/libs/utils.ts
@@ -141,6 +141,13 @@ class Utils {
     );
   }
 
+  public async assertElementTextContains(
+    element: ChainablePromiseElement<WebdriverIO.Element>,
+    text: string
+  ): Promise<void> {
+    expect(await element.getText()).toContain(text);
+  }
+
   public async assertElementTextContain(
     element: ChainablePromiseElement<WebdriverIO.Element>,
     text: string