feat: test runner stop and delay

hoppscotch · Dec 15, 2023 · 9cbd974 · 9cbd974
1 parent 2bbdf25
commit 9cbd974
Show file tree

Hide file tree

Showing 8 changed files with 390 additions and 71 deletions.
diff --git a/packages/hoppscotch-common/src/components.d.ts b/packages/hoppscotch-common/src/components.d.ts
@@ -155,6 +155,7 @@ declare module 'vue' {
     HttpTestRunnerResult: typeof import('./components/http/test/RunnerResult.vue')['default']
     HttpTests: typeof import('./components/http/Tests.vue')['default']
     HttpTestSelectRequest: typeof import('./components/http/test/SelectRequest.vue')['default']
+    HttpTestTestResult: typeof import('./components/http/test/TestResult.vue')['default']
     HttpURLEncodedParams: typeof import('./components/http/URLEncodedParams.vue')['default']
     IconLucideActivity: typeof import('~icons/lucide/activity')['default']
     IconLucideAlertCircle: typeof import('~icons/lucide/alert-circle')['default']

diff --git a/packages/hoppscotch-common/src/components/http/test/ResultRequest.vue b/packages/hoppscotch-common/src/components/http/test/ResultRequest.vue
@@ -24,7 +24,7 @@
     </button>
   </div>
 
-  <HttpTestResult
+  <HttpTestTestResult
     :show-empty-message="false"
     v-if="request.testResults"
     v-model="request.testResults"

diff --git a/packages/hoppscotch-common/src/components/http/test/Runner.vue b/packages/hoppscotch-common/src/components/http/test/Runner.vue
@@ -14,7 +14,7 @@
               :heading="t('environment.heading')"
               :text="'None'"
             />
-            <HttpTestRunnerMeta :heading="t('test.iterations')" :text="'1'" />
+            <!-- <HttpTestRunnerMeta :heading="t('test.iterations')" :text="'1'" /> -->
             <HttpTestRunnerMeta
               :heading="t('test.duration')"
               :text="'10s 321ms'"
@@ -50,6 +50,8 @@
         <HttpTestRunnerResult
           :config="testRunnerConfig"
           :collection="collection"
+          :stop-running="stopRunningTest"
+          @on-stop-running="stopRunningTest = true"
         />
       </div>
 
@@ -83,7 +85,7 @@ export type TestRunnerConfig = {
 
 const testRunnerConfig = ref<TestRunnerConfig>({
   iterations: 1,
-  delay: 0,
+  delay: 1000,
   stopOnError: false,
   persistResponses: false,
   keepVariableValues: false,

diff --git a/packages/hoppscotch-common/src/components/http/test/RunnerConfig.vue b/packages/hoppscotch-common/src/components/http/test/RunnerConfig.vue
@@ -55,13 +55,6 @@
         <h4 class="font-semibold text-secondaryDark">Run Configuration</h4>
         <div class="mt-4">
           <!-- TODO: fix input component types -->
-          <HoppSmartInput
-            v-model="config.iterations as any"
-            type="number"
-            class="mb-4"
-            :label="t('Iteration')"
-            input-styles="floating-input"
-          />
           <HoppSmartInput
             v-model="config.delay as any"
             type="number"
@@ -130,9 +123,9 @@
 </template>
 
 <script setup lang="ts">
-import { SmartTreeAdapter } from "@hoppscotch/ui/dist/helpers/treeAdapter"
+import { SmartTreeAdapter } from "@hoppscotch/ui/helpers/treeAdapter.ts"
 import { useVModel } from "@vueuse/core"
-import { ref, toRef, computed } from "vue"
+import { ref, toRef } from "vue"
 import { useI18n } from "~/composables/i18n"
 import { HoppTabDocument } from "~/helpers/rest/document"
 import { TestRunnerCollectionsAdapter } from "~/helpers/runner/adapter"

diff --git a/packages/hoppscotch-common/src/components/http/test/RunnerResult.vue b/packages/hoppscotch-common/src/components/http/test/RunnerResult.vue
@@ -4,11 +4,7 @@
     styles="sticky overflow-x-auto flex-shrink-0 bg-primary top-upperRunnerStickyFold z-10"
     render-inactive-tabs
   >
-    <HoppSmartTab
-      :id="'all_tests'"
-      :label="`${t('tab.all_tests')}`"
-      :info="`${8}`"
-    >
+    <HoppSmartTab :id="'all_tests'" :label="`${t('tab.all_tests')}`">
       <div class="flex flex-col justify-center p-4">
         <HoppSmartTree :adapter="collectionAdapter" :expandAll="true">
           <template #content="{ node }">
@@ -40,21 +36,25 @@
         </HoppSmartTree>
       </div>
     </HoppSmartTab>
-    <HoppSmartTab :id="'passed'" :label="`${t('tab.passed')}`" :info="`${3}`">
+    <HoppSmartTab :id="'passed'" :label="`${t('tab.passed')}`">
       tab passed
     </HoppSmartTab>
-    <HoppSmartTab :id="'failed'" :label="`${t('tab.failed')}`" :info="`${5}`">
+    <HoppSmartTab :id="'failed'" :label="`${t('tab.failed')}`">
+      tab failed
     </HoppSmartTab>
   </HoppSmartTabs>
 </template>
 
 <script setup lang="ts">
 import { HoppCollection, HoppRESTRequest } from "@hoppscotch/data"
 import { SmartTreeAdapter } from "@hoppscotch/ui/dist/helpers/treeAdapter"
-import { ref, onMounted, computed, watch } from "vue"
+import { ref, computed, watch } from "vue"
 import { useI18n } from "~/composables/i18n"
 import { TestRunnerCollectionsAdapter } from "~/helpers/runner/adapter"
-import { TestRunnerService } from "~/services/test-runner/test-runner.service"
+import {
+  TestRunnerRequest,
+  TestRunnerService,
+} from "~/services/test-runner/test-runner.service"
 import { useService } from "dioc/vue"
 import { TestRunnerConfig } from "./Runner.vue"
 
@@ -64,45 +64,44 @@ const testRunnerService = useService(TestRunnerService)
 const props = defineProps<{
   collection: HoppCollection<HoppRESTRequest>
   config: TestRunnerConfig
+  stopRunning: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: "onStopRunning"): void
 }>()
 
 const selectedTestTab = ref("all_tests")
 
 const showCheckbox = ref(false)
 
-const runnerState = testRunnerService.runTests(props.collection, props.config)
+const stopRunningTest = computed(() => {
+  console.log("stopRunningTest", props.stopRunning)
+  return props.stopRunning
+})
+
+const runnerState = testRunnerService.runTests(props.collection, {
+  ...props.config,
+  stopRef: stopRunningTest,
+})
+
+const result = ref<HoppCollection<TestRunnerRequest>[]>([])
 
 watch(
   () => runnerState.value,
   () => {
-    console.log(runnerState.value)
+    result.value = [runnerState.value.result]
+    console.log("runnerState", runnerState.value.result)
+    if (runnerState.value.status === "stopped") {
+      console.log("stopped")
+      emit("onStopRunning")
+    }
   },
   {
     deep: true,
   }
 )
 
-const result = computed(() => {
-  return [runnerState.value.result]
-})
-
-// const runTest = async () => {
-//   const state = testRunnerService.runTests(props.collection, props.config)
-//   watch(
-//     () => state,
-//     () => {
-//       runnerState.value = state.value
-//     },
-//     {
-//       deep: true,
-//     }
-//   )
-// }
-
-// onMounted(() => {
-//   runTest()
-// })
-
 const collectionAdapter: SmartTreeAdapter<any> =
   new TestRunnerCollectionsAdapter(result)
 </script>