refactor: move test results to request response section

components/app/Footer.vue

@@ -35,7 +35,6 @@
                 v-tippy="{ theme: 'tooltip' }"
                 icon="help_center"
                 :title="$t('app.help')"
-                :shortcut="['?']"
               />
             </template>
             <div class="flex flex-col">
@@ -89,7 +88,6 @@
           v-tippy="{ theme: 'tooltip' }"
           icon="keyboard"
           :title="$t('shortcuts')"
-          :shortcut="['?']"
           @click.native="showShortcuts = true"
         />
         <ButtonSecondary

components/http/TestResult.vue

@@ -1,14 +1,59 @@
 <template>
+  <AppSection :label="$t('test.result')">
+    <div
+      v-if="
+        testResults &&
+        (testResults.expectResults.length || testResults.tests.length)
+      "
+    >
+      <div
+        class="
+          bg-primary
+          border-b border-dividerLight
+          flex flex-1
+          top-lowerSecondaryStickyFold
+          pl-4
+          z-10
+          sticky
+          items-center
+          justify-between
+        "
+      >
+        <label class="font-semibold"> Test Report </label>
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('clear')"
+          icon="clear_all"
+          @click.native="clearContent()"
+        />
+      </div>
+      <div class="flex p-2 items-center">
+        <SmartProgressRing
+          class="text-red-500"
+          :radius="16"
+          :stroke="4"
+          :progress="(failedTests / totalTests) * 100"
+        />
+        <div class="ml-2">
+          <span v-if="failedTests" class="font-semibold text-red-500">
+            {{ failedTests }} failing,
+          </span>
+          <span v-if="passedTests" class="font-semibold text-green-500">
+            {{ passedTests }} successful,
+          </span>
+          <span class="font-semibold"> out of {{ totalTests }} tests. </span>
+        </div>
+      </div>
       <div class="divide-y divide-dividerLight">
-    <div v-if="results.tests">
+        <div v-if="testResults.tests">
           <HttpTestResult
-        v-for="(result, index) in results.tests"
+            v-for="(result, index) in testResults.tests"
             :key="`result-${index}`"
             :results="result"
           />
         </div>
         <span
-      v-if="results.description"
+          v-if="testResults.description"
           class="
             border-b border-dividerLight
             flex
@@ -19,21 +64,29 @@
             items-center
           "
         >
-      {{ results.description }}
+          {{ testResults.description }}
         </span>
-    <div v-if="results.expectResults" class="divide-y divide-dividerLight">
         <div
-        v-for="(result, index) in results.expectResults"
+          v-if="testResults.expectResults"
+          class="divide-y divide-dividerLight"
+        >
+          <div
+            v-for="(result, index) in testResults.expectResults"
             :key="`result-${index}`"
             class="flex py-2 px-4 items-center"
           >
             <i
               class="mr-4 material-icons"
-          :class="result.status === 'pass' ? 'text-green-500' : 'text-red-500'"
+              :class="
+                result.status === 'pass' ? 'text-green-500' : 'text-red-500'
+              "
             >
               {{ result.status === "pass" ? "check" : "close" }}
             </i>
-        <span v-if="result.message" class="font-semibold text-secondaryDark">
+            <span
+              v-if="result.message"
+              class="font-semibold text-secondaryDark"
+            >
               {{ result.message }}
             </span>
             <span class="text-secondaryLight">
@@ -46,17 +99,48 @@
           </div>
         </div>
       </div>
