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