fix: broken test results

components/app/Footer.vue

@@ -32,7 +32,11 @@
             arrow
           >
             <template #trigger>
-              <ButtonSecondary icon="help_center" :label="$t('app.help')" />
+              <ButtonSecondary
+                icon="help_center"
+                class="rounded-none"
+                :label="$t('app.help')"
+              />
             </template>
             <div class="flex flex-col">
               <SmartItem

components/http/TestResult.vue

@@ -1,11 +1,6 @@
 <template>
   <AppSection :label="$t('test.results')">
-    <div
+    <div v-if="testResults && (testResults.expectResults || testResults.tests)">
-      v-if="
-        testResults &&
-        (testResults.expectResults.length || testResults.tests.length)
-      "
-    >
       <div
         class="
           bg-primary
@@ -48,25 +43,12 @@
       </div>
       <div class="divide-y divide-dividerLight">
         <div v-if="testResults.tests">
-          <HttpTestResult
+          <HttpTestResultEntry
             v-for="(result, index) in testResults.tests"
             :key="`result-${index}`"
-            :results="result"
+            :test-results="result"
           />
         </div>
-        <span
-          v-if="testResults.description"
-          class="
-            border-b border-dividerLight
-            flex
-            text-secondaryDark
-            py-2
-            px-4
-            items-center
-          "
-        >
-          {{ testResults.description }}
-        </span>
         <div
           v-if="testResults.expectResults"
           class="divide-y divide-dividerLight"

components/http/TestResultEntry.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <span
+      v-if="testResults.description"
+      class="
+        border-b border-dividerLight
+        flex
+        text-secondaryDark
+        py-2
+        px-4
+        items-center
+      "
+    >
+      {{ testResults.description }}
+    </span>
+    <div v-if="testResults.expectResults" class="divide-y divide-dividerLight">
+      <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>
+</template>
+
+<script setup lang="ts">
+import { PropType } from "@nuxtjs/composition-api"
+import { HoppTestResult } from "~/helpers/types/HoppTestResult"
+
+defineProps({
+  testResults: {
+    type: Object as PropType<HoppTestResult>,
+    required: true,
+  },
+})
+</script>

helpers/RequestRunner.ts

@@ -45,6 +45,7 @@ export function runRESTRequest$(): Observable<HoppRESTResponse> {
             }
           | {
               result: "PASS"
+              message: string
               styles: { icon: "check"; class: "success-response" }
             }
           | { startBlock: string; styles: { icon: ""; class: "" } }
@@ -98,7 +99,11 @@ function translateToNewTestResults(testReport: {
         message: string
         styles: { icon: "close"; class: "cl-error-response" }
       }
-    | { result: "PASS"; styles: { icon: "check"; class: "success-response" } }
+    | {
+        result: "PASS"
+        message: string
+        styles: { icon: "check"; class: "success-response" }
+      }
     | { startBlock: string; styles: { icon: ""; class: "" } }
     | { endBlock: true; styles: { icon: ""; class: "" } }
   >
@@ -129,6 +134,7 @@ function translateToNewTestResults(testReport: {
       // A normal PASS expectation
       testsStack[testsStack.length - 1].expectResults.push({
         status: "pass",
+        message: result.message,
       })
     } else if (isTestFail(result)) {
       // A normal FAIL expectation

helpers/types/HoppTestResult.ts

@@ -1,6 +1,7 @@
-export type HoppTestExpectResult =
+export type HoppTestExpectResult = {
-  | { status: "pass" }
+  status: "fail" | "pass" | "error"
-  | { status: "fail" | "error"; message: string }
+  message: string
+}
 
 export type HoppTestData = {
   description: string