Dalam mengembangkan sebuah aplikasi baik berupa web maupun aplikasi native desktop atau mobile penggunaan automated test dimaksudkan untuk menguji setiap fungsi yang ada pada aplikasi yang anda buat. Pada saat - saat tertentu pengujian dengan cara tradisional dengan menggunakan aplikasi tersebut secara langsung adalah hal bagus, namun jika terdapat fitur maupun modul sudah mulai banyak pengujian tersebut tidak lagi relevan.
Sebagai contoh ketika anda membuat sebuah login form pada web yang anda kembangkan, anda perlu melakukan pengujian secara langsung pada browser dan mengisi form yang telah disediakan. Namun jika anda menggunakan automated test, hal tersebut tidak akan perlu dilakukan hanya anda perlu mendefinisikan perintah - perintah yang disediakan oleh framework atau library yang anda gunakan.
Jika anda menggunakan adonis js dalam mengembangkan aplikasi web, framework tersebut sudah menyediakan automated test yang bisa anda gunakan.
Persiapan
Sebelum anda memulai mendalami tutorial ini ada beberapa yang perlu anda ketahui seperti automated test ini tidak terpasang secara default, baik jika anda menggunakan boilerplate fullstack maupun api-only. Selain itu pengujian juga terbagi menjadi dua jenis yaitu unit test dan functionnal test
Pemasangan Packages
AdonisJS menggunakan provider vow untuk melakan pengujian, anda dapat menggunakan adonis cli dengan menggunakan command berikut :
adonis install @adonisjs/vow
Sedikit catatan pemasangan packages tersebut membutuhkan phyton untuk menjalankan pengujian, jika anda menggunakan sistem operasi linux biasanya ini tidak diperlukan karena phyton secara default terpasang pada sistem operasi anda. Namun jika anda menggunakan sistem operasi Windows, munculnya pesan kesalahan sangat dimungkinkan karena tidak adanya phyton yang terinstall pada sistem operasi anda. Saya sarankan untuk menginstall phyton versi 3.7 keatas untuk melanjutkan tutorial ini, anda dapat mengunjungi tautan berikut untuk memilih versi phyton dan mengunduhnya.
Selain pemasangan packages tersebut, jika anda menggunakan pengujian browser anda juga perlu memasang memasang provider vow browser. Anda dapat menggunakan adonis cli dengan menggunakan command berikut.
adonis install @adonisjs/vow-browser
Jenis Pengujian
Dalam melakukan pengujian otomatis dengan adonisjs, terdapat dua jenis pengujian yang memiliki karakteristik yang berbeda.
Unit Test
Unit test merupakan pengujian yang dilakukan untuk menguji sebagian kode - kode yang ingin di implementasikan, adapun contohnya adalah sebagai berikut :
const { test } = use('Test/Suite')('Example unit test')
const UserValidator = use('App/Services/UserValidator')
test('validate user details', async ({ assert }) => {
const validation = await UserValidator.validate({
email: 'wrong email'
})
assert.isTrue(validation.fails())
assert.deepEqual(validation.messages(), [
{
field: 'email',
message: 'Invalid user email address'
}
])
}
Functional Test
Functional test merupakan pengujian yang dilakukan sama seperti kita menguji aplikasi seperti saat anda menggunakan pengujian tradisional seperti contoh sebelumnya, adapun contoh penggunaannya adalah sebagai berikut :
const { test, trait } = use('Test/Suite')('Example functional test')
trait('Test/Browser')
test('validate user details', async ({ browser }) => {
const page = await browser.visit('/')
await page
.type('email', 'wrong email')
.submitForm('form')
.waitForNavigation()
page.session.assertError('email', 'Invalid user email address')
})
Catatan
Pengujian otomatis mungkin terlihat sangat sulit karena setiap langkah harus di definisikan dan di target secara akurat, sehingga mempelajari automated test akan sangat terasa setelah sistem yang anda buat sudah kompleks.
Automated Browser Test
Automated browser test merupakan pengujian yang dilakukan dengan melakukan simulasi penggunaan browser, simulasi tersebut ditujukkan untuk mengirimkan data pada form yang ditarget atau menampilkan sebuah komponen yang ditarget. Pengujian session untuk keperluan notifikasi dan menampilkan pesan error juga dapat dilakukan, sehingga anda dapat mengetahui apakah data yang dikirim telah menampilkan pesan error yang telah ditentukan atau tidak.
Source yang diuji
Dalam pengujian ini saya akan melampirkan logic controller pada file AuthController.js untuk menguji apakah method login dapat berfungsi dengan baik dan menguji pesan kesalahan yang diharapkan setelah kita mengisi username yang salah atau password yang tidak sesuai.
....
async login({ request, auth, response, session }) {
const { username, password } = request.all();
try {
await auth.attempt(username, password);
return response.route("auth.account");
} catch (error) {
switch (error.code) {
case "E_USER_NOT_FOUND":
session.withErrors([
{
field: "username",
message: "Username tidak ditemukan !",
},
]);
break;
case "E_PASSWORD_MISMATCH":
session.withErrors([
{
field: "password",
message: "Password tidak benar !",
},
]);
break;
default:
session.withErrors([
{
field: "error",
message: "Terjadi kesalahan pada sistem !",
},
]);
break;
}
return response.route("auth.loginForm");
}
}
....
Karena ini merupakan browser test maka akan dibutuhkan view untuk menampilkan simulasi halaman yang akan dieksekusi, pada hal ini saya akan melampirkan view pada file login.edge akan tetapi pada pengujian kesalahan masukkan kita hanya menguji dari sisi session sehingga anda dapat melewati bagian ini.
...
@if(flashMessage('notification'))
<div class="notification is-info">
{{ flashMessage('notification') }}
</div>
@endif
<form action="{{ route('auth.login') }}" method="post" name="loginForm">
{{ csrfField() }}
<div class="field">
<label for="username" class="label">Username :</label>
<div class="control">
<input type="text" name="username" placeholder="Masukkan Username" class="input" />
</div>
@if(hasErrorFor('username'))
<div class="error-user">
<p class="has-text-danger">{{ getErrorFor('username') }}</p>
</div>
@endif
</div>
<div class="field">
<label for="password" class="label">Password :</label>
<div class="control">
<input type="password" name="password" placeholder="Masukkan Password" class="input" />
</div>
@if(hasErrorFor('password'))
<div class="error-password">
<p class="has-text-danger">{{ getErrorFor('password') }}</p>
</div>
@endif
</div>
<button type="submit" class="button">Login</button>
</form>
...
Membuat Pengujian
Untuk menjalankan pengujian otomatis dengan menggunakan simulasi browser, anda perlu membuat file pengujian untuk menjalankan perintah - perintah apa saja yang akan di uji pada pengujian otomatis. Untuk membuat pengujian anda dapat menggunakan adonis cli dengan perintah adonis make:test namapengujian dan pilih functional test untuk menguji fungsionalitas aplikasi menggunakan simulasi browser. Sebelum melanjutkan pastikan anda telah memasang vow browser provider untuk melakukannya, setelah sudah maka buka pengujian tersebut dan secara default isi dari file tersebut adalah seperti ini
'use strict'
const { test } = use('Test/Suite')('Login')
test('make sure 2 + 2 is 4', async ({ assert }) => {
assert.equal(2 + 2, 4)
})
Karena pengujian dilakukan dengan melakukan simulasi browser maka akan dibutuhkan trait test/browser untuk melakukan pengujian, setelah trait test/browser telah dipanggil maka kita perlu memberikan parameter browser pada test()
'use strict'
const { test, trait } = use('Test/Suite')('Login')
trait("Test/Browser");
test('Login form is correctly functionnal', async ({ browser }) => {
assert.equal(2 + 2, 4)
})
Dalam pengujian simulasi browser kita perlu mendefinisikan pengujian dari tahap paling awal seperti :
- Mengunjungi url untuk menampilkan halaman berisikan form login
- Mengisi form tersebut dengan melakukan target ke input dengan nama yang sudah kita berikan pada kode HTML.
- Menentukan status code 200 untuk menunjukkan bahwa form login telah berfungsi dengan baik.
Pada tahap tersebut maka kita perlu menggunakan parameter browser untuk mengakses url yang telah kita tentukan, lalu menjalankan method type() untuk mengisi form dan method assertStatus() untuk mengharapkan status code yang akan diterima setelah proses pengisan form selesai.
....
test("Login form show error when username is not exists", async ({
browser,
}) => {
const userError = await browser.visit("/auth/login");
await userError
.type('[name="username"]', "coba")
.type('[name="password"]', "coba");
await userError.submitForm('form[name="loginForm"]');
await userError.assertHasIn("div.error-user", "Username tidak ditemukan !");
});
});
Pada file pengujian tersebut anda dapat menjalankan pengujian dengan skenario yang berbeda - beda, sebagai contohnya saya ingin melakukan pengujian ketika login berhasil, login gagal karena username tidak ada dan login gagal karena password salah.
"use strict";
const { test, trait } = use("Test/Suite")("Login Form");
trait("Test/Browser");
test("Login form show error when username is not exists", async ({
browser,
}) => {
const userError = await browser.visit("/auth/login");
await userError
.type('[name="username"]', "coba")
.type('[name="password"]', "coba");
await userError.submitForm('form[name="loginForm"]');
await userError.assertHasIn("div.error-user", "Username tidak ditemukan !");
});
test("Login form show error when password is invalid", async ({ browser }) => {
const passError = await browser.visit("/auth/login");
await passError
.type('[name="username"]', "admin")
.type('[name="password"]', "coba");
await passError.submitForm('form[name="loginForm"]');
await passError.assertHasIn("div.error-password", "Password tidak benar !");
});
test("Login form is correctly functionnal", async ({ browser }) => {
const loginPass = await browser.visit("/auth/login");
await loginPass
.type('[name="username"]', "admin")
.type('[name="password"]', "radiohead4403");
await loginPass
.submitForm('form[name="loginForm"]')
.waitForNavigation()
.assertPath("/auth");
});
Anda akan mendapatkan pesan PASSED pada saat menjalankan adonis test jika pengujian yang dilakukan sudah berhasil dan sesuai dengan skenario yang telah anda buat.
.png)
Tujuan Dibuatnya Automated Test
Masuk ke dalam sebuah kesimpulan sebenarnya tujuan dibuatnya automated test adalah mempercepat pengujian sistem berdasarkan skenario - skenario pengujian yang telah dibuat, dalam berbagai kasus pengujian ini penting dalam hal pengembangan aplikasi yang dibuat oleh sebuah kelompok ataupun tim. Secara langsung anda tidak perlu melakukan pengujian secara tradisional dengan membuka halaman satu - satu, karena dengan automated test skenario pengujian yang biasa anda gunakan akan dilakukan secara langsung.
Contoh Penggunaan
Sebagai bahan referensi dari tutorial ini anda dapat mengunjungi halaman dokumentasi adonis js atau melihat contoh implementasi pada akun repositori qa_adonis pada commit Automation Testing : Functional Test.
Referensi : AdonisJS - Testing
Cover Images By : Mobile vector created by stories - www.freepik.com