refactor: tests and results section

components/http/PreRequestScript.vue

@@ -27,8 +27,8 @@
     <SmartJsEditor
       v-model="preRequestScript"
       :options="{
-        maxLines: 16,
-        minLines: 8,
+        maxLines: Infinity,
+        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,12 +1,13 @@
 <template>
-  <AppSection label="postRequestTests">
+  <SmartTabs styles="sticky top-24 z-20">
+    <SmartTab id="script" :label="$t('script')" :selected="true">
       <div
         class="
           bg-primary
           border-b border-dividerLight
           flex flex-1
           pl-4
-        top-24
+          top-32
           z-10
           sticky
           items-center
@@ -27,8 +28,8 @@
       <SmartJsEditor
         v-model="testScript"
         :options="{
-        maxLines: 16,
-        minLines: 8,
+          maxLines: Infinity,
+          minLines: 16,
           fontSize: '12px',
           autoScrollEditorIntoView: true,
           showPrintMargin: false,
@@ -36,23 +37,32 @@
         }"
         complete-mode="test"
       />
-    <div v-if="testResults">
+    </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-24
+            top-32
             z-10
             sticky
             items-center
             justify-between
           "
         >
-        <div>
           <label class="font-semibold"> Test Report </label>
-        </div>
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('clear')"
@@ -60,30 +70,42 @@
             @click.native="clearContent()"
           />
         </div>
-      <div class="flex my-4 items-center">
-        <div class="ml-4">
-          <span class="font-semibold text-red-500">
+        <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 class="font-semibold text-green-500">
+            <span v-if="passedTests" class="font-semibold text-green-500">
               {{ passedTests }} successful,
             </span>
             <span class="font-semibold"> out of {{ totalTests }} tests. </span>
           </div>
-        <div class="bg-primaryDark flex space-x-2 flex-1 h-1 mx-4 relative">
-          <div
-            class="rounded h-full bg-green-500"
-            :style="`width: ${(passedTests / totalTests) * 100 + '%'}`"
-          ></div>
-          <div
-            class="rounded h-full bg-red-500"
-            :style="`width: ${(failedTests / totalTests) * 100 + '%'}`"
-          ></div>
-        </div>
         </div>
         <HttpTestResult :results="testResults" />
       </div>
-  </AppSection>
+      <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("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,10 +23,8 @@
         </div>
       </div>
     </div>
-    <div>
     <slot></slot>
   </div>
-  </div>
 </template>
 
 <script>

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"
 }