refactor: tests and results section

components/http/PreRequestScript.vue

@@ -27,8 +27,8 @@
     <SmartJsEditor
       v-model="preRequestScript"
       :options="{
-        maxLines: 16,
+        maxLines: Infinity,
-        minLines: 8,
+        minLines: 16,
         fontSize: '12px',
         autoScrollEditorIntoView: true,
         showPrintMargin: false,

components/http/TestResult.vue

@@ -1,20 +1,27 @@
 <template>
-  <div>
+  <div class="divide-y divide-dividerLight">
     <div v-if="results.tests">
-      <span
-        v-if="results.tests.description"
-        class="font-semibold text-secondaryDark"
-      >
-        {{ results.tests.description }}
-      </span>
       <HttpTestResult
         v-for="(result, index) in results.tests"
         :key="`result-${index}`"
-        class="divide-y divide-dividerLight"
         :results="result"
       />
     </div>
-    <div v-if="results.expectResults">
+    <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"
         :key="`result-${index}`"
@@ -24,7 +31,7 @@
           class="mr-4 material-icons"
           :class="result.status === 'pass' ? 'text-green-500' : 'text-red-500'"
         >
-          {{ result.status === "pass" ? "check_circle" : "cancel" }}
+          {{ result.status === "pass" ? "check" : "close" }}
         </i>
         <span v-if="result.message" class="font-semibold text-secondaryDark">
           {{ result.message }}

components/http/Tests.vue

@@ -1,89 +1,111 @@
 <template>
-  <AppSection label="postRequestTests">
+  <SmartTabs styles="sticky top-24 z-20">
-    <div
+    <SmartTab id="script" :label="$t('script')" :selected="true">
-      class="
-        bg-primary
-        border-b border-dividerLight
-        flex flex-1
-        pl-4
-        top-24
-        z-10
-        sticky
-        items-center
-        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: 16,
-        minLines: 8,
-        fontSize: '12px',
-        autoScrollEditorIntoView: true,
-        showPrintMargin: false,
-        useWorker: false,
-      }"
-      complete-mode="test"
-    />
-    <div v-if="testResults">
       <div
         class="
           bg-primary
           border-b border-dividerLight
           flex flex-1
           pl-4
-          top-24
+          top-32
           z-10
           sticky
           items-center
           justify-between
         "
       >
-        <div>
+        <label class="font-semibold">
-          <label class="font-semibold"> Test Report </label>
+          {{ $t("javascript_code") }}
-        </div>
+        </label>
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="$t('clear')"
+          to="https://github.com/hoppscotch/hoppscotch/wiki/Post-Request-Tests"
-          icon="clear_all"
+          blank
-          @click.native="clearContent()"
+          :title="$t('wiki')"
+          icon="help_outline"
         />
       </div>
-      <div class="flex my-4 items-center">
+      <SmartJsEditor
-        <div class="ml-4">
+        v-model="testScript"
-          <span class="font-semibold text-red-500">
+        :options="{
-            {{ failedTests }} failing,
+          maxLines: Infinity,
-          </span>
+          minLines: 16,
-          <span class="font-semibold text-green-500">
+          fontSize: '12px',
-            {{ passedTests }} successful,
+          autoScrollEditorIntoView: true,
-          </span>
+          showPrintMargin: false,
-          <span class="font-semibold"> out of {{ totalTests }} tests. </span>
+          useWorker: false,
+        }"
+        complete-mode="test"
+      />
+    </SmartTab>
+    <SmartTab
+      id="results"
+      :label="$t('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
+            pl-4
+            top-32
+            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="bg-primaryDark flex space-x-2 flex-1 h-1 mx-4 relative">
+        <div class="flex p-2 items-center">
-          <div
+          <SmartProgressRing
-            class="rounded h-full bg-green-500"
+            class="text-red-500"
-            :style="`width: ${(passedTests / totalTests) * 100 + '%'}`"
+            :radius="16"
-          ></div>
+            :stroke="4"
-          <div
+            :progress="(failedTests / totalTests) * 100"
-            class="rounded h-full bg-red-500"
+          />
-            :style="`width: ${(failedTests / totalTests) * 100 + '%'}`"
+          <div class="ml-2">
-          ></div>
+            <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>
-      <HttpTestResult :results="testResults" />
+      <div
-    </div>
+        v-else
-  </AppSection>
+        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("add_test_scripts") }}
+        </span>
+      </div>
+    </SmartTab>
+  </SmartTabs>
 </template>
 
 <script lang="ts">

components/smart/ProgressRing.vue

@@ -0,0 +1,55 @@
+<template>
+  <svg :height="radius * 2" :width="radius * 2">
+    <circle
+      :stroke-width="stroke"
+      class="stroke-green-500"
+      fill="transparent"
+      :r="normalizedRadius"
+      :cx="radius"
+      :cy="radius"
+    />
+    <circle
+      :stroke-width="stroke"
+      stroke="currentColor"
+      fill="transparent"
+      :r="normalizedRadius"
+      :cx="radius"
+      :cy="radius"
+      :style="{ strokeDashoffset: strokeDashoffset }"
+      :stroke-dasharray="circumference + ' ' + circumference"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  props: {
+    radius: {
+      type: Number,
+      default: 12,
+    },
+    progress: {
+      type: Number,
+      default: 50,
+    },
+    stroke: {
+      type: Number,
+      default: 4,
+    },
+  },
+  data() {
+    const normalizedRadius = this.radius - this.stroke * 2
+    const circumference = normalizedRadius * 2 * Math.PI
+
+    return {
+      normalizedRadius,
+      circumference,
+    }
+  },
+  computed: {
+    strokeDashoffset() {
+      return this.circumference - (this.progress / 100) * this.circumference
+    },
+  },
+}
+</script>

components/smart/Tabs.vue

@@ -23,9 +23,7 @@
         </div>
       </div>
     </div>
-    <div>
+    <slot></slot>
-      <slot></slot>
-    </div>
   </div>
 </template>
 

lang/en-US.json

@@ -352,5 +352,8 @@
   "connect_graphql_endpoint": "Connect to a GraphQL endpoint",
   "copy": "Copy",
   "parameters_empty": "Parameters are empty",
-  "headers_empty": "Headers are empty"
+  "headers_empty": "Headers are empty",
+  "script": "Script",
+  "results": "Results",
+  "add_test_scripts": "Add test script"
 }