Belajar Instrumentation Testing Aplikasi Android

Tujuan

Pada codelab kali ini Anda akan menguji antar muka dari aplikasi menggunakan Espresso. Tujuannya agar ui dan ux aplikasi dapat berjalan dengan benar. Hasil dari codelab kali ini akan menjadi seperti ini:

Skenario Pengujian

Terdapat 4 skenario pengujian Instrumentation Testing:

1. Pengujian keliling balok.
   • Aplikasi terbuka dan menampilkan beberapa view.
   • Memberi tindakan input pada edt_lenght, edt_width dan edt_height.
   • Memastikan Button btn_save telah ditampilkan.
   • Memberi tindakan klik pada btn_save.
   • Memastikan Button btn_calculate_circuference telah ditampilkan.
   • Memberi tindakan klik pada btn_calculate_circuference.
   • Memastikan TextView tv_result telah ditampilkan.
   • Memastikan hasil yang tampil sesuai ekspektasi.
2. Pengujian volume balok.
   • Aplikasi terbuka dan menampilkan beberapa view.
   • Memberi tindakan input pada edt_lenght, edt_width dan edt_height.
   • Memastikan Button btn_save telah ditampilkan.
   • Memberi tindakan klik pada btn_save.
   • Memastikan Button btn_calculate_volume telah ditampilkan.
   • Memberi tindakan klik pada btn_calculate_volume.
   • Memastikan TextView tv_result telah ditampilkan.
   • Memastikan hasil yang ditampilkan sesuai dengan ekspektasi.
3. Pengujian luas permukaan balok.
   • Memberi tindakan input pada edt_lenght, edt_width dan edt_height.
   • Memastikan Button btn_save telah ditampilkan.
   • Memberi tindakan klik pada btn_save.
   • Memastikan Button btn_calculate_surface_area telah ditampilkan.
   • Memberi tindakan klik pada btn_calculate_surface_area.
   • Memastikan TextView tv_result telah ditampilkan.
   • Memastikan hasil yang tampil sesuai ekspektasi.
4. Pengujian input panjang, lebar dan tinggi balok.
   • Aplikasi terbuka dan menampilkan beberapa view.
   • Memberi tindakan empty input pada edt_lenght.
   • Memastikan Button btn_save telah ditampilkan.
   • Memberi tindakan klik pada btn_save.
   • Memastikan eror yang tampil sesuai ekspektasi.
   • Memberi tindakan input pada edt_lenght.
   • Memberi tindakan empty input pada edt_width.
   • Memastikan Button btn_save telah ditampilkan.
   • Memberi tindakan klik pada btn_save.
   • Memastikan eror yang tampil sesuai ekspektasi.
   • Memberi tindakan input pada edt_width.
   • Memberi tindakan empty input pada edt_height.
   • Memastikan Button btn_save telah ditampilkan.
   • Memberi tindakan klik pada btn_save.
   • Memastikan eror yang tampil sesuai ekspektasi.
   • Memberi tindakan input pada edt_height.
   • Memastikan Button btn_save telah ditampilkan.
   • Memberi tindakan klik pada btn_save.

Codelab UI Testing

1. Bukalah proyek sebelumnya tentang Unit Testing : Latihan Menggunakan Mockito.
   
2. Tentu pertama kali Anda perlu menambahkan library dari Espresso di build.gradle:
   

   androidTestImplementation 'androidx.test:rules:1.2.0'
   androidTestImplementation 'androidx.test:runner:1.2.0'
   androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'

3. Untuk membuat proses pengujian berjalan lancar, silakan matikan semua fungsi animasi yang terdapat pada halaman Developer Options pada Setting → Developer Options seperti berikut:
   
   Lakukan untuk semua konfigurasi animasi di atas. Alasannya adalah untuk memudahkan Espresso dalam menjalankan kode dengan beragam resource yang digunakannya.
   
4. Sekarang saatnya Anda membuat kelas pengujian otomatis dengan cara buat kelas baru bernama MainActivityEspressoTest pada package utama yang berlabel (androidTest). Caranya, masuklah ke MainActivity kemudian tekan Alt+Enter maka akan muncul tampilan seperti ini:
   Pilihlah Create Test, sehingga akan muncul tampilan seperti ini:
   
   Biarkan default seperti tampilan di atas, kemudian pilih OK. Maka akan ada dua pilihan androidTest atau test, untuk Instrumental Test pilihlah androidTest.
   
   Selanjutnya akan terbentuk sebuah kelas seperti ini:
   Anda bisa menghapus kelas ExampleInstrumentedTest dan ExampleUnitTest karena kelas tersebut tidak dibutuhkan dalam proyek Anda.
