Introducing of Test Driven Development

Postingan blog kali ini akan menjelaskan mengenai pentingnya testing serta bagaimana pengertian serta implementasi dari test driven development dan contoh implementasi sederhana terhadap proyek dekowarehouse.

Image courtesy of http://www.agilenutshell.com/test_driven_development

Sekilas mengenai testing

Sebelum beralih kepada apa itu Test Driven Development, alangkah baiknya jika kita mengetahui dulu sejarah pengembangan software secara konvensional yang kebanyakan dipakai oleh orang banyak. Secara umum, flow nya adalah pertama kita akan diberikan requirements dan specification oleh client mengenai software yang akan kita buat, setelah itu kita mengerjakan software, lalu kita testing apakah semua itu berjalan dengan baik atau tidak. Setelah semua berjalan dengan baik barulah kita berikan kepada client untuk diproduction atau digunakan.

Semua hal diatas nampak biasa saja dan wajar, namun akan muncul permasalahan ketika requirements berubah-ubah seiring berjalannya waktu. sehingga tentu akan menyulitkan dan membuat tim development merasa malas dan takut, karena apabila mereka merubah-ubah code nya maka ditakutkan akan terjadi break code yang akan merusak code. Selain itu akan memakan waktu tentunya untuk melakukan test secara berulang-ulang sehingga muncullah istlah Automation Test.

Code First, Test Later

Dalam melakukan coding kebanyakan orang adalah dengan menulis code terlebih dahulu baru setelah itu dibuatkan automation test nya, yang mana tentunya terdapat beberapa kelemahan dalam hal ini yakni:

1. Terkadang kode yang kita buat sulit untuk dites sehingga tentu kita harus menyesuaikan terhadap automation test yang akan kita buat.
2. Kode yang kita buat terkadang tidak ter-cover semuanya, sehingga dapat dikatakan code coveragenya adalah tidak mencapai angka 100%.

Atas dasar itulah muncul metode baru dimana proses yang kita buat dilakukan secara terbalik, yakni Test First, Code Later. Metode itu kita kenal dengan istilah TDD atau Test Driven Development.

Apa itu Test Driven Development?

Sesuai dengan namanya, test driven development adalah metode yang menekankan pada penggunaan test terlebih dahulu (hal apapun berdasarkan test). Secara sederhana implementasi dari TTD tersebut adalah sebagai berikut:

1. Sebelum mulai coding, kita diharuskan untuk menuliskan test nya terlebih dahulu. Untuk itu perlu untuk memastikan bahwa kita menuliskan semua kemungkinan test yang akan terjadi
2. Run test tersebut, dan pastikan test tersebut fail, karena memang belum ada code implementasi apapun agar test tersebut pass.
3. Setelah itu buat code minimum yang sesuai dengan test yang telah kita buat, dan setelah itu run test tersebut. Pastikan bahwa test tersebut pass. Ketika belum pass maka kita perbaiki lagi code tersebut.
4. Jika kita merasa code kita berantakan, maka kita bisa melakukan sedikit refactor agar code tersebut clean. Selama proses refactor pastikan juga bahwa code tersebut pass terhadap test yang dibuat.
5. Lakukan hal 1–4 secara berulang untuk fungsi-fungsi yang lainnya.

Implementasi sederhana TDD dalam Dekowarehouse Project.

Setelah kita paham akan konsep TDD diatas, disini saya akan mempraktekkan sedikit contoh dari implementasi TDD dalam proyek Dekowarehouse yang telah saya buat. Didalam dekowarehouse implementasi yang dilakukan menggunakan ReactJs, untuk itu bagi kalian yang ingin mengikuti bisa melihat dalam https://gitlab.com/PPL2018csui/Kelas-A/Kel-4/tree/menampilkan-list-home. Karena dalam pengerjaannya ReactJs mengikuti aturan component, maka mudah bagi kita untuk membuat test untuk setiap komponen yang ada. Disini saya akan memperlihatkan bagaimana untuk membuat sebuah test untuk folder Button sederhana.

1. Buka folder src/component
2. Setelah itu kita akan melihat 3 buah folder component yang sudah ada yang sudah lulus test, disini kita buat folder baru bernama button.

3. Buat File test yang akan nantinya kita jalankan bernama button.test.js di dalam folder button. Tulis code test berikut ini:

import React from ‘react’;
import ReactDOM from ‘react-dom’;
import Button from ‘./button’;

it(‘renders without crashing’, () => {
const div = document.createElement(‘div’);
ReactDOM.render(<Button />, div);
ReactDOM.unmountComponentAtNode(div);
});

Test tersebut berguna untuk mengecek apakah file button itu ada dan dapat dirender oleh kita atau tidak.

4. Setelah itu jalankan test nya, dan pastikan test tersebut fail, karena kita memang belum membuat file button tersebut.

5. Selanjutnya kita akan membuat file button.js di folder button. Tulis code berikut ini:

import React, { Component } from ‘react’;

class Button extends Component {
render() {
return (
<div className=”Button”>
<button type=”button”>Click Me!</button>
</div>
);
}
}

export default Button;

6. Dan selanjutnya kita test lagi dan pastikan test yang kita buat pass.

Yeay, test kita passed, dan tahap optional yang bisa kita lakukan adalah ketika kita merasa code kita kurang clean, maka kita bisa melakukan refactor terhadap kode tersebut.

Kita bisa menerapkan tahapan tersebut untuk component-component lainnya. Yang harus kita ingat adalah tahapan dalam TTD yakni:

Fail — Pass — Refactor — Repeat

Sekian penjelasan mengenai Test, TDD, dan implementasinya mengenai proyek yang kami buat. Terima kasih sudah datang dan membaca blog ini, apabila kalian suka maka bisa memberikan like kalian untuk postingan ini, atau memberikan clap.

Salam,

Andri Nur Rochman

Ref: https://medium.com/koding-kala-weekend/tdd-the-series-part-1-apa-itu-test-driven-development-tdd-ff92c95c945f