From 29040848533761e6527b4961044e9340ac634802 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Sat, 31 Jul 2021 00:51:41 +0530
Subject: [PATCH] refactor: tests and results section

---
 components/http/PreRequestScript.vue |   4 +-
 components/http/TestResult.vue       |  27 +++--
 components/http/Tests.vue            | 154 +++++++++++++++------------
 components/smart/ProgressRing.vue    |  55 ++++++++++
 components/smart/Tabs.vue            |   4 +-
 lang/en-US.json                      |   5 +-
 6 files changed, 167 insertions(+), 82 deletions(-)
 create mode 100644 components/smart/ProgressRing.vue

diff --git a/components/http/PreRequestScript.vue b/components/http/PreRequestScript.vue
index ad42f3040..3a72f2013 100644
--- a/components/http/PreRequestScript.vue
+++ b/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,
diff --git a/components/http/TestResult.vue b/components/http/TestResult.vue
index cfebdeeec..8e8fbb2d7 100644
--- a/components/http/TestResult.vue
+++ b/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 }}
diff --git a/components/http/Tests.vue b/components/http/Tests.vue
index cd6e9a840..411ebb94e 100644
--- a/components/http/Tests.vue
+++ b/components/http/Tests.vue
@@ -1,89 +1,111 @@
 <template>
-  <AppSection label="postRequestTests">
-    <div
-      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">
+  <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
           justify-between
         "
       >
-        <div>
-          <label class="font-semibold"> Test Report </label>
-        </div>
+        <label class="font-semibold">
+          {{ $t("javascript_code") }}
+        </label>
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="$t('clear')"
-          icon="clear_all"
-          @click.native="clearContent()"
+          to="https://github.com/hoppscotch/hoppscotch/wiki/Post-Request-Tests"
+          blank
+          :title="$t('wiki')"
+          icon="help_outline"
         />
       </div>
-      <div class="flex my-4 items-center">
-        <div class="ml-4">
-          <span class="font-semibold text-red-500">
-            {{ failedTests }} failing,
-          </span>
-          <span class="font-semibold text-green-500">
-            {{ passedTests }} successful,
-          </span>
-          <span class="font-semibold"> out of {{ totalTests }} tests. </span>
+      <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('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="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 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>
-      <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">
diff --git a/components/smart/ProgressRing.vue b/components/smart/ProgressRing.vue
new file mode 100644
index 000000000..1667b0a4a
--- /dev/null
+++ b/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>
diff --git a/components/smart/Tabs.vue b/components/smart/Tabs.vue
index 081de6ecb..a5088e546 100644
--- a/components/smart/Tabs.vue
+++ b/components/smart/Tabs.vue
@@ -23,9 +23,7 @@
         </div>
       </div>
     </div>
-    <div>
-      <slot></slot>
-    </div>
+    <slot></slot>
   </div>
 </template>
 
diff --git a/lang/en-US.json b/lang/en-US.json
index 57f56811b..0874fbf0d 100644
--- a/lang/en-US.json
+++ b/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"
 }