@aimeloic/monkey-tester 2.0.3 → 2.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/html.backup.js +140 -52
- package/package.json +1 -1
package/html.backup.js
CHANGED
|
@@ -24,59 +24,150 @@ export function getHtmlTemplate(endpoints) {
|
|
|
24
24
|
--blue: #5a86c0;
|
|
25
25
|
--radius: 8px;
|
|
26
26
|
}
|
|
27
|
+
|
|
27
28
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
29
|
+
|
|
28
30
|
body {
|
|
29
|
-
background: var(--bg);
|
|
31
|
+
background: var(--bg);
|
|
32
|
+
color: var(--text);
|
|
33
|
+
font-family: 'DM Sans', sans-serif;
|
|
34
|
+
font-size: 14px;
|
|
35
|
+
height: 100vh;
|
|
36
|
+
overflow: hidden; /* Prevents whole-page scrolling */
|
|
30
37
|
background-image: radial-gradient(ellipse 80% 60% at 50% -20%, #3a2a0a22 0%, transparent 70%);
|
|
31
38
|
}
|
|
39
|
+
|
|
32
40
|
header {
|
|
33
|
-
border-bottom: 1px solid var(--border);
|
|
34
|
-
|
|
41
|
+
border-bottom: 1px solid var(--border);
|
|
42
|
+
padding: 16px 32px;
|
|
43
|
+
display: flex;
|
|
44
|
+
align-items: center;
|
|
45
|
+
gap: 20px;
|
|
46
|
+
background: #0e0c09ee;
|
|
47
|
+
backdrop-filter: blur(8px);
|
|
48
|
+
height: 65px;
|
|
35
49
|
}
|
|
36
|
-
|
|
37
|
-
.logo
|
|
38
|
-
.
|
|
50
|
+
|
|
51
|
+
.logo { font-family: 'Playfair Display', serif; font-size: 20px; color: var(--accent); letter-spacing: 0.02em; }
|
|
52
|
+
.logo span { color: var(--text-dim); font-size: 11px; font-family: 'DM Mono', monospace; display: inline-block; margin-left: 8px; font-weight: 400; }
|
|
53
|
+
.header-right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
|
|
39
54
|
.jwt-wrap, .base-url-wrap { display: flex; align-items: center; gap: 8px; }
|
|
40
|
-
.jwt-wrap label, .base-url-wrap label { color: var(--text-dim); font-size:
|
|
55
|
+
.jwt-wrap label, .base-url-wrap label { color: var(--text-dim); font-size: 11px; font-family: 'DM Mono', monospace; letter-spacing: 0.05em; }
|
|
56
|
+
|
|
41
57
|
#jwt-input, #base-url {
|
|
42
58
|
background: var(--surface2); border: 1px solid var(--border); color: var(--text);
|
|
43
|
-
font-family: 'DM Mono', monospace; font-size:
|
|
59
|
+
font-family: 'DM Mono', monospace; font-size: 12px; padding: 6px 12px; border-radius: var(--radius); width: 220px; outline: none;
|
|
44
60
|
}
|
|
45
|
-
|
|
46
|
-
|
|
61
|
+
|
|
62
|
+
/* Fixed view height viewport matrix layout grid rules */
|
|
63
|
+
.layout {
|
|
64
|
+
display: grid;
|
|
65
|
+
grid-template-columns: 280px 1fr 450px;
|
|
66
|
+
height: calc(100vh - 65px);
|
|
67
|
+
overflow: hidden;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
aside {
|
|
71
|
+
border-right: 1px solid var(--border);
|
|
72
|
+
overflow-y: auto;
|
|
73
|
+
padding: 16px 0;
|
|
74
|
+
background: #0b0907;
|
|
75
|
+
}
|
|
76
|
+
|
|
47
77
|
.section-label { font-size: 10px; font-family: 'DM Mono', monospace; color: var(--text-dim); letter-spacing: 0.12em; text-transform: uppercase; padding: 12px 18px 6px; }
|
|
48
|
-
|
|
78
|
+
|
|
79
|
+
.nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 18px; cursor: pointer; border-left: 2px solid transparent; color: var(--text-dim); transition: all 0.2s; }
|
|
49
80
|
.nav-item:hover { background: var(--surface); color: var(--text); }
|
|
50
81
|
.nav-item.active { border-left-color: var(--accent); background: var(--surface); color: var(--accent); }
|
|
51
|
-
|
|
82
|
+
|
|
83
|
+
.method-badge { font-family: 'DM Mono', monospace; font-size: 9px; font-weight: 600; padding: 2px 6px; border-radius: 4px; min-width: 52px; text-align: center; text-transform: uppercase; }
|
|
52
84
|
.GET { background: #1a3a22; color: #6ba05a; }
|
|
53
85
|
.POST { background: #1a2e3a; color: #5a86c0; }
|
|
54
86
|
.PUT, .PATCH { background: #3a2e10; color: #e8a838; }
|
|
55
87
|
.DELETE { background: #3a1a14; color: #d45c3c; }
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
88
|
+
|
|
89
|
+
.nav-label { font-size: 12px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
90
|
+
|
|
91
|
+
main {
|
|
92
|
+
overflow-y: auto;
|
|
93
|
+
padding: 32px;
|
|
94
|
+
background: #0e0c09;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.endpoint-title { font-family: 'Playfair Display', serif; font-size: 24px; color: var(--accent); margin-bottom: 8px; }
|
|
98
|
+
.endpoint-path { font-family: 'DM Mono', monospace; font-size: 13px; color: var(--text-dim); margin-bottom: 24px; display: flex; align-items: center; gap: 8px; }
|
|
60
99
|
.endpoint-desc { color: var(--text-dim); font-size: 13px; line-height: 1.6; margin-bottom: 24px; border-left: 2px solid var(--border); padding-left: 12px; }
|
|
61
|
-
|
|
62
|
-
.form-section
|
|
63
|
-
.
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
.
|
|
67
|
-
.
|
|
100
|
+
|
|
101
|
+
.form-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; }
|
|
102
|
+
.form-section-title { font-size: 11px; font-family: 'DM Mono', monospace; color: var(--text-dim); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 16px; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
|
|
103
|
+
|
|
104
|
+
.field-row { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 16px; margin-bottom: 14px; }
|
|
105
|
+
.field-row:last-child { margin-bottom: 0; }
|
|
106
|
+
.field-label { font-family: 'DM Mono', monospace; font-size: 12px; color: var(--text-dim); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
107
|
+
|
|
108
|
+
input[type=text], input[type=password], input[type=number], input[type=date], input[type=tel], input[type=url], select {
|
|
109
|
+
background: var(--surface2); border: 1px solid var(--border); color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 13px; padding: 8px 12px; border-radius: var(--radius); width: 100%; outline: none; transition: border-color 0.2s;
|
|
110
|
+
}
|
|
111
|
+
input:focus { border-color: var(--accent); }
|
|
112
|
+
|
|
113
|
+
.btn-row { margin-top: 24px; display: flex; gap: 12px; }
|
|
114
|
+
.btn { background: var(--accent); color: #0e0c09; border: none; padding: 10px 24px; border-radius: var(--radius); font-size: 13px; font-weight: 500; cursor: pointer; transition: background-color 0.2s; }
|
|
115
|
+
.btn:hover { background: #f0b850; }
|
|
68
116
|
.btn-secondary { background: var(--surface2); color: var(--text-dim); border: 1px solid var(--border); }
|
|
69
|
-
.
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
.
|
|
117
|
+
.btn-secondary:hover { color: var(--text); background: var(--surface); }
|
|
118
|
+
|
|
119
|
+
/* FIXED: Response block scroll logic layout rules */
|
|
120
|
+
.response-panel {
|
|
121
|
+
border-left: 1px solid var(--border);
|
|
122
|
+
display: flex;
|
|
123
|
+
flex-direction: column;
|
|
124
|
+
overflow: hidden;
|
|
125
|
+
background: #110e0a;
|
|
126
|
+
}
|
|
127
|
+
.response-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; background: var(--surface); height: 50px; }
|
|
128
|
+
.response-header-title { font-size: 11px; font-family: 'DM Mono', monospace; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; }
|
|
129
|
+
.status-badge { font-family: 'DM Mono', monospace; font-size: 12px; margin-left: auto; padding: 2px 8px; border-radius: 4px; font-weight: 500; }
|
|
73
130
|
.status-ok { background: #1a3a22; color: #6ba05a; }
|
|
74
131
|
.status-err { background: #3a1a14; color: #d45c3c; }
|
|
75
132
|
.status-idle { background: var(--surface2); color: var(--text-dim); }
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
.
|
|
79
|
-
|
|
133
|
+
|
|
134
|
+
/* FIXED: Body panel scrolls y natively, inner token element handles x scrolling */
|
|
135
|
+
.response-body {
|
|
136
|
+
flex: 1;
|
|
137
|
+
overflow-y: auto;
|
|
138
|
+
overflow-x: hidden;
|
|
139
|
+
padding: 0;
|
|
140
|
+
background: #0d0b08;
|
|
141
|
+
}
|
|
142
|
+
.response-body.empty {
|
|
143
|
+
color: var(--text-dim);
|
|
144
|
+
display: flex;
|
|
145
|
+
align-items: center;
|
|
146
|
+
justify-content: center;
|
|
147
|
+
padding: 20px;
|
|
148
|
+
text-align: center;
|
|
149
|
+
font-size: 13px;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
/* FIXED: Token code output container handles micro horizontal data flows elegantly */
|
|
153
|
+
.json-render-block {
|
|
154
|
+
display: block;
|
|
155
|
+
padding: 20px;
|
|
156
|
+
margin: 0;
|
|
157
|
+
font-family: 'DM Mono', monospace;
|
|
158
|
+
font-size: 12px;
|
|
159
|
+
line-height: 1.5;
|
|
160
|
+
white-space: pre;
|
|
161
|
+
overflow-x: auto;
|
|
162
|
+
word-break: normal;
|
|
163
|
+
word-wrap: normal;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.json-key { color: #e8a838; }
|
|
167
|
+
.json-str { color: #9ab878; }
|
|
168
|
+
.json-num { color: #5a86c0; }
|
|
169
|
+
|
|
170
|
+
#toast { position: fixed; bottom: 24px; right: 24px; background: var(--surface2); border: 1px solid var(--border); padding: 10px 18px; border-radius: var(--radius); opacity: 0; transition: all .25s; z-index: 1000; font-family: 'DM Mono', monospace; font-size: 12px; color: var(--accent); }
|
|
80
171
|
#toast.show { opacity: 1; }
|
|
81
172
|
</style>
|
|
82
173
|
</head>
|
|
@@ -149,10 +240,9 @@ function buildSidebar() {
|
|
|
149
240
|
if (keys.length > 0) renderPanel(keys[0]);
|
|
150
241
|
}
|
|
151
242
|
|
|
152
|
-
function makeInputString(type, id, placeholder
|
|
243
|
+
function makeInputString(type, id, placeholder) {
|
|
153
244
|
const pAttr = placeholder ? ' placeholder="' + placeholder + '"' : '';
|
|
154
|
-
|
|
155
|
-
return '<input type="' + type + '" id="' + id + '"' + pAttr + vAttr + ' />';
|
|
245
|
+
return '<input type="' + type + '" id="' + id + '"' + pAttr + ' />';
|
|
156
246
|
}
|
|
157
247
|
|
|
158
248
|
function renderPanel(epKey) {
|
|
@@ -170,11 +260,10 @@ function renderPanel(epKey) {
|
|
|
170
260
|
<div class="endpoint-desc">\${ep.desc}</div>
|
|
171
261
|
\`;
|
|
172
262
|
|
|
173
|
-
// Path Parameters
|
|
174
263
|
if (ep.params && ep.params.length) {
|
|
175
264
|
html += \`<div class="form-section"><div class="form-section-title">Path Parameters</div>\`;
|
|
176
265
|
ep.params.forEach(function(p) {
|
|
177
|
-
const inputHtml = makeInputString('text', 'param-' + p.name, p.placeholder
|
|
266
|
+
const inputHtml = makeInputString('text', 'param-' + p.name, p.placeholder);
|
|
178
267
|
html += \`
|
|
179
268
|
<div class="field-row">
|
|
180
269
|
<label class="field-label">\${p.label}</label>
|
|
@@ -185,14 +274,13 @@ function renderPanel(epKey) {
|
|
|
185
274
|
html += \`</div>\`;
|
|
186
275
|
}
|
|
187
276
|
|
|
188
|
-
// FIXED: Renders native, individual form fields instead of a single text payload editor block
|
|
189
277
|
if (ep.fields && ep.fields.length) {
|
|
190
278
|
html += \`<div class="form-section"><div class="form-section-title">HTTP JSON Request Payload Parameters</div>\`;
|
|
191
279
|
ep.fields.forEach(function(f) {
|
|
192
|
-
const inputHtml = makeInputString(f.type || 'text', 'field-' + f.name, f.placeholder || ''
|
|
280
|
+
const inputHtml = makeInputString(f.type || 'text', 'field-' + f.name, f.placeholder || '');
|
|
193
281
|
html += \`
|
|
194
282
|
<div class="field-row">
|
|
195
|
-
<label class="field-label"
|
|
283
|
+
<label class="field-label">\${f.label}</label>
|
|
196
284
|
\${inputHtml}
|
|
197
285
|
</div>
|
|
198
286
|
\`;
|
|
@@ -214,7 +302,6 @@ async function sendRequest() {
|
|
|
214
302
|
const ep = ENDPOINTS[currentEp];
|
|
215
303
|
let path = ep.path;
|
|
216
304
|
|
|
217
|
-
// Compile URL path parameter tags
|
|
218
305
|
if (ep.params) {
|
|
219
306
|
for (const p of ep.params) {
|
|
220
307
|
const val = document.getElementById('param-' + p.name)?.value.trim();
|
|
@@ -230,23 +317,20 @@ async function sendRequest() {
|
|
|
230
317
|
const jwt = document.getElementById('jwt-input').value.trim();
|
|
231
318
|
if (jwt) headers['Authorization'] = 'Bearer ' + jwt;
|
|
232
319
|
|
|
233
|
-
// FIXED: Dynamically bundles inputs into a background payload object structure seamlessly
|
|
234
320
|
let body = undefined;
|
|
235
321
|
if (ep.fields && ep.fields.length && ['POST', 'PUT', 'PATCH'].includes(ep.method)) {
|
|
236
|
-
const
|
|
237
|
-
|
|
322
|
+
const jsonPayload = {};
|
|
238
323
|
for (const f of ep.fields) {
|
|
239
|
-
const
|
|
240
|
-
if (
|
|
241
|
-
let
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
value = Number(value);
|
|
324
|
+
const targetEl = document.getElementById('field-' + f.name);
|
|
325
|
+
if (targetEl) {
|
|
326
|
+
let entryVal = targetEl.value.trim();
|
|
327
|
+
if (f.type === 'number' && entryVal !== '') {
|
|
328
|
+
entryVal = Number(entryVal);
|
|
245
329
|
}
|
|
246
|
-
|
|
330
|
+
jsonPayload[f.name] = entryVal;
|
|
247
331
|
}
|
|
248
332
|
}
|
|
249
|
-
body = JSON.stringify(
|
|
333
|
+
body = JSON.stringify(jsonPayload);
|
|
250
334
|
}
|
|
251
335
|
|
|
252
336
|
setResponse(null, 'loading');
|
|
@@ -271,6 +355,7 @@ function setResponse(data, state, status, ms) {
|
|
|
271
355
|
if (state === 'loading') {
|
|
272
356
|
badge.className = 'status-badge status-idle';
|
|
273
357
|
badge.textContent = '...';
|
|
358
|
+
body.className = 'response-body empty';
|
|
274
359
|
body.innerHTML = 'Executing transmission...';
|
|
275
360
|
return;
|
|
276
361
|
}
|
|
@@ -278,7 +363,10 @@ function setResponse(data, state, status, ms) {
|
|
|
278
363
|
badge.className = 'status-badge ' + (state === 'ok' ? 'status-ok' : 'status-err');
|
|
279
364
|
badge.textContent = status + ' · ' + ms + 'ms';
|
|
280
365
|
body.className = 'response-body';
|
|
281
|
-
|
|
366
|
+
|
|
367
|
+
// FIXED: Nested rendering inside dedicated horizontal scrolling code tag block wrapper elements
|
|
368
|
+
const outputString = typeof data === 'string' ? data : JSON.stringify(data, null, 2);
|
|
369
|
+
body.innerHTML = '<pre class="json-render-block">' + highlightJson(outputString) + '</pre>';
|
|
282
370
|
}
|
|
283
371
|
|
|
284
372
|
function clearResponse() {
|