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,62 +1,146 @@
 <template>
-  <div class="divide-y divide-dividerLight">
+  <AppSection :label="$t('test.result')">
-    <div v-if="results.tests">
+    <div
-      <HttpTestResult
+      v-if="
-        v-for="(result, index) in results.tests"
+        testResults &&
-        :key="`result-${index}`"
+        (testResults.expectResults.length || testResults.tests.length)
-        :results="result"
-      />
-    </div>
-    <span
-      v-if="results.description"
-      class="
-        border-b border-dividerLight
-        flex
-        font-semibold
-        text-secondaryDark
-        py-2
-        px-4
-        items-center
       "
     >
-      {{ results.description }}
-    </span>
-    <div v-if="results.expectResults" class="divide-y divide-dividerLight">
       <div
-        v-for="(result, index) in results.expectResults"
+        class="
-        :key="`result-${index}`"
+          bg-primary
-        class="flex py-2 px-4 items-center"
+          border-b border-dividerLight
+          flex flex-1
+          top-lowerSecondaryStickyFold
+          pl-4
+          z-10
+          sticky
+          items-center
+          justify-between
+        "
       >
-        <i
+        <label class="font-semibold"> Test Report </label>
-          class="mr-4 material-icons"
+        <ButtonSecondary
-          :class="result.status === 'pass' ? 'text-green-500' : 'text-red-500'"
+          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="testResults.tests">
+          <HttpTestResult
+            v-for="(result, index) in testResults.tests"
+            :key="`result-${index}`"
+            :results="result"
+          />
+        </div>
+        <span
+          v-if="testResults.description"
+          class="
+            border-b border-dividerLight
+            flex
+            font-semibold
+            text-secondaryDark
+            py-2
+            px-4
+            items-center
+          "
         >
-          {{ result.status === "pass" ? "check" : "close" }}
+          {{ testResults.description }}
-        </i>
-        <span v-if="result.message" class="font-semibold text-secondaryDark">
-          {{ result.message }}
-        </span>
-        <span class="text-secondaryLight">
-          {{
-            ` \xA0 — \xA0test ${
-              result.status === "pass" ? $t("passed") : $t("failed")
-            }`
-          }}
         </span>
+        <div
+          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'
+              "
+            >
+              {{ result.status === "pass" ? "check" : "close" }}
+            </i>
+            <span
+              v-if="result.message"
+              class="font-semibold text-secondaryDark"
+            >
+              {{ result.message }}
+            </span>
+            <span class="text-secondaryLight">
+              {{
+                ` \xA0 — \xA0test ${
+                  result.status === "pass" ? $t("passed") : $t("failed")
+                }`
+              }}
+            </span>
+          </div>
+        </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 { defineComponent } from "@nuxtjs/composition-api"
-import { HoppTestResult } from "~/helpers/types/HoppTestResult"
+import { useReadonlyStream } from "~/helpers/utils/composables"
+import { restTestResults$, setRESTTestResults } from "~/newstore/RESTSession"
 
 export default defineComponent({
-  props: {
+  setup() {
-    results: {
+    return {
-      type: Object as PropType<HoppTestResult>,
+      testResults: useReadonlyStream(restTestResults$, null),
-      default: 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,148 +1,53 @@
 <template>
-  <SmartTabs styles="sticky top-upperSecondaryStickyFold z-20">
+  <AppSection id="script" :label="$t('test.script')">
-    <SmartTab id="script" :label="$t('test.script')" :selected="true">
+    <div
-      <div
+      class="
-        class="
+        bg-primary
-          bg-primary
+        border-b border-dividerLight
-          border-b border-dividerLight
+        flex flex-1
-          flex flex-1
+        pl-4
-          top-upperTertiaryStickyFold
+        top-upperSecondaryStickyFold
-          pl-4
+        z-10
-          z-10
+        sticky
-          sticky
+        items-center
-          items-center
+        justify-between
-          justify-between
+      "
-        "
-      >
-        <label class="font-semibold">
-          {{ $t("javascript_code") }}
-        </label>
-        <ButtonSecondary
-          v-tippy="{ theme: 'tooltip' }"
-          to="https://github.com/hoppscotch/hoppscotch/wiki/Post-Request-Tests"
-          blank
-          :title="$t('wiki')"
-          icon="help_outline"
-        />
-      </div>
-      <SmartJsEditor
-        v-model="testScript"
-        :options="{
-          maxLines: Infinity,
-          minLines: 16,
-          fontSize: '12px',
-          autoScrollEditorIntoView: true,
-          showPrintMargin: false,
-          useWorker: false,
-        }"
-        complete-mode="test"
-      />
-    </SmartTab>
-    <SmartTab
-      id="results"
-      :label="$t('test.results')"
-      :info="totalTests ? totalTests.toString() : ''"
     >
-      <div
+      <label class="font-semibold">
-        v-if="
+        {{ $t("javascript_code") }}
-          testResults &&
+      </label>
-          (testResults.expectResults.length || testResults.tests.length)
+      <ButtonSecondary
-        "
+        v-tippy="{ theme: 'tooltip' }"
-      >
+        to="https://github.com/hoppscotch/hoppscotch/wiki/Post-Request-Tests"
-        <div
+        blank
-          class="
+        :title="$t('wiki')"
-            bg-primary
+        icon="help_outline"
-            border-b border-dividerLight
+      />
-            flex flex-1
+    </div>
-            top-upperTertiaryStickyFold
+    <SmartJsEditor
-            pl-4
+      v-model="testScript"
-            z-10
+      :options="{
-            sticky
+        maxLines: Infinity,
-            items-center
+        minLines: 16,
-            justify-between
+        fontSize: '12px',
-          "
+        autoScrollEditorIntoView: true,
-        >
+        showPrintMargin: false,
-          <label class="font-semibold"> Test Report </label>
+        useWorker: false,
-          <ButtonSecondary
+      }"
-            v-tippy="{ theme: 'tooltip' }"
+      complete-mode="test"
-            :title="$t('clear')"
+    />
-            icon="clear_all"
+  </AppSection>
-            @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>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "@nuxtjs/composition-api"
-import {
+import { useTestScript } from "~/newstore/RESTSession"
-  useTestScript,
-  restTestResults$,
-  setRESTTestResults,
-} from "~/newstore/RESTSession"
-import { useReadonlyStream } from "~/helpers/utils/composables"
 
 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": {