From e2fd104c2dd7401abe81c653427d0176eed40846 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Tue, 26 Oct 2021 13:48:09 +0530
Subject: [PATCH] feat: test results indicator in response section's tests tab

---
 .../lenses/ResponseBodyRenderer.vue           | 19 ++++++++++++++++++-
 .../hoppscotch-app/components/smart/Tab.vue   |  1 +
 .../hoppscotch-app/components/smart/Tabs.vue  |  4 ++++
 .../hoppscotch-app/helpers/testSnippets.js    |  2 +-
 4 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/packages/hoppscotch-app/components/lenses/ResponseBodyRenderer.vue b/packages/hoppscotch-app/components/lenses/ResponseBodyRenderer.vue
index ce2687ef0..a6e4f7355 100644
--- a/packages/hoppscotch-app/components/lenses/ResponseBodyRenderer.vue
+++ b/packages/hoppscotch-app/components/lenses/ResponseBodyRenderer.vue
@@ -17,7 +17,16 @@
     >
       <LensesHeadersRenderer :headers="response.headers" />
     </SmartTab>
-    <SmartTab id="results" :label="$t('test.results')">
+    <SmartTab
+      id="results"
+      :label="$t('test.results')"
+      :indicator="
+        testResults &&
+        (testResults.expectResults.length || testResults.tests.length)
+          ? true
+          : false
+      "
+    >
       <HttpTestResult />
     </SmartTab>
   </SmartTabs>
@@ -26,6 +35,8 @@
 <script>
 import { defineComponent } from "@nuxtjs/composition-api"
 import { getSuitableLenses, getLensRenderers } from "~/helpers/lenses/lenses"
+import { useReadonlyStream } from "~/helpers/utils/composables"
+import { restTestResults$ } from "~/newstore/RESTSession"
 
 export default defineComponent({
   components: {
@@ -35,6 +46,12 @@ export default defineComponent({
   props: {
     response: { type: Object, default: () => {} },
   },
+  setup() {
+    const testResults = useReadonlyStream(restTestResults$, null)
+    return {
+      testResults,
+    }
+  },
   computed: {
     headerLength() {
       if (!this.response || !this.response.headers) return 0
diff --git a/packages/hoppscotch-app/components/smart/Tab.vue b/packages/hoppscotch-app/components/smart/Tab.vue
index b4658f487..5bd1b28c7 100644
--- a/packages/hoppscotch-app/components/smart/Tab.vue
+++ b/packages/hoppscotch-app/components/smart/Tab.vue
@@ -12,6 +12,7 @@ export default defineComponent({
   props: {
     label: { type: String, default: null },
     info: { type: String, default: null },
+    indicator: { type: Boolean, default: false },
     icon: { type: String, default: null },
     id: { type: String, default: null, required: true },
     selected: {
diff --git a/packages/hoppscotch-app/components/smart/Tabs.vue b/packages/hoppscotch-app/components/smart/Tabs.vue
index 519edee2b..be40a0944 100644
--- a/packages/hoppscotch-app/components/smart/Tabs.vue
+++ b/packages/hoppscotch-app/components/smart/Tabs.vue
@@ -34,6 +34,10 @@
               <span v-if="tab.info && tab.info !== 'null'" class="tab-info">
                 {{ tab.info }}
               </span>
+              <span
+                v-if="tab.indicator"
+                class="bg-accentLight h-1 w-1 ml-2 rounded-full"
+              ></span>
             </button>
           </div>
           <div class="flex justify-center items-center">
diff --git a/packages/hoppscotch-app/helpers/testSnippets.js b/packages/hoppscotch-app/helpers/testSnippets.js
index 239f819b7..594caef19 100644
--- a/packages/hoppscotch-app/helpers/testSnippets.js
+++ b/packages/hoppscotch-app/helpers/testSnippets.js
@@ -10,7 +10,7 @@ pw.test("Status code is 200", ()=> {
     name: "Response: Assert property from body",
     script: `\n\n// Check JSON response property
 pw.test("Check JSON response property", ()=> {
-    pw.expect(pw.response.method).toBe("GET");
+    pw.expect(pw.response.body.method).toBe("GET");
 });`,
   },
   {