feat(ui): Response Panel > Tests > add indicator (#265)

flawiddsouza · Oct 1, 2024 · 58dacbf · 58dacbf
1 parent 68c528e
commit 58dacbf
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 5 deletions.
diff --git a/packages/ui/src/components/ResponsePanel.vue b/packages/ui/src/components/ResponsePanel.vue
@@ -33,6 +33,7 @@
         <div class="response-panel-tabs">
             <div class="response-panel-tab" :class="{ 'response-panel-tab-active': activeResponsePanelTab === responsePanelTab.name }" @click="activeResponsePanelTab = responsePanelTab.name" v-for="responsePanelTab in responsePanelTabs">
                 {{ responsePanelTab.label }}
+                <i :class="`fa fa-circle ${ allTestsPassed ? 'passed-tests' : 'failed-tests' }`" v-if="responsePanelTab.name === 'Tests' && response.testResults && response.testResults.length > 0" style="margin-left: 0.2rem"></i>
             </div>
             <div class="response-panel-tab-fill"></div>
             <div class="response-panel-tab-actions">
@@ -238,7 +239,7 @@ export default {
                 })
             }
 
-            if(this.response && 'testResults' in this.response) {
+            if(this.isTestResultsAvailable) {
                 const tab = {
                     name: 'Tests',
                     label: 'Tests'
@@ -397,12 +398,21 @@ export default {
             return getResponseContentType(this.response)
         },
         passedTestCases() {
-            if(this.response && 'testResults' in this.response) {
+            if(this.isTestResultsAvailable) {
                 return this.response.testResults.filter(item => item.passed).length
             }
 
             return 0
-        }
+        },
+        allTestsPassed() {
+            if(this.isTestResultsAvailable) {
+                return this.response.testResults.length === this.passedTestCases
+            }
+            return false
+        },
+        isTestResultsAvailable() {
+            return this.response && 'testResults' in this.response
+        },
     },
     watch: {
         response() {

diff --git a/packages/ui/src/styles/main.css b/packages/ui/src/styles/main.css
@@ -762,3 +762,13 @@ select {
     color: rgba(76, 237, 39, 0.65);
     font-size: 0.6rem !important;
 }
+
+.passed-tests {
+    color: rgba(76, 237, 39, 0.65);
+    font-size: 0.6rem !important;
+}
+
+.failed-tests {
+    color: rgb(237, 39, 39);
+    font-size: 0.6rem !important;
+}
diff --git a/packages/ui/tests/App_test.ts b/packages/ui/tests/App_test.ts
@@ -71,8 +71,8 @@ Scenario('Send GET request', async() => {
     I.createRequest('Request 1')
     I.typeInRequestPanelAddressBar(`${host}${path}${queryString}`)
     I.click('[data-testid="request-panel-address-bar__send-button"]')
-    I.waitForElement('//*[@class="response-panel-tab"][text() = "Timeline"]')
-    I.click('//*[@class="response-panel-tab"][text() = "Timeline"]')
+    I.waitForElement('//*[@class="response-panel-tab"][text() = "Timeline "]')
+    I.click('//*[@class="response-panel-tab"][text() = "Timeline "]')
     const text = await I.grabTextFrom('[data-testid="response-panel-tab-Timeline__preview"]')
     I.expectContain(text, `* Preparing request to ${host}${path}${queryString}`)
     I.expectContain(text, `GET ${path}${queryString}`)