Skip to content

Commit ab084be

Browse files
Copilotfarfromrefug
Copilot
and
farfromrefug
authored
Add comprehensive Vue demo components for testing features
Agent-Logs-Url: https://github.com/nativescript-community/https/sessions/03f5d740-4e22-4369-8afc-fdfe1f2d2e57 Co-authored-by: farfromrefug <655344+farfromrefug@users.noreply.github.com>
1 parent f448837 commit ab084be

File tree

4 files changed

+1669
-0
lines changed

4 files changed

+1669
-0
lines changed

‎demo-snippets/vue/BasicRequests.vue‎

Lines changed: 364 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,364 @@
1+
<template>
2+
<Page>
3+
<ActionBar title="Basic HTTP Methods" backgroundColor="#42b883" color="white">
4+
<NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="$navigateBack()" />
5+
</ActionBar>
6+
<GridLayout rows="auto,*">
7+
<StackLayout row="0" class="p-10 bg-light">
8+
<Label class="h3" text="Test Basic HTTP Methods" />
9+
<Label class="text-muted" text="GET, POST, PUT, DELETE, PATCH, HEAD, OPTIONS" textWrap="true" />
10+
</StackLayout>
11+
<ScrollView row="1">
12+
<StackLayout class="p-20">
13+
<!-- GET Requests -->
14+
<Label class="h4 mt-20" text="GET Requests" />
15+
<Button text="GET - Simple Request" @tap="testGet" class="btn btn-primary" />
16+
<Button text="GET - With Query Params" @tap="testGetWithParams" class="btn btn-primary" />
17+
<Button text="GET - With Headers" @tap="testGetWithHeaders" class="btn btn-primary" />
18+
<Button text="GET - JSON Response" @tap="testGetJSON" class="btn btn-primary" />
19+
20+
<!-- POST Requests -->
21+
<Label class="h4 mt-20" text="POST Requests" />
22+
<Button text="POST - JSON Body" @tap="testPostJSON" class="btn btn-primary" />
23+
<Button text="POST - Form Data" @tap="testPostForm" class="btn btn-primary" />
24+
<Button text="POST - With UTF-8" @tap="testPostUTF8" class="btn btn-primary" />
25+
26+
<!-- Other Methods -->
27+
<Label class="h4 mt-20" text="Other HTTP Methods" />
28+
<Button text="PUT Request" @tap="testPut" class="btn btn-primary" />
29+
<Button text="PATCH Request" @tap="testPatch" class="btn btn-primary" />
30+
<Button text="DELETE Request" @tap="testDelete" class="btn btn-primary" />
31+
<Button text="HEAD Request" @tap="testHead" class="btn btn-primary" />
32+
<Button text="OPTIONS Request" @tap="testOptions" class="btn btn-primary" />
33+
34+
<!-- Response Format Tests -->
35+
<Label class="h4 mt-20" text="Response Format Tests" />
36+
<Button text="Test toString()" @tap="testToString" class="btn btn-primary" />
37+
<Button text="Test toJSON()" @tap="testToJSON" class="btn btn-primary" />
38+
<Button text="Test toArrayBuffer()" @tap="testToArrayBuffer" class="btn btn-primary" />
39+
40+
<!-- Results -->
41+
<Label class="h4 mt-20" text="Results" />
42+
<TextView :text="results" class="result-box" editable="false" />
43+
</StackLayout>
44+
</ScrollView>
45+
</GridLayout>
46+
</Page>
47+
</template>
48+
49+
<script lang="ts">
50+
import Vue from 'vue';
51+
import * as Https from '@nativescript-community/https';
52+
53+
export default Vue.extend({
54+
data() {
55+
return {
56+
results: 'Test results will appear here...'
57+
};
58+
},
59+
methods: {
60+
log(message: string) {
61+
const timestamp = new Date().toLocaleTimeString();
62+
this.results = `[${timestamp}] ${message}\n\n${this.results}`;
63+
console.log(message);
64+
},
65+
66+
async testGet() {
67+
try {
68+
this.log('Testing GET request...');
69+
const response = await Https.request({
70+
url: 'https://httpbin.org/get',
71+
method: 'GET'
72+
});
73+
this.log(`✓ GET success: ${response.statusCode}`);
74+
this.log(`Response: ${response.content.toString().substring(0, 200)}...`);
75+
} catch (error) {
76+
this.log(`✗ GET failed: ${error}`);
77+
}
78+
},
79+
80+
async testGetWithParams() {
81+
try {
82+
this.log('Testing GET with query params...');
83+
const response = await Https.request({
84+
url: 'https://httpbin.org/get',
85+
method: 'GET',
86+
params: {
87+
foo: 'bar',
88+
test: 123,
89+
active: true
90+
}
91+
});
92+
this.log(`✓ GET with params success: ${response.statusCode}`);
93+
const data = response.content.toJSON();
94+
this.log(`Query params: ${JSON.stringify(data.args)}`);
95+
} catch (error) {
96+
this.log(`✗ GET with params failed: ${error}`);
97+
}
98+
},
99+
100+
async testGetWithHeaders() {
101+
try {
102+
this.log('Testing GET with custom headers...');
103+
const response = await Https.request({
104+
url: 'https://httpbin.org/get',
105+
method: 'GET',
106+
headers: {
107+
'X-Custom-Header': 'test-value',
108+
'X-API-Key': 'dummy-key-123',
109+
'Accept': 'application/json'
110+
}
111+
});
112+
this.log(`✓ GET with headers success: ${response.statusCode}`);
113+
const data = response.content.toJSON();
114+
this.log(`Custom headers received: ${JSON.stringify(data.headers)}`);
115+
} catch (error) {
116+
this.log(`✗ GET with headers failed: ${error}`);
117+
}
118+
},
119+
120+
async testGetJSON() {
121+
try {
122+
this.log('Testing GET JSON endpoint...');
123+
const response = await Https.request({
124+
url: 'https://httpbin.org/json',
125+
method: 'GET'
126+
});
127+
this.log(`✓ GET JSON success: ${response.statusCode}`);
128+
const data = response.content.toJSON();
129+
this.log(`JSON data: ${JSON.stringify(data).substring(0, 200)}...`);
130+
} catch (error) {
131+
this.log(`✗ GET JSON failed: ${error}`);
132+
}
133+
},
134+
135+
async testPostJSON() {
136+
try {
137+
this.log('Testing POST with JSON body...');
138+
const response = await Https.request({
139+
url: 'https://httpbin.org/post',
140+
method: 'POST',
141+
headers: {
142+
'Content-Type': 'application/json'
143+
},
144+
body: {
145+
name: 'Test User',
146+
email: 'test@example.com',
147+
age: 25,
148+
active: true
149+
}
150+
});
151+
this.log(`✓ POST JSON success: ${response.statusCode}`);
152+
const data = response.content.toJSON();
153+
this.log(`Posted data: ${JSON.stringify(data.json)}`);
154+
} catch (error) {
155+
this.log(`✗ POST JSON failed: ${error}`);
156+
}
157+
},
158+
159+
async testPostForm() {
160+
try {
161+
this.log('Testing POST with form data...');
162+
const response = await Https.request({
163+
url: 'https://httpbin.org/post',
164+
method: 'POST',
165+
headers: {
166+
'Content-Type': 'application/x-www-form-urlencoded'
167+
},
168+
body: {
169+
username: 'testuser',
170+
password: 'secret123'
171+
}
172+
});
173+
this.log(`✓ POST form success: ${response.statusCode}`);
174+
const data = response.content.toJSON();
175+
this.log(`Form data: ${JSON.stringify(data.form)}`);
176+
} catch (error) {
177+
this.log(`✗ POST form failed: ${error}`);
178+
}
179+
},
180+
181+
async testPostUTF8() {
182+
try {
183+
this.log('Testing POST with UTF-8 characters...');
184+
const response = await Https.request({
185+
url: 'https://httpbin.org/post',
186+
method: 'POST',
187+
headers: {
188+
'Content-Type': 'application/json; charset=utf-8'
189+
},
190+
body: {
191+
message: 'Hello 世界 🌍',
192+
emoji: '🚀💻📱',
193+
special: 'Ñoño, Zürich, Москва'
194+
}
195+
});
196+
this.log(`✓ POST UTF-8 success: ${response.statusCode}`);
197+
const data = response.content.toJSON();
198+
this.log(`UTF-8 data: ${JSON.stringify(data.json)}`);
199+
} catch (error) {
200+
this.log(`✗ POST UTF-8 failed: ${error}`);
201+
}
202+
},
203+
204+
async testPut() {
205+
try {
206+
this.log('Testing PUT request...');
207+
const response = await Https.request({
208+
url: 'https://httpbin.org/put',
209+
method: 'PUT',
210+
body: {
211+
id: 123,
212+
updated: true
213+
}
214+
});
215+
this.log(`✓ PUT success: ${response.statusCode}`);
216+
this.log(`Response: ${response.content.toString().substring(0, 100)}...`);
217+
} catch (error) {
218+
this.log(`✗ PUT failed: ${error}`);
219+
}
220+
},
221+
222+
async testPatch() {
223+
try {
224+
this.log('Testing PATCH request...');
225+
const response = await Https.request({
226+
url: 'https://httpbin.org/patch',
227+
method: 'PATCH',
228+
body: {
229+
field: 'value'
230+
}
231+
});
232+
this.log(`✓ PATCH success: ${response.statusCode}`);
233+
this.log(`Response: ${response.content.toString().substring(0, 100)}...`);
234+
} catch (error) {
235+
this.log(`✗ PATCH failed: ${error}`);
236+
}
237+
},
238+
239+
async testDelete() {
240+
try {
241+
this.log('Testing DELETE request...');
242+
const response = await Https.request({
243+
url: 'https://httpbin.org/delete',
244+
method: 'DELETE'
245+
});
246+
this.log(`✓ DELETE success: ${response.statusCode}`);
247+
this.log(`Response: ${response.content.toString().substring(0, 100)}...`);
248+
} catch (error) {
249+
this.log(`✗ DELETE failed: ${error}`);
250+
}
251+
},
252+
253+
async testHead() {
254+
try {
255+
this.log('Testing HEAD request...');
256+
const response = await Https.request({
257+
url: 'https://httpbin.org/get',
258+
method: 'HEAD'
259+
});
260+
this.log(`✓ HEAD success: ${response.statusCode}`);
261+
this.log(`Headers: ${JSON.stringify(response.headers)}`);
262+
this.log(`Content-Length: ${response.contentLength}`);
263+
} catch (error) {
264+
this.log(`✗ HEAD failed: ${error}`);
265+
}
266+
},
267+
268+
async testOptions() {
269+
try {
270+
this.log('Testing OPTIONS request...');
271+
const response = await Https.request({
272+
url: 'https://httpbin.org/get',
273+
method: 'OPTIONS'
274+
});
275+
this.log(`✓ OPTIONS success: ${response.statusCode}`);
276+
this.log(`Headers: ${JSON.stringify(response.headers)}`);
277+
} catch (error) {
278+
this.log(`✗ OPTIONS failed: ${error}`);
279+
}
280+
},
281+
282+
async testToString() {
283+
try {
284+
this.log('Testing toString() method...');
285+
const response = await Https.request({
286+
url: 'https://httpbin.org/get',
287+
method: 'GET'
288+
});
289+
const str = response.content.toString();
290+
this.log(`✓ toString() success`);
291+
this.log(`String length: ${str.length}`);
292+
this.log(`First 100 chars: ${str.substring(0, 100)}...`);
293+
} catch (error) {
294+
this.log(`✗ toString() failed: ${error}`);
295+
}
296+
},
297+
298+
async testToJSON() {
299+
try {
300+
this.log('Testing toJSON() method...');
301+
const response = await Https.request({
302+
url: 'https://httpbin.org/json',
303+
method: 'GET'
304+
});
305+
const json = response.content.toJSON();
306+
this.log(`✓ toJSON() success`);
307+
this.log(`JSON type: ${typeof json}`);
308+
this.log(`JSON data: ${JSON.stringify(json).substring(0, 200)}...`);
309+
} catch (error) {
310+
this.log(`✗ toJSON() failed: ${error}`);
311+
}
312+
},
313+
314+
async testToArrayBuffer() {
315+
try {
316+
this.log('Testing toArrayBuffer() method...');
317+
const response = await Https.request({
318+
url: 'https://httpbin.org/bytes/1024',
319+
method: 'GET'
320+
});
321+
const buffer = response.content.toArrayBuffer();
322+
this.log(`✓ toArrayBuffer() success`);
323+
this.log(`Buffer length: ${buffer.byteLength} bytes`);
324+
} catch (error) {
325+
this.log(`✗ toArrayBuffer() failed: ${error}`);
326+
}
327+
}
328+
}
329+
});
330+
</script>
331+
332+
<style scoped lang="scss">
333+
.btn {
334+
background-color: #42b883;
335+
color: white;
336+
margin: 5 0;
337+
}
338+
.result-box {
339+
background-color: #f5f5f5;
340+
color: #333;
341+
padding: 10;
342+
margin-top: 10;
343+
border-radius: 5;
344+
min-height: 200;
345+
font-family: monospace;
346+
font-size: 12;
347+
}
348+
.h3 {
349+
font-size: 20;
350+
font-weight: bold;
351+
}
352+
.h4 {
353+
font-size: 16;
354+
font-weight: bold;
355+
color: #42b883;
356+
}
357+
.text-muted {
358+
color: #666;
359+
font-size: 12;
360+
}
361+
.bg-light {
362+
background-color: #f8f9fa;
363+
}
364+
</style>

0 commit comments

Comments
 (0)