feat: nicer mocks

This commit is contained in:
Vlad Stan
2026-03-26 19:43:51 +02:00
parent 22e3ec3672
commit 0003574d21
+120 -66
View File
@@ -691,14 +691,11 @@
gap: 12px;
grid-template-columns:
minmax(150px, 1fr)
minmax(180px, 1.1fr)
120px
minmax(240px, 1.3fr)
minmax(220px, 1.2fr)
minmax(180px, 1fr)
120px
120px
minmax(220px, 1.2fr);
align-items: start;
minmax(260px, 1.3fr);
align-items: stretch;
}
.function-mocks-header {
@@ -731,6 +728,27 @@
margin-top: 10px;
}
.function-mock-cell-stack {
display: grid;
gap: 12px;
}
.function-mock-subfield {
display: grid;
gap: 6px;
}
.function-mock-json-cell {
display: flex;
flex-direction: column;
height: 100%;
}
.function-mock-json-cell .native-textarea {
flex: 1 1 auto;
min-height: 248px;
}
.function-mocks-note {
margin-top: 10px;
}
@@ -1161,6 +1179,12 @@
label="Reload Current"
@click="loadRelative(currentDataset.key)"
></q-btn>
<q-btn
color="accent"
outline
label="Save"
@click="saveDataset(currentDataset.key)"
></q-btn>
<q-btn
color="accent"
outline
@@ -1776,13 +1800,10 @@
<div class="function-mocks-table">
<div class="function-mocks-header function-mocks-table-grid">
<div class="function-mocks-heading">Mock Name</div>
<div class="function-mocks-heading">URI</div>
<div class="function-mocks-heading">Method</div>
<div class="function-mocks-heading">Headers JSON</div>
<div class="function-mocks-heading">Query Params JSON</div>
<div class="function-mocks-heading">Request Type</div>
<div class="function-mocks-heading">Response Type</div>
<div class="function-mocks-heading">Response JSON</div>
<div class="function-mocks-heading">Response</div>
</div>
<div
@@ -1801,6 +1822,9 @@
spellcheck="false"
@blur="persistFunctionMocks()"
/>
<div class="settings-hint q-mt-sm">
Mock Name: Stable mock identifier used inside this function's fixture map.
</div>
<div class="function-mock-primary-actions">
<q-btn
color="negative"
@@ -1811,31 +1835,55 @@
</div>
</div>
<div>
<input
:id="`function-mock-uri-${mockRow.id}`"
v-model="mockRow.uri"
class="native-input"
type="text"
placeholder="/path"
spellcheck="false"
@blur="persistFunctionMocks()"
/>
<div class="function-mock-cell-stack">
<div class="function-mock-subfield">
<input
:id="`function-mock-request-type-${mockRow.id}`"
v-model="mockRow.requestType"
class="native-input"
type="text"
placeholder="json"
spellcheck="false"
@blur="persistFunctionMocks()"
/>
<div class="settings-hint">
Request Type: Optional request payload format such as
<code>json</code>.
</div>
</div>
<div class="function-mock-subfield">
<input
:id="`function-mock-method-${mockRow.id}`"
v-model="mockRow.method"
class="native-input"
type="text"
placeholder="GET"
spellcheck="false"
@blur="persistFunctionMocks()"
/>
<div class="settings-hint">
Method: HTTP verb or RPC method name used by this reusable mock.
</div>
</div>
<div class="function-mock-subfield">
<input
:id="`function-mock-uri-${mockRow.id}`"
v-model="mockRow.uri"
class="native-input"
type="text"
placeholder="/path"
spellcheck="false"
@blur="persistFunctionMocks()"
/>
<div class="settings-hint">
Path: Request path or URI matcher for REST mocks.
</div>
</div>
</div>
<div>
<input
:id="`function-mock-method-${mockRow.id}`"
v-model="mockRow.method"
class="native-input"
type="text"
placeholder="GET"
spellcheck="false"
@blur="persistFunctionMocks()"
/>
</div>
<div>
<div class="function-mock-json-cell">
<textarea
:id="`function-mock-headers-${mockRow.id}`"
v-model="mockRow.headersText"
@@ -1844,9 +1892,12 @@
spellcheck="false"
@blur="persistFunctionMocks()"
></textarea>
<div class="settings-hint q-mt-sm">
Headers JSON: JSON object of request headers that must match.
</div>
</div>
<div>
<div class="function-mock-json-cell">
<textarea
:id="`function-mock-query-${mockRow.id}`"
v-model="mockRow.queryParamsText"
@@ -1855,41 +1906,44 @@
spellcheck="false"
@blur="persistFunctionMocks()"
></textarea>
<div class="settings-hint q-mt-sm">
Query Params JSON: JSON object of expected query-string parameters.
</div>
</div>
<div>
<input
:id="`function-mock-request-type-${mockRow.id}`"
v-model="mockRow.requestType"
class="native-input"
type="text"
placeholder="function"
spellcheck="false"
@blur="persistFunctionMocks()"
/>
</div>
<div class="function-mock-cell-stack">
<div class="function-mock-subfield">
<input
:id="`function-mock-response-type-${mockRow.id}`"
v-model="mockRow.responseType"
class="native-input"
type="text"
placeholder="json"
spellcheck="false"
@blur="persistFunctionMocks()"
/>
<div class="settings-hint">
Response Type: Optional response mode such as
<code>json</code>,
<code>data</code>,
or
<code>exception</code>.
</div>
</div>
<div>
<input
:id="`function-mock-response-type-${mockRow.id}`"
v-model="mockRow.responseType"
class="native-input"
type="text"
placeholder="data"
spellcheck="false"
@blur="persistFunctionMocks()"
/>
</div>
<div>
<textarea
:id="`function-mock-response-${mockRow.id}`"
v-model="mockRow.responseText"
class="native-textarea"
placeholder='{"field":"value"}'
spellcheck="false"
@blur="persistFunctionMocks()"
></textarea>
<div class="function-mock-subfield">
<textarea
:id="`function-mock-response-${mockRow.id}`"
v-model="mockRow.responseText"
class="native-textarea"
placeholder='{"field":"value"}'
spellcheck="false"
@blur="persistFunctionMocks()"
></textarea>
<div class="settings-hint">
Response Body: JSON payload, data object, or exception body returned by the mock.
</div>
</div>
</div>
</div>