refactor: init new state for body

components/http/Body.vue

@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <div class="flex flex-1 py-2 items-center justify-between">
+      <tippy
+        ref="contentTypeOptions"
+        interactive
+        tabindex="-1"
+        trigger="click"
+        theme="popover"
+        arrow
+      >
+        <template #trigger>
+          <div class="flex">
+            <span class="select-wrapper">
+              <input
+                id="contentType"
+                v-model="contentType"
+                class="
+                  bg-primary
+                  rounded-lg
+                  flex
+                  font-semibold font-mono
+                  text-xs
+                  w-full
+                  py-2
+                  px-4
+                  transition
+                  truncate
+                  focus:outline-none
+                "
+                readonly
+              />
+            </span>
+          </div>
+        </template>
+        <SmartItem
+          v-for="(contentTypeItem, index) in validContentTypes"
+          :key="`contentTypeItem-${index}`"
+          :label="contentTypeItem"
+          @click.native="
+            contentType = contentTypeItem
+            $refs.contentTypeOptions.tippy().hide()
+          "
+        />
+      </tippy>
+      <SmartToggle :on="rawInput" class="px-4" @change="rawInput = !rawInput">
+        {{ $t("raw_input") }}
+      </SmartToggle>
+    </div>
+    <HttpBodyParameters v-if="!rawInput" :content-type="contentType" />
+    <HttpRawBody v-else :content-type="contentType" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api"
+import { pluckRef } from "~/helpers/utils/composables"
+import { useRESTRequestBody } from "~/newstore/RESTSession"
+import { knownContentTypes } from "~/helpers/utils/contenttypes"
+
+export default defineComponent({
+  setup() {
+    return {
+      contentType: pluckRef(useRESTRequestBody(), "contentType"),
+      rawInput: pluckRef(useRESTRequestBody(), "isRaw"),
+    }
+  },
+  data() {
+    return {
+      validContentTypes: Object.keys(knownContentTypes),
+    }
+  },
+})
+</script>

components/http/BodyParameters.vue

@@ -104,7 +104,7 @@
           @click.native="toggleActive(index, param)"
         />
       </div>
-      <div v-if="contentType === 'multipart/form-data'">
+      <div>
         <label for="attachment" class="p-0">
           <ButtonSecondary
             class="w-full"
@@ -133,10 +133,15 @@
   </AppSection>
 </template>
 
-<script>
-export default {
-  props: {
-    bodyParams: { type: Array, default: () => [] },
+<script lang="ts">
+import { defineComponent, toRef } from "@nuxtjs/composition-api"
+import { useRESTRequestBody } from "~/newstore/RESTSession"
+
+export default defineComponent({
+  setup() {
+    return {
+      bodyParams: toRef(useRESTRequestBody(), "body"),
+    }
   },
   computed: {
     contentType() {
@@ -249,7 +254,7 @@ export default {
       })
     },
   },
-}
+})
 </script>
 
 <style scoped lang="scss">

components/http/RawBody.vue

@@ -18,7 +18,7 @@
       </label>
       <div>
         <ButtonSecondary
-          v-if="rawInput && contentType.endsWith('json')"
+          v-if="contentType.endsWith('json')"
           ref="prettifyRequest"
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('prettify_body')"
@@ -66,43 +66,39 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import { getEditorLangForMimeType } from "~/helpers/editorutils"
+import { pluckRef } from "~/helpers/utils/composables"
+import { useRESTRequestBody } from "~/newstore/RESTSession"
 
