chore: collection runner improvements (#4685)

packages/hoppscotch-common/src/components/http/test/Response.vue

@@ -1,6 +1,15 @@
 <template>
   <div class="relative flex flex-1 flex-col">
-    <HttpResponseMeta :response="doc.response" :is-embed="false" />
+    <div
+      class="sticky top-0 z-50 flex-none flex-shrink-0 items-center justify-center whitespace-nowrap bg-primary p-4"
+      v-if="doc.response?.type === 'network_fail'"
+    >
+      <span class="text-secondary">
+        {{ t("response.status") }}:
+        <span class="text-red-500">{{ doc.error }}</span>
+      </span>
+    </div>
+    <HttpResponseMeta v-else :response="doc.response" :is-embed="false" />
     <LensesResponseBodyRenderer
       v-if="hasResponse"
       :document="{
@@ -16,7 +25,6 @@
       :is-test-runner="true"
       :show-response="showResponse"
     />
-
     <HoppSmartPlaceholder
       v-else
       :src="`/images/states/${colorMode.value}/add_files.svg`"
@@ -51,8 +59,8 @@ const doc = useVModel(props, "document", emit)
 
 const hasResponse = computed(
   () =>
-    (doc.value.response?.type === "success" ||
-      doc.value.response?.type === "fail") &&
-    doc.value.response?.body instanceof ArrayBuffer
+    doc.value.response?.type === "success" ||
+    doc.value.response?.type === "fail" ||
+    doc.value.response?.type === "network_fail"
 )
 </script>

packages/hoppscotch-common/src/components/http/test/Runner.vue

@@ -61,8 +61,15 @@
       />
     </template>
     <template #secondary>
+      <div
+        v-if="tab.document.status === 'running'"
+        class="flex flex-col items-center gap-4 justify-center h-full"
+      >
+        <HoppSmartSpinner />
+        <span> {{ t("collection_runner.running_collection") }}... </span>
+      </div>
       <HttpTestResponse
-        v-if="selectedRequest && selectedRequest.response"
+        v-else-if="selectedRequest && selectedRequest.response"
         v-model:document="selectedRequest"
         :show-response="tab.document.config.persistResponses"
       />
@@ -83,14 +90,6 @@
         </template>
       </HoppSmartPlaceholder>
 
-      <div
-        v-else-if="tab.document.status === 'running'"
-        class="flex flex-col items-center gap-4 justify-center h-full"
-      >
-        <HoppSmartSpinner />
-        <span> {{ t("collection_runner.running_collection") }}... </span>
-      </div>
-
       <HoppSmartPlaceholder
         v-else-if="!selectedRequest"
         :src="`/images/states/${colorMode.value}/pack.svg`"
@@ -304,6 +303,7 @@ const stopTests = () => {
 }
 
 const runAgain = async () => {
+  tab.value.document.request = null
   tab.value.document.resultCollection = undefined
   await nextTick()
   resetRunnerState()

packages/hoppscotch-common/src/components/lenses/ResponseBodyRenderer.vue

@@ -29,7 +29,7 @@
       <LensesHeadersRenderer v-model="maybeHeaders" :is-editable="false" />
     </HoppSmartTab>
     <HoppSmartTab
-      v-if="!isEditable"
+      v-if="doc.response?.type !== 'network_fail' && !isEditable"
       id="results"
       :label="t('test.results')"
       :indicator="showIndicator"
@@ -116,8 +116,17 @@ const maybeHeaders = computed(() => {
 })
 
 const requestHeaders = computed(() => {
-  if (!props.isTestRunner || !doc.value) return null
-  return doc.value.request.headers
+  if (
+    !props.isTestRunner ||
+    !doc.value.response ||
+    !(
+      doc.value.response.type === "success" ||
+      doc.value.response.type === "fail" ||
+      doc.value.response.type === "network_fail"
+    )
+  )
+    return null
+  return doc.value.response?.req.headers || doc.value.request.headers
 })
 
 const validLenses = computed(() => {
@@ -128,7 +137,10 @@ const validLenses = computed(() => {
 watch(
   validLenses,
   (newLenses: Lens[]) => {
-    if (newLenses.length === 0) return
+    if (newLenses.length === 0) {
+      selectedLensTab.value = "req-headers"
+      return
+    }
 
     const validRenderers = [
       ...newLenses.map((x) => x.renderer),

packages/hoppscotch-common/src/services/test-runner/test-runner.service.ts

@@ -304,6 +304,11 @@ export class TestRunnerService extends Service {
         this.updateRequestAtPath(tab.value.document.resultCollection!, path, {
           error: errorMsg,
           isLoading: false,
+          response: {
+            type: "network_fail",
+            error: "Unknown",
+            req: request,
+          },
         })
 
         if (options.stopOnError) {