refactor: update test components to use setup scripts

components/http/TestResult.vue

@@ -120,36 +120,26 @@
   </AppSection>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api"
+import { computed } from "@nuxtjs/composition-api"
 import { useReadonlyStream } from "~/helpers/utils/composables"
 import { restTestResults$, setRESTTestResults } from "~/newstore/RESTSession"
 
-export default defineComponent({
+const testResults = useReadonlyStream(restTestResults$, null)
-  setup() {
+
-    return {
+const totalTests = computed(() => testResults.value?.expectResults.length)
-      testResults: useReadonlyStream(restTestResults$, null),
+const failedTests = computed(
-    }
+  () =>
-  },
+    testResults.value?.expectResults.filter(
-  computed: {
+      (result: { status: string }) => result.status === "fail"
-    totalTests(): number | undefined {
+    ).length
-      return this.testResults?.expectResults.length
+)
-    },
+const passedTests = computed(
-    failedTests(): number | undefined {
+  () =>
-      return this.testResults?.expectResults.filter(
+    testResults.value?.expectResults.filter(
-        (result: { status: string }) => result.status === "fail"
+      (result: { status: string }) => result.status === "pass"
-      ).length
+    ).length
-    },
+)
-    passedTests(): number | undefined {
+
-      return this.testResults?.expectResults.filter(
+const clearContent = () => setRESTTestResults(null)
-        (result: { status: string }) => result.status === "pass"
-      ).length
-    },
-  },
-  methods: {
-    clearContent() {
-      setRESTTestResults(null)
-    },
-  },
-})
 </script>

components/http/Tests.vue

@@ -72,7 +72,7 @@
         </h4>
         <div class="flex flex-col pt-4">
           <TabSecondary
-            v-for="(snippet, index) in snippets"
+            v-for="(snippet, index) in testSnippets"
             :key="`snippet-${index}`"
             :label="snippet.name"
             active
@@ -84,29 +84,17 @@
   </AppSection>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api"
 import { useTestScript } from "~/newstore/RESTSession"
 import testSnippets from "~/helpers/testSnippets"
 
-export default defineComponent({
+const testScript = useTestScript()
-  setup() {
-    const testScript = useTestScript()
 
-    const useSnippet = (script: string) => {
+const useSnippet = (script: string) => {
-      testScript.value += script
+  testScript.value += script
-    }
+}
 
-    const clearContent = () => {
+const clearContent = () => {
-      testScript.value = ""
+  testScript.value = ""
-    }
+}
-
-    return {
-      testScript,
-      snippets: testSnippets,
-      useSnippet,
-      clearContent,
-    }
-  },
-})
 </script>