5. Pertama Anda buka terlebih dahulu berkas MainActivityEspressoTest dan tambahkanlah kode-kode berikut:
   

   Kotlin

   @RunWith(AndroidJUnit4ClassRunner::class) class MainActivityTest { private val dummyVolume = "504.0" private val dummyCircumference = "100.0" private val dummySurfaceArea = "396.0" private val dummyLength = "12.0" private val dummyWidth = "7.0" private val dummyHeight = "6.0" private val emptyInput = "" private val fieldEmpty = "Field ini tidak boleh kosong" @get:Rule var mActivityRule = ActivityTestRule(MainActivity::class.java) }

   Java

   @RunWith(AndroidJUnit4ClassRunner.class) public class MainActivityTest { private final String dummyVolume = "504.0"; private final String dummyCircumference = "100.0"; private final String dummySurfaceArea = "396.0"; private final String dummyLength = "12.0"; private final String dummyWidth = "7.0"; private final String dummyHeight = "6.0"; private final String emptyInput = ""; private final String fieldEmpty = "Field ini tidak boleh kosong"; @Rule public ActivityTestRule<MainActivity> mActivityRule = new ActivityTestRule<>(MainActivity.class); }

6. Setelah itu, Anda akan melakukan pengujian keliling balok seperti yang ada di skenario di atas.
   

   Kotlin

   @RunWith(AndroidJUnit4ClassRunner::class) class MainActivityTest { ... @Test fun assertGetCircumference() { onView(withId(R.id.edt_length)).perform(typeText(dummyLength), closeSoftKeyboard()) onView(withId(R.id.edt_width)).perform(typeText(dummyWidth), closeSoftKeyboard()) onView(withId(R.id.edt_height)).perform(typeText(dummyHeight), closeSoftKeyboard()) onView(withId(R.id.btn_save)).check(matches(isDisplayed())) onView(withId(R.id.btn_save)).perform(click()) onView(withId(R.id.btn_calculate_circumference)).check(matches(isDisplayed())) onView(withId(R.id.btn_calculate_circumference)).perform(click()) onView(withId(R.id.tv_result)).check(matches(isDisplayed())) onView(withId(R.id.tv_result)).check(matches(withText(dummyCircumference))) } }

   Java

   @RunWith(AndroidJUnit4ClassRunner.class) public class MainActivityTest { ... @Test public void assertGetCircumference() { onView(withId(R.id.edt_length)).perform(typeText(dummyLength), closeSoftKeyboard()); onView(withId(R.id.edt_width)).perform(typeText(dummyWidth), closeSoftKeyboard()); onView(withId(R.id.edt_height)).perform(typeText(dummyHeight), closeSoftKeyboard()); onView(withId(R.id.btn_save)).check(matches(isDisplayed())); onView(withId(R.id.btn_save)).perform(click()); onView(withId(R.id.btn_calculate_circumference)).check(matches(isDisplayed())); onView(withId(R.id.btn_calculate_circumference)).perform(click()); onView(withId(R.id.tv_result)).check(matches(isDisplayed())); onView(withId(R.id.tv_result)).check(matches(withText(dummyCircumference))); } }

   Beberapa metode tidak akan ditawarkan auto-complete-nya oleh Android Studio. Untuk mengatasi ini, Anda dapat menekan Alt + Enter pada beberapa metode-metode tadi dan melakukan static import seperti contoh di bawah ini:
   
7. Setelah selesai, sekarang saatnya menjalankan kode pengujian. Jika sebelumnya Anda menjalankan aplikasi terlebih dahulu, maka sekarang pendekatannya dibalik. Anda harus menjalankan kode testnya terlebih dahulu. Caranya, klik kanan pada MainActivityTest dan pilih run ‘MainActivity…’ seperti pada gambar di bawah ini:
   
   Lalu pilih peranti yang terhubung dan akan menjadi tempat pengujian aplikasi.
   
   Perhatikan peranti Anda selama pengujian berlangsung.
   Beragam nilai inputan akan dimasukkan secara otomatis. Keren kan?
