Testing API dengan Thunder Client Dengan Next Js
Mungkin diantara kalian ada yang belum kenal dengan salah satu extension yang cukup populer dari Visual Studio Code. Extension itu adalah Thunder Client. Extension ini hampir mirip dengan sebuah aplikasi yang terkenal juga yaitu Postman. Tetapi kita juga bisa menggunakan thunder client yang merupakan extension dari Visual Studio Code. Dan kita akan mengetahui apa itu thunder client dan salah satu contoh penggunaannya.
Apa Itu Thunder Client ?
Menurut dari sumber resmi, thunder client adalah ekstensi klien REST API ringan untuk Visual Studio Code. Ekstensi ini diluncurkan pada tanggal 31 Maret 2021 dan telah diunduh oleh lebih dari 3 juta developer di seluruh dunia. Dengan thunder client kita bisa melakukan testing api untuk mengecek hasilnya.
Instalasi Thunder Client
- Buka menu extension di Visual Studio Code
- Cari Thunder Client
Jika belum install maka akan ada tombol Install
Contoh Penggunaan
Disini kita akan menggunakan next js sebagai contohnya. Jadi kalian bisa bikin folder baru atau pakai folder sebelumnya.
A. Login Berhasil
- Buat file api dengan nama
login.js
dan isi filenya dengan syntax berikut:
export default function handler(req, res) {
if (req.method === 'POST') {
const { username, password } = req.body;
// Contoh validasi sederhana
if (username === 'user' && password === 'asdfgh') {
res.status(200).json({ message: 'Login berhasil' });
} else {
res.status(401).json({ message: 'Login gagal' });
}
} else {
res.status(405).json({ message: 'Method not allowed' });
}
}
2. Buka thunder client yang bergambar petir di sidebar kiri.
3. Pilih New Request
kemudian ganti settingan berikut:
Menjadi :
4. Pilih menu Body
dan isi di bagian JSON Content
dengan syntax berikut:
{
"username":"user",
"password":"asdfgh"
}
5. Jalankan hasilnya dengan terminal dengan:
npm run dev
Kemudian klik send di thunder client halaman sebelum.
Jika berhasil, maka akan kelaur hasilnya seperti ini:
6. Pindah dari Response
ke Results
dan Body
ke Tests
7. Isi yang bagian Tests dengan inputan ini:
Ketika tekan tombol send akan muncul hasilnya seperti ini:
B. Login Gagal
- Buat request baru atau duplikat dengan klik kiri dan pilih
duplicate
2. Di body kita ubah passwordnya menjadi salah. Dan hasilnya akan seperti ini jika di Response
3. Pindah ke Tests
ubah settingan testnya menjadi ini:
Dan hasilnya akan seperti ini:
Begitulah contoh penggunaan thunder client dan informasinya. Semoga ilmu ini bisa bermanfaat bagi kita semua. Selamat Menikmati.
INFO PENULIS:
Ahmad Danesh S
“ Trying to be better ”