Software Testing, Development, Quality Assurance - Nafhan Raissa Syandana

 Software Methodology: TDD - Nafhan Raissa Syandana

Test Driven Development merupakan pendekatan software development di mana automated testing dibuat sebelum kode fungsionalnya. Sehingga dilakukan dengan menulis unit tests terlebih dahulu sebelum menulis actual code lalu kemudian mengimplementasikan kode untuk memenuhi test requirements. Pendekatan tersebut untuk memastikan bahwa kode yang dibuat memiliki test coverage yang baik dan sesuai dengan spesifikasi yang telah ditetapkan.

Pada fitur edit profil yang telah saya buat, dapat kita lihat penerapan TDD melalui unit tests yang telah dibuat pada

ProfileEditAPIView(TestCase) pada tests.py. Berikut merupakan detail-nya terkait bagaimana TDD diterapkan:

Di awal saya melakukan setUp terlebih dahulu untuk membuat profile untuk user sekaligus generate token untuk autentikasi.

• Test Pertama: ‘test_edit_profile_success’

Tes ini bertujuan untuk memastikan bahwa profil pengguna dapat diedit dengan sukses. Tahap pertama pada TDD adalah menulis tes yang gagal. Kita membuat skenario ideal di mana pengguna dapat mengubah profil dengan benar, sehingga jika kode belum ada, tes ini pasti akan gagal. 

• Test Kedua: ‘test_edit_profile_unauthenticated’

Tes ini menguji kasus di mana pengguna tidak terautentikasi. Pada prinsip TDD kita menulis tes terlebih dahulu untuk skenario yang diharapkan terjadi. Tes ini menunjukkan bahwa jika pengguna tidak terautentikasi maka permintaan edit profil akan menghasilkan respon status 401 Unauthorized. Kita perlu memastikan bahwa API memeriksa kredensial pengguna sebelum mengizinkan akses ke fitur edit profil.

• Test Ketiga dan Keempat: ‘test_edit_profile_invalid_nik’ dan ‘test_edit_profile_invalid_no_wa’

Tes ini menguji validasi input untuk kolom 'nik' dan 'no_wa'. Saya membuat tes untuk skenario dimana input yang tidak valid diberikan dan memastikan bahwa aplikasi berperilaku sesuai dengan yang diharapkan.

Test ini menunjukkan bahwa jika input tidak valid diberikan (misalnya, 'nik' atau 'no_wa' bukan angka) maka API harus mengembalikan respons status 400 Bad Request dengan pesan yang sesuai. Sehingga pada kode kita memeriksa apakah nilai 'nik' atau 'no_wa' merupakan angka dalam format yang benar sebelum menyimpan perubahan profil pengguna. 

Dalam konteks software testing, High Quality mengacu pada seberapa baik pengujian telah dirancang dan diimplementasikan. Salah satu aspek High Quality adalah memastikan bahwa testing mencakup berbagai kondisi dan skenario yang mungkin terjadi termasuk Equivalency class.

• Equivalency Class:

Equivalency class testing merupakan testing techniques dimana input atau test conditions dibagi menjadi kelas yang setara. Pada fitur edit profil dapat kita identifikasi beberapa equivalent class untuk testing, seperti:

Kelas setara untuk data yang valid misalnya, data yang valid untuk 'nik' atau 'no_wa' adalah angka. Kelas setara untuk data yang tidak valid misalnya, data yang tidak valid untuk 'nik' atau 'no_wa' adalah bukan angka.

Dalam kode saya memastikan bahwa testing dilakukan untuk setiap equivalent class ini untuk memastikan aplikasi berperilaku dengan benar terhadap berbagai jenis input.

Dalam kedua tes di atas kita menguji equivalent case untuk data yang valid (angka) dan data yang tidak valid (non-angka) untuk atribut 'nik' dan 'no_wa'. Hal ini memastikan bahwa aplikasi berperilaku sesuai harapan terhadap berbagai jenis input yang mungkin diterima.

Tambahan melengkapi submisi sebelumnya:

Berikut adalah salah satu contoh bagaimana langkah-langkah pada TDD diterapkan khususnya pada bagian front end untuk fitur edit profil:

> Imports dan Setup:

‘@testing-library/react’ digunakan untuk merender komponen dan memanipulasi DOM.

‘EditProfilePage’ sendiri merupakan komponen yang sedang diuji.

‘@testing-library/jest-dom’ digunakan untuk matcher khusus jest yang memudahkan assert pada DOM.

> Mocking ‘useRouter’ dari ‘next/router’:

‘useRouter’ dari ‘next/router’ di-mock untuk menghindari penggunaan router asli pada saat melakukan testing.

> Mocking AuthProvider:

AuthProvider di-mock untuk menyediakan access token dari localStorage jika tersedia.

> Mocking fetch:

Pada tahap ini fetch di-mock pada sebelum setiap test untuk mengembalikan successful response.