-export default {
+export default defineComponent({
   props: {
-    rawParams: { type: String, default: null },
-    contentType: { type: String, default: null },
-    rawInput: { type: Boolean, default: false },
+    contentType: {
+      type: String,
+      required: true,
+    },
   },
-  data() {
+  setup() {
     return {
+      rawParamsBody: pluckRef(useRESTRequestBody(), "body"),
       prettifyIcon: "photo_filter",
     }
   },
   computed: {
-    rawParamsBody: {
-      get() {
-        return this.rawParams
-      },
-      set(value) {
-        this.$emit("update-raw-body", value)
-      },
-    },
     rawInputEditorLang() {
       return getEditorLangForMimeType(this.contentType)
     },
   },
   methods: {
-    clearContent(bodyParams, $event) {
-      this.$emit("clear-content", bodyParams, $event)
+    clearContent() {
+      this.rawParamsBody = ""
     },
     uploadPayload() {
-      this.$emit("update-raw-input", true)
       const file = this.$refs.payload.files[0]
       if (file !== undefined && file !== null) {
         const reader = new FileReader()
         reader.onload = ({ target }) => {
-          this.$emit("update-raw-body", target.result)
+          this.rawParamsBody = target.result
         }
         reader.readAsText(file)
         this.$toast.info(this.$t("file_imported"), {
@@ -128,5 +124,5 @@ export default {
       }
     },
   },
-}
+})
 </script>

components/http/TestResult.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <div v-if="results">
+      <div
+        v-for="(result, index) in results"
+        :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_circle" : "cancel" }}
+        </i>
+        <span
+          v-if="result.message"
+          class="font-semibold text-secondaryDark text-xs"
+        >
+          {{ result.message }}
+        </span>
+        <span class="text-secondaryLight text-xs">
+          {{
+            ` \xA0 — \xA0test ${
+              result.status === "pass" ? $t("passed") : $t("failed")
+            }`
+          }}
+        </span>
+      </div>
+    </div>
+    <div v-if="results.tests">
+      <HttpTestResult
+        v-for="(result, index) in results.expectResults"
+        :key="`result-${index}`"
+        class="divide-y divide-dividerLight"
+        :results="results.expectResults"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from "@vue/composition-api"
+import { HoppTestResult } from "~/helpers/types/HoppTestResult"
+
+export default defineComponent({
+  props: {
+    results: {
+      type: Array as PropType<HoppTestResult>,
+      default: null,
+    },
+  },
+})
+</script>

components/http/Tests.vue

@@ -36,42 +36,45 @@
       }"
       complete-mode="test"
     />
-    <div v-if="testReports.length !== 0">
+    <pre>
+    {{ testResults }}
+    </pre>
+    <div v-if="testResults">
       <div class="flex flex-1 pl-4 items-center justify-between">
-        <label class="font-semibold text-xs"> Test Reports </label>
+        <div>
+          <label class="font-semibold text-xs"> Test Report: </label>
+          <span class="font-semibold text-xs text-red-500">
+            {{ failedTests }} failing,
+          </span>
+          <span class="font-semibold text-xs text-green-500">
+            {{ passedTests }} successful,
+          </span>
+          <span class="font-semibold text-xs text-secondaryDark">
+            out of {{ totalTests }} tests.
+          </span>
+        </div>
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('clear')"
           icon="clear_all"
-          @click.native="clearContent('tests', $event)"
+          @click.native="clearContent()"
         />
       </div>
-      <div
-        v-for="(testReport, index) in testReports"
-        :key="`testReport-${index}`"
-        class="px-4"
-      >
-        <div v-if="testReport.startBlock">
-          <hr />
-          <h4 class="heading">
-            {{ testReport.startBlock }}
-          </h4>
-        </div>
-        <p
-          v-else-if="testReport.result"
-          class="flex font-mono flex-1 text-xs info"
-        >
-          <span :class="testReport.styles.class" class="flex items-center">
-            <i class="text-sm material-icons">
-              {{ testReport.styles.icon }}
-            </i>
-            <span>&nbsp;{{ testReport.result }}</span>
-            <span v-if="testReport.message">
-              <label>: {{ testReport.message }}</label>
-            </span>
-          </span>
-        </p>
-        <div v-else-if="testReport.endBlock"><hr /></div>
+      <div v-if="testResults.expectResults">
+        <HttpTestResult
+          v-for="(result, index) in testResults.expectResults"
+          :key="`result-${index}`"
+          class="divide-y divide-dividerLight"
+          :results="testResults.expectResults"
+        />
+      </div>
+      <div v-if="testResults.tests">
+        <HttpTestResult
+          v-for="(result, index) in testResults.tests"
+          :key="`result-${index}`"
+          class="divide-y divide-dividerLight"
+          :results="testResults.tests"
+        />
       </div>
     </div>
   </AppSection>
@@ -79,7 +82,11 @@
 
 <script lang="ts">
 import { defineComponent } from "@nuxtjs/composition-api"
-import { useTestScript, restTestResults$ } from "~/newstore/RESTSession"
+import {
+  useTestScript,
+  restTestResults$,
+  setRESTTestResults,
+} from "~/newstore/RESTSession"
 import { useReadonlyStream } from "~/helpers/utils/composables"
 
 export default defineComponent({
@@ -87,8 +94,27 @@ export default defineComponent({
     return {
       testScript: useTestScript(),
       testResults: useReadonlyStream(restTestResults$, null),
-      testReports: [],
     }
   },
+  computed: {
+    totalTests() {
+      return this.testResults.expectResults.length
+    },
+    failedTests() {
+      return this.testResults.expectResults.filter(
+        (result) => result.status === "fail"
+      ).length
+    },
+    passedTests() {
+      return this.testResults.expectResults.filter(
+        (result) => result.status === "pass"
+      ).length
+    },
+  },
+  methods: {
+    clearContent() {
+      setRESTTestResults(null)
+    },
+  },
 })
 </script>

components/realtime/Websocket.vue

@@ -177,7 +177,7 @@
   </Splitpanes>
 </template>
 
-<script lang="ts">
+<script>
 import { defineComponent } from "@nuxtjs/composition-api"
 import { Splitpanes, Pane } from "splitpanes"
 import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"