TestResult.vue 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. <template>
  2. <AppSection :label="`${t('test.results')}`">
  3. <div
  4. v-if="
  5. testResults &&
  6. (testResults.expectResults.length || testResults.tests.length)
  7. "
  8. >
  9. <div
  10. class="bg-primary border-b border-dividerLight flex flex-1 top-lowerSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
  11. >
  12. <label class="font-semibold text-secondaryLight">
  13. {{ t("test.report") }}
  14. </label>
  15. <ButtonSecondary
  16. v-tippy="{ theme: 'tooltip' }"
  17. :title="t('action.clear')"
  18. svg="trash-2"
  19. @click.native="clearContent()"
  20. />
  21. </div>
  22. <div class="divide-dividerLight border-b border-dividerLight divide-y-4">
  23. <div v-if="testResults.tests" class="divide-dividerLight divide-y-4">
  24. <HttpTestResultEntry
  25. v-for="(result, index) in testResults.tests"
  26. :key="`result-${index}`"
  27. :test-results="result"
  28. />
  29. </div>
  30. <div
  31. v-if="testResults.expectResults"
  32. class="divide-dividerLight divide-y"
  33. >
  34. <HttpTestResultReport
  35. v-if="testResults.expectResults.length"
  36. :test-results="testResults"
  37. />
  38. <div
  39. v-for="(result, index) in testResults.expectResults"
  40. :key="`result-${index}`"
  41. class="flex py-2 px-4 items-center"
  42. >
  43. <i
  44. class="mr-4 material-icons"
  45. :class="
  46. result.status === 'pass' ? 'text-green-500' : 'text-red-500'
  47. "
  48. >
  49. {{ result.status === "pass" ? "check" : "close" }}
  50. </i>
  51. <span v-if="result.message" class="text-secondaryDark">
  52. {{ result.message }}
  53. </span>
  54. <span class="text-secondaryLight">
  55. {{
  56. ` \xA0 — \xA0 ${
  57. result.status === "pass" ? t("test.passed") : t("test.failed")
  58. }`
  59. }}
  60. </span>
  61. </div>
  62. </div>
  63. </div>
  64. </div>
  65. <div
  66. v-else
  67. class="flex flex-col text-secondaryLight p-4 items-center justify-center"
  68. >
  69. <img
  70. :src="`/images/states/${$colorMode.value}/validation.svg`"
  71. loading="lazy"
  72. class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
  73. :alt="`${t('empty.tests')}`"
  74. />
  75. <span class="text-center pb-2">
  76. {{ t("empty.tests") }}
  77. </span>
  78. <span class="text-center pb-4">
  79. {{ t("helpers.tests") }}
  80. </span>
  81. <ButtonSecondary
  82. outline
  83. :label="`${t('action.learn_more')}`"
  84. to="https://docs.hoppscotch.io/features/tests"
  85. blank
  86. svg="external-link"
  87. reverse
  88. class="my-4"
  89. />
  90. </div>
  91. </AppSection>
  92. </template>
  93. <script setup lang="ts">
  94. import { useReadonlyStream, useI18n } from "~/helpers/utils/composables"
  95. import { restTestResults$, setRESTTestResults } from "~/newstore/RESTSession"
  96. const t = useI18n()
  97. const testResults = useReadonlyStream(restTestResults$, null)
  98. const clearContent = () => setRESTTestResults(null)
  99. </script>