Testing API dengan Thunder Client Dengan Next Js

Thunder Client

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

1. Buka menu extension di Visual Studio Code
2. 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

1. 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 Contentdengan 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

1. 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 ”

PPQ IT Al-Mahir