btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

💄 add tests section to UI

Browse Source
This commit is contained in:
Nicholas Palenchar
2020-01-18 12:06:45 -05:00
parent b8beac37c3
commit 3ecf62857c
1 changed files with 1617 additions and 1556 deletions
Download Patch File Download Diff File Expand all files Collapse all files

207
pages/index.vue
View File

@@ -117,7 +117,8 @@
:source="validContentTypes" :source="validContentTypes"
:spellcheck="false" :spellcheck="false"
v-model="contentType" v-model="contentType"
>Content Type</autocomplete >Content Type
</autocomplete
> >
</li> </li>
</ul> </ul>
@@ -282,6 +283,26 @@
>close</i >close</i
> >
</button> </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>
<span> <span>
<button <button
@@ -315,9 +336,46 @@
</span> </span>
</div> </div>
</pw-section> </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"> <section id="options">
<input id="tab-one" type="radio" name="options" checked="checked" /> <input id="tab-one" type="radio" name="options" checked="checked"/>
<label for="tab-one">{{ $t("authentication") }}</label> <label for="tab-one">{{ $t("authentication") }}</label>
<div class="tab"> <div class="tab">
<pw-section <pw-section
@@ -545,7 +603,7 @@
</ul> </ul>
</pw-section> </pw-section>
</div> </div>
<input id="tab-two" type="radio" name="options" /> <input id="tab-two" type="radio" name="options"/>
<label for="tab-two">{{ $t("headers") }}</label> <label for="tab-two">{{ $t("headers") }}</label>
<div class="tab"> <div class="tab">
<pw-section class="orange" label="Headers" ref="headers"> <pw-section class="orange" label="Headers" ref="headers">
@@ -627,7 +685,7 @@
</ul> </ul>
</pw-section> </pw-section>
</div> </div>
<input id="tab-three" type="radio" name="options" /> <input id="tab-three" type="radio" name="options"/>
<label for="tab-three">{{ $t("parameters") }}</label> <label for="tab-three">{{ $t("parameters") }}</label>
<div class="tab"> <div class="tab">
<pw-section class="pink" label="Parameters" ref="parameters"> <pw-section class="pink" label="Parameters" ref="parameters">
@@ -745,7 +803,7 @@
<ul v-for="(value, key) in response.headers" :key="key"> <ul v-for="(value, key) in response.headers" :key="key">
<li> <li>
<label :for="key">{{ key }}</label> <label :for="key">{{ key }}</label>
<input :id="key" :value="value" :name="key" readonly /> <input :id="key" :value="value" :name="key" readonly/>
</li> </li>
</ul> </ul>
<ul v-if="response.body"> <ul v-if="response.body">
@@ -830,12 +888,12 @@
</div> </div>
<aside v-if="activeSidebar" class="sticky-inner inner-right"> <aside v-if="activeSidebar" class="sticky-inner inner-right">
<section> <section>
<input id="history-tab" type="radio" name="side" checked="checked" /> <input id="history-tab" type="radio" name="side" checked="checked"/>
<label for="history-tab">{{ $t("history") }}</label> <label for="history-tab">{{ $t("history") }}</label>
<div class="tab"> <div class="tab">
<history @useHistory="handleUseHistory" ref="historyComponent" /> <history @useHistory="handleUseHistory" ref="historyComponent"/>
</div> </div>
<input id="collection-tab" type="radio" name="side" /> <input id="collection-tab" type="radio" name="side"/>
<label for="collection-tab">{{ $t("collections") }}</label> <label for="collection-tab">{{ $t("collections") }}</label>
<div class="tab"> <div class="tab">
<pw-section <pw-section
@@ -843,7 +901,7 @@
:label="$t('collections')" :label="$t('collections')"
ref="collections" ref="collections"
> >
<collections /> <collections/>
</pw-section> </pw-section>
</div> </div>
</section> </section>
@@ -1000,7 +1058,7 @@
/> />
</li> </li>
<li> <li>
<input :value="token.value" readonly /> <input :value="token.value" readonly/>
</li> </li>
<div class="flex-wrap"> <div class="flex-wrap">
<li> <li>
@@ -1093,7 +1151,7 @@
<ul> <ul>
<li> <li>
<label for="token-req-name">{{ $t("token_req_name") }}</label> <label for="token-req-name">{{ $t("token_req_name") }}</label>
<input v-model="tokenReqName" /> <input v-model="tokenReqName"/>
</li> </li>
</ul> </ul>
<ul> <ul>
@@ -1126,18 +1184,18 @@
</template> </template>
<script> <script>
import section from "../components/section"; import section from "../components/section";
import url from "url"; import url from "url";
import querystring from "querystring"; import querystring from "querystring";
import textareaAutoHeight from "../directives/textareaAutoHeight"; import textareaAutoHeight from "../directives/textareaAutoHeight";
import parseCurlCommand from "../assets/js/curlparser.js"; import parseCurlCommand from "../assets/js/curlparser.js";
import getEnvironmentVariablesFromScript from "../functions/preRequest"; import getEnvironmentVariablesFromScript from "../functions/preRequest";
import parseTemplateString from "../functions/templating"; import parseTemplateString from "../functions/templating";
import AceEditor from "../components/ace-editor"; import AceEditor from "../components/ace-editor";
import { tokenRequest, oauthRedirect } from "../assets/js/oauth"; import {tokenRequest, oauthRedirect} from "../assets/js/oauth";
import { sendNetworkRequest } from "../functions/network"; import {sendNetworkRequest} from "../functions/network";
const statusCategories = [ const statusCategories = [
{ {
name: "informational", name: "informational",
statusCodeRegex: new RegExp(/[1][0-9]+/), statusCodeRegex: new RegExp(/[1][0-9]+/),
@@ -1169,8 +1227,8 @@ const statusCategories = [
statusCodeRegex: new RegExp(/.*/), statusCodeRegex: new RegExp(/.*/),
className: "missing-data-response" className: "missing-data-response"
} }
]; ];
const parseHeaders = xhr => { const parseHeaders = xhr => {
const headers = xhr const headers = xhr
.getAllResponseHeaders() .getAllResponseHeaders()
.trim() .trim()
@@ -1183,11 +1241,11 @@ const parseHeaders = xhr => {
headerMap[header] = value; headerMap[header] = value;
}); });
return headerMap; return headerMap;
}; };
export const findStatusGroup = responseStatus => export const findStatusGroup = responseStatus =>
statusCategories.find(status => status.statusCodeRegex.test(responseStatus)); statusCategories.find(status => status.statusCodeRegex.test(responseStatus));
export default { export default {
directives: { directives: {
textareaAutoHeight textareaAutoHeight
}, },
@@ -1206,7 +1264,9 @@ export default {
return { return {
showModal: false, showModal: false,
showPreRequestScript: false, showPreRequestScript: false,
testsEnabled: false,
preRequestScript: "// pw.env.set('variable', 'value');", preRequestScript: "// pw.env.set('variable', 'value');",
postRequestTests: "// pw.expect('variable').toBe('value);",
copyButton: '<i class="material-icons">file_copy</i>', copyButton: '<i class="material-icons">file_copy</i>',
downloadButton: '<i class="material-icons">get_app</i>', downloadButton: '<i class="material-icons">get_app</i>',
doneButton: '<i class="material-icons">done</i>', doneButton: '<i class="material-icons">done</i>',
@@ -1395,7 +1455,7 @@ export default {
if (status && this.rawParams === "") this.rawParams = "{}"; if (status && this.rawParams === "") this.rawParams = "{}";
else this.setRouteQueryState(); else this.setRouteQueryState();
}, },
"response.body": function(val) { "response.body": function (val) {
if ( if (
this.response.body === this.$t("waiting_send_req") || this.response.body === this.$t("waiting_send_req") ||
this.response.body === this.$t("loading") this.response.body === this.$t("loading")
@@ -1419,15 +1479,15 @@ export default {
} }
}, },
params: { params: {
handler: function(newValue) { handler: function (newValue) {
if (!this.paramsWatchEnabled) { if (!this.paramsWatchEnabled) {
this.paramsWatchEnabled = true; this.paramsWatchEnabled = true;
return; return;
} }
let path = this.path; let path = this.path;
let queryString = newValue let queryString = newValue
.filter(({ key }) => !!key) .filter(({key}) => !!key)
.map(({ key, value }) => `${key}=${value}`) .map(({key, value}) => `${key}=${value}`)
.join("&"); .join("&");
queryString = queryString === "" ? "" : `?${queryString}`; queryString = queryString === "" ? "" : `?${queryString}`;
if (path.includes("?")) { if (path.includes("?")) {
@@ -1470,7 +1530,7 @@ export default {
return this.$store.state.request.url; return this.$store.state.request.url;
}, },
set(value) { set(value) {
this.$store.commit("setState", { value, attribute: "url" }); this.$store.commit("setState", {value, attribute: "url"});
} }
}, },
method: { method: {
@@ -1478,7 +1538,7 @@ export default {
return this.$store.state.request.method; return this.$store.state.request.method;
}, },
set(value) { set(value) {
this.$store.commit("setState", { value, attribute: "method" }); this.$store.commit("setState", {value, attribute: "method"});
} }
}, },
path: { path: {
@@ -1486,7 +1546,7 @@ export default {
return this.$store.state.request.path; return this.$store.state.request.path;
}, },
set(value) { set(value) {
this.$store.commit("setState", { value, attribute: "path" }); this.$store.commit("setState", {value, attribute: "path"});
} }
}, },
label: { label: {
@@ -1494,7 +1554,7 @@ export default {
return this.$store.state.request.label; return this.$store.state.request.label;
}, },
set(value) { set(value) {
this.$store.commit("setState", { value, attribute: "label" }); this.$store.commit("setState", {value, attribute: "label"});
} }
}, },
auth: { auth: {
@@ -1502,7 +1562,7 @@ export default {
return this.$store.state.request.auth; return this.$store.state.request.auth;
}, },
set(value) { set(value) {
this.$store.commit("setState", { value, attribute: "auth" }); this.$store.commit("setState", {value, attribute: "auth"});
} }
}, },
httpUser: { httpUser: {
@@ -1510,7 +1570,7 @@ export default {
return this.$store.state.request.httpUser; return this.$store.state.request.httpUser;
}, },
set(value) { set(value) {
this.$store.commit("setState", { value, attribute: "httpUser" }); this.$store.commit("setState", {value, attribute: "httpUser"});
} }
}, },
httpPassword: { httpPassword: {
@@ -1518,7 +1578,7 @@ export default {
return this.$store.state.request.httpPassword; return this.$store.state.request.httpPassword;
}, },
set(value) { set(value) {
this.$store.commit("setState", { value, attribute: "httpPassword" }); this.$store.commit("setState", {value, attribute: "httpPassword"});
} }
}, },
bearerToken: { bearerToken: {
@@ -1526,7 +1586,7 @@ export default {
return this.$store.state.request.bearerToken; return this.$store.state.request.bearerToken;
}, },
set(value) { set(value) {
this.$store.commit("setState", { value, attribute: "bearerToken" }); this.$store.commit("setState", {value, attribute: "bearerToken"});
} }
}, },
tokens: { tokens: {
@@ -1534,7 +1594,7 @@ export default {
return this.$store.state.oauth2.tokens; return this.$store.state.oauth2.tokens;
}, },
set(value) { set(value) {
this.$store.commit("setOAuth2", { value, attribute: "tokens" }); this.$store.commit("setOAuth2", {value, attribute: "tokens"});
} }
}, },
tokenReqs: { tokenReqs: {
@@ -1542,7 +1602,7 @@ export default {
return this.$store.state.oauth2.tokenReqs; return this.$store.state.oauth2.tokenReqs;
}, },
set(value) { set(value) {
this.$store.commit("setOAuth2", { value, attribute: "tokenReqs" }); this.$store.commit("setOAuth2", {value, attribute: "tokenReqs"});
} }
}, },
tokenReqSelect: { tokenReqSelect: {
@@ -1550,7 +1610,7 @@ export default {
return this.$store.state.oauth2.tokenReqSelect; return this.$store.state.oauth2.tokenReqSelect;
}, },
set(value) { set(value) {
this.$store.commit("setOAuth2", { value, attribute: "tokenReqSelect" }); this.$store.commit("setOAuth2", {value, attribute: "tokenReqSelect"});
} }
}, },
tokenReqName: { tokenReqName: {
@@ -1558,7 +1618,7 @@ export default {
return this.$store.state.oauth2.tokenReqName; return this.$store.state.oauth2.tokenReqName;
}, },
set(value) { set(value) {
this.$store.commit("setOAuth2", { value, attribute: "tokenReqName" }); this.$store.commit("setOAuth2", {value, attribute: "tokenReqName"});
} }
}, },
accessTokenName: { accessTokenName: {
@@ -1588,7 +1648,7 @@ export default {
return this.$store.state.oauth2.authUrl; return this.$store.state.oauth2.authUrl;
}, },
set(value) { set(value) {
this.$store.commit("setOAuth2", { value, attribute: "authUrl" }); this.$store.commit("setOAuth2", {value, attribute: "authUrl"});
} }
}, },
accessTokenUrl: { accessTokenUrl: {
@@ -1596,7 +1656,7 @@ export default {
return this.$store.state.oauth2.accessTokenUrl; return this.$store.state.oauth2.accessTokenUrl;
}, },
set(value) { set(value) {
this.$store.commit("setOAuth2", { value, attribute: "accessTokenUrl" }); this.$store.commit("setOAuth2", {value, attribute: "accessTokenUrl"});
} }
}, },
clientId: { clientId: {
@@ -1604,7 +1664,7 @@ export default {
return this.$store.state.oauth2.clientId; return this.$store.state.oauth2.clientId;
}, },
set(value) { set(value) {
this.$store.commit("setOAuth2", { value, attribute: "clientId" }); this.$store.commit("setOAuth2", {value, attribute: "clientId"});
} }
}, },
scope: { scope: {
@@ -1612,7 +1672,7 @@ export default {
return this.$store.state.oauth2.scope; return this.$store.state.oauth2.scope;
}, },
set(value) { set(value) {
this.$store.commit("setOAuth2", { value, attribute: "scope" }); this.$store.commit("setOAuth2", {value, attribute: "scope"});
} }
}, },
state: { state: {
@@ -1620,7 +1680,7 @@ export default {
return this.$store.state.oauth2.state; return this.$store.state.oauth2.state;
}, },
set(value) { set(value) {
this.$store.commit("setOAuth2", { value, attribute: "state" }); this.$store.commit("setOAuth2", {value, attribute: "state"});
} }
}, },
headers: { headers: {
@@ -1628,7 +1688,7 @@ export default {
return this.$store.state.request.headers; return this.$store.state.request.headers;
}, },
set(value) { set(value) {
this.$store.commit("setState", { value, attribute: "headers" }); this.$store.commit("setState", {value, attribute: "headers"});
} }
}, },
params: { params: {
@@ -1636,7 +1696,7 @@ export default {
return this.$store.state.request.params; return this.$store.state.request.params;
}, },
set(value) { set(value) {
this.$store.commit("setState", { value, attribute: "params" }); this.$store.commit("setState", {value, attribute: "params"});
} }
}, },
bodyParams: { bodyParams: {
@@ -1644,7 +1704,7 @@ export default {
return this.$store.state.request.bodyParams; return this.$store.state.request.bodyParams;
}, },
set(value) { set(value) {
this.$store.commit("setState", { value, attribute: "bodyParams" }); this.$store.commit("setState", {value, attribute: "bodyParams"});
} }
}, },
rawParams: { rawParams: {
@@ -1652,7 +1712,7 @@ export default {
return this.$store.state.request.rawParams; return this.$store.state.request.rawParams;
}, },
set(value) { set(value) {
this.$store.commit("setState", { value, attribute: "rawParams" }); this.$store.commit("setState", {value, attribute: "rawParams"});
} }
}, },
rawInput: { rawInput: {
@@ -1660,7 +1720,7 @@ export default {
return this.$store.state.request.rawInput; return this.$store.state.request.rawInput;
}, },
set(value) { set(value) {
this.$store.commit("setState", { value, attribute: "rawInput" }); this.$store.commit("setState", {value, attribute: "rawInput"});
} }
}, },
requestType: { requestType: {
@@ -1668,7 +1728,7 @@ export default {
return this.$store.state.request.requestType; return this.$store.state.request.requestType;
}, },
set(value) { set(value) {
this.$store.commit("setState", { value, attribute: "requestType" }); this.$store.commit("setState", {value, attribute: "requestType"});
} }
}, },
contentType: { contentType: {
@@ -1676,7 +1736,7 @@ export default {
return this.$store.state.request.contentType; return this.$store.state.request.contentType;
}, },
set(value) { set(value) {
this.$store.commit("setState", { value, attribute: "contentType" }); this.$store.commit("setState", {value, attribute: "contentType"});
} }
}, },
passwordFieldType: { passwordFieldType: {
@@ -1726,14 +1786,14 @@ export default {
return this.path.match(/^([^?]*)\??/)[1]; return this.path.match(/^([^?]*)\??/)[1];
}, },
rawRequestBody() { rawRequestBody() {
const { bodyParams } = this; const {bodyParams} = this;
if (this.contentType === "application/json") { if (this.contentType === "application/json") {
try { try {
const obj = JSON.parse( const obj = JSON.parse(
`{${bodyParams `{${bodyParams
.filter(({ key }) => !!key) .filter(({key}) => !!key)
.map( .map(
({ key, value }) => ` ({key, value}) => `
"${key}": "${value}" "${key}": "${value}"
` `
) )
@@ -1745,22 +1805,22 @@ export default {
} }
} else { } else {
return bodyParams return bodyParams
.filter(({ key }) => !!key) .filter(({key}) => !!key)
.map(({ key, value }) => `${key}=${encodeURIComponent(value)}`) .map(({key, value}) => `${key}=${encodeURIComponent(value)}`)
.join("&"); .join("&");
} }
}, },
headerString() { headerString() {
const result = this.headers const result = this.headers
.filter(({ key }) => !!key) .filter(({key}) => !!key)
.map(({ key, value }) => `${key}: ${value}`) .map(({key, value}) => `${key}: ${value}`)
.join(",\n"); .join(",\n");
return result === "" ? "" : `${result}`; return result === "" ? "" : `${result}`;
}, },
queryString() { queryString() {
const result = this.params const result = this.params
.filter(({ key }) => !!key) .filter(({key}) => !!key)
.map(({ key, value }) => `${key}=${encodeURIComponent(value)}`) .map(({key, value}) => `${key}=${encodeURIComponent(value)}`)
.join("&"); .join("&");
return result === "" ? "" : `?${result}`; return result === "" ? "" : `?${result}`;
}, },
@@ -2077,7 +2137,7 @@ export default {
); );
const duration = Date.now() - startTime; const duration = Date.now() - startTime;
this.$toast.info(this.$t("finished_in", { duration }), { this.$toast.info(this.$t("finished_in", {duration}), {
icon: "done" icon: "done"
}); });
@@ -2141,7 +2201,7 @@ export default {
action: { action: {
text: "Settings", text: "Settings",
onClick: (e, toastObject) => { onClick: (e, toastObject) => {
this.$router.push({ path: "/settings" }); this.$router.push({path: "/settings"});
} }
} }
}); });
@@ -2192,7 +2252,7 @@ export default {
}); });
}, },
addRequestParam() { addRequestParam() {
this.$store.commit("addParams", { key: "", value: "" }); this.$store.commit("addParams", {key: "", value: ""});
return false; return false;
}, },
removeRequestParam(index) { removeRequestParam(index) {
@@ -2212,7 +2272,7 @@ export default {
}); });
}, },
addRequestBodyParam() { addRequestBodyParam() {
this.$store.commit("addBodyParams", { key: "", value: "" }); this.$store.commit("addBodyParams", {key: "", value: ""});
return false; return false;
}, },
removeRequestBodyParam(index) { removeRequestBodyParam(index) {
@@ -2241,7 +2301,8 @@ export default {
text: `Postwoman • API request builder at ${time} on ${date}`, text: `Postwoman • API request builder at ${time} on ${date}`,
url: window.location.href url: window.location.href
}) })
.then(() => {}) .then(() => {
})
.catch(console.error); .catch(console.error);
} else { } else {
const dummy = document.createElement("input"); const dummy = document.createElement("input");
@@ -2299,7 +2360,7 @@ export default {
}, },
downloadResponse() { downloadResponse() {
const dataToWrite = JSON.stringify(this.response.body, null, 2); const dataToWrite = JSON.stringify(this.response.body, null, 2);
const file = new Blob([dataToWrite], { type: this.responseType }); const file = new Blob([dataToWrite], {type: this.responseType});
const a = document.createElement("a"), const a = document.createElement("a"),
url = URL.createObjectURL(file); url = URL.createObjectURL(file);
a.href = url; a.href = url;
@@ -2627,7 +2688,7 @@ export default {
}); });
} }
}, },
addOAuthToken({ name, value }) { addOAuthToken({name, value}) {
this.$store.commit("addOAuthToken", { this.$store.commit("addOAuthToken", {
name, name,
value value
@@ -2707,7 +2768,7 @@ export default {
}, },
async mounted() { async mounted() {
this.observeRequestButton(); this.observeRequestButton();
this._keyListener = function(e) { this._keyListener = function (e) {
if (e.key === "g" && (e.ctrlKey || e.metaKey)) { if (e.key === "g" && (e.ctrlKey || e.metaKey)) {
e.preventDefault(); e.preventDefault();
this.sendRequest(); this.sendRequest();
@@ -2760,5 +2821,5 @@ export default {
beforeDestroy() { beforeDestroy() {
document.removeEventListener("keydown", this._keyListener); document.removeEventListener("keydown", this._keyListener);
} }
}; };
</script> </script>