refactor: monorepo+pnpm (removed husky)

packages/hoppscotch-app/components/http/TestResult.vue

@@ -0,0 +1,104 @@
+<template>
+  <AppSection :label="$t('test.results')">
+    <div
+      v-if="
+        testResults &&
+        (testResults.expectResults.length || testResults.tests.length)
+      "
+    >
+      <div
+        class="
+          bg-primary
+          border-dividerLight border-b
+          flex flex-1
+          top-lowerSecondaryStickyFold
+          pl-4
+          z-10
+          sticky
+          items-center
+          justify-between
+        "
+      >
+        <label class="font-semibold text-secondaryLight">
+          {{ $t("test.report") }}
+        </label>
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('action.clear')"
+          svg="trash-2"
+          @click.native="clearContent()"
+        />
+      </div>
+      <div class="divide-dividerLight border-dividerLight border-b divide-y-4">
+        <div v-if="testResults.tests" class="divide-dividerLight divide-y-4">
+          <HttpTestResultEntry
+            v-for="(result, index) in testResults.tests"
+            :key="`result-${index}`"
+            :test-results="result"
+          />
+        </div>
+        <div
+          v-if="testResults.expectResults"
+          class="divide-dividerLight divide-y"
+        >
+          <HttpTestResultReport
+            v-if="testResults.expectResults.length"
+            :test-results="testResults"
+          />
+          <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="text-secondaryDark">
+              {{ result.message }}
+            </span>
+            <span class="text-secondaryLight">
+              {{
+                ` \xA0 — \xA0test ${
+                  result.status === "pass" ? $t("passed") : $t("failed")
+                }`
+              }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      v-else
+      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+    >
+      <span class="text-center pb-2">
+        {{ $t("empty.tests") }}
+      </span>
+      <span class="text-center pb-4">
+        {{ $t("helpers.tests") }}
+      </span>
+      <ButtonSecondary
+        outline
+        :label="$t('action.learn_more')"
+        to="https://docs.hoppscotch.io"
+        blank
+        svg="external-link"
+        reverse
+      />
+    </div>
+  </AppSection>
+</template>
+
+<script setup lang="ts">
+import { useReadonlyStream } from "~/helpers/utils/composables"
+import { restTestResults$, setRESTTestResults } from "~/newstore/RESTSession"
+
+const testResults = useReadonlyStream(restTestResults$, null)
+
+const clearContent = () => setRESTTestResults(null)
+</script>