> Test untuk Rendering Halaman Edit Profil:

Pada Test ini pada intinya akan merender halaman EditProfilePage serta juga memeriksa apakah elemen-elemen page tampil dengan benar dengan mengandung teks yang di-mock.

> Test untuk Mengupdate Informasi Profil:

Pada intinya Test ini akan menguji apakah perubahan yang terdapat pada formulir profil dikirimkan dengan benar, yang terdiri dari proses mengubah nilai input, menekan tombol "Kirim", juga termasuk memeriksa apakah fetch telah dipanggil dengan parameter yang sesuai.

Secara keseluruhan test-test yang ada akan memastikan bahwa page edit profil dapat dirender dengan benar serta informasi profil dapat di-update/di-edit dengan benar melalui panggilan fetch menuju API.

Perbandingan antara test front end dan back end khususnya pada contoh ini adalah untuk fitur edit profil:

> Dari Segi Pendekatan Variasi:

~ Front End:

Rendering dan Validasi Elemen DOM:

- Memastikan halaman dan elemen-elemen tertentu dirender dengan benar menggunakan 'render' dan 'screen' dari '@testing-library/react'.

- Melakukan validasi terhadap teks yang muncul di halaman dengan elemen-elemen yang seharusnya ada (misalnya, nama, email, alamat, dan lain-lain).

Simulasi User Interaction:

- Menggunakan 'fireEvent' untuk mensimulasikan perubahan pada input dan klik pada tombol.

- Memastikan perubahan yang dimasukkan pengguna diterima dan dikirim melalui panggilan 'fetch'.

Mocking Dependensi:

- 'useRouter' dari 'next/router' di-mock untuk mengontrol navigasi.

- 'AuthProvider' di-mock untuk mengatur autentikasi pengguna.

- Panggilan 'fetch' di-mock untuk mengontrol respons API.

~ Back End:

Setup Data dan Autentikasi:

- Menggunakan 'setUp' untuk menyiapkan data awal seperti pengguna dan profilnya.

- Menggunakan 'JWTService' untuk membuat authentication token.

API Call Simulation:

- Menggunakan 'APIClient' dari 'rest_framework.test' untuk melakukan panggilan API.

- Menggunakan 'patch' untuk me-mock metode service yang berinteraksi dengan business logic.

Response Validation dan Code Status:

- Memeriksa response status code(misalnya '200 OK', '400 Bad Request', '401 Unauthorized', dll).

- Memeriksa isi dari respons untuk memastikan data yang dikembalikan sesuai dengan yang diharapkan.

> Dari Segi Desain Test Case:

~ Front End:

Test untuk Rendering Halaman:

- Menguji apakah page ‘EditProfilePage’ di-render dengan benar dan menampilkan semua elemen yang diharapkan.

- Fokus pada rendering komponen UI serta tampilan elemen.

Test untuk Mengupdate Profil:

- Menguji apakah perubahan pada input pengguna dikirim dengan benar melalui panggilan ‘fetch’.

- Berfokus pada interaksi pengguna dengan interface dan pengiriman data menuju API.

~ Back End:

Test untuk Service Layer:

- Menguji metode ‘get_profile_user’ yang bertujuan untuk memastikan data profil dikembalikan dengan benar serta menangani kesalahan dengan baik.

- Menguji berbagai skenario kesalahan (misalnya, tipe data yang salah, UUID yang tidak valid, pengguna tidak ditemukan, profil tidak ditemukan, dll).

Test untuk API Endpoint:

- Menguji endpoint edit profil dengan berbagai skenario seperti sukses, tidak terautentikasi, serta juga input yang tidak valid.

- Memeriksa apakah respons dan code status sesuai dengan yang diharapkan untuk setiap skenario.

Kesimpulan Perbandingan:

> Pendekatan Variasi:

Kesimpulan utamanya adalah, pada kedua jenis test (front end dan back end) menggunakan variasi yang berbeda untuk mencapai tujuan pengujian mereka masing-masing. Pada Front end berfokus pada simulasi user interaction dan rendering UI, sementara pada back end berfokus kepada validasi business logic dan integrasi API.

> Desain Test Case:

Kesimpulan utamanya adalah pada Front end test case dirancang untuk memastikan bahwa UI berfungsi dengan baik dan dapat mengirim data yang benar menuju back end.

Kemudian pada Back end test case dirancang untuk memastikan bahwa business logic dan endpoint API bekerja dengan benar, lalu dapat menangani berbagai kondisi kesalahan, serta juga dapat memvalidasi data yang diterima dari front end.

Pada intinya adalah pendekatan ini saling melengkapi untuk memastikan bahwa keseluruhan aplikasi berfungsi dengan baik dari ujung ke ujung, mulai dari user interaction pada front end hingga pemrosesan data di back end.

Kemudian berikut adalah informasi tambahan terkait coverage pada beberapa Merge Request terakhir: