Custom methods support (#400)

Custom methods support

Co-authored-by: Liyas Thomas <liyasthomas@gmail.com>

assets/css/styles.scss

@@ -706,9 +706,9 @@ ol li {
 }
 
 #send {
-  #hidden-message {
-    display: none;
-  }
+  // #hidden-message {
+  //   display: none;
+  // }
 
   &.show {
     display: flex;
@@ -717,10 +717,10 @@ ol li {
     right: 12px;
     z-index: 2;
 
-    #hidden-message {
-      display: block;
-      margin-left: 4px;
-    }
+    // #hidden-message {
+    //   display: block;
+    //   margin-left: 4px;
+    // }
   }
 }
 

pages/index.vue

@@ -44,7 +44,28 @@
           <ul>
             <li>
               <label for="method">{{ $t("method") }}</label>
-              <select id="method" v-model="method" @change="methodChange">
+              <input
+                id="method"
+                name="method"
+                type="text"
+                v-model="method"
+                @change="methodChange"
+                value="GET"
+                placeholder="GET"
+                list="preMethods"
+              />
+              <datalist id="preMethods">
+                <option value="GET">GET</option>
+                <option value="HEAD">HEAD</option>
+                <option value="POST">POST</option>
+                <option value="PUT">PUT</option>
+                <option value="DELETE">DELETE</option>
+                <option value="CONNECT">CONNECT</option>
+                <option value="OPTIONS">OPTIONS</option>
+                <option value="TRACE">TRACE</option>
+                <option value="PATCH">PATCH</option>
+              </datalist>
+              <!-- <select id="method" v-model="method" @change="methodChange">
                 <option>GET</option>
                 <option>HEAD</option>
                 <option>POST</option>
@@ -52,7 +73,8 @@
                 <option>DELETE</option>
                 <option>OPTIONS</option>
                 <option>PATCH</option>
-              </select>
+                <option>LIST</option>
+              </select> -->
             </li>
             <li>
               <label for="url">{{ $t("url") }}</label>
@@ -102,7 +124,7 @@
                   ref="sendButton"
                 >
                   {{ $t("send") }}
-                  <span id="hidden-message">{{ $t("again") }}</span>
+                  <!-- <span id="hidden-message">{{ $t("again") }}</span> -->
                   <span>
                     <i class="material-icons">send</i>
                   </span>

tests/e2e/integration/app.starter.spec.js

@@ -0,0 +1,7 @@
+describe('Visit home', () => {
+  it('Have a page title with "Postwoman"', () => {
+    cy.visit('/')
+      .get('title')
+      .should('contain','Postwoman')
+  })
+})

tests/e2e/integration/feature.url-queries.spec.js

@@ -3,7 +3,7 @@ describe('Methods', () => {
   methods.forEach((method) => {
       it(`Change the default method GET to ${method} with url query`, () => {
         cy.visit(`/?method=${method}`)
-          .get('#method').contains(method)
+          .get('#method').should('have.value', method)
       })
   })
 })