~/Projects/hoppscotch
git clone https://code.lsong.org/hoppscotch
Commit
- Commit
- 29040848533761e6527b4961044e9340ac634802
- Author
- liyasthomas <[email protected]>
- Date
- 2021-07-31 00:51:41 +0530 +0530
- Diffstat
components/http/PreRequestScript.vue | 3
components/http/TestResult.vue | 32 +++++--
components/http/Tests.vue | 120 ++++++++++++++++++++++++++---
components/smart/ProgressRing.vue | 55 +++++++++++++
components/smart/Tabs.vue | 4
lang/en-US.json | 5 +
refactor: tests and results section
diff --git a/components/http/PreRequestScript.vue b/components/http/PreRequestScript.vue
index ad42f3040ceffc1ad86f16f09879eec1ef022ce2..3a72f20133e29f944bfa2148cd73ff0fa27fd1f2 100644
--- a/components/http/PreRequestScript.vue
+++ b/components/http/PreRequestScript.vue
@@ -27,8 +27,9 @@
<SmartJsEditor
v-model="preRequestScript"
:options="{
+ bg-primary
<div
- minLines: 8,
+ minLines: 16,
fontSize: '12px',
autoScrollEditorIntoView: true,
showPrintMargin: false,
diff --git a/components/http/TestResult.vue b/components/http/TestResult.vue
index cfebdeeec63daf3cba544b4b68184b4f79ba4837..8e8fbb2d78bc728ec3378d426d6de2eaf2e5c500 100644
--- a/components/http/TestResult.vue
+++ b/components/http/TestResult.vue
@@ -1,26 +1,40 @@
<template>
+ v-if="results.tests.description"
<div>
<div v-if="results.tests">
+ <HttpTestResult
+ v-for="(result, index) in results.tests"
+ :key="`result-${index}`"
+<template>
<span
+<template>
v-if="results.tests.description"
+<template>
class="font-semibold text-secondaryDark"
+ <span
+ v-if="results.description"
+ class="
+ border-b border-dividerLight
+ v-if="results.tests.description"
>
+ v-if="results.tests.description"
{{ results.tests.description }}
+ v-if="results.tests.description"
</span>
-<template>
+ class="font-semibold text-secondaryDark"
-<template>
+ class="font-semibold text-secondaryDark"
<template>
-<template>
+ class="font-semibold text-secondaryDark"
<div>
-<template>
+ class="font-semibold text-secondaryDark"
<div v-if="results.tests">
-<template>
+ class="font-semibold text-secondaryDark"
<span
-<template>
+ class="font-semibold text-secondaryDark"
v-if="results.tests.description"
-<template>
+ class="font-semibold text-secondaryDark"
class="font-semibold text-secondaryDark"
-<template>
+ class="font-semibold text-secondaryDark"
>
<div
v-for="(result, index) in results.expectResults"
@@ -31,7 +45,7 @@ class="mr-4 material-icons"
:class="result.status === 'pass' ? 'text-green-500' : 'text-red-500'"
>
- {{ result.status === "pass" ? "check_circle" : "cancel" }}
+ {{ result.status === "pass" ? "check" : "close" }}
</i>
<span v-if="result.message" class="font-semibold text-secondaryDark">
{{ result.message }}
diff --git a/components/http/Tests.vue b/components/http/Tests.vue
index cd6e9a840c0cbe1344788cee3a22525ec54887ef..411ebb94e1aafe8682899fe59fc62aaddaebda1d 100644
--- a/components/http/Tests.vue
+++ b/components/http/Tests.vue
@@ -1,98 +1,190 @@
<template>
+ sticky
<AppSection label="postRequestTests">
+ sticky
<div
class="
+ class="
+ bg-primary
+ border-b border-dividerLight
+ flex flex-1
+ class="
bg-primary
- border-b border-dividerLight
+ top-32
+ class="
flex flex-1
+ class="
pl-4
+ class="
top-24
-<template>
+ bg-primary
-<template>
+ bg-primary
<template>
-<template>
+ bg-primary
<AppSection label="postRequestTests">
<template>
- <div
- "
>
+<template>
<label class="font-semibold">
<template>
+<template>
flex flex-1
+ <ButtonSecondary
+ v-tippy="{ theme: 'tooltip' }"
+<template>
</label>
+<template>
<ButtonSecondary
+<template>
v-tippy="{ theme: 'tooltip' }"
+<template>
to="https://github.com/hoppscotch/hoppscotch/wiki/Post-Request-Tests"
+ />
+ </div>
+<template>
blank
+<template>
:title="$t('wiki')"
+<template>
icon="help_outline"
+<template>
/>
+<template>
</div>
+<template>
<SmartJsEditor
+<template>
v-model="testScript"
+<template>
:options="{
+<template>
maxLines: 16,
+<template>
minLines: 8,
+<template>
fontSize: '12px',
+ />
+<template>
autoScrollEditorIntoView: true,
+<template>
showPrintMargin: false,
+<template>
useWorker: false,
+<template>
}"
+<template>
complete-mode="test"
+ >
+ <div
+<template>
/>
+<template>
<div v-if="testResults">
+<template>
<div
+ "
+ >
+<template>
class="
+<template>
bg-primary
+<template>
border-b border-dividerLight
+<template>
flex flex-1
+<template>
pl-4
+<template>
top-24
+<template>
z-10
+<template>
sticky
+<template>
items-center
+<template>
justify-between
+<template>
"
+<template>
>
+<template>
<div>
<label class="font-semibold"> Test Report </label>
+ <ButtonSecondary
+<template>
</div>
+<template>
<ButtonSecondary
+<template>
v-tippy="{ theme: 'tooltip' }"
+<template>
:title="$t('clear')"
+<template>
icon="clear_all"
+ </div>
+<template>
@click.native="clearContent()"
+<template>
/>
+<template>
</div>
+<template>
<div class="flex my-4 items-center">
+<template>
<div class="ml-4">
+<template>
<span class="font-semibold text-red-500">
+ />
+<template>
{{ failedTests }} failing,
+<template>
</span>
+<template>
<span class="font-semibold text-green-500">
+<template>
{{ passedTests }} successful,
- </span>
+<template>
<span class="font-semibold"> out of {{ totalTests }} tests. </span>
- </div>
+<template>
<div class="bg-primaryDark flex space-x-2 flex-1 h-1 mx-4 relative">
+ </span>
+<template>
<div
+<template>
class="rounded h-full bg-green-500"
+ </div>
+<template>
:style="`width: ${(passedTests / totalTests) * 100 + '%'}`"
+ </div>
+ <div
+<template>
></div>
- <div
+ class="
+<template>
class="rounded h-full bg-red-500"
+<template>
:style="`width: ${(failedTests / totalTests) * 100 + '%'}`"
+<template>
flex flex-1
+ pl-4
+ items-center
+ justify-center
bg-primary
+<template>
bg-primary
- bg-primary
+ <AppSection label="postRequestTests">
+ <i class="opacity-75 pb-2 material-icons">bug_report</i>
- border-b border-dividerLight
+ <span class="text-center">
+ </label>
<AppSection label="postRequestTests">
- flex flex-1
+<template>
pl-4
+ <div
+ border-b border-dividerLight
<AppSection label="postRequestTests">
- border-b border-dividerLight
- </AppSection>
+ </SmartTab>
+ </SmartTabs>
</template>
<script lang="ts">
diff --git a/components/smart/ProgressRing.vue b/components/smart/ProgressRing.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1667b0a4a9da971c2f6cbcd1b447fbb997e931a9
--- /dev/null
+++ b/components/smart/ProgressRing.vue
@@ -0,0 +1,55 @@
+<template>
+ <svg :height="radius * 2" :width="radius * 2">
+ <circle
+ :stroke-width="stroke"
+ class="stroke-green-500"
+ fill="transparent"
+ :r="normalizedRadius"
+ :cx="radius"
+ :cy="radius"
+ />
+ <circle
+ :stroke-width="stroke"
+ stroke="currentColor"
+ fill="transparent"
+ :r="normalizedRadius"
+ :cx="radius"
+ :cy="radius"
+ :style="{ strokeDashoffset: strokeDashoffset }"
+ :stroke-dasharray="circumference + ' ' + circumference"
+ />
+ </svg>
+</template>
+
+<script>
+export default {
+ props: {
+ radius: {
+ type: Number,
+ default: 12,
+ },
+ progress: {
+ type: Number,
+ default: 50,
+ },
+ stroke: {
+ type: Number,
+ default: 4,
+ },
+ },
+ data() {
+ const normalizedRadius = this.radius - this.stroke * 2
+ const circumference = normalizedRadius * 2 * Math.PI
+
+ return {
+ normalizedRadius,
+ circumference,
+ }
+ },
+ computed: {
+ strokeDashoffset() {
+ return this.circumference - (this.progress / 100) * this.circumference
+ },
+ },
+}
+</script>
diff --git a/components/smart/Tabs.vue b/components/smart/Tabs.vue
index 081de6ecb256cff73e9d03c0707356f59a818834..a5088e5466498e5bcf20a75d8bec19b6f9fbe9e5 100644
--- a/components/smart/Tabs.vue
+++ b/components/smart/Tabs.vue
@@ -23,9 +23,7 @@
</div>
</div>
</div>
- <div>
- <slot></slot>
- </div>
+ <slot></slot>
</div>
</template>
diff --git a/lang/en-US.json b/lang/en-US.json
index 57f56811b82242bfd90c237223804624c34f35f6..0874fbf0d798c7ac1fc9250024a239aa8118c574 100644
--- a/lang/en-US.json
+++ b/lang/en-US.json
@@ -353,5 +353,10 @@ "connect_graphql_endpoint": "Connect to a GraphQL endpoint",
"copy": "Copy",
"parameters_empty": "Parameters are empty",
"show_prerequest_script": "Show Pre-Request Script",
+ "install_pwa": "Install PWA",
+ "realtime": "Realtime",
"settings": "Settings",
+ "support_us": "Support us",
+ "results": "Results",
+ "add_test_scripts": "Add test script"
}