+    </div>
+    <div
+      v-else
+      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+    >
+      <i class="opacity-75 pb-2 material-icons">bug_report</i>
+      <span class="text-center">
+        {{ $t("empty.tests") }}
+      </span>
+    </div>
+  </AppSection>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from "@nuxtjs/composition-api"
-import { HoppTestResult } from "~/helpers/types/HoppTestResult"
+import { defineComponent } from "@nuxtjs/composition-api"
+import { useReadonlyStream } from "~/helpers/utils/composables"
+import { restTestResults$, setRESTTestResults } from "~/newstore/RESTSession"
 
 export default defineComponent({
-  props: {
-    results: {
-      type: Object as PropType<HoppTestResult>,
-      default: null,
+  setup() {
+    return {
+      testResults: useReadonlyStream(restTestResults$, null),
+    }
+  },
+  computed: {
+    totalTests(): number | undefined {
+      return this.testResults?.expectResults.length
+    },
+    failedTests(): number | undefined {
+      return this.testResults?.expectResults.filter(
+        (result: { status: string }) => result.status === "fail"
+      ).length
+    },
+    passedTests(): number | undefined {
+      return this.testResults?.expectResults.filter(
+        (result: { status: string }) => result.status === "pass"
+      ).length
+    },
+  },
+  methods: {
+    clearContent() {
+      setRESTTestResults(null)
     },
   },
 })

components/http/Tests.vue

@@ -1,13 +1,12 @@
 <template>
-  <SmartTabs styles="sticky top-upperSecondaryStickyFold z-20">
-    <SmartTab id="script" :label="$t('test.script')" :selected="true">
+  <AppSection id="script" :label="$t('test.script')">
     <div
       class="
         bg-primary
         border-b border-dividerLight
         flex flex-1
-          top-upperTertiaryStickyFold
         pl-4
+        top-upperSecondaryStickyFold
         z-10
         sticky
         items-center
@@ -37,112 +36,18 @@
       }"
       complete-mode="test"
     />
-    </SmartTab>
-    <SmartTab
-      id="results"
-      :label="$t('test.results')"
-      :info="totalTests ? totalTests.toString() : ''"
-    >
-      <div
-        v-if="
-          testResults &&
-          (testResults.expectResults.length || testResults.tests.length)
-        "
-      >
-        <div
-          class="
-            bg-primary
-            border-b border-dividerLight
-            flex flex-1
-            top-upperTertiaryStickyFold
-            pl-4
-            z-10
-            sticky
-            items-center
-            justify-between
-          "
-        >
-          <label class="font-semibold"> Test Report </label>
-          <ButtonSecondary
-            v-tippy="{ theme: 'tooltip' }"
-            :title="$t('clear')"
-            icon="clear_all"
-            @click.native="clearContent()"
-          />
-        </div>
-        <div class="flex p-2 items-center">
-          <SmartProgressRing
-            class="text-red-500"
-            :radius="16"
-            :stroke="4"
-            :progress="(failedTests / totalTests) * 100"
-          />
-          <div class="ml-2">
-            <span v-if="failedTests" class="font-semibold text-red-500">
-              {{ failedTests }} failing,
-            </span>
-            <span v-if="passedTests" class="font-semibold text-green-500">
-              {{ passedTests }} successful,
-            </span>
-            <span class="font-semibold"> out of {{ totalTests }} tests. </span>
-          </div>
-        </div>
-        <HttpTestResult :results="testResults" />
-      </div>
-      <div
-        v-else
-        class="
-          flex flex-col
-          text-secondaryLight
-          p-4
-          items-center
-          justify-center
-        "
-      >
-        <i class="opacity-75 pb-2 material-icons">bug_report</i>
-        <span class="text-center">
-          {{ $t("empty.tests") }}
-        </span>
-      </div>
-    </SmartTab>
-  </SmartTabs>
+  </AppSection>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "@nuxtjs/composition-api"
-import {
-  useTestScript,
-  restTestResults$,
-  setRESTTestResults,
-} from "~/newstore/RESTSession"
-import { useReadonlyStream } from "~/helpers/utils/composables"
+import { useTestScript } from "~/newstore/RESTSession"
 
 export default defineComponent({
   setup() {
     return {
       testScript: useTestScript(),
-      testResults: useReadonlyStream(restTestResults$, null),
     }
   },
-  computed: {
-    totalTests(): number | undefined {
-      return this.testResults?.expectResults.length
-    },
-    failedTests(): number | undefined {
-      return this.testResults?.expectResults.filter(
-        (result: { status: string }) => result.status === "fail"
-      ).length
-    },
-    passedTests(): number | undefined {
-      return this.testResults?.expectResults.filter(
-        (result: { status: string }) => result.status === "pass"
-      ).length
-    },
-  },
-  methods: {
-    clearContent() {
-      setRESTTestResults(null)
-    },
-  },
 })
 </script>

components/lenses/ResponseBodyRenderer.vue

@@ -17,6 +17,9 @@
     >
       <LensesHeadersRenderer :headers="response.headers" />
     </SmartTab>
+    <SmartTab id="results" :label="$t('test.results')">
+      <HttpTestResult />
+    </SmartTab>
   </SmartTabs>
 </template>
 

lang/en-US.json

@@ -207,7 +207,7 @@
   },
   "test": {
     "script": "Script",
-    "results": "Results"
+    "results": "Test Results"
   },
   "shortcut": {
     "general": {