💄 add tests section to UI

pages/index.vue

@@ -117,7 +117,8 @@
                   :source="validContentTypes"
                   :spellcheck="false"
                   v-model="contentType"
-                  >Content Type</autocomplete
+                >Content Type
+                </autocomplete
                 >
               </li>
             </ul>
@@ -282,6 +283,26 @@
                 >close</i
                 >
               </button>
+              <button
+                :class="'icon' + (showPreRequestScript ? ' info-response' : '')"
+                id="preRequestScriptButto"
+                v-tooltip.bottom="{
+                  content: !testsEnabled
+                    ? 'Enable Tests'
+                    : 'Disable Tests'
+                }"
+                @click="testsEnabled = !testsEnabled"
+              >
+                <i
+                  class="material-icons"
+                  :class="testsEnabled"
+                  v-if="!testsEnabled"
+                >code</i
+                >
+                <i class="material-icons" :class="testsEnabled" v-else
+                >close</i
+                >
+              </button>
             </span>
             <span>
               <button
@@ -315,6 +336,43 @@
             </span>
           </div>
         </pw-section>
+        <pw-section
+          v-if="testsEnabled"
+          class="orange"
+          label="Tests"
+          ref="postRequestTests"
+        >
+          <ul>
+            <li>
+              <div class="flex-wrap">
+                <label for="generatedCode">{{ $t("javascript_code") }}</label>
+                <div>
+                  <a
+                    href="https://github.com/liyasthomas/postwoman/wiki/Post-Request-Tests"
+                    target="_blank"
+                    rel="noopener"
+                  >
+                    <button class="icon" v-tooltip="$t('wiki')">
+                      <i class="material-icons">help</i>
+                    </button>
+                  </a>
+                </div>
+              </div>
+              <Editor
+                v-model="postRequestTests"
+                :lang="'javascript'"
+                :options="{
+                  maxLines: responseBodyMaxLines,
+                  minLines: '16',
+                  fontSize: '16px',
+                  autoScrollEditorIntoView: true,
+                  showPrintMargin: false,
+                  useWorker: false
+                }"
+              />
+            </li>
+          </ul>
+        </pw-section>
 
         <section id="options">
           <input id="tab-one" type="radio" name="options" checked="checked"/>
@@ -1206,7 +1264,9 @@ export default {
       return {
         showModal: false,
         showPreRequestScript: false,
+        testsEnabled: false,
         preRequestScript: "// pw.env.set('variable', 'value');",
+        postRequestTests: "// pw.expect('variable').toBe('value);",
         copyButton: '<i class="material-icons">file_copy</i>',
         downloadButton: '<i class="material-icons">get_app</i>',
         doneButton: '<i class="material-icons">done</i>',
@@ -2241,7 +2301,8 @@ export default {
               text: `Postwoman • API request builder at ${time} on ${date}`,
               url: window.location.href
             })
-          .then(() => {})
+            .then(() => {
+            })
             .catch(console.error);
         } else {
           const dummy = document.createElement("input");