156 lines
4.2 KiB
Vue
156 lines
4.2 KiB
Vue
<template>
|
|
<AppSection :label="$t('test.results')">
|
|
<div
|
|
v-if="
|
|
testResults &&
|
|
(testResults.expectResults.length || testResults.tests.length)
|
|
"
|
|
>
|
|
<div
|
|
class="
|
|
bg-primary
|
|
border-b border-dividerLight
|
|
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('clear')"
|
|
icon="clear_all"
|
|
@click.native="clearContent()"
|
|
/>
|
|
</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="text-red-500">
|
|
{{ failedTests }} failing,
|
|
</span>
|
|
<span v-if="passedTests" class="text-green-500">
|
|
{{ passedTests }} successful,
|
|
</span>
|
|
<span> out of {{ totalTests }} tests. </span>
|
|
</div>
|
|
</div>
|
|
<div class="divide-y divide-dividerLight">
|
|
<div v-if="testResults.tests">
|
|
<HttpTestResult
|
|
v-for="(result, index) in testResults.tests"
|
|
:key="`result-${index}`"
|
|
: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"
|
|
>
|
|
<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
|
|
icon="open_in_new"
|
|
reverse
|
|
/>
|
|
</div>
|
|
</AppSection>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from "@nuxtjs/composition-api"
|
|
import { useReadonlyStream } from "~/helpers/utils/composables"
|
|
import { restTestResults$, setRESTTestResults } from "~/newstore/RESTSession"
|
|
|
|
export default defineComponent({
|
|
setup() {
|
|
return {
|
|
testResults: useReadonlyStream(restTestResults$, null),
|
|
}
|
|
},
|
|
computed: {
|
|
totalTests(): number | undefined {
|
|
return this.testResults?.expectResults.length
|
|
},
|
|
failedTests(): number | undefined {
|
|
return this.testResults?.expectResults.filter(
|
|
(result: { status: string }) => result.status === "fail"
|
|
).length
|
|
},
|
|
passedTests(): number | undefined {
|
|
return this.testResults?.expectResults.filter(
|
|
(result: { status: string }) => result.status === "pass"
|
|
).length
|
|
},
|
|
},
|
|
methods: {
|
|
clearContent() {
|
|
setRESTTestResults(null)
|
|
},
|
|
},
|
|
})
|
|
</script>
|