8. Setelah berjalan, perhatikan monitor panel di bagian bawah Android Studio yang aktif. Panel tersebut akan berisi informasi progress pengujian dan jika semua pengujian yang dilakukan berhasil maka hasil sukses pada layar seperti di bawah ini akan tampil:
   
   
9. Selanjutnya tambahkan kode untuk melakukan pengujian menghitung volume, luas permukaan dan input kosong di dalam aplikasi.
   

   Kotlin

   @RunWith(AndroidJUnit4ClassRunner::class) class MainActivityTest { ... @Test fun assertGetSurfaceArea() { onView(withId(R.id.edt_length)).perform(typeText(dummyLength), closeSoftKeyboard()) onView(withId(R.id.edt_width)).perform(typeText(dummyWidth), closeSoftKeyboard()) onView(withId(R.id.edt_height)).perform(typeText(dummyHeight), closeSoftKeyboard()) onView(withId(R.id.btn_save)).check(matches(isDisplayed())) onView(withId(R.id.btn_save)).perform(click()) onView(withId(R.id.btn_calculate_surface_area)).check(matches(isDisplayed())) onView(withId(R.id.btn_calculate_surface_area)).perform(click()) onView(withId(R.id.tv_result)).check(matches(isDisplayed())) onView(withId(R.id.tv_result)).check(matches(withText(dummySurfaceArea))) } @Test fun assertGetVolume() { onView(withId(R.id.edt_length)).perform(typeText(dummyLength), closeSoftKeyboard()) onView(withId(R.id.edt_width)).perform(typeText(dummyWidth), closeSoftKeyboard()) onView(withId(R.id.edt_height)).perform(typeText(dummyHeight), closeSoftKeyboard()) onView(withId(R.id.btn_save)).check(matches(isDisplayed())) onView(withId(R.id.btn_save)).perform(click()) onView(withId(R.id.btn_calculate_volume)).check(matches(isDisplayed())) onView(withId(R.id.btn_calculate_volume)).perform(click()) onView(withId(R.id.tv_result)).check(matches(isDisplayed())) onView(withId(R.id.tv_result)).check(matches(withText(dummyVolume))) } //Pengecekan untuk empty input @Test fun assertEmptyInput() { // pengecekan input untuk length onView(withId(R.id.edt_length)).perform(typeText(emptyInput), closeSoftKeyboard()) onView(withId(R.id.btn_save)).check(matches(isDisplayed())) onView(withId(R.id.btn_save)).perform(click()) onView(withId(R.id.edt_length)).check(matches(hasErrorText(fieldEmpty))) onView(withId(R.id.edt_length)).perform(typeText(dummyLength), closeSoftKeyboard()) // pengecekan input untuk width onView(withId(R.id.edt_width)).perform(typeText(emptyInput), closeSoftKeyboard()) onView(withId(R.id.btn_save)).check(matches(isDisplayed())) onView(withId(R.id.btn_save)).perform(click()) onView(withId(R.id.edt_width)).check(matches(hasErrorText(fieldEmpty))) onView(withId(R.id.edt_width)).perform(typeText(dummyWidth), closeSoftKeyboard()) // pengecekan input untuk height onView(withId(R.id.edt_height)).perform(typeText(emptyInput), closeSoftKeyboard()) onView(withId(R.id.btn_save)).check(matches(isDisplayed())) onView(withId(R.id.btn_save)).perform(click()) onView(withId(R.id.edt_height)).check(matches(hasErrorText(fieldEmpty))) onView(withId(R.id.edt_height)).perform(typeText(dummyHeight), closeSoftKeyboard()) onView(withId(R.id.btn_save)).check(matches(isDisplayed())) onView(withId(R.id.btn_save)).perform(click()) } }

   Java

   @RunWith(AndroidJUnit4ClassRunner.class) public class MainActivityTest { ... @Test public void assertGetSurfaceArea() { onView(withId(R.id.edt_length)).perform(typeText(dummyLength), closeSoftKeyboard()); onView(withId(R.id.edt_width)).perform(typeText(dummyWidth), closeSoftKeyboard()); onView(withId(R.id.edt_height)).perform(typeText(dummyHeight), closeSoftKeyboard()); onView(withId(R.id.btn_save)).check(matches(isDisplayed())); onView(withId(R.id.btn_save)).perform(click()); onView(withId(R.id.btn_calculate_surface_area)).check(matches(isDisplayed())); onView(withId(R.id.btn_calculate_surface_area)).perform(click()); onView(withId(R.id.tv_result)).check(matches(isDisplayed())); onView(withId(R.id.tv_result)).check(matches(withText(dummySurfaceArea))); } @Test public void assertGetVolume() { onView(withId(R.id.edt_length)).perform(typeText(dummyLength), closeSoftKeyboard()); onView(withId(R.id.edt_width)).perform(typeText(dummyWidth), closeSoftKeyboard()); onView(withId(R.id.edt_height)).perform(typeText(dummyHeight), closeSoftKeyboard()); onView(withId(R.id.btn_save)).check(matches(isDisplayed())); onView(withId(R.id.btn_save)).perform(click()); onView(withId(R.id.btn_calculate_volume)).check(matches(isDisplayed())); onView(withId(R.id.btn_calculate_volume)).perform(click()); onView(withId(R.id.tv_result)).check(matches(isDisplayed())); onView(withId(R.id.tv_result)).check(matches(withText(dummyVolume))); } //Pengecekan untuk empty input @Test public void assertEmptyInput() { // pengecekan input untuk length onView(withId(R.id.edt_length)).perform(typeText(emptyInput), closeSoftKeyboard()); onView(withId(R.id.btn_save)).check(matches(isDisplayed())); onView(withId(R.id.btn_save)).perform(click()); onView(withId(R.id.edt_length)).check(matches(hasErrorText(fieldEmpty))); onView(withId(R.id.edt_length)).perform(typeText(dummyLength), closeSoftKeyboard()); // pengecekan input untuk width onView(withId(R.id.edt_width)).perform(typeText(emptyInput), closeSoftKeyboard()); onView(withId(R.id.btn_save)).check(matches(isDisplayed())); onView(withId(R.id.btn_save)).perform(click()); onView(withId(R.id.edt_width)).check(matches(hasErrorText(fieldEmpty))); onView(withId(R.id.edt_width)).perform(typeText(dummyWidth), closeSoftKeyboard()); // pengecekan input untuk height onView(withId(R.id.edt_height)).perform(typeText(emptyInput), closeSoftKeyboard()); onView(withId(R.id.btn_save)).check(matches(isDisplayed())); onView(withId(R.id.btn_save)).perform(click()); onView(withId(R.id.edt_height)).check(matches(hasErrorText(fieldEmpty))); onView(withId(R.id.edt_height)).perform(typeText(dummyHeight), closeSoftKeyboard()); onView(withId(R.id.btn_save)).check(matches(isDisplayed())); onView(withId(R.id.btn_save)).perform(click()); } }

10. Jalankan kembali instrumental testing Anda, maka hasilnya akan jadi seperti ini:
    4 dari 4 skenario pengujian berhasil dilakukan. Luar biasa!
    
11. Sekarang Anda sudah berhasil melakukan proses pengujian secara otomatis. Mari kita ulik lebih lanjut. Mari hilangkan baris ini pada kode di MainActivity.
    

    Kotlin

    edtWidth = findViewById(R.id.edt_width)

    Java

    edtWidth = findViewById(R.id.edt_width);

    Coba jalankan kode test seperti cara sebelumnya. Seharusnya proses pengujian akan gagal. Anda dapat mengetahui pesan dan penyebab kegagalan pada monitor panel seperti pada gambar di bawah ini:
    

    android.support.test.espresso.PerformException: Error performing 'single click - At Coordinates: 539, 947 and precision: 16, 16' on view 'Animations or transitions are enabled on the target device.
    For more info check: http://goo.gl/qVu1yV
    
    with id: com.dicoding.picodiploma.myunittest:id/btn_save'.
    at android.support.test.espresso.PerformException$Builder.build(PerformException.java:82)
    ...
    at android.support.test.espresso.ViewInteraction.perform(ViewInteraction.java:114)
    at com.dicoding.picodiploma.myunittest.MainActivityTest.assertSurfaceArea(MainActivityTest.java:58)
    at java.lang.reflect.Method.invoke(Native Method)
    ...
    at android.app.Instrumentation$InstrumentationThread.run(Instrumentation.java:2145)
    Caused by: java.lang.NullPointerException: Attempt to invoke virtual method 'android.text.Editable android.widget.EditText.getText()' on a null object reference
    at com.dicoding.picodiploma.myunittest.MainActivity.onClick(MainActivity.java:46)
    at android.view.View.performClick(View.java:6597)

    Bagaimana? Masih pusing? Daripada pusing, mari kita bedah kode.
    
    

Bedah Kode

Espresso

Sebelumnya, kita perlu ingat kembali tiga komponen utama dari Espresso:

1. ViewMatchers (onView(ViewMatcher)), untuk menemukan elemen atau komponen antar muka yang diuji.
2. ViewActions (perform(ViewAction)), untuk memberikan event untuk melakukan sebuah aksi pada komponen antar muka yang diuji.
3. ViewAssertions(check(ViewAssertion)), untuk mengecek sebuah kondisi atau state dari komponen yang diuji.

Kita akan membedah kode yang baru saja kita buat berdasarkan skenario yang kita buat.

Kotlin

@get:Rule var mActivityRule = ActivityTestRule(MainActivity::class.java)

Java

@Rule public ActivityTestRule<MainActivity> mActivityRule = new ActivityTestRule<>(MainActivity.class);

Kode di atas digunakan untuk memerintahkan Activity mana yang akan dijalankan.

Selanjutnya perhatikan kode berikut:

Kotlin

onView(withId(R.id.edt_length)).perform(typeText(dummyLength), closeSoftKeyboard())

Java

onView(withId(R.id.edt_length)).perform(typeText(dummyLength), closeSoftKeyboard());

Perhatikan kode di atas, jika kode di atas dibaca maka jadi seperti ini: Sebuah view dengan id edt_length diberi tindakan input dengan sebuah teks dummyLength dan menutup secara berlahan keyboard Android. Jadi terdapat banyak aksi di dalam komponen Espresso.

Selanjutnya kode berikut:

Kotlin

onView(withId(R.id.btn_save)).check(matches(isDisplayed()))

Java

onView(withId(R.id.btn_save)).check(matches(isDisplayed()));

Jika kode di atas dibaca akan menjadi seperti ini: Memastikan sebuah view dengan id btn_save dalam keadaan tampil.

Lalu perhatikan kode berikut:

Kotlin

onView(withId(R.id.btn_save)).perform(click())

Java

onView(withId(R.id.btn_save)).perform(click());

Jika kode di atas dibaca maka jadi seperti ini: Sebuah view dengan id btn_save diberi aksi klik.
Dan yang paling penting adalah ini:

Kotlin

onView(withId(R.id.tv_result)).check(matches(withText(dummyCircumference)))

Java

onView(withId(R.id.tv_result)).check(matches(withText(dummyCircumference)));

Jika kode di atas dibaca akan menjadi seperti ini: Memastikan sebuah view dengan id tv_result mempunyai teks yang sama dengan dummyCircumference.

Perhatikan juga kode berikut yang berfungsi untuk mengecek eror pada EditText:

Kotlin

onView(withId(R.id.edt_length)).check(matches(hasErrorText(fieldEmpty)))

Java

onView(withId(R.id.edt_length)).check(matches(hasErrorText(fieldEmpty)));

Jika kode di atas dibaca akan menjadi seperti ini: Memastikan sebuah view dengan id edt_length mempunyai pesan eror yang sama dengan fieldEmpty.

Bagaimana? Mudah kan proses pengujian antarmuka dengan menggunakan Espresso? Tak hanya mudah tapi juga efisien jika Anda berhadapan dengan kasus yang lebih besar. Kebiasaan menuliskan kode pengujian akan melatih Anda lebih kritis terhadap beragam kondisi yang akan terjadi pada tiap fungsi di dalam aplikasi.

Apalagi bila Anda menulis kode test sebelum kode aplikasi. Proses pengembangan aplikasi Anda dijamin jauh lebih baik dan mampu menghasilkan produk yang lebih berkualitas! Proses pengujian otomatis di atas masih sangatlah sederhana. Kami tantang Anda untuk mengeksplorasi lebih jauh kemampuan Espresso lainnya!

Seperti biasa, agar Anda lebih paham tentang materi ini, kami sarankan Anda membaca tiap tautan di bawah ini:

• Espresso Testing
• Espresso Test Recorder
• Running Espresso Test
• UI Testing with Espresso

Untuk source code materi ini silakan Anda unduh di:

• Source Code MyInstrumentTest