Moved pre-request script and tests to options tabs
This commit is contained in:
Liyas Thomas
@@ -285,5 +285,7 @@
|
|||||||
"mqtt_topic_title": "Publish / Subscribe topic",
|
"mqtt_topic_title": "Publish / Subscribe topic",
|
||||||
"mqtt_publish": "Publish",
|
"mqtt_publish": "Publish",
|
||||||
"mqtt_subscribe": "Subscribe",
|
"mqtt_subscribe": "Subscribe",
|
||||||
"mqtt_unsubscribe": "Unsubscribe"
|
"mqtt_unsubscribe": "Unsubscribe",
|
||||||
|
"pre_request_script": "Pre-request Script",
|
||||||
|
"tests": "Tests"
|
||||||
}
|
}
|
||||||
|
|||||||
413
pages/index.vue
413
pages/index.vue
@@ -2,39 +2,6 @@
|
|||||||
<div class="page">
|
<div class="page">
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="page-columns inner-left">
|
<div class="page-columns inner-left">
|
||||||
<pw-section v-if="showPreRequestScript" class="orange" label="Pre-Request" ref="preRequest">
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<div class="flex-wrap">
|
|
||||||
<label for="generatedCode">{{ $t("javascript_code") }}</label>
|
|
||||||
<div>
|
|
||||||
<a
|
|
||||||
href="https://github.com/liyasthomas/postwoman/wiki/Pre-Request-Scripts"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener"
|
|
||||||
>
|
|
||||||
<button class="icon" v-tooltip="$t('wiki')">
|
|
||||||
<i class="material-icons">help_outline</i>
|
|
||||||
</button>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Editor
|
|
||||||
v-model="preRequestScript"
|
|
||||||
:lang="'javascript'"
|
|
||||||
:options="{
|
|
||||||
maxLines: '16',
|
|
||||||
minLines: '8',
|
|
||||||
fontSize: '16px',
|
|
||||||
autoScrollEditorIntoView: true,
|
|
||||||
showPrintMargin: false,
|
|
||||||
useWorker: false,
|
|
||||||
}"
|
|
||||||
/>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</pw-section>
|
|
||||||
|
|
||||||
<pw-section class="blue" :label="$t('request')" ref="request">
|
<pw-section class="blue" :label="$t('request')" ref="request">
|
||||||
<ul>
|
<ul>
|
||||||
<li class="shrink">
|
<li class="shrink">
|
||||||
@@ -402,40 +369,6 @@
|
|||||||
>
|
>
|
||||||
<i class="material-icons">code</i>
|
<i class="material-icons">code</i>
|
||||||
</button>
|
</button>
|
||||||
<button
|
|
||||||
class="icon"
|
|
||||||
id="preRequestScriptButton"
|
|
||||||
v-tooltip.bottom="{
|
|
||||||
content: !showPreRequestScript
|
|
||||||
? $t('show_prerequest_script')
|
|
||||||
: $t('hide_prerequest_script'),
|
|
||||||
}"
|
|
||||||
@click="showPreRequestScript = !showPreRequestScript"
|
|
||||||
>
|
|
||||||
<i
|
|
||||||
class="material-icons"
|
|
||||||
:class="showPreRequestScript"
|
|
||||||
v-if="!showPreRequestScript"
|
|
||||||
>
|
|
||||||
playlist_add
|
|
||||||
</i>
|
|
||||||
<i class="material-icons" :class="showPreRequestScript" v-else>
|
|
||||||
close
|
|
||||||
</i>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="icon"
|
|
||||||
id="preRequestScriptButto"
|
|
||||||
v-tooltip.bottom="{
|
|
||||||
content: !testsEnabled ? 'Enable Tests' : 'Disable Tests',
|
|
||||||
}"
|
|
||||||
@click="testsEnabled = !testsEnabled"
|
|
||||||
>
|
|
||||||
<i class="material-icons" :class="testsEnabled" v-if="!testsEnabled">
|
|
||||||
playlist_add_check
|
|
||||||
</i>
|
|
||||||
<i class="material-icons" :class="testsEnabled" v-else>close</i>
|
|
||||||
</button>
|
|
||||||
</span>
|
</span>
|
||||||
<span>
|
<span>
|
||||||
<button
|
<button
|
||||||
@@ -471,73 +404,107 @@
|
|||||||
</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-Requests-Tests"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener"
|
|
||||||
>
|
|
||||||
<button class="icon" v-tooltip="$t('wiki')">
|
|
||||||
<i class="material-icons">help_outline</i>
|
|
||||||
</button>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Editor
|
|
||||||
v-model="testScript"
|
|
||||||
:lang="'javascript'"
|
|
||||||
:options="{
|
|
||||||
maxLines: '16',
|
|
||||||
minLines: '8',
|
|
||||||
fontSize: '16px',
|
|
||||||
autoScrollEditorIntoView: true,
|
|
||||||
showPrintMargin: false,
|
|
||||||
useWorker: false,
|
|
||||||
}"
|
|
||||||
/>
|
|
||||||
<div v-if="testReports">
|
|
||||||
<div class="flex-wrap">
|
|
||||||
<label>Test Reports</label>
|
|
||||||
<div>
|
|
||||||
<button
|
|
||||||
class="icon"
|
|
||||||
@click="clearContent('tests', $event)"
|
|
||||||
v-tooltip.bottom="$t('clear')"
|
|
||||||
>
|
|
||||||
<i class="material-icons">clear_all</i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-for="(testReport, index) in testReports" :key="index">
|
|
||||||
<div v-if="testReport.startBlock" class="info">
|
|
||||||
<h4>{{ testReport.startBlock }}</h4>
|
|
||||||
</div>
|
|
||||||
<p v-else-if="testReport.result" class="flex-wrap info">
|
|
||||||
<span :class="testReport.styles.class">
|
|
||||||
<i class="material-icons">
|
|
||||||
{{ testReport.styles.icon }}
|
|
||||||
</i>
|
|
||||||
<span> {{ testReport.result }}</span>
|
|
||||||
<span v-if="testReport.message">
|
|
||||||
<label> • {{ testReport.message }}</label>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
<div v-else-if="testReport.endBlock"><hr /></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</pw-section>
|
|
||||||
|
|
||||||
<section id="options">
|
<section id="options">
|
||||||
<tabs>
|
<tabs>
|
||||||
<tab :id="'authentication'" :label="$t('authentication')" :selected="true">
|
<tab :id="'params'" :label="$t('parameters')" :selected="true">
|
||||||
|
<pw-section class="pink" label="Parameters" ref="parameters">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<div class="flex-wrap">
|
||||||
|
<label for="paramList">{{ $t("parameter_list") }}</label>
|
||||||
|
<div>
|
||||||
|
<button
|
||||||
|
class="icon"
|
||||||
|
@click="clearContent('parameters', $event)"
|
||||||
|
v-tooltip.bottom="$t('clear')"
|
||||||
|
>
|
||||||
|
<i class="material-icons">clear_all</i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<textarea
|
||||||
|
id="paramList"
|
||||||
|
readonly
|
||||||
|
v-textarea-auto-height="queryString"
|
||||||
|
v-model="queryString"
|
||||||
|
:placeholder="$t('add_one_parameter')"
|
||||||
|
rows="1"
|
||||||
|
></textarea>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<ul v-for="(param, index) in params" :key="index">
|
||||||
|
<li>
|
||||||
|
<input
|
||||||
|
:placeholder="$t('parameter_count', { count: index + 1 })"
|
||||||
|
:name="'param' + index"
|
||||||
|
:value="param.key"
|
||||||
|
@change="
|
||||||
|
$store.commit('setKeyParams', {
|
||||||
|
index,
|
||||||
|
value: $event.target.value,
|
||||||
|
})
|
||||||
|
"
|
||||||
|
autofocus
|
||||||
|
/>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<input
|
||||||
|
:placeholder="$t('value_count', { count: index + 1 })"
|
||||||
|
:name="'value' + index"
|
||||||
|
:value="param.value"
|
||||||
|
@change="
|
||||||
|
$store.commit('setValueParams', {
|
||||||
|
index,
|
||||||
|
value: $event.target.value,
|
||||||
|
})
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span class="select-wrapper">
|
||||||
|
<select
|
||||||
|
:name="'type' + index"
|
||||||
|
@change="
|
||||||
|
$store.commit('setTypeParams', {
|
||||||
|
index,
|
||||||
|
value: $event.target.value,
|
||||||
|
})
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<option value="query" :selected="param.type === 'query'">{{
|
||||||
|
$t("query")
|
||||||
|
}}</option>
|
||||||
|
<option value="path" :selected="param.type === 'path'">{{
|
||||||
|
$t("path")
|
||||||
|
}}</option>
|
||||||
|
</select>
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<div>
|
||||||
|
<li>
|
||||||
|
<button
|
||||||
|
class="icon"
|
||||||
|
@click="removeRequestParam(index)"
|
||||||
|
v-tooltip.bottom="$t('delete')"
|
||||||
|
id="param"
|
||||||
|
>
|
||||||
|
<i class="material-icons">delete</i>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
</div>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<button class="icon" @click="addRequestParam">
|
||||||
|
<i class="material-icons">add</i>
|
||||||
|
<span>{{ $t("add_new") }}</span>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</pw-section>
|
||||||
|
</tab>
|
||||||
|
|
||||||
|
<tab :id="'authentication'" :label="$t('authentication')">
|
||||||
<pw-section class="cyan" :label="$t('authentication')" ref="authentication">
|
<pw-section class="cyan" :label="$t('authentication')" ref="authentication">
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
@@ -822,99 +789,112 @@
|
|||||||
</pw-section>
|
</pw-section>
|
||||||
</tab>
|
</tab>
|
||||||
|
|
||||||
<tab :id="'params'" :label="$t('parameters')">
|
<tab :id="'pre_request_script'" :label="$t('pre_request_script')">
|
||||||
<pw-section class="pink" label="Parameters" ref="parameters">
|
<pw-section
|
||||||
|
v-if="showPreRequestScript"
|
||||||
|
class="orange"
|
||||||
|
:label="$t('pre_request_script')"
|
||||||
|
ref="preRequest"
|
||||||
|
>
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<div class="flex-wrap">
|
<div class="flex-wrap">
|
||||||
<label for="paramList">{{ $t("parameter_list") }}</label>
|
<label for="generatedCode">{{ $t("javascript_code") }}</label>
|
||||||
<div>
|
<div>
|
||||||
<button
|
<a
|
||||||
class="icon"
|
href="https://github.com/liyasthomas/postwoman/wiki/Pre-Request-Scripts"
|
||||||
@click="clearContent('parameters', $event)"
|
target="_blank"
|
||||||
v-tooltip.bottom="$t('clear')"
|
rel="noopener"
|
||||||
>
|
>
|
||||||
<i class="material-icons">clear_all</i>
|
<button class="icon" v-tooltip="$t('wiki')">
|
||||||
</button>
|
<i class="material-icons">help_outline</i>
|
||||||
|
</button>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<textarea
|
<Editor
|
||||||
id="paramList"
|
v-model="preRequestScript"
|
||||||
readonly
|
:lang="'javascript'"
|
||||||
v-textarea-auto-height="queryString"
|
:options="{
|
||||||
v-model="queryString"
|
maxLines: '16',
|
||||||
:placeholder="$t('add_one_parameter')"
|
minLines: '8',
|
||||||
rows="1"
|
fontSize: '16px',
|
||||||
></textarea>
|
autoScrollEditorIntoView: true,
|
||||||
</li>
|
showPrintMargin: false,
|
||||||
</ul>
|
useWorker: false,
|
||||||
<ul v-for="(param, index) in params" :key="index">
|
}"
|
||||||
<li>
|
|
||||||
<input
|
|
||||||
:placeholder="$t('parameter_count', { count: index + 1 })"
|
|
||||||
:name="'param' + index"
|
|
||||||
:value="param.key"
|
|
||||||
@change="
|
|
||||||
$store.commit('setKeyParams', {
|
|
||||||
index,
|
|
||||||
value: $event.target.value,
|
|
||||||
})
|
|
||||||
"
|
|
||||||
autofocus
|
|
||||||
/>
|
/>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
|
||||||
<input
|
|
||||||
:placeholder="$t('value_count', { count: index + 1 })"
|
|
||||||
:name="'value' + index"
|
|
||||||
:value="param.value"
|
|
||||||
@change="
|
|
||||||
$store.commit('setValueParams', {
|
|
||||||
index,
|
|
||||||
value: $event.target.value,
|
|
||||||
})
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<span class="select-wrapper">
|
|
||||||
<select
|
|
||||||
:name="'type' + index"
|
|
||||||
@change="
|
|
||||||
$store.commit('setTypeParams', {
|
|
||||||
index,
|
|
||||||
value: $event.target.value,
|
|
||||||
})
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<option value="query" :selected="param.type === 'query'">{{
|
|
||||||
$t("query")
|
|
||||||
}}</option>
|
|
||||||
<option value="path" :selected="param.type === 'path'">{{
|
|
||||||
$t("path")
|
|
||||||
}}</option>
|
|
||||||
</select>
|
|
||||||
</span>
|
|
||||||
</li>
|
|
||||||
<div>
|
|
||||||
<li>
|
|
||||||
<button
|
|
||||||
class="icon"
|
|
||||||
@click="removeRequestParam(index)"
|
|
||||||
v-tooltip.bottom="$t('delete')"
|
|
||||||
id="param"
|
|
||||||
>
|
|
||||||
<i class="material-icons">delete</i>
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
</div>
|
|
||||||
</ul>
|
</ul>
|
||||||
|
</pw-section>
|
||||||
|
</tab>
|
||||||
|
|
||||||
|
<tab :id="'tests'" :label="$t('tests')">
|
||||||
|
<pw-section
|
||||||
|
v-if="testsEnabled"
|
||||||
|
class="orange"
|
||||||
|
:label="$t('tests')"
|
||||||
|
ref="postRequestTests"
|
||||||
|
>
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<button class="icon" @click="addRequestParam">
|
<div class="flex-wrap">
|
||||||
<i class="material-icons">add</i>
|
<label for="generatedCode">{{ $t("javascript_code") }}</label>
|
||||||
<span>{{ $t("add_new") }}</span>
|
<div>
|
||||||
</button>
|
<a
|
||||||
|
href="https://github.com/liyasthomas/postwoman/wiki/Post-Requests-Tests"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener"
|
||||||
|
>
|
||||||
|
<button class="icon" v-tooltip="$t('wiki')">
|
||||||
|
<i class="material-icons">help_outline</i>
|
||||||
|
</button>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Editor
|
||||||
|
v-model="testScript"
|
||||||
|
:lang="'javascript'"
|
||||||
|
:options="{
|
||||||
|
maxLines: '16',
|
||||||
|
minLines: '8',
|
||||||
|
fontSize: '16px',
|
||||||
|
autoScrollEditorIntoView: true,
|
||||||
|
showPrintMargin: false,
|
||||||
|
useWorker: false,
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
<div v-if="testReports && testReports.length !== 0">
|
||||||
|
<div class="flex-wrap">
|
||||||
|
<label>Test Reports</label>
|
||||||
|
<div>
|
||||||
|
<button
|
||||||
|
class="icon"
|
||||||
|
@click="clearContent('tests', $event)"
|
||||||
|
v-tooltip.bottom="$t('clear')"
|
||||||
|
>
|
||||||
|
<i class="material-icons">clear_all</i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-for="(testReport, index) in testReports" :key="index">
|
||||||
|
<div v-if="testReport.startBlock" class="info">
|
||||||
|
<h4>{{ testReport.startBlock }}</h4>
|
||||||
|
</div>
|
||||||
|
<p v-else-if="testReport.result" class="flex-wrap info">
|
||||||
|
<span :class="testReport.styles.class">
|
||||||
|
<i class="material-icons">
|
||||||
|
{{ testReport.styles.icon }}
|
||||||
|
</i>
|
||||||
|
<span> {{ testReport.result }}</span>
|
||||||
|
<span v-if="testReport.message">
|
||||||
|
<label> • {{ testReport.message }}</label>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
<div v-else-if="testReport.endBlock"><hr /></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</pw-section>
|
</pw-section>
|
||||||
@@ -1342,8 +1322,8 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
showModal: false,
|
showModal: false,
|
||||||
showPreRequestScript: false,
|
showPreRequestScript: true,
|
||||||
testsEnabled: false,
|
testsEnabled: true,
|
||||||
testScript: "// pw.expect('variable').toBe('value');",
|
testScript: "// pw.expect('variable').toBe('value');",
|
||||||
preRequestScript: "// pw.env.set('variable', 'value');",
|
preRequestScript: "// pw.env.set('variable', 'value');",
|
||||||
testReports: null,
|
testReports: null,
|
||||||
@@ -2015,9 +1995,6 @@ export default {
|
|||||||
// Start showing the loading bar as soon as possible.
|
// Start showing the loading bar as soon as possible.
|
||||||
// The nuxt axios module will hide it when the request is made.
|
// The nuxt axios module will hide it when the request is made.
|
||||||
this.$nuxt.$loading.start()
|
this.$nuxt.$loading.start()
|
||||||
if (this.$refs.response.$el.classList.contains("hidden")) {
|
|
||||||
this.$refs.response.$el.classList.toggle("hidden")
|
|
||||||
}
|
|
||||||
this.previewEnabled = false
|
this.previewEnabled = false
|
||||||
this.response.status = this.$t("fetching")
|
this.response.status = this.$t("fetching")
|
||||||
this.response.body = this.$t("loading")
|
this.response.body = this.$t("loading")
|
||||||
|
|||||||
Reference in New Issue
Block a user