Reactive UI : ViewModel + LiveData + Data Binding + Unit Test

This image has an empty alt attribute; its file name is ReactiveUi.png
Write caption…

NOTED : Download starter project : https://github.com/syntaxxxxx/ReactiveUI/tree/starter

Hi Coder !

Dalam artikel ini kita akan membahas tentang beberapa hal berikut ini :

  1. ViewModel
  2. LiveData
  3. Data Binding
  4. Unit Test

Dalam artikel ini kita akan lebih fokus membahas tentang Data Binding dan Unit Test karena ViewModel & LiveData sudah kita bahas dalam artikel sebelumnya. Kita akan mengkombinasikan ViewModel, LiveData, Data Binding untuk menghasilkan UI yang reactive artinya setiap ada data yang diperbarui dalam model akan secara realtime disampaikan oleh ViewModel dan LiveData ke UI. Jadi akan sangat menguntungkan secara User Experience.

Library Data Binding

Data Binding adalah sebuah library yang berguna untuk mengizinkan layout berkomunikasi secara langsung pada data model kita untuk menghilangkan boilerplate code pada program aplikasi kita didalam android.

Biasanya kita menggunakan approach code dibawah ini supaya widget dalam layout kita bisa dikenalin didalam logika aplikasi dan menampilkan data dari sebuah variable dalam ViewModel seperti ini :

findViewById<TextView>(R.id.sample_text).apply {
    text = viewModel.userName
}

Dan approach code berikut ini menunjukkan seperti apa Data Binding bekerja dalam code kita :

Approach code diatas akan mengurangi code dalam logikasi aplikasi kita untuk menghubungkan sebuah widget. Seperti approach code sebelum menggunakan Data Binding. Keuntungan menggunakan Data Binding :

  1. Menghapus boilerplate code
  2. Menghindari memory leaks
  3. Menghindari null pointer exceptions

Implementasi Library Data Binding

Untuk menggunakan Data Binding dalam aplikasi, kita harus mengkonfigurasi Data Binding dalam project aplikasi ke build.gradle level module:app seperti approach berikut ini :

Selanjutnya kita ke layout kita yang mau kita binding dan implementasi Data Binding didalam komponen layout kita seperti approach pada gambar dibawah ini :

Ketika terlihat indikasi pada gambar diatas lalu tekan Enter dan layout kita akan menjadi seperti contoh dibawah ini :

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools">
<data>
<variable name="viewmodel"
type="com.syntax.tutorialmvvmdatabindingunittest.MainViewModel"/>
</data>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="16dp"
tools:context=".MainActivity">
</LinearLayout>
</layout>

Dalam approach code diatas parent root element dari layout kita akan di binding dengan tag layout pada approach code diatas. Silahkan cek link code berikut ini untuk full version approach code nya menggunakan Data Binding : https://github.com/syntaxxxxx/ReactiveUI/tree/final

Start writing or type / to choose a block

Build Local Unit Test

Set up testing in your project

Untuk melakukan Local Unit Testing kita harus menyimpan package Local Unit Test pada project kita. Tetapi package tersebut sudah terbuat ketika membuat sebuah project baru di Android Studio.

tambahkan library berikut ini untuk Local Unit Testing kita :

dependencies {
// Unit Test
testImplementation "androidx.arch.core:core-testing:2.1.0-rc01"
testImplementation 'org.mockito:mockito-inline:2.13.0'
}

Depedencies yang kita gunakan menggunakan core testing karena kita menggunakan arch components dan mockito digunakan untuk membuat object palsu yang akan kita laukan Unit Test. Tujuan dari mock object sendiri atau membuat object palsu yang akan kita lakukan Unit Test supaya tidak mempengaruhi object yang lain selain yang kita lakukan pada Unit Test.

Sekarang bagaimana mengimplementasikan nya? Sekarang kita bisa ke class ViewModel kita dan klik shotcurt command + shift + T lalu akan tampil indikasi seperti ini :

This image has an empty alt attribute; its file name is Screen-Shot-2019-08-05-at-15.49.43.png

Setelah kita pilih seperti pada gambar diatas akan tampil seperti ini :

Pilih OK dan akan terbuat 1 buah class MainViewModelTest seperti contoh code berikut ini :

class MainViewModelTest {
}

Gambar dibawah ini menujukkan lokasi file Local Unit Test anda :

Dan lengkapi approach code pada class tersebut seperti ini :

class MainViewModelTest {

private lateinit var viewModel: MainViewModel

@get:Rule
var rule: TestRule = InstantTaskExecutorRule()

@Mock
lateinit var mockValue: ValueGenerator

@Before
fun setUp() {
MockitoAnnotations.initMocks(this)
viewModel = MainViewModel(mockValue)
}

@Test
fun testIsNotEmptyField() {
viewModel.valueA = 1
viewModel.valueB = 2
viewModel.valueC = 3
viewModel.name.set("")
val isNotEmpty = viewModel.isNotEmptyField()
Assert.assertEquals(true, isNotEmpty)
}
}

Silahkan jalankan proses Local Unit Test kita dan akan terlihat seperti ini :

Setelah dijalankan akan tampil error seperti gambar diatas.

@Test
fun testIsNotEmptyField() {
viewModel.valueA = 1
viewModel.valueB = 2
viewModel.valueC = 3
viewModel.name.set("")
val isNotEmpty = viewModel.isNotEmptyField()
Assert.assertEquals(true, isNotEmpty)
}

Karena dalam function test diatas kita mengharapkan pada code berikut ini :

    Assert.assertEquals(true, isNotEmpty)

Bernilai true akan tetapi pada baris ini :

    viewModel.name.set("")

Data yang kita harapkan terisi semua ternyata ada field yang masih kosong dan solusinya adalah dengan mengisi field tersebut dengan value string dan setelah dijalankan Local Unit Test kita akan menampilan indikasi sukses pada gambar dibawah ini :

This image has an empty alt attribute; its file name is Screen-Shot-2019-08-05-at-16.02.36-1024x299.png

Untuk full project nya silahkan cek repository berikut ini : https://github.com/syntaxxxxx/ReactiveUI/tree/final

Jika temen-temen masih belum paham dan ada pertanyaan silahkan tinggalkan komentar dibawah ini ya

Happy Coding !

1
Hello, welcome to IMA Studio 🙌
Chat with us ! We are ready to help you :-)
Powered by